Vediamo come si usa il placeholder e come può essere facilmente formattato tramite sintassi CSS. Cosa cambia rispetto al vecchio attributo value? Anche se in apparenza placeholder e value ottemperano allo stesso scopo, il placeholder ha una maggiore valenza semantica. Come dice la parola stessa, esso è un segnaposto in attesa di essere valorizzato in via definitiva. Il value invece offre un contenuto vero e proprio in partenza, come se qualcuno lo avesse scritto in anticipo per noi.

Ci accorgeremo della leggera differenza cliccando dentro il campo con l'attributo placeholder: alla prima lettera digitata vedremo scomparire il testo segnaposto a vantaggio del nostro testo. In presenza di un attributo value invece dovremo cancellare il contenuto e riscriverci sopra, a meno di utilizzare qualche semplice funzione JavaScript di replace.

Ecco un esempio di codice HTML:
<input type="text" name="indirizzo" placeholder="Inserire via, numero civico e cap">

Per formattare il testo del placeholder potremo utilizzare la pseudo-classe CSS input-placeholder in questo modo:
::-webkit-input-placeholder { color: #166399; font-style:italic;}
::-moz-input-placeholder { color: #166399; font-style:italic;}
::-ms-input-placeholder { color: #166399; font-style:italic;}

I 3 prefissi proprietari sono purtroppo indispensabili in quanto nessun browser riuscirebbe altrimenti ad eseguire il corretto rendering. In questo modo invece il supporto è garantito pressoché ovunque, ad eccezione degli obsoleti IE8 e IE9.

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *