Dalam membuat form biasanya disertai dengan pilihan seperti checkbox ataupun radio button, dan ada juga yang menggunakan pilihan dropdown seperti saat kita mengisi form tanggal lahir.
Kali ini kita akan bahas tag attribut <select>, dan tag elemen <option> pada tag select, fungsi dari tag atribut select adalah untuk membuat texbox pilihan berbentuk dropdown, sedangkan tag elemen option berfungsi untuk memberi nilai pilihan pada textbox. Ok langsung contoh saja:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Belajar membuat form di HTML</title> </head> <body> <h1>BELAJAR MEMBUAT FORM</h1> <form action="aksi.php" method="POST" target="_blank"> <p>Contoh penggunaan tag select</p> <p>Status :<select> <option value="Perjaka">Perjaka</option> <option value="Perawan">Perawan</option> <option value="Menikah">Menikah</option> <option value="Duda">Duda</option> <option value="Janda">Janda</option> </select>
</form> </body> </html>Maka hasilnya akan seperti ini
Ok, kita lanjutkan. Sekarang kita akan membuat checkbox menggunakan input type elemen "checkbox", dan membuat radio button dengan menggunakan input type elemen "radio". checkbox dan radio button sama-sama digunakan untuk memberi pilihan pada user, perbedaannya adalah user dapat memilih beberapa checkbox, sedangkan radio button hanya bisa dipilih satu.
Langsung saja kita coba contohnya:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Belajar membuat form di HTML</title> </head> <body> <h1>BELAJAR MEMBUAT FORM</h1> <form action="aksi.php" method="POST" target="_blank"> <p>Nama : <input type="text" name="nama"></p> <p>Alamat : <input type="text" name="alamat"></p> <p>Jenis Kelamin : <label><input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki</label> <label><input type="radio" name="jenkel" value="Perempuan">Perempuan</label> </p> <p>Hobi :<br> <label><input type="checkbox" value="memancing">Memancing</label> <label><input type="checkbox" value="shoping">Shoping</label> <label><input type="checkbox" value="tidur">tidur</label><br> <label><input type="checkbox" value="Travelling">Travelling</label> <label><input type="checkbox" value="bersepeda">Bersepeda</label> </p> <p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal"></p> </form> </body> </html>Hasilnya seperti ini:
Agar tampilan form lebih menarik kita bisa menggunakan tag atribut <fieldset>, dan tag atribut <legend>.
<fieldset> berfungsi untuk membuat kotak yang mengurung form.
<legend> berfungsi untuk membuat judul yang berada di fieldset.
Kita langsung ke contoh saja lah biar teman - teman ga bingung ya.
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Belajar membuat form di HTML</title> </head> <body> <h1>BELAJAR MEMBUAT FORM</h1> <form action="aksi.php" method="POST" target="_blank"> <fieldset> <legend>Data Pengguna</legend> <p>Nama : <input type="text" name="nama"></p> <p>Alamat : <input type="text" name="alamat"></p> <p>Jenis Kelamin : <label><input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki</label> <label><input type="radio" name="jenkel" value="Perempuan">Perempuan</label> </p> <p>Hobi :<br> <label><input type="checkbox" value="memancing">Memancing</label> <label><input type="checkbox" value="shoping">Shoping</label> <label><input type="checkbox" value="tidur">tidur</label><br> <label><input type="checkbox" value="Travelling">Travelling</label> <label><input type="checkbox" value="bersepeda">Bersepeda</label> </p> </fieldset> <p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal"></p> </form> </body> </html>Hasilnya seperti ini:
Saya juga membuat input type email yang biasa digunakan untuk membuat textbox email.
Sebagai contohnya sekalian me-review tutorial pembuatan form adalah sebagai berikut:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar membuat form di HTML</title>
<style>
input[type ="text"], input[type="password"], input[type="email"]{
margin-left: 10px;
margin-bottom: 1px;
}
input[type="checkbox"], input[type="radio"]{
margin-left: 10px;
margin-bottom: 2px;
}
select{
margin-left: 10px;
}
fieldset{
margin-top: 1px;
margin-bottom: 1px;
margin-right: 250px;
border-color: red;
}
legend{
font-family: tahoma;
}
h1{
margin-bottom: 0px;
text-align: center;
}
input[type="submit"], input[type="reset"]{
margin-left: 10px;
margin-right: 10px;
}
// ini adalah akhir dari css
</style>
</head>
<body>
<h1>BELAJAR MEMBUAT FORM</h1>
<form action="aksi.php" method="POST" target="_blank">
<fieldset>
<legend>Form Data Pengguna</legend>
<p>Nama : <input type="text" name="nama"></p>
<p>Alamat : <input type="text" name="alamat"></p>
<p>Jenis Kelamin :
<label><input type="radio" name="jenkel" value="Laki-Laki">Laki-Laki</label>
<label><input type="radio" name="jenkel" value="Perempuan">Perempuan</label>
</p>
<p>Status :<select>
<option value="Perjaka">Perjaka</option>
<option value="Perawan">Perawan</option>
<option value="Menikah">Menikah</option>
<option value="Duda">Duda</option>
<option value="Janda">Janda</option>
</select>
<p>Hobi :<br>
<label><input type="checkbox" value="memancing">Memancing</label>
<label><input type="checkbox" value="shoping">Shoping</label>
<label><input type="checkbox" value="tidur">tidur</label><br>
<label><input type="checkbox" value="Travelling">Travelling</label>
<label><input type="checkbox" value="bersepeda">Bersepeda</label>
</p>
<p>Telepon: <input type="text" name="tlp"></p>
<p>Foto :<input type="file"></p>
</fieldset>
<fieldset>
<legend>Akun Pengguna</legend>
<p>Username : <input type="text" name="nama_user" maxlength="100"></p>
<p>Email : <input type="email" name="email"></p>
<p>Password : <input type="password" name="pass" maxlength="12"></p>
</fieldset>
<p><input type="submit" value="Kirim Data"> <input type="reset" value="Batal"></p>
</form>
</body>
</html>
Hasilnya seperti ini:
Untuk mempercantik tampilan saya menggunakan sedikit CSS internal yang ditulis diantara tag<head></head>
Sekian tutorial kali ini, kita akan lanjutkan lagi lain waktu.
tetap semangat yaaaaa
No comments:
Post a Comment