Form dan validasi di browser

Form adalah cara data masuk ke aplikasimu, yang menjadikannya UI terpenting yang kamu bangun sekaligus tempat di mana keamanan benar-benar penting. Platform-nya memberi lebih banyak daripada yang dipakai sebagian besar developer.

<form method="post" action="/api/bookings">
  <label for="guests">Number of guests</label>
  <input
    id="guests"
    name="guests"            <!-- name is what gets SUBMITTED. Without it: nothing. -->
    type="number"
    min="1" max="10"
    required
    inputmode="numeric"      <!-- a numeric keypad on phones -->
  />

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

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

Memilih type yang tepat memberimu keyboard yang sesuai di ponsel, validasi gratis, dan pembacaan yang benar oleh teknologi bantu. type="email" di ponsel menampilkan keyboard dengan @ — hal kecil yang secara terukur meningkatkan tingkat penyelesaian form.

Validasi bawaan

<input required />                        <!-- must not be empty -->
<input type="email" />                    <!-- must look like an email -->
<input type="number" min="1" max="10" />  <!-- must be in range -->
<input minlength="8" maxlength="200" />
<input pattern="[0-9]{5}" />              <!-- must match the regex -->

Browser memblokir pengiriman dan menampilkan pesan, dalam bahasa penggunanya sendiri, tanpa satu baris kode dari kamu. Lalu itu berhenti mencukupi — karena dua alasan yang berbeda.

• Pesannya bukan milikmu. Kamu tidak bisa memberi style, mengatur posisi, atau menyusun kalimatnya, dan bunyinya berbeda antar browser.
• Itu bukan kontrol keamanan. Siapa pun bisa menghapus atributnya di DevTools, mematikan JavaScript, atau melewati halamanmu sama sekali lalu mengirim data dengan curl.

Membaca nilainya

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const data = new FormData(form);

  data.get("guests");            // "3" - always a STRING
  data.get("missing");           // null
  data.getAll("tags");           // an array, for checkboxes sharing a name
  Object.fromEntries(data);      // a plain object, handy for logging

  // Everything arrives as a string. Convert and validate deliberately.
  const guests = Number(data.get("guests"));
  if (!Number.isInteger(guests) || guests < 1) return;
});

Melaporkan error secara aksesibel

Border merah itu tidak terlihat oleh screen reader dan oleh pengguna buta warna. Tiga atribut membuat pesan error benar-benar sampai ke semua orang.

<label for="email">Email</label>
<input
  id="email"
  name="email"
  aria-invalid="true"              <!-- this field is in an error state -->
  aria-describedby="email-error"   <!-- read THIS when announcing the field -->
/>
<p id="email-error" role="alert">
  That does not look like an email address.
</p>

• Jangan hanya pakai warna. Sertai dengan ikon atau teks, supaya tetap terbaca oleh pengguna buta warna.
• Jangan validasi di setiap ketikan. Memberi tahu seseorang email-nya tidak valid saat ia masih mengetik karakter ketiga itu tidak ramah. Validasi saat blur, atau saat submit.
• Simpan apa yang sudah mereka ketik. Form yang mengosongkan dirinya sendiri saat error adalah cara tercepat kehilangan pelanggan.
• Jelaskan cara memperbaikinya. "Input tidak valid" tidak membantu siapa pun; "Password minimal 8 karakter" iya.
• Pindahkan fokus ke error pertama saat submit, supaya pengguna keyboard dibawa langsung ke sana.