Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Label Teks HTML Menggunakan Tag Label

Tag label pada HTML digunakan untuk menyediakan peningkatan kebergunaan untuk mouse user, dengan kata lain jika user melakukan klik mouse pada elemen label, maka akan mengaktifkan kontrol tertentu. Tag tersebut mendefinisikan label untuk <button>, <input>, <meter>, <output>, <progress>, <select>, ataupun <textarea>.

2 Contoh dan Cara Penggunaan Tag Label pada HTML
Ilustrasi Tag Label HTML

Sebelum memahami lebih dalam materi tentang Membuat Label Teks HTML Menggunakan Tag Label, terlebih dahulu pelajari materi tentang: Membuat Huruf Input Keyboard HTML Menggunakan Tag KBD [klik], Membuat Garis Bawah Teks HTML Menggunakan Tag INS [klik], dan Membuat Inputan HTML Menggunakan Tag Input [klik].

Tag label dapat digunakan dengan dua cara:
  1. Tag <label> digunakan untuk menyediakan atribut id dan <input>. Tag <label> dibutuhkan untuk atribut yang nilainya adalah sama dengan input id.
  2. Tag <label> digunakan secara langsung di dalam tag <label> init sendiri. pada kondisi ini atribut id dan for tidak dibutuhkan karenak sudah berasosiasi secara implisit.

Sintak:
<label> Form Konten... </label>

Baca Juga:

Nilai atribut:
  • for: merujuk pada kontrol input yang digunakan pada label ini yang nilainya harus sama dengan nilai atribut kontrol input id.
  • form: merujuk pada bentuk dimana label tersebut berada.

Contoh: penggunaan tag input diluar dari tag level.

<!DOCTYPE html>

<html>

 

<body>

<h1>

Blog Elfan

</h1>

 

<strong>

HTML Tag Label

</strong>

 

<form>

 

<label 

for="student">

Student

</label>

 

<input 

type="radio" 

name="Occupation"

id="student" 

value="student">

 

<br>

 

<label 

for="business">

Business

</label>

 

<input 

type="radio" 

name="Occupation"

id="business" 

value="business">

 

<br>

 

<label 

for="other">

Other

</label>

 

<input 

type="radio" 

name="Occupation"

id="other" 

value="other">

 

</form>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Tag Label
 
 
 

Contoh: penggunaan tag input di dalam tag level.

<!DOCTYPE html>

<html>

 

<body>

<h1>

Blog Elfan

</h1>

 

<strong>

HTML Tag Label

</strong>

 

<form>

 

<label>

Male

<input 

type="radio" 

name="gender"

id="male" 

value="male" />

</label>

 

<br/>

 

<label>

Female

<input 

type="radio" 

name="gender"

id="female" 

value="female" />

</label>

 

<br/>

 

<label>

Other

<input 

type="radio" 

name="gender"

id="other" 

value="other" />

</label>

 

</form>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Tag Label



Artikel ini didedikasikan kepada: Devi Sinta Dewi, Eka Nurul Istiqomah, Faradian Salsabella Fasaytri, Fiman Hadit Muttaqin, dan Hana Wandari.

5 komentar untuk "Membuat Label Teks HTML Menggunakan Tag Label"

  1. Apa yang dimaksud dengan tag label pada html?

    BalasHapus
    Balasan
    1. Tag label pada HTML digunakan untuk memberikan peningkatan kegunaan bagi user yang menggunakan mouse, dimana jika salah satu teks dengan tag label di klik maka akan mengaktifkan fungsi kontrol tersebut.

      Hapus
  2. Apa fungsi tag label pada html?

    BalasHapus
    Balasan
    1. Tag label digunakan untuk menentukan label untuk elemen input dari formulir. Tag tersebut menambahkan label ke kontrol formulir seperti teks, email, sandi, teks area, dan lain sebagainya. Tag ini mengaktifkan kontrol ketika user mengklik teks pada elemen label.

      Hapus
  3. Tag label digunakan untuk membuat keterangan untuk kontrol formulir. Tag label dapat dikaitkan dengan kontrol formulir baik secara implisit dengan menempatkan elemen kontrol pada elemen label, atau secara eksplisit dengan menggunakan atribut for.

    BalasHapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -