Penggunaan Dan Penulisan Tag Label Dalam Form Html

Pada artikel kali ini kita akan membahas Penggunaan dan Penulisan Tag Label Dalam Pembuatan Form HTML.

Penggunaan Tag Label Dalam Pembuatan Form HTML

Tag label dipakai sebagai suplemen keterangan untuk beberapa objek form ibarat radio dan checkbox. Selain itu tag label juga dipakai untuk memudahkan pengguna atau pengunjung untuk memasukkan data.

Untuk memahami penggunaan tag label dalam pembuatan form, silahkan ketikan arahan 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 artikel kali ini kita akan membahas  Penggunaan dan Penulisan Tag Label Dalam Form HTML

Pada tumpuan arahan form HTML diatas, Saya menciptakan 3 buah checkbox. Jika Anda ingin menentukan salah satu dari 3 checkbox tersebut, maka Anda harus mencentang kotak pada checkbox tersebut. Namun kotak checkbox tersebut terlalu kecil dan menciptakan agak sulit untuk di centang.

Salah satu cara untuk mengatasinya ialah menciptakan pengguna atau pengunjung sanggup meng-klik goresan pena atau keterangan dari checkbox tersebut. Untuk melaksanakan hal ibarat ini kita sanggup memakai tag label

Penulisan Tag Label Dalam Pembuatan Form HTML

Terdapat 3 cara untuk menuliskan tag label dalam pembuatan form, ialah :

1. Memasukkan seluruh tag input ke dalam tag label

Silahkan ketikan arahan HTML dibawah ini, kemudian jalankan dibrowser :

<label>     <input type="checkbox" name="berenang" id="berenang"/>Berenang </label>

Dengan memasukkan seluruh bab dari dari tag input termasuk atribut type="checkbox" ke dalam tag label, maka kita sanggup meng-klik goresan pena atau keterangan dari checkbox dan secara otomatis kotak checkbox akan tercentang.

2. Menggunakan atribut for didalam tag label

Dengan memakai atribut for didalam tag label, maka kita tidak harus memasukkan tag input ke dalam tag label.

Silahkan ketikan arahan HTML dibawah ini, kemudian jalankan dibrowser :

<input type="checkbox" name="berenang" id="berenang"/> <label for="berenang">Berenang</label>

Perhatikan bahwa tag label diletakkan sehabis tag input ini biar kotak untuk mencentang tidak berada di belakang goresan pena atau keterangan. Di dalam tag label terdapat atribut for yang nilainya harus sama dengan atribut id yang berada di dalam tag input. Dalam tumpuan arahan HTML diatas, Saya mengisi nilai dari atribut for="berenang" dan aku juga harus mengisi nilai dari atribut id="berenang".

3. Memasukkan seluruh tag input ke dalam tag label dan memakai atribut for di dalam tag label

Silahkan ketikan arahan HTML dibawah ini, kemudian jalankan dibrowser :

<label for="berenang">     <input type="checkbox" name="berenang" id="berenang"/>Berenang </label>

Dalam tumpuan arahan HTML diatas Saya menggabungkan 2 cara yaitu memasukkan seluruh tag input ke dalam tag label dan memakai atribut for di dalam tag label.

Berikut ini tumpuan arahan 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>

Pada artikel kali ini kita akan membahas  Penggunaan dan Penulisan Tag Label Dalam Form HTML

Silahkan jalankan arahan HTML tersebut di browser, kemudian klik goresan pena atau keterangan dari checkbox, maka kotak checkbox akan eksklusif tercentang secara otomatis.

Jika Anda ingin memakai tag label pada beberapa objek form HTML, maka disarankan memakai cara kedua ialah memakai atribut for di dalam tag label. Menurut Saya dengan cara ini pembuatan form akan terlihat rapih dan gampang 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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel