Forms & Labels

Setelah lesson ini, kamu dapat membuat form dengan label yang terhubung ke kontrol melalui for dan id.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Sebuah kotak kosong muncul tanpa keterangan. Apakah kamu harus mengisi nama, email, atau usia? Label menghilangkan tebakan itu dan tetap terlihat setelah orang mulai mengetik.

Membuat form dengan label yang terhubung ke kontrol melalui for dan id.

PAHAMI KONSEPNYA

Form mengelompokkan isian

Form membungkus kontrol untuk mengumpulkan data. Input membuat isian sederhana. Label memberi nama yang dapat dibaca untuk isian tersebut. Kontrol harus bisa dipahami tanpa mengandalkan warna atau posisi saja.

Hubungkan for dengan id

Pada <label for="nama">Nama</label>, nilai for harus sama dengan id input yang dituju. Mengklik label akan memfokuskan kontrol terkait. Id unik diperlukan agar hubungan tidak ambigu. Alternatif yang sah adalah menaruh input langsung di dalam label.

Placeholder bukan pengganti label

Placeholder adalah petunjuk contoh yang menghilang saat orang mengetik. Label tetap dibutuhkan. Pada course ini semua form adalah demonstrasi; preview tidak mengizinkan pengiriman data, dan tidak ada backend.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<form>
  <label for="nama">Nama panggilan</label>
  <input id="nama" name="nama" type="text" placeholder="Contoh: Rani">
  <p>Form demonstrasi; data tidak dikirim.</p>
  <button type="button">Contoh tombol</button>
</form>

HASIL DI BROWSER

For dan id sama-sama nama. Name akan menjadi kunci data form; pembahasannya ada pada lesson berikutnya.

KESALAHAN YANG SERING TERJADI

<label for="nama">Nama</label>
<input id="email" type="text">

Label menunjuk nama, tetapi input memiliki id email. Samakan nilai agar label benar-benar terhubung ke kontrol.

COBA BERSAMA

Praktik memperjelas pemahaman.

Hubungkan label ke input id="peserta".

<label for="">Nama peserta</label>
<input id="peserta" type="text">

Lihat petunjuk

Salin nilai id input.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Form perkenalan klub

Di dalam form, buat input teks bernama nama dan input email bernama email. Beri masing-masing id unik dan label yang terhubung. Sertakan keterangan bahwa ini form demo dan gunakan tombol type="button".

<h1>Kenalan dengan Klub</h1>
<form>
  <input type="text" placeholder="Nama">
  <input type="email" placeholder="Email">
</form>

index.htmlHTMLLn 1, Col 15 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Label menjelaskan isian dan harus terhubung ke kontrol.
For cocok dengan id, bukan name.
Placeholder hanyalah contoh; form demo tidak mengirim data.

FormAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Form label °HTML form °Accessibility °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →