Come inserire una label dentro un campo input con Html 5

Spesso, quando si realizza un Form, si ha la necessità di inserire delle label all’interno dei campi input e textarea che devono scomparire nel momento della compilazione.
Questa operazione viene realizzata utilizzando script basati su jquery che vanno ad interagire con i campi input modificandone il parametro Value.
Chi non fosse pratico di jquery potrà avvalersi delle potenzialità dell’HTML 5 che attraverso il parametro placeholder vi consentirà di inserire in modo semplice le label all’interno dei campi input e textarea.

Il tag da utilizzare sarà il seguente:

<input name="campoTesto" type="text" placeholder="Campo testo" />

Il campo Placeholder dovrà essere personalizzato inserirendo il testo che volete venga visualizzato.

Nel momento in cui utilizzerete questo metodo vi accorgerete che il testo del placeholder viene formattato con degli stili predefiniti che potranno essere adattati a vostro piacimento utilizzando gli pseudo selectors dei CSS e garantendo  la compatibilità grafica con la maggior parte dei browser moderni come Safari, Chrome, Firefox e IE.

Di seguito vi riporto un esempio di CSS dove ho impostato il carattere in maiuscolo grassetto con una dimensione di 14 pixel di colore grigio e con allineamento centrato.

::-webkit-input-placeholder {
 font-size: 14px;
 color: #cccccc;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { /* older Firefox*/
 font-size:14px;
 color: #cccccc;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { /* Firefox 19+ */ 
 font-size: 14px;
 color: #cccccc; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #cccccc;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Facebook Auto Publish Powered By : XYZScripts.com