Submit w bloku fieldset czy poza nim ?

Question

Witam!

    Mam takie pytanie ponieważ mam już mętlik w głowie. <fieldset><fieldset> ten blok jest do oddzielenia danych w formularzu tzn. jeżeli mamy pola mające wysłać dane z informacją o osobie a następie input który wysyła np. informacje który jest dzień tygodnia to umieszczamy to w osobnych fieldsetach. Zgadza się ?

Tylko co z przyciskiem <input type="submit"> ? Czy on powinien być poza fieldset'ami tak jak w kodzie poniżej ? Tak czy tak to będzie działać ale czy jest jakieś odgórne ustalenie jak to powinno być ?

<form>
    <fieldset>
       <legend>Dane</legend>
      
       <input type="text" value="data">
    </fieldset>

   <input type="submit">
</form>

 

Answer 1

Zgadza się, fieldset służy do semantycznego grupowania pól i przy okazji dodaje ramkę dookoła. Nie wpływa w żaden sposób na działanie formularza. Przycisk submit może być zarówno z tym znaczniku, jak i poza nim. Wszystko zależy od Ciebie, jak Ci się bardziej podoba.
https://developer.mozilla.org/pl/docs/Web/HTML/Element/fieldset

Comments

Wpływa. Można blokować całe fieldsety przed wysyłką. Dodatkowo czytniki ekranowe mogą inaczej czytać inputy wewnątrz fieldsetów (czytać legend jako część etykiety każdego pola).

---

Moim zdaniem, w domyślnym zastosowaniu, ustawienie fieldset nie wpływa na formularz, oczywiście można blokować, ale trzeba napisać dodatkowo kod. Tak samo mogę sobie napisać kod np. w JS, aby mi blokowało dowolne pole w formularzu, a to nie znaczy, że stosowanie np. inputa wpływa na działanie formularza.
Zgadzam się natomiast, że fieldseta najlepiej używać do grupowania pól wyboru, choć w specyfikacji W3C nie ma jasno określone, co można grupować w fieldset a czego nie. Podobnie jak z przyciskiem typu submit.

---

Moim zdaniem, w domyślnym zastosowaniu, ustawienie fieldset nie wpływa na formularz

Wpływa, jest inna semantyka. fieldset jest przedstawiany AT jako grupa. 

---

A tak zgadza się, zapomniałem o słowie "działanie".Mniejsza z tym...w każdym razie masz rację i na tym pozostańmy :)

---

Zaraz bo już się pogubiłem a z powodu mętliku bo raz widzę tak a raz tak to potrzebuję jasnego wyjaśnienia w jaki sposób wpływa na fieldset przycisk typu submit, reset etc. Z waszych wypowiedzi wynika że submit, reset etc. lepiej zastosować kod który przedstawiłem czyli poza fieldset'em. Ale jaki wpływ to ma ? "AT" ?

---

Ogólnie submit służy do zatwierdzenia/wysyłania formularza i nie powinien być związany z jakimiś polami formularza przez fieldset.
Po prostu stosuj tak, jak napisałeś i już.

---

Trzecie rozwiązanie które widziałem to umieszczenie submit'a etc. w osobnym bloku fieldset ale na zdrowy rozum to robot czytający stronę może dziwnie zinterpretować legend w tym bloku i same przyciski.

---

Przycisk nie nadaje się do fieldset choćby z tego powodu, że jest jeden, a fieldset służy do grupowania elementów formularza. Z jednego elementu grupy nie zrobisz.

AT – Assistive Technology, czyli m.in. czytniki ekranowe.

---

A jak ma się do tego div w którym wyświetlane są informacje o błędach w input'ach w formularzu ? Taki div też powinien być poza fieldset'em ?

<form>
     <fieldset>
     </fieldset>

     <div class="error-div" aria...>
        <a>Wpisz nazwe czegoś tam...>
     </div>

     <input type="submit">
</form>

 

---

Ja bym dał poza.

---

Racja, na zdrowy rozum to jeżeli taki div zawiera informacje o błędach z wszystkich inut'ów to nielogiczne jest przyporządkowanie go do jednego z fieldset'ów skoro może one zawierać błędy z pozostałych fieldset'ów.

A jeżeli jest informacja do fieldset'u dla użytkownika strony która tyczy się fieldset'u to powinna ona być w nim ?

<form>

     <fieldset>
         <legend>Opis</legend>

         <label>Dane:</label>
         <input type="text">

         <a>W tym inpucie musi być co najmniej jedna liczba i litera</a>

      </fieldset>

      <input type="submit">

</form>

 

---

Wypada sprawdzić, co zostanie sensowniej przeczytane przez czytnik ekranowy

Answer 2

fieldset na dobrą sprawę najlepiej używać wyłącznie do grupowania checkboxów i przycisków radio, względnie dużych grup inputów powiązanych z jedną rzeczą (np. adres dostawy).

Teoretycznie przycisk wysyłania nie pasuje do fieldset.