Un peu de css dans nos formulaire

!
!


Rendre plus agréable un formulaire est assez simple avec un brin de html5 et de css3. Ici une petite validation dynamique donne tout de suite un effet pro; bien sur ceci en aucun cas ne doit remplacer une validation des données au niveau du serveur.

J’utilise juste dans le formulaire placeholder, required et surtout pattern qui nous permet de voir la validation en temps réel.
Ici je n’est utilisé que type= »text » mais il est aussi possible d’utiliser date, number, tel, email, url, color,… tout dépend du navigateur :)

<form action="post">
<div>
  <label>Nom: </label><input class="input" type="text" name="nom" pattern="^[a-zA-Z0-9_-]{3,16}$" required size="18" ><span>!</span>
</div>
<div>
  <label>Age: </label><input class="input" type="text" name="age" pattern="[0-9]{1,2}" placeholder="age" required size="18" ><span>!</span>
</div>
</form>

CSS

Ici, pas de table pas de grid, ce n’est pas le sujet juste un label pour avoir quelque chose d’aligné. span est ici une zone « a saisir! »

form label { 
   min-width:6em; line-height:32px; display:block; float:left;
}
form span {
  display:inline; line-height:32px; min-width:30px; padding-left:30px; 
  background: transparent url("/images/FlecheObligatoire.png") no-repeat 1% center;
}

l’input par défaut n’a rien de particulier, je lui donne juste la position de son image de fond.

.input {
  border:1px solid #ddd;
  background-repeat:no-repeat !important;
  background-position:97% center !important;
}

il nous faut définir les 2 états de l’input : La version valide avec le cache du span « a saisir »;

.input:valid {
  background-image:url("/images/puce-valid.png");
}
.input:focus:valid { border-color:#dfd; }
.input:valid+span { display:none }

La version invalide, on change la couleur et affiche le span « obligatoire »

.input:focus:invalid {
  border-color:#d00;
  background-image:url("/images/ico_invalid.png");
}
.input:invalid+span {    display:inline; }

Avec un framework css, le travail peut-être plus compliqué car il faut ajuster ceci aux exigences du framework : icônes, couleurs, effets… ou alors c’est intégré dans le framework :)

Share Button

Vous devriez aimer...