Sommaire

La validation du formulaire

De nouveaux sélecteurs CSS permettent une mise en forme automatique pour les entrées du formulaire qui ne seraient pas valides.

input:required:invalid, input:focus:invalid { 
background-image: url(../img/form/invalid.png); 
    background-position: right top;  
    background-repeat: no-repeat; 
    border: 1px solid #800; 
    -moz-box-shadow: none; 
} 
input:required:valid, input:focus:valid { 
    border: 1px solid #080; 
    background-image: url(../img/form/valid.png); 
    background-position: right top; 
    background-repeat: no-repeat; 
}

Les deux styles ci-dessus vont permettre d’afficher certains champs différemment selon qu’ils soient valides ou non. Dans l’exemple, il y a une petite animation pour faire apparaître un pouce vert vers le haut quand le champ est valide et un pouce rouge vers le bas quand il ne l’est pas.

Pour animer ces pouces, un autre style est créé.

#form_insc input:not([type="radio"]):not([type="checkbox"]){ 
    background-position:450px; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
}

Il peut y avoir beaucoup plus de choses écrites dans ce style. Les éléments les plus importants sont ci-dessus. ...