Penggunaan dan Penulisan Tag Label Dalam Form HTML
January 22, 2018
Add Comment
Pada artikel kali ini kita akan membahas Penggunaan dan Penulisan Tag Label Dalam Pembuatan Form HTML.
Untuk memahami penggunaan tag
Pada contoh kode form HTML diatas, Saya membuat 3 buah checkbox. Jika Anda ingin memilih salah satu dari 3 checkbox tersebut, maka Anda harus mencentang kotak pada checkbox tersebut. Namun kotak checkbox tersebut terlalu kecil dan membuat agak sulit untuk di centang.
Salah satu cara untuk mengatasinya yaitu membuat pengguna atau pengunjung bisa meng-klik tulisan atau keterangan dari checkbox tersebut. Untuk melakukan hal seperti ini kita bisa menggunakan tag
1. Memasukkan seluruh tag
Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :
Dengan memasukkan seluruh bagian dari dari tag
2. Menggunakan atribut
Dengan menggunakan atribut
Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :
Perhatikan bahwa tag
3. Memasukkan seluruh tag
Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :
Dalam contoh kode HTML diatas Saya menggabungkan 2 cara yaitu memasukkan seluruh tag
Berikut ini contoh kode form HTML yang sebelumnya kita buat tadi dengan penambahan tag
Silahkan jalankan kode HTML tersebut di browser, lalu klik tulisan atau keterangan dari checkbox, maka kotak checkbox akan langsung tercentang secara otomatis.
Jika Anda ingin menggunakan tag
Pada artikel selanjutnya, kita akan membahas Penggunaan dan Penulisan Tag Fieldset dan Tag Legend untuk mengelompokkan objek form HTML.
Penggunaan Tag Label Dalam Pembuatan Form HTML
Taglabel digunakan sebagai pelengkap keterangan untuk beberapa objek form seperti radio dan checkbox. Selain itu tag label juga digunakan untuk memudahkan pengguna atau pengunjung untuk memasukkan data.Untuk memahami penggunaan tag
label dalam pembuatan form, silahkan ketikan kode dibawah ini :<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h2>Apakah hobi Anda ?</h2>
<form action="hobi.php" method="post">
<input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>
<input type="checkbox" name="menulis" id="menulis"/>Menulis<br/>
<input type="checkbox" name="membaca" id="membaca"/>Membaca
</form>
</body>
</html>
Pada contoh kode form HTML diatas, Saya membuat 3 buah checkbox. Jika Anda ingin memilih salah satu dari 3 checkbox tersebut, maka Anda harus mencentang kotak pada checkbox tersebut. Namun kotak checkbox tersebut terlalu kecil dan membuat agak sulit untuk di centang.
Salah satu cara untuk mengatasinya yaitu membuat pengguna atau pengunjung bisa meng-klik tulisan atau keterangan dari checkbox tersebut. Untuk melakukan hal seperti ini kita bisa menggunakan tag
labelPenulisan Tag Label Dalam Pembuatan Form HTML
Terdapat 3 cara untuk menuliskan taglabel dalam pembuatan form, yaitu :
1. Memasukkan seluruh tag input ke dalam tag label
Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :<label>
<input type="checkbox" name="berenang" id="berenang"/>Berenang
</label>Dengan memasukkan seluruh bagian dari dari tag
input termasuk atribut type="checkbox" ke dalam tag label, maka kita bisa meng-klik tulisan atau keterangan dari checkbox dan secara otomatis kotak checkbox akan tercentang.
2. Menggunakan atribut for didalam tag label
Dengan menggunakan atribut for didalam tag label, maka kita tidak harus memasukkan tag input ke dalam tag label.Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :
<input type="checkbox" name="berenang" id="berenang"/>
<label for="berenang">Berenang</label>Perhatikan bahwa tag
label diletakkan setelah tag input ini supaya kotak untuk mencentang tidak berada di belakang tulisan atau keterangan. Di dalam tag label terdapat atribut for yang nilainya harus sama dengan atribut id yang berada di dalam tag input. Dalam contoh kode HTML diatas, Saya mengisi nilai dari atribut for="berenang" dan saya juga harus mengisi nilai dari atribut id="berenang".
3. Memasukkan seluruh tag input ke dalam tag label dan menggunakan atribut for di dalam tag label
Silahkan ketikan kode HTML dibawah ini, lalu jalankan dibrowser :<label for="berenang">
<input type="checkbox" name="berenang" id="berenang"/>Berenang
</label>Dalam contoh kode HTML diatas Saya menggabungkan 2 cara yaitu memasukkan seluruh tag
input ke dalam tag label dan menggunakan atribut for di dalam tag label.Berikut ini contoh kode form HTML yang sebelumnya kita buat tadi dengan penambahan tag
label beserta atributnya :<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h2>Apakah hobi Anda ?</h2>
<form action="hobi.php" method="post">
<label>
<input type="checkbox" name="berenang" id="berenang"/>Berenang<br/>
</label>
<input type="checkbox" name="menulis" id="menulis"/>
<label for="menulis">Menulis</label><br/>
<label for="membaca">
<input type="checkbox" name="membaca" id="membaca"/>Membaca
</label>
</form>
</body>
</html>
Silahkan jalankan kode HTML tersebut di browser, lalu klik tulisan atau keterangan dari checkbox, maka kotak checkbox akan langsung tercentang secara otomatis.
Jika Anda ingin menggunakan tag
label pada beberapa objek form HTML, maka disarankan menggunakan cara kedua yaitu menggunakan atribut for di dalam tag label. Menurut Saya dengan cara ini pembuatan form akan terlihat rapih dan mudah untuk dipahami.Pada artikel selanjutnya, kita akan membahas Penggunaan dan Penulisan Tag Fieldset dan Tag Legend untuk mengelompokkan objek form HTML.
0 Response to "Penggunaan dan Penulisan Tag Label Dalam Form HTML"
Post a Comment