Fungsi Tag Label dan Cara Penggunaannya

Kuy Belajar - Fungsi Tag Label dan Cara Penggunaannya. Assalamualaikum sobat semua, kita ketemu lagi nih di blog Kuy-Belajar. kita masih akan membahas materi tentang form di HTML, materi sebelumnya kita sudah membahas tentang Cara Membuat Tombol di HTML Menggunakan Tag Button. Dan pembahasan kita pada kesempatan kali ini adalah Fungsi Tag Label dan Cara Penggunaannya. Kuy kita mulai pembahasannya!

Mengenal Fungsi Tag Label Dalam HTML

Fungsi dari tag label dalam HTML yaitu sebagai pelengkap keterangan kepada beberapa objek form seperti checkbox atau pun radio button. Sebenarnya dalam penggunaan tag label, selain untuk memberikan keterangan, tag label ini juga digunakan untuk memudahkan user dalam menginput data (membuat form menjadi user friendly).

Sebenarnya jika kita lihat dari segi tampilan, tag label ini tidak akan berpengaruh apa apa, kecuali jika sobat mengubahnya menggunakan CSS. Sehingga tanpa atau dengan tag label, sobat tidak akan melihat perbedaannya.

Dalam penulisannya pun tidaklah rumit, silahkan sobat perhatikan contoh penulisan tag label dalam HTML berikut ini.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body>

       
<label>Teks ini pake label</label>

       <br><br>

       Teks ini tidak pake label

</body>





</html>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

Pada gambar di atas bisa kita lihat bahwa di antara kedua baris teks tersebut tidak ada perbedaan apa-apa, meskipun teks baris pertama kita gunakan tag label, hal ini karena kita tidak menambahkan CSS untuk mengatur tampilan dari tag label tersebut.

Tag label ini penggunaannya sering di kombinasikan dengan check box (tag input type checkbox) dan radio button (tag input type radio). Untuk lebih jelasnya kuy simak contoh penggunaan checkbox berikut ini.
Dalam penulisannya pun tidaklah rumit, silahkan sobat perhatikan contoh penulisan tag label dalam HTML berikut ini.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body>

       <h3>Pemrograman yang harus saya pelajari : </h3>



   <form>

   <input type="checkbox" name="belajar_html"

     value="belajarhtml"/> Bahasa Pemrograman HTML

   <br />



   <input type="checkbox" name="belajar_css" 

     value="belajarcss"/> Bahasa Pemrograman CSS

   <br />



   <input type="checkbox" name="belajar_php"

     value="belajarphp"/>Bahasa Pemrograman PHP

   </form> 



</body>





</html>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

Pada gambar di atas terlihat ada 3 buah checkbox sederhana, ketika sobat ingin memilih checkbox tersebut, sobat diharuskan mengklik pada bagian kotak putih dari checkbox tersebut. Hal ini tentu saja membuat user tidak nyaman dan merasa kesulitan saat ingin men-checklist pilihan pada checkbox tersebut.

Tapi sobat tenang saja, kita dapat mengatasi hal tersbut, salah satu fungsi dari tag label yaitu untuk memudahkan pengguna dalam men-checklist pada pilihan di checkbox atau pun pada radio button. dengan menggunakan tag label maka user tidak harus men-checklist pada bagian kotak nya saja, namun bisa juga dengan cara meng-klik pada bagian dari teks value dari checkbox tersebut.

Contoh Penggunaan Tag Label Dengan Checkbox

Untuk penggunaan tag label agar dapat di kombinasi kan dengan checkbox terdapat 3 cara. Cara pertama, cara ini merupakan cara yang paling sederhana, yaitu dengan memasukkan atau mengurung seluruh bagian checkbox ke dalam tag label. Seperti pada contoh di bawah ini.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body>

      

   <form>

   <label> 

   <input type="checkbox" name="belajar_html"

     value="belajarhtml"/> Bahasa Pemrograman HTML 

   </label>

   </form> 



</body>





</html>

Dengan cara memasukkan seluruh bagian dari checkbox dan keterangannya ke dalam tag label, ketika kita ingin men-checklist checkbox tersebut, cukup dengan men-klik tulisan keterangan dari checkbox, dan secara otomatis checkbox tersebut akan ter-checklist.
Pada cara kedua, untuk menggunakan tag label yaitu kita akan menggunakan atribut “for”. Dengan menggunakan atribut for ini, maka kita tidak harus memasukkan seluruh tag input ke dalam tag label.

Silahkan sobat perhatikan contoh penulisan atribut for dalam tag label berikut ini.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body>

      

   <form>

   <input type="checkbox" id="belajar_html"

     value="belajarhtml"/> 

   <label for="belajar_html">Bahasa Pemrograman HTML</label> 

   </form> 



</body>





</html>

Silahkan sobat perhatikan bawha tag label di letakkan setelah tag input type checkbox. Dan kita juga memasukkan atribut for di dalam tag label tersebutm dan nilai dari atribut for tersebut sama dengan nilai dari atribut id dari tag input type checkbox.

Pada contoh di atas kita mengisi nilai dari atribut id="belajar_html" pada tag input type checkbox, sehingga dalam mengisi nilai dari atribut for di dalam tag label harus for="belajar_html".

Cara ketiga, yaitu dengan cara menggabungkan dari kedua cara di atas. Untuk lebih jelasnya kuy simak contoh berikut ini.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body>

   <form>

   <label for="belajar_html">

   <input type="checkbox" id="belajar_html"

     value="belajarhtml"/> Bahasa Pemrograman HTML

   </label> 

   </form> 



</body>





</html>

Di dalam contoh di atas, kita mengurung tag input type checkbox dengan tag label, serta dengan menambahkan atribut for pada tag label tersebut.

Contoh Penggunaan Tag Label di Dalam Form HTML

Sebagai akhir dari materi Fungsi Tag Label dan Cara Penggunaannya ini, kita akan menggabungkan semua cara yang sudah kita pelajari di atas. Berikut ini adalah contoh penulisan tag label dalam form HTML.


<html>



<title>Kuy Belajar Tag Label</title>




</head>







<body> 



<h3>Pemrograman yang harus saya pelajari : </h3>

   <form>

   <label> 

   <input type="checkbox" name="belajar_html"

     value="belajarhtml"/> Bahasa Pemrograman HTML 

   </label> <br>



   <input type="checkbox" id="belajar_css"

     value="belajarcss"/> 

   <label for="belajar_css">Bahasa Pemrograman CSS</label><br>



   <label for="belajar_php">

   <input type="checkbox" id="belajar_php"

     value="belajarphp"/> Bahasa Pemrograman PHP

   </label> 

   </form>



</body>





</html>

Maka akan menghasilkan file HTML seperti gambar berikut ini.

Setelah kita menjalankan kode di atas, maka ketika kita men-klik tulisan keterangan dari checkbox, secara langsung kotak checkbox akan berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form yang kita rancang.

Menurut saya lebih baik menggunakan cara penulisan tag label yang kedua, dimana kita memisahkan tag label dari tag input, dan menggunakan atribut for sebagai “pengikat” label. Dengan cara ini, form akan lebih fleksibel.

Saya rasa itu lah pembahasan kita tentang Fungsi Tag Label dan Cara Penggunaannya. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi selanjutnya : Fungsi Input Type Hidden Beserta Cara Penggunaannya