Form HTML: Field, action, method, fieldset dan Validasi

Cara membuat form di HTML

Form adalah elemen <form> yang berisi field-field dan tombol submit. Setiap field butuh name: itulah kunci yang dipakai untuk mengirim nilainya. Isi form-nya lalu tekan Send. Pratinjau tidak mengirim apa pun ke mana pun; pratinjau menampilkan persis apa yang akan dikirim browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Bagian-bagiannya:

• action adalah URL tujuan data, dan method adalah caranya (post di sini).
• name di setiap field. Nilainya adalah apa yang diketik pembaca.
• <label> memberi nama setiap field di layar dan untuk screen reader (lihat label HTML).
• required dan type="email" membuat browser memeriksa field sebelum mengirim. Coba kirim dengan nama kosong, atau dengan abc sebagai email.
• Tombol submit mengirim form. Menekan Enter di field teks juga melakukannya.

action dan method: ke mana dan bagaimana data dikirim

Dengan method="get", field-field menjadi query string di URL: form pencarian dengan name="q" menuju /search?q=blue+shoes. Itu tepat untuk pencarian dan filter, karena hasilnya bisa di-bookmark dan dibagikan. Dengan method="post", field-field masuk ke body request dan tidak muncul di address bar atau riwayat. Pakai POST untuk apa pun yang melakukan login, membuat, mengubah, atau menghapus sesuatu, dan untuk password.

Form dengan upload file (<input type="file">) butuh method="post" dan enctype="multipart/form-data", kalau tidak, yang dikirim hanya nama file-nya. method="dialog" adalah untuk form di dalam <dialog>: mengirim form akan menutup dialog, bukan mengirim request.

Apa saja yang dikirim

Hanya field yang punya name yang dikirim, dan hanya saat field itu tidak disabled. Tekan Submit lalu bandingkan field-fieldnya dengan apa yang dikirim form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

Form mengirim city, zip, source dan action. Field tanpa name, field yang disabled, dan checkbox yang tidak dicentang tidak ikut. Input hidden dikirim tapi tidak pernah ditampilkan, dan tombol submit mengirim name dan value-nya sendiri karena tombol itulah yang dipakai.

Mengelompokkan field dengan fieldset dan legend

<fieldset> menggambar kotak di sekitar field yang saling berkaitan, dan <legend> adalah judulnya. Screen reader mengumumkan legend saat fokus masuk ke grup, itulah yang membuat sekumpulan radio button seperti di bawah ini bisa dipahami: "Delivery, Standard, radio button".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled di fieldset menonaktifkan semua field di dalamnya sekaligus, dan tidak ada satu pun yang dikirim. Hapus atribut itu dan field hadiah bisa dipakai.

Validasi bawaan: required, pattern dan kawan-kawannya

Browser memeriksa atribut-atribut ini sebelum mengirim form dan menampilkan pesan di field pertama yang gagal:

:invalid dan :valid memberi gaya field berdasarkan statusnya. :user-invalid biasanya lebih baik: gaya ini baru berlaku setelah pembaca mengubah field lalu pindah, atau mencoba mengirim form, jadi form yang masih kosong tidak langsung penuh warna merah.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

Ada tiga hal tentang pattern yang sering menjebak. Pola harus cocok dengan seluruh nilainya (tidak perlu ^ atau $). Pola hanya dijalankan saat field tidak kosong, jadi pasangkan dengan required. Dan pesan error dari browser bersifat umum, jadi jelaskan formatnya dengan teks yang terlihat di samping field. Chrome dan Firefox menambahkan teks title ke pesannya, tapi mudah terlewat.

Untuk mematikan pemeriksaan, misalnya saat kamu menguji validasi di server, tambahkan novalidate ke <form>. Satu tombol submit bisa melewatinya dengan formnovalidate.

Validasi browser adalah untuk kenyamanan pembaca. Siapa pun bisa mengedit halaman atau mengirim request tanpa validasi itu, jadi server harus memeriksa ulang setiap nilai.

Pesan sendiri dengan setCustomValidity

Saat sebuah aturan tidak bisa ditulis sebagai atribut, seperti "kedua password harus sama", atur pesannya dari JavaScript. Field dengan pesan kustom yang tidak kosong dianggap tidak valid; string kosong membuatnya valid lagi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

Field pengulangan tidak punya name, jadi hanya satu salinan password yang dikirim.

Menangani submit di JavaScript

Untuk mengirim form tanpa meninggalkan halaman, dengarkan submit, panggil preventDefault(), dan baca field-fieldnya dengan FormData. Mendengarkan submit, bukan click di tombol, menangkap semua cara mengirim form, termasuk Enter, dan baru berjalan setelah validasi bawaan lolos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) mengubah field-field menjadi object biasa. Untuk field yang bisa punya beberapa nilai (checkbox dengan name yang sama, select multiple), pakai formData.getAll('name'), karena object hanya menyimpan nilai terakhir.

Kesalahan umum

• Field tanpa name. Field itu diam-diam tidak ikut dalam data yang dikirim.
• Placeholder sebagai pengganti label. Petunjuknya hilang begitu pembaca mengetik. Pakai <label>.
• <button> tanpa type yang dipakai untuk hal lain selain mengirim form. Di dalam form, tombol itu adalah tombol submit.
• Form di dalam form. Form bersarang tidak valid; browser mengabaikan tag <form> yang di dalam.
• Mendengarkan click di tombol submit, bukan submit di form. Pengiriman dengan tombol Enter jadi terlewat.
• Mengandalkan validasi browser di sisi server. Validasi lagi di sana.
• GET untuk password. Password jadi tercatat di URL, riwayat, dan log server.