Corsi on-line

L’attributo placeholder di HTML5

Tra le novità introdotte da HTML5 vi è l’attributo placeholder pensato appositamente per i form, esso infatti consente di mostrare un breve messaggio all’interno delle caselle di  testo e delle textarea, nel momento in cui una determinata casella riceve il focus, il messaggio scompare e viene sostituito dal testo digitato dall’utilizzatore.

L'attributo placeholder

Diciamo subito che placeholder non sostituisce l’elemento label, che deve continuare ad essere definito per i campi di input, in secondo luogo introduciamo una piccola funzioncina di controllo in JavaScript che ci permetterà di scoprire se il browser corrente supporta questo attributo:

function hasPlaceholderSupport() {
  var input = document.create('input');
  return ('placeholder' in input);
}

Placeholder è stato introdotto per motivi legati all’usabilità e all’accessibilità dei form, sfortuna vuole che il tenue colore di default per i messaggi sia tutt’altro che accessibile, è quindi necessario agire tramite i CSS per aumentarne il contrasto con gli altri elementi di pagina; purtroppo il supporto da parte dei browser non è standard, quindi sarà necessario definire stili diversi per i vari programmi, ad esempio:

::-webkit-input-placeholder { color:#f00; }
input:-moz-placeholder { color:#f00; }

La prima istruzione permetterà la formattazione di placeholder per la visualizzazione sui browser basati su WebKit come Safari e Chrome, la seconda è invece specifica per Firefox in versione 4, IE9 non supporta questo attributo mentre Opera lo supporta ma non accetta modifiche di stile per esso.

Post correlati
I più letti del mese
Tematiche