Formulir dan input

Idenya

Formulir adalah cara pengguna berbicara balik ke sebuah situs: mencari, mendaftar, checkout, menyaring laporan. HTML memberimu banyak hal secara gratis kalau kamu memakai elemen yang tepat: keyboard ponsel yang sesuai dengan input-nya, validasi tanpa JavaScript, dan formulir yang berfungsi dengan screen reader. Kalau markup-nya benar, sebagian besar pekerjaan berat sudah selesai.

Sebuah formulir dan field-field-nya

Toko Kita ingin kotak pendaftaran newsletter: nama, alamat email, dan sebuah tombol. Itulah formulir berguna yang paling sederhana, dan sudah menunjukkan setiap bagian yang dibutuhkan sebuah formulir:

<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>

• <form action method>: ke mana datanya dikirim dan bagaimana caranya. get menaruhnya di URL (pencarian, filter); post mengirimnya di body request (pendaftaran, apa pun yang mengubah data).
• <input>: sebuah field. name-nya adalah key yang diterima server ([email protected]).
• <label for="email">: nama field yang terlihat. for-nya cocok dengan id input-nya.
• <button type="submit">: mengirim formulirnya.

Setiap input butuh label. Mengklik label memfokuskan field-nya (target yang lebih besar, terutama di ponsel), dan screen reader membacakan label saat field-nya fokus. placeholder bukan label: ia menghilang begitu kamu mengetik dan sering kontrasnya rendah.

Tipe input

type mengubah keyboard, validasi bawaan, dan kadang seluruh kontrolnya:

<form>
  <p><label for="qty">Quantity</label> <input id="qty" name="qty" type="number" min="1" max="10" value="1"></p>
  <p><label for="phone">Phone</label> <input id="phone" name="phone" type="tel"></p>
  <p><label for="date">Delivery date</label> <input id="date" name="date" type="date"></p>
  <p><label for="pw">Password</label> <input id="pw" name="pw" type="password" minlength="8"></p>
  <p><label for="q">Search</label> <input id="q" name="q" type="search"></p>
</form>

Pilihan: select, radio, checkbox

Tidak setiap jawaban diketik. Saat pelanggan memesan biji kopi, mereka memilih tingkat gilingan dari sebuah daftar, memilih satu dari tiga jenis roast, dan mungkin mencentang beberapa tambahan. Setiap jenis pilihan punya kontrolnya sendiri:

<form>
  <label for="grind">Grind</label>
  <select id="grind" name="grind">
    <option value="whole">Whole beans</option>
    <option value="coarse">Coarse (French press)</option>
    <option value="fine" selected>Fine (espresso)</option>
  </select>

  <fieldset>
    <legend>Roast</legend>
    <label><input type="radio" name="roast" value="light"> Light</label>
    <label><input type="radio" name="roast" value="medium" checked> Medium</label>
    <label><input type="radio" name="roast" value="dark"> Dark</label>
  </fieldset>

  <label><input type="checkbox" name="gift" value="yes"> Gift wrap</label>

  <label for="note">Note for the roaster</label>
  <textarea id="note" name="note" rows="3"></textarea>
</form>

• <select> dengan <option>: sebuah dropdown. value adalah yang dikirim; teksnya adalah yang ditampilkan; selected mengatur default-nya.
• Radio button berbagi name, sehingga hanya satu yang bisa dipilih. Kelompokkan di dalam <fieldset> dengan <legend>, yang berfungsi sebagai label kelompoknya.
• Checkbox adalah pilihan ya/tidak yang independen.
• Membungkus input di dalam <label>-nya adalah cara lain untuk menghubungkannya, tanpa perlu for/id.
• <textarea> untuk teks banyak baris.

Validasi bawaan

Orang bisa salah ketik, membiarkan field kosong, dan mengetik huruf di tempat yang seharusnya angka. Kamu bisa menulis JavaScript untuk mengecek setiap field, tapi untuk sebagian besar aturan kamu tidak perlu. Tambahkan beberapa atribut dan browser akan mengecek formulirnya sebelum dikirim, lalu menunjukkan ke pengguna apa yang salah:

<form>
  <label for="code">Voucher code (6 letters or digits)</label>
  <input id="code" name="code" required pattern="[A-Z0-9]{6}" maxlength="6">
  <label for="amount">Amount (Rp)</label>
  <input id="amount" name="amount" type="number" min="10000" step="1000" required>
  <button>Apply</button>
</form>

required, min, max, minlength, maxlength, step, pattern, dan type input dicek oleh browser sebelum formulir dikirim, dengan pesan error dalam bahasa pengguna. JavaScript juga bisa bertanya: input.checkValidity() mengembalikan true atau false.

Validasi browser adalah untuk kenyamanan pengguna. Siapa pun bisa melewatinya, jadi server harus selalu memvalidasi lagi (seperti yang kamu lakukan di track Flask).

Mengapa ini penting untuk kode yang bersih

Formulir dengan markup yang baik hanya butuh sedikit sekali JavaScript: browser yang menangani keyboard, validasi, dan aksesibilitas. Setiap atribut yang kamu tambahkan (type="email", required, autocomplete="email") adalah satu baris JavaScript yang tidak perlu kamu tulis, tes, dan rawat.

Rangkuman

• <form action method>: get untuk pencarian, post untuk perubahan.
• Input butuh name (key datanya) dan <label> (lewat for/id atau dibungkus). Placeholder bukan label.
• Tipe: email, number, tel, date, password, search, checkbox, radio.
• <select>/<option>, radio yang berbagi name di dalam <fieldset> + <legend>, <textarea>.
• required, min, max, pattern... untuk validasi browser; selalu validasi juga di server.