Tutorial HTML / Mengelompokkan formulir dengan fieldset, legend, dan autocomplete

Gunakan fieldset untuk mengelompokkan elemen formulir terkait, dan legend untuk menunjukkan pertanyaan kelompok. Untuk kolom seperti nama atau alamat email seseorang, token autocomplete yang sesuai dapat memberi tahu browser informasi apa yang diminta oleh kolom tersebut.

Gabungkan sebuah pertanyaan dengan fieldset dan legend

Label individu pada tombol radio menjelaskan jawaban, tetapi pengguna juga membutuhkan pertanyaan yang terkait dengan jawaban tersebut. legend menyediakan nama grup ini. Bandingkan input radio dan kotak centang, termasuk kontrol yang tidak dipilih, di Pilihan jenis input untuk email, angka, tanggal, dan pilihan .

<fieldset>
  <legend>Bagaimana kami bisa menghubungi Anda?</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Telepon</label>
</fieldset>

Buka contoh di browser: secara default, sebuah bingkai dan label dapat muncul. CSS dapat mengubah tampilan ini tanpa menghilangkan relasinya. Kedua tombol radio berbagi name="contact", sehingga memilih satu opsi akan membatalkan pilihan yang lain. Gunakan fieldset yang terpisah untuk pertanyaan lain dan nama grup radio yang berbeda; jika tidak, memilih jawaban pada satu pertanyaan dapat menghapus jawaban pada pertanyaan lain.

Jelaskan tujuan dari sebuah bidang masukan dengan fitur pengisian otomatis

<form action="/contact" method="post">
  <fieldset>
    <legend>Detail kontak</legend>
    <label for="full-name">Nama lengkap</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Alamat email</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Kirim</button>
</form>

autocomplete="name" dan autocomplete="email" menjelaskan tujuan dari bidang-bidang. Mereka tidak menetapkan nilai tetap dan tidak mengirimkan informasi atas nama pengguna. Keberadaan saran bergantung pada pengaturan browser dan informasi yang disimpan. Atribut name adalah kunci sisi server; token autocomplete adalah petunjuk tentang tujuan penggunaan input. /contact adalah jalur ilustratif dan memerlukan pengelola sisi server. Tujuan pengisian otomatis tidak menggantikan pencocokan Label dan ID yang dijelaskan dalam label dan input .

Menguji kelompok dan tujuan input yang independen

Simpan sebagai groups.html dan pilih Email dan Pagi. Kedua pilihan harus bisa ada bersamaan, karena kelompok menggunakan nilai nama yang berbeda.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan tentang kelompok</title>
</head>
<body>
  <h1>Jawablah dua pertanyaan yang independen</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Cara menghubungi</legend>
      <label><input type="radio" name="contact" value="email" required> Email</label>
      <label><input type="radio" name="contact" value="phone"> Telepon</label>
    </fieldset>
    <fieldset>
      <legend>Jam kunjungan</legend>
      <label><input type="radio" name="visit" value="morning" required> Pagi</label>
      <label><input type="radio" name="visit" value="afternoon"> Sore</label>
    </fieldset>
    <button type="submit">Periksa kedua jawaban</button>
  </form>
</body>
</html>

Ganti sementara name="visit" dengan name="contact" di kedua tombol radio kelompok kunjungan. Jika Anda memilih satu jawaban, jawaban dari pertanyaan lain akan dihapus: name yang sama mendefinisikan grup radio. Kembalikan name="visit" setelah perbandingan.

Pilih token yang sesuai dengan informasi yang diminta. autocomplete="postal-code" tidak memvalidasi format kode pos, dan peramban tanpa informasi tersimpan mungkin tidak dapat menampilkan saran.

Periksa pengelompokan dan pengisian otomatis

Jangan menempatkan pertanyaan yang tidak relevan dalam fieldset yang sama, dan jangan sebarkan pertanyaan pilihan tunggal tanpa nama grup. Gunakan token autocomplete yang sudah ditentukan, bukan kata-kata sembarangan. Uji dua grup independen dari tombol opsi: Jika memilih jawaban di grup kedua menghapus jawaban di grup pertama, besar kemungkinan nilai name mereka tanpa sengaja sama. Fungsi isi otomatis tidak memeriksa data pengguna, dan formulir yang mengumpulkan data pribadi selalu membutuhkan praktik keamanan dan privasi yang tepat. Lihat referensi MDN autocomplete dan referensi fieldset.