1. FORMULAIRES
Balises de formulaire
Balise Type Description
Délimite un formulaire.
Vous devrez généralement donner 2 attributs à la balise <form>
• method : indique la méthode d'envoi du formulaire (get ou post). Si vous ne
<form> Block
savez pas quoi utiliser, mettez post.
• action : la page vers laquelle le visiteur doit être redirigé lorsqu'il a validé votre
formulaire.
Permet de regrouper plusieurs éléments d'un formulaire.
On l'utilise généralement dans de grands formulaires.
<fieldset> Block
Pour donner un titre à votre groupe, utilisez la balise <legend>
Titre d'un groupe dans un formulaire.
<legend> Inline
A utiliser à l'intérieur d'un <fieldset>
Titre d'un élément de formulaire.
<label> Inline Généralement, vous devrez mettre l'attribut for sur cette balise pour indiquer l'ID de
l'élément auquel correspond le label.
Champ de formulaire.
Il existe de nombreux types de champs différents. Vous choisissez le type de champ
que vous désirez grâce à l'attribut type :
Code : HTML
1 <!-- Zone de texte d'une ligne -->
2 <input type="text" />
3 <!-- Mot de passe (le texte est caché) -->
4 <input type="password" />
5 <!-- Envoi de fichier -->
6 <input type="file" />
7 <!-- Case à cocher -->
<input /> Inline 8 <input type="checkbox" />
9 <!-- Bouton d'option -->
10 <input type="radio" />
11 <!-- Bouton -->
12 <input type="button" />
13 <!-- Bouton d'envoi -->
14 <input type="submit" />
15 <!-- Bouton de remise à zéro -->
16 <input type="reset" />
17 <!-- Champ caché -->
18 <input type="hidden" />
<textarea> Inline Zone de saisie multiligne.
Vous pouvez définir sa taille grâce aux attributs rows et cols (nombre de lignes et

2. Balise Type Description
colonnes) ou bien le faire en CSS grâce aux propriétés width et height.
Liste déroulante.
Utilisez la balise <option> pour créer chaque élément de la liste :
Code : HTML
1 <select name="pays">
<select> Inline
2 <option value="france">France</option>
3 <option value="espagne">Espagne</option>
4 <option value="italie">Italie</option>
5 </select>
<option> Block Element d'une liste déroulante
Groupe d'éléments d'une liste déroulante.
<optgroup> Block A utiliser dans le cas d'une grande liste déroulante.
Vous devez utiliser l'attribut label pour donner un nom au groupe.
• GET pour des transferts de données assez faibles (256 caractères maxi) et POST pour la normale et
de plus obligatoire pour le type "Mailto")
• ENCTYPE est l'attribut de codification en méthode POST, mais peu utilisé, sauf pour le "Mailto" avec
enctype="text/plain" qui permet une présentation lisible du mail reçu.
method="post" Indique que les données saisies doivent être passés "silencieusement" : pas dans la barre
d'adresse Permet de faire passer facilement des données complexes (long textes ou texte avec des
caractères spéciaux par exemple) d'une page à une autre method="get" Indique que les donnêes saisies
doivent être passés dans la barre d'adresse Attention à la longueur des variables passée ainsi qu' caractères
spéciaux
Balises HTML5
HTML5 vient enreichir ces formulaires pour les rendre plus complets, intuitifs et sécurisés. La principale
nouveauté des formulaires dits « 2.0 » consiste à un ensemble de nouveuax types pour nos champs input.
La plupart du temps, nous utilisons dans l'attribut type les valeurs text et password.
Nous pouvons désormais utiliser entre autres :
• search
• tel
• email
• url
• date
• number
• range
• color

3. Formulaires de recherche
Les champs de recherche sont assez différents des champs de texte classique, d'un point de vue d eleur
comportement et de leur apparence. Les systèmes d'exploitation et certains logiciels comme les navigateurs
utilisent des champs de recherche personnalisés. Par exemple, effacer le champ du contenu en cliquant sur
une petite croix. Ces champs ont la plupart du temps une icône particulière comme une loupe ou le logo
d'un moteur de recherche. Ces styles et comportements sont familiers pour les utilisatisateurs et sont très
intuitifs. Il est donc tout à fait pertinent de les utiliser dans le cadre d'un site web. En utilisant le type search
sur un champ, vous améliorerez en plus l'accessibilité de votre site, car les logiciels d'assistance bont
proposer des raccourcis vers ce champ.
Pour réellement maîtriser le style de ce champ sur Safari et Chrome sur MacOs, il vous faut écrire cette
règle CSS :
input[type= »search »]{
-webkit-appareance:textfield ;
}
Les adresses mail
La valeur email permet d'exiger que l'utilisateur entre une adresse email. Plus besoin d'appliquer
d'expression rationnelle Javascript pour vérifier la validité d'une adresse.
De plus, vos utilisateurs équipés de smartphones vous seront très reconnaissants puisque le fait d'utiliser un
type email affiche un clavier virtuel adapté aux adresses email.
Les numéros de téléphone
La valeur tel permet de spécifier que l'utilisateur doit entrer un numéro de téléphone. Encore une fois, le
clavier virtuel des smartphones s'adaptera en conséquence.
Les URL
Ici encore le clavier des smartphones s’adaptera en conséquence pour saisir rapidement une URL simple.
Le type date
SI vous avez besoin de demander une date à un utilisateur, certaines questions se posent. La date est-elle
valide syntaciquement ? La date existe-t-elle ? Dans quel format est-elle écrite ? LE type date vise à
simplifier la saisie de dates en proposant un sélecteur natif, disponible en plusieurs déclinaisons. Le
navigateur Opera est le plus en avance sur les formulaires HTML5 et propose déjà un ensemble très complet
de sélecteurs de dates.
Il existe plusieurs déclinaisons du sélecteur de date, qui varie le type spécifié :
• datetime pour le jour et l'heure avec le décalage horaire
• datetime-local pour le jour et l'heure sans le décalage horaire
• date pour sélectionner uniquement la date
• time pour sélectionner uniquement l'heure
• week pour la semaine
• month pour le mois

