Formulir HTML yang ramah pengguna

Formulir adalah tempat pengunjung berbicara balik kepada halamanmu. Formulir yang buruk membuat orang menyerah di tengah jalan; formulir yang baik hampir tidak terasa. Kabar baiknya, HTML sudah menyediakan banyak hal secara bawaan, asal kita memakai elemen yang tepat.

Label dan kolom isian

Setiap kolom wajib punya label yang terlihat. Hubungkan keduanya dengan memberi kolom sebuah id, lalu menulis id yang sama pada atribut for milik label.

<form action="/kirim" method="post">
  <div class="baris">
    <label for="nama">Nama lengkap</label>
    <input id="nama" name="nama" type="text" autocomplete="name" required>
  </div>

  <div class="baris">
    <label for="email">Alamat email</label>
    <input id="email" name="email" type="email" autocomplete="email"
      aria-describedby="bantuan-email" required>
    <p id="bantuan-email">Hanya dipakai untuk membalas pesanmu.</p>
  </div>

  <button type="submit">Kirim pesan</button>
</form>

Hubungan label dan kolom memberi dua keuntungan. Pertama, mengeklik teks label ikut memindahkan kursor ke kolomnya, sehingga area sentuh di ponsel jadi lebih luas. Kedua, pembaca layar membacakan label ketika kolom mendapat fokus.

Atribut yang sering terlupa

• name adalah nama data yang dikirim ke server. Kolom tanpa name tidak ikut terkirim.
• type menentukan jenis kolom. Dengan type="email", papan ketik ponsel menampilkan tombol @ dan peramban memeriksa bentuk alamatnya.
• autocomplete membantu peramban mengisi otomatis data yang pernah disimpan pengguna.
• aria-describedby menghubungkan kolom dengan teks bantuan, sehingga teks itu ikut dibacakan.

Validasi bawaan peramban

Sebelum menulis JavaScript apa pun, manfaatkan pemeriksaan yang sudah disediakan peramban. Atribut required menolak kolom kosong. minlength menetapkan jumlah karakter minimal. Kalau syarat tidak terpenuhi, peramban menahan pengiriman dan menampilkan pesan di dekat kolom yang bermasalah.

<div class="baris">
  <label for="pesan">Pesan</label>
  <textarea id="pesan" name="pesan" rows="5" minlength="10" required></textarea>
</div>

Validasi di peramban adalah bantuan bagi pengguna, bukan pengaman. Data tetap harus diperiksa ulang di server, karena pemeriksaan di peramban bisa dilewati.

Mengelompokkan pilihan

Untuk sekumpulan tombol radio atau kotak centang yang menjawab satu pertanyaan, bungkus dengan <fieldset> dan beri judul kelompok dengan <legend>. Tombol radio dalam satu kelompok harus punya name yang sama supaya hanya satu yang bisa dipilih.

<fieldset>
  <legend>Topik pesan</legend>
  <label>
    <input type="radio" name="topik" value="tanya" checked>
    Pertanyaan
  </label>
  <label>
    <input type="radio" name="topik" value="saran">
    Saran
  </label>
</fieldset>

Di sini label membungkus langsung tombol radionya. Cara ini sama sahnya dengan pasangan for dan id, dan praktis untuk pilihan pendek.

Gaya yang membantu, bukan menghias

Dua hal paling berpengaruh pada kenyamanan formulir adalah ukuran kolom yang cukup besar untuk disentuh dan penanda fokus yang jelas.

.baris {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid #6b7280;
  border-radius: 6px;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #3f4a8a;
  outline-offset: 2px;
}

font: inherit membuat kolom memakai huruf yang sama dengan halaman; tanpa itu, kolom isian memakai huruf bawaan peramban yang ukurannya sering lebih kecil. box-sizing: border-box memastikan lebar 100% sudah termasuk padding dan garis tepi, sehingga kolom tidak meluber dari wadahnya.

Selektor :focus-visible menampilkan garis luar ketika elemen mendapat fokus lewat papan ketik. Jangan pernah menghapus penanda fokus tanpa menggantinya dengan yang setara: bagi pengguna papan ketik, itulah satu-satunya petunjuk posisi mereka di halaman.