#65 membuat keterangan input pada html
pada tutorial ini kita akan belajar membuat keterangan input dengan label pada html, ada beberapa penggunaan <label> yang dibutuhkan ketika ingin membuat formulir.
Deskripsi
label adalah teks biasa yang memberikan keterangan kepada pengguna.
tag label biasanya sering dipasangkan dengan elemen <input>, karena input tanpa label membuat pengguna tidak mengerti penggunaan input tersebut.
label ditulis dengan sintaks pembuka <label> dan ditutup dengan tag </label>.
label juga bisa dipasangkan dengan tag inputan lainnya yang ada di formulir seperti <textarea>, <label>, <progress> dan lainnya.
Penggunaan <label>
pemberian label berfungsi untuk memperjelas inputan yang akan di isi oleh pengguna. label memberitahu pengguna tentang input yang akan dikirim ke server.
label juga memudahkan target pemilihan elemen seperti input radio atau checkbox.
pemilihan ini akan berfungsi jika sintaks ditulis dengan cara yang benar, jika hanya ditulis <label>Keterangan</label> maka fungsi label itu sama saja seperti teks biasa.
pengguna akan mengalami kesulitan ketika klik kotak centang yang terlalu kecil, dengan mengklik teks didalam <label> akan membuatnya terlihat mudah.
Penulisan sintaks
ada dua cara untuk membuat label, antara lain:
1. membungkus input dengan tag label
contoh html tag label dengan <input> didalamnya
<label>
<input type="checkbox" name="term">
Saya menyetujui syarat dan ketentuan
</label>Code language: HTML, XML (xml)
apabila kita klik labelnya maka checkbox akan di aktifkan atau tercentang.
kita juga bisa menulis label dengan input type teks, contohnya:
<label> Nama
<input name="nama" type="text" />
</label>Code language: HTML, XML (xml)
jika klik teks label nama maka input akan otomatis ke klik dengan tanda kedip garis untuk mengetik inputan.
2. memisahkan tag label dan input
penulisan label kedua menggunakan atribut for sebagai deskripsi bagi elemen <input> yang akan dipasangkan.
atribut for dipasangkan dengan atribut id dengan nama yang sama.
<input type="checkbox" name="term" id="term">
<label for="term">Saya menyetujui syarat dan ketentuan</label>Code language: HTML, XML (xml)hasilnya akan sama saja seperti membungkus input ke dalam tag label, namun cara ini yang disarankan dalam membuat label supaya terlihat rapi
Baca juga : Mengenal atribut input pada html
Contoh penggunaan label
apabila kita klik teks label maka inputan akan difokuskan atau aktif dengan memilih elemen formulirnya, dengan seperti itu pengguna akan nyaman tanpa masuk ke elemen formulir dengan kursor.
<!DOCTYPE html>
<html>
<head>
<title> tag label pada html </title>
</head>
<body>
<form action="/login" method="POST">
<label for="email">Email:</label>
<input id="email" type="text" name="email" />
<br><br>
<label for="password">Password:</label>
<input id="password" type="password" name="password" />
<br><br>
<input type="submit" name="submit" />
</form>
</body>
</html>Code language: HTML, XML (xml)
cara hide label html dengan menambahkan css di dalam inline label
<label style="visibility:hidden;"> text </label>Code language: HTML, XML (xml)Demikian tutorial Cara membuat keterangan input dengan tag label pada html, semoga bermanfaat bagi teman-teman dan sampai jumpa pada tutorial berikutnya 🙂
Pencarian di thohirdev:
- fungsi label html
- membuat label html
- for in label html
- checkbox label html
- hide label html