Formularze HTML to podstawowy element każdej witryny, a jednocześnie kawałek kodu, z którym niełatwo się pracuje. Korzystają z wyspecjalizowanych znaczników i atrybutów, a przy okazji zacierają granicę między statyczną treścią a interakcją z użytkownikiem. Formularze często łamią przyzwyczajenia odwiedzających twoją witrynę czy aplikację i przez to potrafią mocno irytować. Te cztery dobre praktyki pomogą ci, jako deweloperowi albo projektantowi, budować formularze bardziej intuicyjne i mniej frustrujące dla użytkowników.
Nadawaj polom formularza HTML legendę
Trudno uzasadnić użycie znacznika fieldset, jeśli nie nadamy mu nazwy. Powyższy kod poprawimy, opisując fieldset elementem legend. Legenda ląduje na obramowaniu elementu fieldset, który domyślnie takie obramowanie ma.
<fieldset>
<legend>Adresse de facturation</legend>
<span>Nom</span><input type="text" name="nom"/>
<span>Prénom</span><input type="text" name="prenom"/>
<span>Adresse</span><input type="text" name="adresse"/>
<span>Complément d'adresse</span><input type="text" name="adresse2"/>
<span>Ville</span><input type="text" name="ville"/>
<span>Département</span><input type="text" name="departement"/>
<span>Pays</span><input type="text" name="pays"/>
</fieldset>⚠️ Stawiaj na etykiety label w formularzach HTML
Opisywanie pól znacznikiem span samo w sobie nie jest błędem, ale znacznik label pasuje do tego zadania zdecydowanie lepiej.
<fieldset>
<legend>Adresse de facturation</legend>
<label>Nom</label><input type="text" name="nom"/>
<label>Prénom</label><input type="text" name="prenom"/>
<label>Adresse</label><input type="text" name="adresse"/>
<label>Complément d'adresse</label><input type="text" name="adresse2"/>
<label>Ville</label><input type="text" name="ville"/>
<label>Département</label><input type="text" name="departement"/>
<label>Pays</label><input type="text" name="pays"/>
</fieldset>Dodawaj etykietom atrybut for
Atrybut for pozwala powiązać <label> z konkretnym <input>. Identyfikator pola, z którym chcesz powiązać etykietę, musi być taki sam jak wartość atrybutu for.
<fieldset>
<legend>Adresse de facturation</legend>
<label for="nom">Nom</label><input id="nom" type="text" name="nom"/>
<label for="prenom">Prénom</label><input id="prenom" type="text" name="prenom"/>
<label for="adresse">Adresse</label><input id="adresse" type="text" name="adresse"/>
<label for="adresse2">Complément d'adresse</label><input id="adresse2" type="text" name="adresse2"/>
<label for="ville">Ville</label><input id="ville" type="text" name="ville"/>
<label for="departement">Département</label><input id="departement" type="text" name="departement"/>
<label for="pays">Pays</label><input id="pays" ype="text" name="pays"/>
</fieldset>Grupuj opcje selecta znacznikiem optgroup
Optgroup to mało znany element, który pozwala wciąć opcje i nadać im nagłówek. Atrybut label znów jest tu niezbędny.
<select>
<optgroup label="France">
<option>Paris</option>
<option>Lille</option>
<option>Lyon</option>
</optgroup>
<optgroup label="Espagne">
<option>Madrid</option>
<option>Bercelone</option>
<option>Valence</option>
</optgroup>
</select>Podsumowanie
Dzięki tym wskazówkom lepiej ustrukturyzujesz swoje formularze HTML i łatwiej je sformatujesz, a użytkownicy szybciej się w nich odnajdą. Jeśli ten artykuł ci się przydał, zajrzyj też do tekstu o błędach HTML, których lepiej unikać.
A jeśli brakuje ci jeszcze podstaw języka, sekcja o formularzach w artykule Nauka HTML-a przypomina duet <label for> / id oraz atrybut name, bez którego pole nie wyśle niczego.
