Inputs & Field Values

Setelah lesson ini, kamu dapat memilih type, name, value, radio, dan checkbox sesuai jenis informasi yang diminta.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Email, jumlah peserta, pilihan waktu, dan persetujuan adalah informasi berbeda. Satu jenis kotak teks tidak selalu menjadi pilihan paling membantu.

Memilih type, name, value, radio, dan checkbox sesuai jenis informasi yang diminta.

PAHAMI KONSEPNYA

Type menyesuaikan kontrol

Text untuk teks umum, email untuk alamat email, number untuk jumlah yang memang akan dihitung. Jangan memakai number untuk nomor telepon atau kode pos: angka nol awal dan formatnya bukan nilai hitungan. Jenis input dapat memengaruhi keyboard perangkat dan validasi browser.

Id, name, dan value punya tugas berbeda

Id mengidentifikasi elemen dan menghubungkan label. Name adalah nama data saat form diserialisasi. Value adalah nilainya, misalnya name="sesi" value="pagi". Kontrol tanpa name biasanya tidak ikut dalam pengiriman form biasa.

Satu pilihan atau beberapa?

Radio dengan name sama membentuk satu kelompok sehingga hanya satu yang dipilih. Beri setiap radio value berbeda dan id unik. Checkbox cocok untuk pilihan independen; checkbox yang tidak dicentang tidak ikut dalam data form biasa. Checked dapat memberi pilihan awal sebagai atribut boolean.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<form>
  <label for="jumlah">Jumlah peserta</label>
  <input id="jumlah" name="jumlah" type="number" value="1">
  <p>Pilih sesi:</p>
  <label><input type="radio" name="sesi" value="pagi"> Pagi</label>
  <label><input type="radio" name="sesi" value="sore"> Sore</label>
  <label><input type="checkbox" name="kabar" value="ya"> Ingin menerima kabar</label>
</form>

HASIL DI BROWSER

Radio berbagi name sesi, tetapi value berbeda. Checkbox kabar berdiri sendiri. Semua pilihan tetap memiliki label.

KESALAHAN YANG SERING TERJADI

<input type="radio" name="pagi" value="pagi">
<input type="radio" name="sore" value="sore">

Name berbeda membuat dua kelompok radio yang dapat dipilih bersamaan. Untuk satu pilihan sesi, gunakan name yang sama.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Atribut mana yang harus sama pada radio “Pagi” dan “Sore” agar hanya satu dapat dipilih?

idnamevalue

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

TULIS · LIHAT · PAHAMI

Pilih sesi belajar

Buat form dengan input email (name email), number (name peserta), dua radio name sesi dengan value pagi dan sore, serta checkbox name pengingat value ya. Semua kontrol perlu label.

<h1>Pilihan Sesi — Demo</h1>
<form>
  <!-- Pilih jenis kontrol sesuai data -->
</form>

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

Type menyesuaikan jenis isian.
Name adalah kunci data; id adalah identitas elemen.
Radio satu kelompok berbagi name; checkbox adalah pilihan independen.

FormAtribut

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

Hubungkan dengan konsep lain

HTML form °Form label °HTML attribute °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →