CSS pour formulaire en HTML5
Avec le HTML on a maintenant d'ajouter une validation automatique facilement au formulaire en ajoutant tout simplement le mot : required comme paramètres des balise de formulaire (input, textearea, select,...)
Mais cette validation n'est pas indiqué à l'internaute mais il y a une facon tout simple de le faire via CSS.
Avec trois petite image que l'on va rajouter dans les champ input obligatoire
Code CSS
input:focus:invalid, textarea:focus:invalid { /* champ invalide */
background: #fff url(../images/exclamation.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
input:required, textarea:required {
background: #fff url(../images/pencil.png) no-repeat 98% center;
}
input:required:valid, textarea:required:valid { /* champ valide*/
background: #fff url(../images/accept.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}