Page 96 - Guida tascabile HTML5

Figura 6.1 Le sezioni identificate con <fieldset> nel markup del form sono separate
nel rendering.

Nidificati nel tag <form> sono presenti due tag <fieldset>, all’interno dei quali è
per prima cosa inserito un tag <legend>, opzionale, che dà il nome alla sezione,

seguito dal markup vero e proprio dei campi modulo (per brevità sostituito con ...
nell’esempio).
Il tag <fieldset> prevede l’attributo disabled che, quando specificato, inibisce la

compilazione di tutti i campi in esso contenuti: può essere un sistema utile agli

sviluppatori che, associando script adeguati, possono far reagire il form a

determinati input dell’utente. Nell’esempio qui di seguito l’utente avrà la
possibilità di compilare solo la prima sezione del form.

<form>
<fieldset>
<legend>Dati personali</legend>
...
</fieldset>
<fieldset disabled>
<legend>Residenza</legend>
...
</fieldset>
</form>
Altri attributi specifici del tag <fieldset> sono form, all’interno del quale è

possibile specificare l’id del form a cui il gruppo di campi appartiene (una pratica

poco utilizzata consiste nell’inserire fieldset nella pagina all’esterno del relativo

tag <form>), e name, utile per poi fare riferimento all’elemento stesso con
JavaScript.

I controlli principali con il tag <input>

Con il tag <input> è possibile predisporre i campi interattivi che gli utenti

andranno a compilare: la sua grande versatilità ne fa la soluzione ideale per i casi

d’uso più diffusi. Inoltre la specifica HTML5 ha ampliato le tipologie di dati
previsti, permettendo agli sviluppatori di ottimizzare l’esperienza di utilizzo anche

per le piattaforme touch e mobile.

RIFERIMENTO Prima di addentrarci nella descrizione delle potenzialità del tag <input>
è utile un accenno al tag <label>, che, associato a esso, permette di assegnare a ogni
campo un’etichetta, utile per descrivere all’utente il contenuto del controllo in

questione. Assegnando un attributo for a questo tag, con valore uguale a quello dell’id