Form merupakan tempat penginputan data sebelum diproses oleh sistem.Salah satunya adalah form login, form comment, form data user, dan lain sebagainya. Tag yang digunakan untuk membuat form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<opstion> dan<select>.
Latihan: Membuat Form Login
Pada form login, terdapat beberapa field dan elemen:
- Field untuk input username atau email.
- Field untuk input password.
- Checkbok untuk remember me.
- Tombol untuk login.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML#11</title>
</head>
<body>
<form action="login.php" method="POST">
<fieldset>
<legend>Login</legend>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="username..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="password..." />
</p>
<p>
<label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
</p>
<p>
<input type="submit" name="submit" value="Login" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya :
Pada kode di atas, kita membuat empat buah filed:
- input username dengan tipe text.
- input password dengan tipe password.
- input remember dengan tipe checkbox.
- input submit dengan tipe submit.
Lalu ketiga filed ini dibungkus ke dalam tag <fieldset>. Nanti tag <fieldset> ini akan membuat sebuah garis. Di dalam tag <fieldset>, kita membuat tag <legend> untuk memberikan teks pada fieldset.
Perhatikan juga atirbut yang digunakan pada setiap field.
- Atribut placeholder untuk menampilkan teks sementara (placeholder).
- Atribut value untuk membreikan nilai default pada field.
Setiap field kita bungkus dalam tag <p> agar terlihat rapi dan juga kita berikan sebuah label dengan tag <label>.
Latihan: Membuat Form Register
Berikutnya kita akan coba membuat form registrasi.
Form ini berisi field untuk:
- Input nama lengkap
- Input username
- Input email
- Input password
- Input jenis kelamin
- Input Agama
- Input Biografi
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HTML#11</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Your email..." />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Passowrd..." />
</p>
<p>
<label>Jenis kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Agama:</label>
<select name="agama">
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
<option value="konghucu">Konghucu</option>
</select>
</p>
<p>
<label>Biografi:</label>
<textarea name="biografi"></textarea>
</p>
<p>
<input type="submit" name="submit" value="Daftar" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya :
Apa saja field baru yang ada di form tersebut?
- Field radio
- Field <select><option>
- Field <textearea>
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan radio. Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan checkbox. Lalu untuk <select></option>, sifatnya sama seperti radio. Dan untuk menginputkan teks yang panjang, kita gunakan tag <textarea>.
0 komentar:
Posting Komentar