Label untuk Input
Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 39 dari 60.
Tanpa label, tidak selalu jelas apa yang dimaksud dengan suatu input. Label memberi pengguna petunjuk visual yang jelas tentang jenis input yang diharapkan di bidang tersebut. Label dibuat menggunakan tag <label>.
Berikut sintaks dasarnya:
<label for="field">Label text</label>
<input type="text" id="field"><label>: Tag yang membuat label.
for: Menghubungkan label dengan kolom formulir. Nilaiforharus sama denganidkolom formulir.
- Teks label: Teks yang menjelaskan kegunaan kolom formulir.
<input>: Kolom formulir yang dirujuk oleh label.
id: Pengenal unik untuk field formulir, yang cocok dengan atributforpada label.
Setelah keduanya ditautkan, mengeklik teks label akan menempatkan kursor pada input-nya (memberinya fokus), sehingga pengguna juga memiliki area yang lebih luas untuk diklik.
Tantangan
MudahTambahkan tag berikut di dalam tag <form>:
<label>dengan teks 'First Name:' dan atributforyang diatur ke 'firstname'.- Field
<input>dengantype="text". - Field
<input>harus memilikiidyang cocok dengan atributforpada label.
Coba sendiri
<!DOCTYPE html>
<html>
<body>
<form>
<!-- Tulis kodemu di sini -->
</form>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar
1Dasar-Dasar HTML
Apa itu HTML?Struktur Dasar HTMLTag dan ElemenTag Bersarang dan Tag PenutupKomentar dalam HTML7Halaman Profil Pribadi
Gambaran Umum ProyekBagian Header
Foto ProfilBagian Tentang SayaTautan Media Sosial2Teks dan Pemformatan
JudulParagrafPindah BarisTeks Tebal dan MiringTeks Tebal dan Miring LagiRangkuman: Pemformatan8Formulir dan Input Bagian 1
Dasar FormulirInput TeksAtribut InputKolom Kata SandiLabel untuk InputUlasan, Formulir Dasar11Halaman Pendaftaran Acara
Gambaran Umum ProyekBagian HeaderBagian Detail AcaraFormulir PendaftaranBagian Footer9Formulir dan Input Bagian 2
Tombol RadioKotak CentangMenu DropdownTombolTombol dalam FormulirRangkuman, Formulir #1Rangkuman, Formulir #2Latihan sendiri: Playground Web