PHPascal.com

PHPAscal rouge2 (Version bleu)


Programmation web CSS HTML PHP Jquery Javascript Wordpresse RSS SQL SSH, serveur linux Outils
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Programmation web / CSS / CSS pour formulaire en HTML5

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

Ok champ valide  Erreur champ pas bien rempli  Champ obligatoire, aller rempli le

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;
}

 

 

 

 

 

Article écrit le 29 mars 2014
Article modifié le 29 mars 2014

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0091 sec
Imprimer le 22 October 2017 - 09:42:07
par Pascal Dubreuil organisateur du Marathon de Laval