HTML label tag | belajar <label> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML label tag. Tutorial dan panduan mengenai element <label>...</label> yang digunakan untuk memberi label sebuah form control. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <label>.

Deskripsi
Penjelasan HTML label

HTML <label> element merepresentasikan sebuah judul atau penamaan untuk item control (<input>, <select> dan lainnya) yang biasanya berkaitan dengan sebuah form.

<label> element dapat diasosiasikan dengan control tertentu dalam sebuah form dengan menggunakan dua cara. Pertama, dengan menggunakan for attribute, adapun value dari attribute tersebut adalah nama id dari control yang ingin dituju (lihat Contoh 1). Kedua, dengan menempatkan control didalam <label> element (lihat Contoh 2).

TIPS

Sebaiknya jangan menuliskan link (<a> element) didalam <label> element. Tetapi, untuk kepentingan aksesibilitas, sebaiknya ditulis diluar (bukan sebagai anak element) dari <label> (lihat Contoh 3).

Attributes
Atribut HTML Tag <label>

for

Menentukkan id dari form control (element yang berkaitan dengan sebuah form) yang hendak diasosiasikan.

Value: element_id

form

Menentukkan id dari sebuah form, yang mana label tersebut hendak diasosiasikan. Attribute ini berguna jika ingin meletakan label element ditempat lain (bukan didalam <form> element.)

Value: form_id

Global Attributes
Atribut Secara Global (Keseluruhan)

<label> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<label> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <label> element

Contoh 1

Contoh label dengan attribute for, yang berarti label tersebut untuk control yang memiliki id name

HTML 
<p>Siapakah Nama Anda?</p>
<label for="name">Nama: </label>
<input type="text" id="name">
Contoh 2

Contoh control (<input> element) yang diapit (terletak) didalam element <label>

HTML 
<p>Siapakah Nama Anda?</p>
<label>Nama: <input type="text"></label>
Contoh 3

Sebuah link (<a>) sebaiknya ditulis terpisah (diluar) element <label>

HTML 
<label><input type=checkbox name=tac>Saya Setuju dengan Perjanjian dan Kondisi</label>
(baca <a href="tac.html">Perjanjian dan Kondisi</a>)

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML label tag</title>
    <style>

    </style>
  </head>
  <body>
    <h3>Contoh 1</h3>

    <p>Siapakah Nama Anda?</p>
    <label for="name">Nama: </label>
    <input type="text" id="name">

    <hr />
    <h3>Contoh 2</h3>

    <p>Siapakah Nama Anda?</p>
    <label>Nama: <input type="text"></label>

    <hr />
    <h3>Contoh 3</h3>

    <label><input type=checkbox name=tac>Saya Setuju dengan Perjanjian dan Kondisi</label>
    (baca <a href="tac.html">Perjanjian dan Kondisi</a>)
  </body>
</html>
SHARE
Previous Article Next Article