Type

Définition
d’input

text Définit un champ de saisie monoligne qui accepte du texte

number Définit un champ qui accepte un nombre décimal

email Crée un champ qui permet de renseigner une adresse mail

date Permet à l’utilisateur d’envoyer une date

password Créer un champ de saisie monoligne dont la valeur va être cachée

Permet de créer une case à cocher. L’utilisateur peut cocher une ou

checkbox
plusieurs cases d’un coup

Permet de créer un bouton radio. Par définition, un seul bouton radio peut
radio
être coché dans un ensemble

url Crée un champ qui accepte une URL

file Permet à un utilisateur de télécharger un fichier

submit Crée un bouton d’envoi des données du formulaire

color Permet de créer un champ de couleurs

 Elément Définition

form Définit un formulaire

input Définit un champ de données pour l’utilisateur

label Définit une légende pour un élément input

textarea Définit un champ de texte long

select
Définit une liste de choix (attribut MULTIPLE pour choix multiples)

optgroup Définit un groupe d’options dans une liste

option Définit une option dans une liste

Permet de regrouper les éléments d’un formulaire en différentes parties

fieldset
(width pour gérer la largeur)

legend Ajoute une légende à un élément fieldset

Concernant l’élément textarea, on utilise ici un attribut placeholder qui nous sert à

indiquer aux utilisateurs ce qu’ils doivent remplir dans le champ en soi. Le
placeholder prend la forme d’un texte semi transparent qui va s’effacer dès qu’un
utilisateur place le curseur de sa souris dans le champ de formulaire lié.

En plus de ces vérifications faites par le navigateur, le HTML propose

aujourd’hui des options de validation relativement puissantes. La validation
des données en HTML va principalement passer par l’ajout d’attributs dans les
éléments de formulaire. Nous allons ainsi pouvoir utiliser les attributs suivants :
 Attribut Définition

size Permet de spécifier le nombre de caractères dans un champ

minlength Permet de spécifier le nombre minimum de caractères dans un champ

maxlength Permet de spécifier le nombre maximum de caractères dans un champ

Permet de spécifier une valeur minimale pour un champ de type number

min
ou date

Permet de spécifier une valeur maximale pour un champ de type

max
number ou date

Permet de définir un multiple de validité pour un champ acceptant des

step donnés de type nombre ou date. En indiquant step="4" , les nombres
valides seront -8, -4, 0, 4, 8, etc.

Permet d’activer l’auto complétion pour un champ : si un utilisateur a

autocomplete déjà rempli un formulaire, des valeurs lui seront proposées
automatiquement lorsqu’il va commencer à remplir le champ

Permet de forcer le remplissage d’un champ. Le formulaire ne pourra pas

required
être envoyé si le champ est vide

pattern
Permet de préciser une expression régulière. La valeur du champ devra
respecter la contrainte de la regex pour être valide. pattern="[A-Za-z]
{3}" an input field that can contain only three letters (no numbers or
special characters): pattern=".{8,}" that must contain 8 or more
characters: pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" Must
contain at least one  number and one uppercase and lowercase
letter, and at least 8 or more characters.
<input type="email" id="email" name="email" pattern="[a-z0-9._%+-]
 Attribut Définition

+@[a-z0-9.-]+\.[a-z]{2,}$"> An <input> element with type="email"

that must be in the following
order: characters@characters.domain (characters followed by an @
sign, followed by more characters, and then a "."

After the "." sign, add at least 2 letters from a to z:

pattern="[^'\x22]+" that CANNOT contain the following characters: ' or

". <input type="url" id="website" name="website"
  pattern="https?://.+" title="Include http://"> must start with
http:// or https:// followed by at least one character:

La méthode POST, par laquelle les données du formulaire sont envoyées dans

le corps de la requête HTTP), offre en outre le choix du mécanisme
d'encodage ENCTYPE :

 si rien n'est spécifié, c'est ENCTYPE="application/x-www-form-

urlencoded" qui sera utilisé par défaut : les champs du formulaire sont
alors URL-encodés sur une longue chaîne de la même manière qu'avec
la méthode GET, mais ici sans limitation de taille
 on utilisera ENCTYPE="multipart/form-data" dans le cas d'un formulaire
servant à uploader un fichier avec <INPUT TYPE=FILE ...>
 on utilisera ENCTYPE="text/plain" si l'on souhaite se faire envoyer par E-
mail les champs du formulaire avec
l'action ACTION="mailto:adresse_email?Subject=sujet"
Quelques astuces JavaScript en relation avec les formulaires
1) Pour automatiquement placer le curseur dans un champ donné d'un
formulaire comportant plusieurs champs, utiliser la fonction
JavaScript focus() sur ce champ.
Utiliser par exemple ceci au niveau de la déclaration
<BODY>:
<BODY
onload="document.forms.form.champ.focus()">
ou bien le code JavaScript suivant placé après la
déclaration du champ :
<SCRIPT LANGUAGE="JavaScript"> Top of Form
<!--     Numéro 
436

