FluentStack

Textarea, Select, dan Required Fields

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 2: HTML and Accessibility FoundationsBeginner35 menitBahasa Indonesia

Textarea, Select, dan Required Fields

Tambahkan field pesan, pilihan, dan required agar form lebih lengkap.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan input, textarea, dan select berdasarkan jenis data
  • Menggunakan required untuk field yang wajib diisi
  • Membuat form kontak sederhana dengan beberapa jenis field
HTMLFormsAccessibility

Isi lesson

6 blok
  1. 1.
    Form bisa punya beberapa jenis fieldBelum selesaiWajib
  2. 2.
    Textarea dan selectBelum selesaiWajib
  3. 3.
    Placeholder bukan pengganti labelBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Form bisa punya beberapa jenis field

Wajib

Input cocok untuk nilai pendek seperti nama atau email. Textarea cocok untuk teks panjang seperti pesan. Select cocok ketika user harus memilih dari opsi yang sudah disediakan. Required dipakai untuk memberi tahu browser bahwa field tertentu wajib diisi sebelum form dikirim.

Bagian ini memengaruhi progres lesson.

Textarea dan select

Wajib
html
<label for="message">Pesan</label>
<textarea id="message" name="message" required></textarea>

<label for="topic">Topik</label>
<select id="topic" name="topic" required>
  <option value="">Pilih topik</option>
  <option value="support">Support</option>
  <option value="feedback">Feedback</option>
</select>

Textarea memberi ruang untuk teks panjang. Select membatasi pilihan agar user memilih salah satu opsi. Required membuat browser meminta field diisi sebelum submit.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Placeholder bukan pengganti label

Placeholder bisa membantu memberi contoh isi, tetapi jangan menjadikannya satu-satunya nama field. Tetap tampilkan label yang jelas dan hubungkan label ke field memakai for dan id.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Field mana yang paling cocok untuk pesan panjang dari user?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat field form kontak

Latihan membuat form kontak dengan input, textarea, select, required, dan button submit.

Tujuan awal: Buat form kontak sederhana.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

11 cek otomatis8 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • input cocok untuk nilai pendek.
  • textarea cocok untuk teks panjang.
  • select cocok untuk pilihan yang sudah disediakan.
  • required membantu browser tahu field wajib.
  • Berikutnya, kamu akan lanjut ke alt text, keyboard navigation, dan checklist aksesibilitas dasar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Form bisa punya beberapa jenis field.

Memuat progresReview module