Penggunaan Tag Label Pada Form HTML

Tag label

Secara garis besar tag label berfungsi untuk pelengkap keterangan objek pada form html.
Tag label juga digunakan untuk mempermudah memasukan data inputan type radio button.

Tag label

Ketika kita memasukan data dalam bentuk pilihan checkbox secara default nya kita harus klik pada kotak kecil untuk menceklis. Tentu hal ini akan sulit jika yang menginput data menggunakan layar yang kecil.
Hal ini bisa dipermudah dengan tag label. Tag label bisa membuat tulisan dalam pilihan checkbox bisa di klik dan otomatis checkbox akan langsung terceklis.

Contoh tag label

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Tag Label HTML</title>
</head>
<body>
 <h4>pilihan: </h4>
 <form action="php.php" method="post">
 <label>
 <input type="checkbox" name="html" id="html"
 value="html"/>Saya sedang belajar HTML
</label>
 <br />
 <input type="checkbox" name="css" id="css"
 value="css"/> Saya sedang belajar CSS
 <br />
 <input type="checkbox" name="program" id="program"
 value="program"/> Saya sedang belajar pemograman web
 </form>
</body>
</html>

Perhatikan contoh diatas, pada pilihan nomor satu tulisan bisa di klik, sedangkan yang lainnya harus mengklik tombol checkbox.

Label for

atributfor” bisa dimasukkan kedalam tag label, tag ini sanngat mudah digunakan.
Atribut for membutuhkan nilai, value dari nilai ini harus sama dengan id tag input.

Contoh tag label for

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Tag Label HTML</title>
</head>
<body>
 <h4>Pilihan: </h4>
 <form action="php.php" method="post">
 <label>
 <input type="checkbox" name="html" id="html"
 value="html"/> Saya sedang belajar HTML
 </label>
 <br />
 <input type="checkbox" name="css" id="css"
 value="css"/>
 <label for="css"> Saya sedang belajar CSS</label>
 <br />
 <label for="program" >
 <input type="checkbox" name="program" id="program"
 value="program"/> Saya sedang belajar pemograman
 </label>
 </form>
</body>
</html>

Pada contoh diatas saya mebuat beberapa model untuk memasukan tag lebel for, perhatikan nilai dari for semuanya sama dengan id tag input.
Untuk mengetahui fungsinya masing-masing silakan di edit kodenya dan lihat hasil.
Dari contoh penggunaan tag lebel diatas label mana yang menurut anda anda lebih mudah?

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas