Nouvelles pseudo-classes dédiées aux formulaires

CSS3 introduit de nouvelles pseudo classes et en particulier pour les champs de saisie des formulaires.

Le traitement des données soumissionnées (emploi du PHP) n'est pas évoqué dans cette page.
Donc si vous cliquez sur "Validez" après avoir renseigné correctement tous les champs obligatoires il ne passera rien ...
Par contre toute tentative de soumission sera bloquée tant qu'il y aura des champs obligatoires non ou mal remplis.

Les zones de saisie obligatoires sont bordurées de rouge tandis que les champs facultatifs sont bordurés de noir.
Le texte de toute saisie passe au vert dès qu'il est correct sinon reste rouge.
La zone de saisie sélectionnée a un fond rose.

Votre civilité :

Votre date de naissance :

Sports préférés :

Le code CSS de la page (extraits)

... form {width : 90%; margin : auto; border :2px solid black ;} input,label, button, select {display : inline-block ; width : 40% ; height : 30px ; margin : 1% ; vertical-align : top ;} input:required {border : 1px solid red ; } input:optional {border : 1px solid black ; } input:valid {color : green ; } input:invalid {color : red ;} input:focus {background : pink } input[type = radio], input[type =checkbox],input[type =number] {width : 5%; margin :1%; } input[type = radio]+label, input[type = checkbox]+label, input[type = number] + label {width :9%; text-align : left;} ...

Commentaires

Mais on retrouve aussi des sélecteurs CSS2. Par exemple input[type = radio] qui cible uniquement les boutons radio ou input[type =number] qui cible uniquement les champs de type number. Il s'agit de sélecteurs d'attribut.

Le code HTML de la page (extraits)

<form action = '#' method = 'post'> ... <label>Nom (en lettres majuscules) : </label> <input type = 'text' required pattern = '[A-Z\ ]{2,30}' placeholder ='lettres majuscules et espaces' autofocus > <label>prénom (en lettres minuscules) : </label> <input type = 'text' required pattern = '[a-zéèêî\ ]{2,30}' placeholder ='lettres minuscules' > <h3>Votre civilité : </h3> <input type ='radio' name ='civilite' value ='H'><label>Monsieur</label> <input type ='radio' name ='civilite' value ='F'><label>Madame</label> <h3>Votre date de naissance :</h3> <input type = 'number' required min = '1' max = '31' ><label>Jour </label> <input type = 'number' required min = '1' max = '12' ><label>Mois</label> <input type = 'number' required min = '1930' max = '2015' ><label>Année</label> <h3>Sports préférés : </h3> <input type ='checkbox' name ='sports' value ='F'><label>foot</label> <input type ='checkbox' name ='sports'value ='C'><label>cyclisme</label> <input type ='checkbox' name ='sports'value ='N'><label>natation</label> <input type ='checkbox' name ='sports'value ='A'><label>Autres</label> <label>téléphone : </label> <input type = 'tel' required pattern = '[0-9]{10}' placeholder ='dix chiffres' maxlength = '10'> <label>autre n°tél : </label> <input type = 'tel' pattern = '[0-9]{10}' placeholder ='dix chiffres' maxlength = '10'> <label>mail : </label> <input type = 'email' required placeholder ='____@___' > <label></label> <button type = 'submit' name = 'validez' >Validez</button> </form>

Nouveautés HTML5 pour les formulaires

Cette partie est "hors sujet" puisqu'il s'agit ici du tutoriel sur CSS3 (et non pas du tuto sur HTML5) mais il est souvent difficile d'évoquer CSS sans faire des rappels HTML et vice-versa.

Nouvelles valeurs de l'attribut type

HTML5 introduit de nouveaux types pour la balise input

Nouveaux attributs de la balise input :

Les atttributs optional, required, autofocus n'ont pas besoin de valeur !

Les expressions régulières

Une expression régulière définit un gabarit de saisie. Tant qu'une saisie dans un champ ne correspond pas à son gabarit la soumission des données sera impossible.

La soumission est aussi impossible si une saisie en correspond pas au type du champ (exemple : pas de caractère @ dans un champ de type email).

Dans les deux premières expressions régulières le caractère espace est "échappé" : précédé du caractère \

Les boutons de commande

Pour dessiner des boutons de soumission il est désormais conseillé d'utiliser la syntaxe :
<button type ="submit">Envoi </button>
plutôt que :
<input type ="submit" value ="envoi" >

Les autres types du conteneur button sont : reset (effacement des données) et button (pour associer une fonction JavaScript au bouton).
Retour menu