Mengapa kita membutuhkan tag fieldset?

Mengapa kami membutuhkan <fieldset>tag? Apa pun tujuan yang dilayaninya mungkin merupakan bagian dari tag formulir.

Saya mencari beberapa info tentang W3Schools, yang mengatakan:

• The <fieldset>tag digunakan untuk elemen kelompok terkait dalam formulir.
• The <fieldset>tag menarik sebuah kotak di sekitar elemen terkait.

Penjelasan lebih lanjut untuk mereka yang salah "mengapa ada dalam spesifikasi" untuk "apa fungsinya". Saya pikir bagian gambar tidak relevan, dan saya tidak melihat mengapa kita perlu tag khusus hanya untuk mengelompokkan beberapa elemen terkait dalam formulir.

Contoh paling nyata dan praktis adalah:

<fieldset>
  <legend>Colour</legend>

  <input type="radio" name="colour" value="red" id="colour_red">
  <label for="colour_red">Red</label>

  <input type="radio" name="colour" value="green" id="colour_green">
  <label for="colour_green">Green</label>

  <input type="radio" name="colour" value="blue" id="colour_blue">
  <label for="colour_blue">Blue</label>

</fieldset>

Ini memungkinkan setiap tombol radio untuk diberi label sambil juga memberikan label untuk grup secara keseluruhan. Ini sangat penting di mana teknologi bantuan (seperti pembaca layar) sedang digunakan di mana asosiasi kontrol dan legenda mereka tidak dapat tersirat oleh presentasi visual.

Fitur lain dari fieldset adalah menonaktifkannya menonaktifkan semua bidang yang ada di dalamnya.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

Itu diperlukan untuk aksesibilitas.

Lihat: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

Elemen HTML 4 fieldset dan legendmemungkinkan Anda untuk tata letak dan mengatur formulir besar dengan berbagai bidang yang menarik secara logis tanpa menggunakan tabel. The fieldsettag dapat digunakan untuk membuat kotak di sekitar elemen yang dipilih dan legendtag akan memberikan keterangan ke elemen-elemen. Dengan cara ini elemen formulir dapat dikelompokkan bersama ke dalam kategori yang diidentifikasi.

Browser yang berbeda dapat menampilkan fieldsetbatas default dengan cara yang berbeda. Cascading Style Sheets dapat digunakan untuk menghapus perbatasan atau mengubah tampilannya.

Seperti dijelaskan di sini , tujuan tag ini adalah untuk memberikan kejelasan pada organisasi formulir dan memungkinkan perancang akses yang lebih mudah untuk menghias elemen formulir.

Fieldset mengatur item dalam bentuk secara logis tetapi juga meningkatkan aksesibilitas bagi mereka yang menggunakan browser aural. Fieldset berguna dan karena itu sangat populer di masa lalu dalam banyak aplikasi sehingga mereka mengimplementasikannya dalam html juga.

Saya suka bahwa ketika Anda mengelilingi radio Anda dengan fieldset, dan Anda tidak meletakkan id pada tag input tombol radio Anda, maka grup yang diwakili oleh fieldset ditambahkan ke tabchain seolah-olah itu adalah satu item.

Ini memungkinkan Anda tab melalui formulir, dan ketika Anda sampai ke fieldset, Anda bisa menggunakan tombol panah untuk mengubah radio yang dipilih, dan kemudian tab pergi ketika Anda selesai.

Juga, jangan lupa aksesibilitas. Pembaca layar perlu legenda setset + legenda untuk memahami formulir Anda dan dapat membacanya ke pengguna dengan cara alami. Jangan ragu untuk menghilangkan legenda jika Anda tidak ingin pengguna yang melihatnya melihatnya. Legenda lay out dan styling tepat dengan CSS kadang-kadang lintas-browser tidak pasti terutama dengan browser lama, jadi saya menemukan membuat tag legenda tidak terlihat untuk pengguna pembaca layar dan menambahkan rentang terpisah, aria-hidden = "true" yang ditata seperti label untuk pengguna terlihat membuat hal-hal sederhana untuk ditata dan membuat hal-hal dapat diakses.

Saya merasa berguna untuk styling CSS dan menghubungkan label dengan kontrol. Ini membuatnya mudah untuk menempatkan wadah visual di sekitar sekelompok bidang dan meluruskan label.

Saya menggunakan fieldset untuk mengelompokkan input formulir, ketika saya memiliki formulir besar dan ingin memecahnya dalam semacam form wizard.

Pertanyaan yang sama dijawab di sini pada SO.

Hanya meringkas beberapa keuntungan:

<fieldset> Elemen HTML  digunakan untuk mengelompokkan beberapa kontrol serta label ( <label>) dalam formulir web seperti yang didefinisikan oleh MDN .

Dengan kata lain: Tag fieldset memungkinkan Anda mengelompokkan kumpulan bidang secara logis agar formulir Anda lebih deskriptif. Jadi, satu set kontrol bentuk secara opsional dikelompokkan di bawah nama umum.

<fieldset>
  <legend>Choose your favorite animal</legend>

  <input type="radio" id="dog" name="animal">
  <label for="dog">Dog</label><br/>

  <input type="radio" id="cat" name="animal">
  <label for="cat">Cat</label><br/>
</fieldset>

" Keuntungan " menggunakan fieldset adalah:

• mereka memungkinkan Anda untuk menandai data Anda (dalam hal ini formulir) di paling semantik tersedia. Pertimbangkan bahwa menempatkan bidang Anda di bidang lebih bersifat deskriptif daripada menempatkan bidang Anda di div. Div tidak memberi tahu Anda apa pun tentang hubungan antara bidang, satu bidang memberitahu Anda bahwa ada hubungan.
• dengan menggunakan dinonaktifkan , ini memungkinkan Anda untuk menonaktifkan dan semua isinya dalam sekali jalan.
• ini membantu aksesibilitas

Bagi saya, salah satu keuntungan terbesar dari <fieldset>...</fieldset>elemen ini adalah kemampuan untuk mempertahankan <form>...</form>konteks bahkan jika <fieldset>...</fieldset>tidak ada di dalam formulir.

Misalnya, formulir berikut:

<div class="header">
    <form id="myForm">
        <input type="text" name="someInput">
    </form>
</div>

<div class="footer">
    <fieldset form="myForm">
        <input type="text" name="someInput1">
    </fieldset>
</div>

secara semantik identik dengan bentuk berikut:

<form>
    <input type="text" name="someInput">
    <input type="text" name="someInput1">
</form>