Dasar-dasar formulir

Klik kata Email di samping kolom formulir yang dibuat dengan baik, dan kursor langsung melompat ke kotaknya. Detail kecil itu adalah hasil kerja elemen label.

Apa fungsi formulir

Kotak pencarian, halaman pendaftaran, dan layar pembayaran semuanya formulir. Elemen <form> mengelompokkan kontrol, dan saat pengunjung mengirimkannya, browser mengirim name setiap kontrol beserta nilainya ke alamat di atribut action formulir. Atribut method menyatakan caranya: get menaruh data di alamat, cocok untuk pencarian yang mungkin kamu simpan sebagai markah, sedangkan post mengirimnya di badan permintaan, cocok untuk apa pun yang mengubah data, seperti pesanan. HTML membangun formulir; program di server memutuskan apa yang dilakukan terhadap data yang tiba.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Setiap kontrol memerlukan label

Elemen <label> menamai sebuah kontrol. Hubungkan keduanya dengan memberi input sebuah id dan memberi label atribut for yang sama, atau dengan menaruh input di dalam label. Hubungan ini melakukan dua hal. Pembaca layar membacakan label saat kolom mendapat fokus, sehingga pengguna mendengar Email, edit text, bukan sekadar edit text. Dan mengeklik label memfokuskan kolom atau mencentang kotak centang, yang memberi semua orang, terutama pengguna ponsel, sasaran yang lebih besar. placeholder (teks petunjuk abu-abu di dalam kotak) bukan label: teks itu hilang begitu kamu mengetik, kontrasnya sering rendah, dan sebagian teknologi bantu mengabaikannya.

Jenis input

Atribut type pada <input> mengubah kontrolnya. text adalah kotak satu baris bawaan. email, tel, dan url tampak serupa tetapi menampilkan papan ketik yang sesuai di ponsel, dan browser memeriksa bahwa alamat email berbentuk benar. number menerima angka dan bisa punya min dan max. password menyembunyikan ketikanmu, date menawarkan kalender, serta checkbox dan radio adalah kotak untuk dicentang. Untuk teks yang lebih panjang, pakai <textarea>, dan untuk pilihan dari daftar, <select> dengan elemen <option> di dalamnya.

Mengelompokkan pilihan

Tombol radio yang menjawab satu pertanyaan memakai name yang sama, dan hanya satu yang bisa dipilih dalam satu waktu. Bungkus kelompok itu dengan <fieldset> dan taruh pertanyaannya di <legend>. Pembaca layar lalu membacakan pertanyaan itu bersama setiap pilihan: Loaf size, Small, radio button, 1 of 2. Setiap tombol radio tetap mendapat labelnya sendiri.

Tombol dan pemeriksaan bawaan

<button> di dalam formulir secara bawaan mengirimkan formulir; menulis type="submit" memperjelas hal itu, dan type="button" membuat tombol yang tidak melakukan apa pun sampai JavaScript memberinya tugas. Sebelum mengirim, browser bisa memeriksa kolom untukmu. required menghentikan formulir kalau kolom kosong, type="email" menolak teks tanpa @, serta minlength, min, dan max menetapkan batas. Pemeriksaan ini membantu pengunjung memperbaiki kesalahan lebih awal, tetapi berjalan di browser pengunjung dan bisa dilewati, jadi server harus memeriksa datanya lagi. Atribut autocomplete, dengan nilai seperti email atau name, memungkinkan browser mengisi data yang tersimpan, yang menghemat ketikan bagi semua orang dan terutama membantu orang dengan kesulitan motorik atau daya ingat.