I form HTML sono un elemento essenziale dei siti web, ma sanno essere ostici. Non solo usano elementi e attributi HTML specifici: sfumano anche il confine tra contenuto statico e interazione con l’utente. I form spesso rompono le abitudini con cui le persone si aspettano di usare il tuo sito o la tua applicazione, e finiscono per diventare una fonte di frustrazione. Queste quattro buone pratiche ti aiuteranno, come sviluppatore o designer, a progettare form più intuitivi e meno frustranti per chi li compila.
Usare una legenda per i campi del form HTML
È difficile giustificare l’uso di un fieldset senza dargli un nome. Possiamo migliorare il codice qui sopra intitolando il fieldset con l’elemento legend. La legenda si posiziona sopra il bordo del fieldset, che ha un bordo predefinito.
<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>⚠️ Preferire i label nei tuoi form HTML
Usare uno span per etichettare i campi non è sbagliato, ma il tag label è per natura più adatto.
<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>Dare ai label l’attributo for
L’attributo for permette di associare un <label> a un <input>. L’identificatore del campo a cui vuoi collegarlo deve corrispondere al valore di 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>Usare optgroup per raggruppare le opzioni di un select
L’optgroup è un elemento poco conosciuto che permette di indentare e intitolare le opzioni. Anche qui l’attributo label è indispensabile.
<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>Conclusione
Con questi accorgimenti dovresti riuscire a strutturare meglio i tuoi form HTML e a renderne più semplice la formattazione, così che i tuoi utenti li capiscano al primo colpo. Se l’articolo ti è piaciuto, ti consiglio di leggere anche quello sugli errori HTML da evitare.
E se ti mancano ancora le basi del linguaggio, la sezione dedicata ai form in Imparare l’HTML torna sulla coppia <label for> / id e sull’attributo name, senza il quale un campo non invia nulla.
