Fungsi Label pada HTML

oleh | Des 18, 2023 | Website

HTML (Hypertext Markup Language) adalah bahasa yang digunakan untuk membuat dan menampilkan halaman web. HTML terdiri dari berbagai elemen yang memberikan struktur dan makna bagi konten web, seperti teks, gambar, tautan, form, dan lainnya.

Salah satu elemen HTML yang sering digunakan adalah label. Label pada HTML berfungsi untuk memberikan keterangan atau penjelasan untuk beberapa elemen form, seperti input, select, atau textarea. Label juga memudahkan pengguna untuk mengisi data dengan mengeklik teks label, yang akan mengaktifkan elemen form yang terkait.

Cara Menggunakan Label pada HTML

Label dapat digunakan dengan dua cara yaitu dengan menempatkan elemen form di dalam tag label, atau dengan menggunakan atribut for yang mengacu pada id elemen form. Berikut adalah contoh kode HTML yang menggunakan label dengan kedua cara tersebut:

<form action="/action_page.php">
  <!-- Cara pertama: menempatkan elemen form di dalam tag label -->
  <label>
    Nama:
    <input type="text" name="nama">
  </label><br>
  <!-- Cara kedua: menggunakan atribut for yang mengacu pada id elemen form -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <label for="hobi">Hobi:</label>
  <select id="hobi" name="hobi">
    <option value="membaca">Membaca</option>
    <option value="menulis">Menulis</option>
    <option value="menggambar">Menggambar</option>
  </select><br>
  <label for="newsletter">Berlangganan newsletter:</label>
  <input type="checkbox" id="newsletter" name="newsletter" value="ya"><br>
  <input type="submit" value="Kirim">
</form>

Manfaat Menggunakan Label pada HTML

Menggunakan label pada HTML memiliki beberapa keuntungan, antara lain :

  • Meningkatkan aksesibilitas web, yaitu kemudahan dan kenyamanan bagi pengguna yang memiliki keterbatasan fisik atau teknologi untuk mengakses dan berinteraksi dengan konten web. Label membantu pengguna yang menggunakan pembaca layar, keyboard, atau perangkat lain untuk mengetahui dan memilih elemen form yang diinginkan.
  • Meningkatkan usabilitas web, yaitu kemudahan dan keefektifan bagi pengguna untuk mencapai tujuan mereka saat menggunakan web. Label membantu pengguna untuk mengisi data dengan lebih cepat dan akurat, karena mereka tidak perlu mengklik atau mengetik pada elemen form yang kecil atau sulit dilihat.
  • Meningkatkan estetika web, yaitu penampilan dan kesan visual yang ditimbulkan oleh web. Label membantu pengguna untuk melihat konten web dengan lebih rapi dan teratur, karena mereka dapat mengelompokkan dan menyelaraskan elemen form dengan teks label yang sesuai. Baca juga “Pengertian PHP (Hypertext Preprocessor)“.

Kesimpulan

Label pada HTML adalah elemen yang berfungsi untuk memberikan keterangan atau penjelasan untuk beberapa elemen form, seperti input, select, atau textarea. Label juga memudahkan pengguna untuk mengisi data dengan mengeklik teks label, yang akan mengaktifkan elemen form yang terkait. Label dapat digunakan dengan dua cara: dengan menempatkan elemen form di dalam tag label, atau dengan menggunakan atribut for yang mengacu pada id elemen form. Menggunakan label pada HTML memiliki beberapa keuntungan, seperti meningkatkan aksesibilitas, usabilitas, dan estetika web.

Semoga artikel ini bermanfaat dan menambah wawasan anda tentang HTML. Terima kasih telah membaca.

Sumber Artikel:

Bagikan ini ke:
<a href="https://bloglab.id/author/bloglab/" target="_self">Erwin Widianto</a>

Erwin Widianto

Content Creator

Saya adalah seorang Content Creator dan SEO Spesialist yang berasal dari Jawa Barat, Indonesia yang memulai karir di bidang Digital Marketing sejak tahun 2017 hingga sekarang.

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

×