4. Les attributs min max et step peuvent être utilisés pour définir les limites à ne pas dépasser. A noter qu'il n'y
a pas de moyen prévu pour styliser le sélecteur de date.
Les types number et range
Jusqu’à présent, lorsqu'un utilisateur avait à saisir un nombre dans une page web, il devait obligatoirement
le faire en utilisant le clavier. Pourtant les systèmes d'exploitation intègrent nativement depuis longtemps
deux alternatives à la saisie au clavier : les sliders et les « champs avec des petits boutons à droite pour
augmenter ou réduire.
Il est à présent possible d'utiliser ces types d'entrées dans une page HTML avec les types number et range.
Vous pouvez spécifier quelles sont les valeurs minimales et maximales avec les attributs min et max, ainsi
que le pas avec l'attribut step qui prennent tous les trois des valeurs numériques.
Exemple pour un champ numérique allant de 0 à 100 par pas de 5 en partant de 50 :
<input type= »numer » min= »0 » max= »100 » step= »5 » value= »50 »>
Les nuanciers de couleurs
Il peut arriver que vous ayez à demander à un utilisateur de sélectionner une couleur de son choix. Dans ce
cas, le plus pratique est de lui fournir un nuancier afin qu'il visualise graphiquement l'ensemble des
couleurs qu'il peut choisir. Il existe bien sûr des sélecteurs de couleur en Javascript, mais comme d'habitude,
nous préférerons opter pour la solution native qui évite de charger beaucoup de Javascript et qui propose
un interface déjà connue de l'utilisateur.
Les suggestions
La datalist est un nouvel élément qui est en quelque sorte un mélange entre une liste déroulante et un
champ texte libre. Lorsque l'utilisateur sélectionne le champ, une liste de suggestions apparaît afin de lui
proposer des entrées pertinentes.
Les différents suggestions se déclarent avec des éléments option, comme pour les listes déroulantes
habituelles.
Exemple :
<input type= »text » list= »serie »>
<datalist id= »serie »>
<option value= »Les Simpsons »>
<option value = »South Park »
<option value= »Futurama »>
</datalist>
La validation des données
Un point essentiel des formulaires 2.0 est l'apport de restrictions sur les valeurs entrées dans le champs. Si
la validation finale des données doit toujours se faire côté serveur pour des raisons de sécurité, côté client
vous pouvez maintenant aider l'utilisateur avec un minimum de code et une interface native. Ceci remplace
les kilomètres de Javascript que vous deviez taper pour chaque formulaire.
Si l'utilisateur entre des lettres dans un champ number ou tel par exemple, le navigateur va réagir pour le
prévenir que les informations qu'il a entrées sont invalides. Il va également vérifier la validité de l'ensemble
du formulaire juste avant l'envoi, afin de demander des corrections si elles sont nécessaires.

5. Chaque navigateur est libre de décider de l'apparence que prendront ses indicateurs. Ils seront donc par
conséquent différents sur chaque navigateur.
Personnaliser les champs erronés et requis
De nouvelles pseudo-classes CSS permettent de personnaliser les champs. Par exemple:invalid et:required
permettent de les styliser lorsqu'ils sont détectés invalides ou pour indiquer qu'ils sont requis.
Exemple :
<form>
<label for= »url »>URL</label>
<input id= »url » type = »url » required />
<label for= »email »>Email</label>
<input id= »email » type= »email » required />
<label for= »tel » type= »tel »>Téléphone</label>
<input id= »tel » type= »tel » />
<input type= »submit »>
</form>
CSS :
:required {border:1px solid blue;}
:invalid{background-color:#FDD}
Désactiver la validation automatique
Si vous souhaitez désactiver la vérification native du navigateur, utilisez l'attribut novalidate de la balise
form.
Rendre un champ obligatoire
Utilisez l'attribut required.
Utiliser les expressions rationnelles pour la validation
Si vous souhaitez effectuer des vérifications spécifiques (exemple présence d'un tiret, ou limitation à
certains caractères) vous pouvez effectuer la validation de la structure de la chaîne de caractères avec une
expression rationnelle (ou regex) et l'utiliser dans l'attribut patern.
Pour en savoir plus sur les expressions rationnelles :
http://fr.wikipedia.org/wiki/Expression_rationnelle
http://www.toutjavascript.com/savoir/savoir22_1.php3
Exemple :
<input type= »text » pattern= »[A-Z][a-z]+-[A-Z][a-z]+ »>

6. Placeholder attribut
Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître
au focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…
<form>
<input type="text" name="first-name" placeholder="John"/><br/>
<input type="text" name="last-name" placeholder="Doe"/><br/>
<input type="submit" name="submit" value="Save"/>
</form>
Autofocus
cet attribut permet de sélectionner un champ en particulier au chargement de la page
<form>
<input type="text" name="first-name" placeholder="John"/><br/>
<input type="text" name="last-name" autofocus/><br/>
</form>