document.forms.form.champ.focus();     Nom  
// -->
</SCRIPT> Bottom of Form
où form est le nom du formulaire, et champ est le
nom du champ. Mais on pourrait utiliser
plutôt document.getElementById('idchamp').focus() (
au lieu de document.forms.form.champ.focus()) si
l'on ajoute l'attribut ID="idchamp" dans la balise de
définition du champ.

2) Pour automatiquement sélectionner ou effacer le contenu d'un

champ lorsque l'on clique dedans, utiliser respectivement les
évènements onFocus="this.select()" et onFocus="this.value=''"

Exemple de sélectionnement du contenu: Top of Form

<INPUT TYPE="TEXT" NAME="nom" entrez vo
Nom 
VALUE="entrez votre nom"
onFocus="this.select()"> Bottom of Form

Exemple d'effacement du contenu: Top of Form

<INPUT TYPE="TEXT" NAME="nom" entrez vo
Nom 
VALUE="entrez votre nom"
onFocus="this.value=''"> Bottom of Form

Définition de l'ordre de "tabulation" des champs d'un formulaire

Pour définit l'ordre de sélectionnement des champs d'un formulaire lorsque

l'on utilise la touche <tab>, on fera usage de l'attribut TABINDEX="numéro".
 Un

Exemple (sélectionnez le 1er champ, puis frappez plusieurs fois <tab>) :   

Quatre Deux Cinq Trois

     

Usage de CSS en relation avec les formulaires

Les possibilités liées aux feuilles de styles CSS sont innombrables. Examinez
l'exemple ci-dessous :
<STYLE TYPE="text/css"> Top of Form
<!-- Nom     
.etiquette { font-size: smaller; font-
weight: bold; Prénom 
color: #ffffff; background:
#999999; cursor: pointer; } J'accepte les
.champ { background: #eeeeee;
border: solid 1px #ffffff; conditions 
border-top-color: #888888;
border-left-color: #888888; } Envoyer

.champ:hover,
.champ:focus { border: 1px solid
#6666ff; background: #ffffff; } Bottom of Form
.bouton { color: #000099; font-
weight: bold;
background: #bbbbff; border:
solid 2px #6666ff;
border-top-color: #ffffff;
border-left-color: #ffffff; }
.bouton:hover { color: #6666ff;
background: #ccccff; }
.bouton:focus { background: #bbbbff;
border: solid 2px #ffffff;
border-top-color: #6666ff;
border-left-color: #6666ff; }
-->
</STYLE>
<FORM>
<LABEL FOR="idnom"
CLASS=etiquette>Nom</LABEL>
<INPUT TYPE="TEXT" NAME="nom"
 ID="idnom" CLASS=champ><P>
<LABEL FOR="idprenom"
CLASS=etiquette>Prénom</LABEL>
<INPUT TYPE="TEXT"
NAME="prenom" ID="idprenom"
CLASS=champ><P>
<LABEL FOR="idaccept"
CLASS=etiquette>J'accepte les
conditions</LABEL>
<INPUT TYPE="CHECKBOX"
NAME="accepted" ID="idaccept">
<INPUT TYPE="SUBMIT"
CLASS="bouton" VALUE=" Envoyer ">
</FORM>

Explications :

1. La balise <LABEL> permet de définir des étiquettes de champ qui soient

cliquables ; ainsi, dans l'exemple ci-dessus :
o le fait de cliquer sur "Nom" ou "Prénom" met automatiquement le
focus dans le champ correspondant
o le fait de cliquer sur "J'accepte les conditions" active/désactive la
case à cocher correspondante (bascule)

A l'aide de la classe CSS ".etiquette" on attire ici l'attention de

l'utilisateur sur ces labels :

o en définissant que le curseur survolant des labels soit de type

main
o et en changeant la couleur de l'arrière-plan (background)
2. Les classes CSS ".champ", ".champ:focus" et ".champ:hover" sont utilisées
ici pour changer l'apparence des champs (encadrement, couleur de
fond...) selon que le focus respectivement "n'est pas" ou "est" dans le
champ, ou que le curseur "survole" le champ. De même les classes CSS
".bouton", ".bouton:hover" et ".bouton:focus" sont utilisées ici pour
changer l'apparence du bouton "Soumettre" (selon que le focus est sur
le bouton ou que l'on clique dessus). Notez cependant que tout cela
fonctionne parfaitement sous Mozilla, mais pas sous le navigateur IE 6
(qui ne supporte pas les pseudo-classe ":focus" et ":hover"), navigateur
pour lequel il faudrait faire un peu de JavaScript pour obtenir le même
effet.