Belajar HTML Part 29 Fungsi dari tag label, legend, dan fieldset di Form HTML
Jika dalam tutorial sebelumnya kita telah membahas mengenai bagaimana cara untuk membuat tombol di form HTML, seperti tombol submit, reset dan tombol yang digunakan untuk mengaktifkan javascript yang bertipekan button, nah dalam tutorial ini kita akan membahas 3 tag lagi yang masih berhubungan dengan form yaitu tag label, tag legend, dan tag fieldset.
Bagaimana penasaran ? baik langsung penjelasannya adalah sebagai berikut.
Video Tutorial Belajar HTML – Mengenal Tag Label, Fieldset, dan Legend di Form HTML
Tag label ini bersifat opsional, dengan menggunakan tag label anda dapat memberikan keterangan pada form yang anda buat, tidak hanya itu dengan menggunakan tag label akan mempermudah pengisian inputan form yang anda buat, sebagai contoh kita akan buat pembanding.
kita akan membuat 4 input checkbox, 2 input menggunakan label dan 2 input lainnya tidak menggunakan label :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <p><input type="checkbox" name="pilihan1">Pilihan 1</p> <p><input type="checkbox" name="pilihan2">Pilihan 2</p> <hr/> <hr/> <p><label><input type="checkbox" name="pilihan3">Pilihan 3</label></p> <p><label><input type="checkbox" name="pilihan4">Pilihan 4</label></p> </form> </body> </html |
semisal saya beri nama tag_label_form.html, lalu saya buka di browser maka hasilnya :
hasilnya akan ada 4 checkbox dengan detail :
- pilihan 1 dan pilihan 2 anda harus mengklik pada bagian checkbox untuk menchecklist pilihan.
- pilihan 3 dan pilihan 4 dapat di klik di bagian keterangan saja, maka checkbox akan terchecklist karena kita memberikan tag <label></label> pada bagian inputannya.
Tag Fieldset dan tag legend
Kedua tag ini digunakan untuk menata tampilan dari form yang anda buat, detail dari kedua fungsi ini adalah :
- tag fieldset digunakan untuk mengelompokkan objek pada form, atau lebih tepatnya memberikan bingkai pada bagian objek form yang diinginkan.
- tag legend digunakan untuk memberikan keterangan (judul) pada bagian form.
agar anda lebih memahami fungsi dari kedua tag ini silahkan anda perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="get"> <fieldset> <legend>Informasi Akun</legend> <p>Username <input type="text" name="username"/></p> <p>Password <input type="password" name="password"/></p> </fieldset> <fieldset> <legend>Informasi Data Diri</legend> <p> Jenis Kelamin <select name="jenkel"> <option value="laki-laki">Laki - Laki</option> <option value="perempuan">Perempuan</option> </select> </p> <p> Agama <select name="jenkel"> <option value="islam">Islam</option> <option value="kristen">Kristen</option> <option value="katholik">Katholik</option> <option value="hindu">Hindu</option> <option value="budha">Budha</option> </select> </p> </fieldset> <p><button type="submit">Submit</button><button type="reset">Reset</button></p> </form> </body> </html> |
semisal saya simpan dengan nama tag_fieldset_label.html, lalu saya buka di browser :
terlihat terdapat bingkai pada masing masing objek yang telah menggunakan tag <fieldset> bagaimana mudah kan.
Kesimpulan
Setelah kita membahas mengenai banyak sekali fitur fitur form yang ada pada HTML, nah pada bagian ini kita akan membuat skrip yang menggunakan seluruh fitur form yang telah kita bahas sebelumnya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <title>Form HTML</title> </head> <body> <form action="proses.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Informasi Akun</legend> <p>Username <input type="text" name="username"/> <input type='hidden' name='token' value='12345678' /> </p> <p>Password <input type="password" name="password"/></p> </fieldset> <fieldset> <legend>Informasi Data Diri</legend> <p>Nama<input type="text" name="nama"/></p> <p>Jenis Kelamin</p> <p><input type='radio' name='jenis_kelamin' value='pria' />Pria</p> <p><input type='radio' name='jenis_kelamin' value='perempuan' />Perempuan</p> <p>Agama <select name='agama'> <option value='islam'>Islam</option> <option value='kristen'>Kristen</option> <option value='katholik'>Katholik</option> <option value='hindu'>Hindu</option> <option value='kristen'>Budha</option> </select> </p> <p>Alamat</p> <p><textarea name="alamat" rows="3" cols="30"></textarea></p> <p>Upload <input type='file' name='foto' accept='image/*' /></p> </fieldset> <fieldset> <legend>Kemampuan</legend> <p>Kemampuan Bahasa Pemrogaman ?</p> <p><input type='checkbox' name='bahasa1' value='php' />PHP</p> <p><input type='checkbox' name='bahasa2' value='asp' />ASP</p> <p><input type='checkbox' name='bahasa3' value='jsp' />JSP</p> </fieldset> <p> <button type="submit">Tombol Submit</button> <button type="reset">Tombol Reset</button> </p> </form> </body> </html> |
semisal kita berikan nama belajar_form.html lalu saya buatkan di browser :
nah bagaimana mudah kan, baik itu dulu yang bisa warung belajar bagi pada tutorial kali ini, kita telah belajar mengenai bagaimana cara membuat form di HTML, sampai jumpa di tutorial tutorial selanjutnya
[stextbox id=”info”] Anda serius ingin menguasai HTML ?
Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
