HTML5 e l’attributo placeholder

L’attributo placeholder di HTML5 è utile, ma non può sostituire le label di testo all’interno dei form.

L’attributo placeholder di HTML5 è una novità molto utile: consente infatti di visualizzare un breve suggerimento all’interno di un campo input testuale. Se in passato avevate usato l’attributo value abbinato a del codice JavaScript, adesso non è più necessario. Basta aggiungerlo in questo modo:

<label for"nome">Nome:</label>
<input type="text" name="nome" placeholder="Inserisci il tuo nome">

Il risultato sarà simile a questo:

C’è però un dettaglio non indifferente da ricordare: l’attributo placeholder non può sostituire la label di testo. Questo semplicemente perché iniziando a compilare il campo il placeholder scompare, e non si hanno più indicazioni su quale contenuto inserire. In alcuni browser sparisce addirittura al focus.

Leggendo la documentazione del W3C, le indicazioni sono chiare:

The placeholder attribute should not be used as an alternative to a label.

In sintesi: il placeholder è comodo, spesso semplifica la vita e può essere utilizzato facilmente per visualizzare dei suggerimenti, ma per indicare il contenuto di un campo la label resta di primaria importanza. Dovrebbe infatti essere utilizzato per contenuti testuali opzionali, come il title.

Se proprio non è possibile visualizzare la label, questa dovrebbe almeno essere presente nel codice HTML e nascosta tramite CSS in modo che almeno gli screen reader la possano leggere. Ci sono poi delle eccezioni come i campi di ricerca, dove basta una semplice icona per far capire lo scopo del form.

Per dare un aspetto grafico differente all’attributo placeholder potete seguire questa guida di David Walsh, ma non vi consiglio di spingervi troppo oltre con le personalizzazioni, anche perché non tutti i browser offrono questa possibilità.