Définition
Les formulaires permettent de donner de l'intéractivité à votre site Internet en permettant à vos visiteurs
de s'exprimer : ajouter un commentaire à un post de blog, remplir un formulaire de contact, laisser
son avis dans un livre d'or, s'inscrire à un service, se connecter sur un site, ...
Attention, le langage XHTML ne vous permettra pas de traiter le formulaire (vérification
de la validité des données, enregistrement dans une base de données, ...), il faudra pour cela faire appel
à un autre langage de programmation côté serveur (PHP par exemple). Le rôle de l'XHTML est
d'afficher le formulaire et d'envoyer au serveur les renseignements entrés par l'internaute.
Exemple :
<p>Mon premier formulaire : </p>
<form action="mailto:jean.martin@monsite.com" method="post">
<p> Votre nom : <input type="text" name="nom" /> </p>
<p> Votre prénom : <input type="text" name="prenom" /> </p>
<input type="submit" value="Envoyer !" />
</form>
- Une balise <form> de type block qui délimite tout le contenu du formulaire,
- Un attribut action qui défini soit l'email à qui doit être envoyées les données
du formulaire, soit l'adresse de la page ou du programme qui sera chargé du traitement des données du formulaire,
- action="mailto:jean.martin@monsite.com" : pour envoyer les données par email
- action="traitement_formulaire.php" : pour envoyer les données vers une page
web (URL relative ou absolue)
- Un attribut method qui définit la méthode pour l'envoi des données :
- method="post" : C'est la méthode que l'on utilise la plus part du temps, elle permet
d'envoyer un grand nombre d'informations en utilisant les entêtes HTTP de la requête.
- method="get" : Cette méthode est plus rarement utilisée, elle permet d'envoyer les
informations du formulaire en les ajoutant à la fin de l'adresse de la page indiquée dans l'attribut
action, ce qui limite la quantité d'information pouvant être envoyée (entre 255 et 65 536
caractères en général en fonction du navigateur utilisé).
Ex : http://www.monsite.com/traitement.php?nom=martin&prenom=paul&age=39
- Un ensemble de champs de formulaire (champs textes, listes de sélection, cases à cocher, ...),
- Un bouton permettant de valider l'envoi du formulaire.
Champ texte sur une ligne : <input type="text" />
Pour entrer un texte court tel qu'un nom, un prénom ou une adresse email :
<p> <input type="text" name="nom" /> </p>
Documenter chaque champ de formulaire avec les <label>
Les labels apportent de l'information supplémentaire au visiteur pour l'aider à bien remplir le formulaire.
Ils sont également utiles pour les navigateurs "non graphique", participant ainsi à rendre accessible les formulaires
aux personnes atteintes d'un handicap.
<p>
<label> Nom : </label>
<input type="text" name="nom" />
</p>
Chaque label peux être fortement lié au champ correspondant via l'attribut for du label et en ajoutant
un identifiant unique (attribut id) au champ de formulaire. Il suffit de cliquer sur
le label pour que le curseur (focus) se place automatiquement dans le champ correspondant.
<p>
<label for="nom"> Nom : </label>
<input type="text" name="nom" id="nom" />
</p>
Retour à notre zone de texte simple
<p>
<label for="nom"> Nom : </label>
<input type="text" name="nom" id="nom" value="Martin"
size="50" maxlength="255"
readonly="readonly" />
</p>
Attributs obligatoires :
- type : le type de champ (ici un champ texte sur une ligne)
- name : nom de la donnée (sera utile pour le traitement du formulaire)
-> commun pour tous les champs de formulaire
Attributs additionnels :
- id : identifie de manière unique cet élément XTML (utilisé pour lier le champ à son label, mais
aussi pour intéragir avec cet élément XHTML via du code Javascript)
-> commun pour tous les champs de formulaire - fortement conseillé
- value : valeur par défaut, modifiable par l'internaute
-> commun pour tous les champs de formulaire
- size : largeur du champ en nombre de caractères
- maxlength : nombre maximal de caractères acceptés
- readonly : ce champ n'est pas modifiable (lecture seule)
Note pour les attributs maxlength et readonly : ces contraintes côté navigateur
doivent être doublées d'une vérification lors du traitement côté serveur.
Champ "mot de passe" : <input type="password" />
Champ texte où l'on ne voit pas ce que saisie l'internaute (les caractères sont remplacés à l'écran par des étoiles).
Les attributs de ce type de champ son identiques à ceux du champ texte classique.
<p>
<label for="pseudo"> Votre nom d'utilisateur : </label>
<input type="text" name="pseudo" id="pseudo" />
<br />
<label for="mot_de_passe"> Votre mot de passe : </label>
<input type="password" name="mot_de_passe" id="mot_de_passe" />
</p>
Champ texte multiligne : <textarea>
Pour la saisie de longs textes : commentaire, post de blog, description d'un produit sur un site e-commerce, ...
<p>
<label for="commentaire">Laissez nous votre avis : </label><br />
<textarea name="commentaire" id="commentaire"></textarea>
</p>
<p>
<label for="commentaire2">Aimez-vous ce site ?</label><br />
<textarea name="commentaire2" id="commentaire2"
cols="60" rows="4">C'est le meilleur :
Oui ?
Non ?
</textarea>
</p>
Attribut obligatoire : name (id est aussi fortement conseillé)
Attributs additionnels :
- cols : nombre de colonnes du textarea (largeur)
- rows : nombre de lignes du textarea (hauteur)
Les cases à cocher : <input type="checkbox" />
Donner le choix à vos visiteurs.
<p>
Comment connaissez-vous ce site ?<br />
<input type="checkbox" name="google" id="google" />
<label for="google">Recherche Google</label><br />
<input type="checkbox" name="ami" id="ami" />
<label for="ami">Conseil d'un ami</label><br />
<input type="checkbox" name="prof" id="prof" checked="checked" />
<label for="prof">Mon profs au CNAM</label><br />
</p>
Attributs obligatoires : type="checkbox" et name (id est aussi fortement conseillé).
Chaque case à cocher doit avoir une valeur différente pour l'attribut name (idem pour l'attribut value biensûr).
Attributs additionnels :
- checked : pré-sélectionne une case à cocher à la place de l'internaute
Les boutons radio : <input type="radio" />
Donner le choix entre plusieurs possibilités. Contrairement aux cases à
<p>
Comment trouvez-vous ce site ?<br />
<input type="radio" name="avis" id="avis_super" value="super"
checked="checked" />
<label for="avis_super">Super</label><br />
<input type="radio" name="avis" id="avis_nul" value="nul" />
<label for="avis_nul">Nul</label><br />
<input type="radio" name="avis" id="avis_bof" value="bof" />
<label for="avis_bof">Bof bof</label><br />
</p>
Attributs obligatoires : type="checkbox" et name (id est aussi fortement conseillé)
Contrairement aux cases à cocher, tous les boutons radio d'un même groupe d'options doivent avoir
la même valeur pour l'attribut name (en effet une seule valeur sera envoyée).
Attributs additionnels :
- checked : pré-sélectionne une case à cocher à la place de l'internaute
Les listes de sélection : <select>, <option> et <optgroup>
Les listes de choix sont privilégiées lorsque le nombre de valeurs proposées à l'internaute
devient important.
Liste de sélection avec choix unique
<p>
<label for="pays">Quel est votre pays de naissance ?</label><br />
<select name="pays" id="pays">
<option value="france">France</option>
<option value="espagne" selected="selected">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
<option value="bresil">Brésil</option>
</select>
</p>
Attribut obligatoire :
- Pour la balise select : name (id est aussi fortement conseillé)
- Pour la balise option : value
Attributs additionnels :
- selected : pour la balise option, permet de définir la valeur sélectionnée par défaut
Liste de sélection avec organisation par groupe (toujours avec choix unique)
<p>
<label for="pays">Quel est votre pays de naissance ?</label><br />
<select name="pays" id="pays">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
</select>
</p>
Liste de sélection avec choix multiple
<p>
<label for="pays">Quel est votre pays de naissance ?</label><br />
<select name="pays" id="pays" multiple="multiple">
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne" selected="selected">Espagne</option>
<option value="italie">Italie</option>
<option value="royaume-uni">Royaume-Uni</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis" selected="selected">Etats-Unis</option>
</optgroup>
</select>
</p>
Note : pour sélectionner plusieurs valeurs, utilisez la touche CTRL (ou Pomme pour Mac) du clavier.
Naviguer dans un formulaire avec la touche TAB : tabindex
Dans tous les formulaires il est possible de naviguer d'un champ à l'autre grâce
à la touche TAB (ou SHIFT-TAB pour inverser le sens de navigation).
Par défaut le déplacement se fait du premier champ vers le dernier champ défini dans la page,
mais vous pouvez influencer cet ordre en utilisant l'attribut tabindex défini pour
tous les champs de formulaire.
<p>
<label for="champ_1"> Champ 1 : </label>
<input type="text" name="champ_1" id="champ_1" tabindex="10" />
<br />
<label for="champ_3"> Champ 3 : </label>
<input type="text" name="champ_3" id="champ_3" tabindex="30" />
<br />
<label for="champ_2"> Champ 2 : </label>
<input type="text" name="champ_2" id="champ_2" tabindex="20" />
<br />
<label for="champ_4"> Champ 4 : </label>
<input type="text" name="champ_4" id="champ_4" tabindex="40" />
</p>
Organiser un formulaire en plusieurs zones : <fieldset> et <legend>
Lorsqu'un formulaire devient complexe ou comporte beaucoup de champs, les éléments de type
fieldset permettent de regrouper plusieurs champs ayant une thématique commune.
Cela permet de rendre le formulaire plus facile à lire (et donc à utiliser) et d'améliorer
son design.
<p>
<fieldset>
<legend>Votre emploi actuel</legend>
<label for="emploi_employeur">Quel est le nom de votre employeur ?</label> <br />
<input type="text" name="emploi_employeur" id="emploi_employeur" /><br />
<label for="emploi_fonction">Quelle fonction occupez-vous ?</label> <br />
<input type="text" name="emploi_fonction" id="emploi_fonction" /><br />
</fieldset>
<fieldset>
<legend>Vos hobbies</legend>
<label for="sport">Quel est votre sport préféré ?</label> <br />
<input type="text" name="sport" id="sport" /><br />
<label for="film">Quel est votre film préféré ?</label> <br />
<input type="text" name="film" id="film" /><br />
</fieldset>
<p/>
