More Form Controls

Setelah lesson ini, kamu dapat menyusun form dengan textarea, select, tombol, dan kelompok fieldset yang diberi legend.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Saran panjang sulit ditulis di input satu baris. Sementara memilih satu topik dari daftar tidak perlu diketik ulang. Kontrol yang sesuai mengurangi pekerjaan pengguna.

Menyusun form dengan textarea, select, tombol, dan kelompok fieldset yang diberi legend.

PAHAMI KONSEPNYA

Teks panjang dan pilihan tetap

Textarea untuk pesan beberapa baris; isi awalnya ditulis di antara tag, bukan atribut value. Select berisi option untuk daftar pilihan. Value pada option menentukan nilai data, sedangkan teks option menentukan label yang dilihat pengguna.

Beri nama pada kelompok

Fieldset mengelompokkan kontrol yang saling berkaitan. Legend memberi nama kelompok, terutama berguna untuk pertanyaan dengan beberapa radio. Label tetap diperlukan pada setiap kontrol; legend tidak menggantikan label masing-masing.

Tentukan jenis tombol

Button type="submit" memicu proses pengiriman form, sedangkan type="button" tidak punya tindakan pengiriman otomatis. Di dalam form, tulis type secara eksplisit agar maksudnya jelas. Demonstrasi ini tidak memiliki server; tombol biasa cocok saat hanya menunjukkan struktur kontrol.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<form>
  <fieldset>
    <legend>Masukan bacaan</legend>
    <label for="topik">Topik</label>
    <select id="topik" name="topik">
      <option value="sains">Sains</option>
      <option value="cerita">Cerita</option>
    </select>
    <label for="pesan">Saranmu</label>
    <textarea id="pesan" name="pesan" rows="4"></textarea>
  </fieldset>
  <button type="button">Contoh tombol demo</button>
</form>

HASIL DI BROWSER

Fieldset memberi kelompok; legend menamainya; select dan textarea tetap memiliki label sendiri.

KESALAHAN YANG SERING TERJADI

<textarea value="Halo"></textarea>

Isi awal textarea ditulis sebagai teks di antara pembuka dan penutup: <textarea>Halo</textarea>.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi elemen nama kelompok form.

<fieldset><>Preferensi bacaan</legend></fieldset>

Lihat petunjuk

Elemen ini menjadi anak fieldset, biasanya yang pertama.

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

TULIS · LIHAT · PAHAMI

Rancang kotak saran

Buat fieldset dengan legend “Saran Kebun”, textarea bernama pesan, select bernama topik dengan minimal dua option bernilai berbeda, label untuk kedua kontrol, dan tombol type button. Letakkan semuanya dalam form.

<h1>Kotak Saran — Demo</h1>
<form>
</form>

index.htmlHTMLLn 1, Col 13 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.

Textarea untuk teks panjang; select dan option untuk pilihan.
Fieldset dan legend menjelaskan kelompok.
Tulis type tombol secara eksplisit.

FormAksesibilitas

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

Hubungkan dengan konsep lain

HTML form °Form label °Accessibility °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →