Les éléments <form> et <fieldset> sont de type bloc.
Les éléments <input>, <select>, <textarea> et <label> sont de type en ligne.
Cette balise sert à insérer un formulaire permettant de transmettre au serveur des informations saisies par le visiteur.
Les balises <form> et </form> encadrent les éléments d'un formulaire.
Propriétés associées :
Exemple :
<form action="http://www.zone47.com/res.php" method="post" > ... </form>
Pour avoir un champ de saisie permettant la saisie d'une ligne de texte, on utilise l'élément <input> avec la valeur "text" pour la propriété type, soit <input type="text" />.
Propriétés associées :
Exemple :
Votre login : <input type="text" name="login" value="écrire ici" size="12" maxlength="12" />
Rendu à l'affichage :
Similaire au champ simple à la différence que les caractères saisies sont masqués
Propriétés associées :
Exemple :
Votre mot de passe : <input type="password" name="mdp" size="12" maxlength="12" />
Rendu à l'affichage :
Pour valider un formulaire on utilise l'élément <input> avec la valeur "submit", soit <input type="submit" />.
Pour réinitialiser un formulaire on utilise l'élément <input> avec la valeur "reset", soit <input type="reset" />.
Exemple :
<input type="submit" value="Envoyer" /> <input type="reset" value="Recommencer" />
Rendu à l'affichage :
Les balises <textarea> </textarea> définissent une zone de saisie multi-lignes.
Une valeur par défaut peut être placée entre la balise ouvrante et la balise fermante.
Propriétés associées :
Exemple :
Votre commentaire : <br /> <textarea name="comment" cols="30" rows="10">...</textarea>
Rendu à l'affichage :
Pour avoir des boutons radio, on utilise l'élément <input> avec la valeur "radio" pour la propriété type, soit <input type="radio" />.
Comme les boutons radio s'utilisent généralement de façon exclusive (on choisit un ou un autre mais pas plusieurs en même temps), il importe qu'il aient le même nom (propriété name) et des valeurs différents (propriété value).
Propriétés associées :
Exemple :
Importance du message : <input type="radio" name="importance" value="faible" checked="checked" /> Faible <input type="radio" name="importance" value="moyenne" /> Moyenne <input type="radio" name="importance" value="haute" /> Haute
Rendu à l'affichage :
Pour avoir des cases à cocher, on utilise l'élément <input> avec la valeur "checkbox" pour la propriété type, soit <input type="checkbox" />.
Propriétés associées :
Exemple :
Voulez-vous recevoir :<br /> <input name="lettre" type="checkbox" value="oui" checked="checked" /> Notre lettre d'information<br /> <input name="partenaire" type="checkbox" value="oui" /> Les lettres d'information de nos partenaires<br /> <input name="spam" type="checkbox" value="oui" /> De la pub pour du Viagra et des Rolex
Rendu à l'affichage :
Pour avoir une liste de sélection, on utilise l'élément <select> qui définit la liste de sélection et les éléments <option> qui définissent les choix possibles.
Il est possible de regrouper des choix dans un élément intermédiaire :<optgroup>. Sa valeur s'affiche mais n'est pas sélectionnable.
Propriétés associées à l'élément <select>:
Propriétés associées à l'élément <optgroup>:
Propriétés associées à l'élément <option>:
Exemple :
Pays : <select name="pays"> <optgroup label="Europe"> <option>France</option> <option>Espagne</option> <option>Angleterre</option> </optgroup> <optgroup label="Amérique"> <option>Etats-Unis</option> <option>Mexique</option> <option>Canada</option> <option>Brésil</option> </optgroup> </select>
Rendu à l'affichage :
Pour pouvoir sélectionner un fichier à transmettre via un formulaire, on utilise l'élément <input> avec la valeur "file" pour la propriété type, soit <input type="file" />.
Propriétés associées :
Exemple :
Votre avatar : <input type="file" name="avatar" size="20" accept="image/gif,image/png,image/jpg" />
Rendu à l'affichage :
Pour pouvoir associer au formulaire des données non saisies par l'internaute, on utilise l'élément <input> avec la valeur "hidden" pour la propriété type, soit <input type="hidden" />.
Ce champs de formulaire n'est pas visible à l'écran.
Propriétés associées :
Exemple :
<input name="ip" type="hidden" value="134.157.104.57" />
Rendu à l'affichage :
La propriété disabled permet d'empêcher la saisie dans un champ texte ou le choix dans les listes de sélection, les boutons radio ou les cases à cocher.
Le champs et sa valeur ne sont pas transmis au serveur.
Exemple :
Votre login : <input type="text" name="login" value="mistigri" size="12" maxlength="12" /> <br /> Voulez-vous recevoir : <br /> <input name="lettre" type="checkbox" value="oui" checked="checked" /> Notre lettre d'information
Rendu à l'affichage :
L'élément <fieldset> permet de faire des regroupements. Son utilisation crée une bordure autour des éléments regroupés.
On lui associe en enfant l'élément <legend> pour donner un titre au regroupement.
Exemple :
<fieldset> <legend>Identification</legend> Votre login : <input type="text" name="login" value="écrire ici" size="12" maxlength="12" /><br /> Votre mot de passe : <input type="password" name="mdp" size="12" maxlength="12" /><br /> </fieldset>
Rendu à l'affichage :
L'élément <label> permet de créer une "étiquette" liant un intitulé et un élément de formulaire. C'est notamment très utile pour les personnes utilisant des navigateurs vocaux, comme les non-voyants.
Propriété associée :
La cible possède l'attribut id ayant la même valeur que celui de l'attribut for de l'étiquette <label>.
Cet étiquetage est invisible à l'écran.
Exemple :
<input type="radio" name="importance" value="haute" id="haute" /> <label for="haute">Haute</label>
Rendu à l'affichage :
La propriété tabindex permet de définir un ordre de tabulation pour naviguer dans le formulaire. Sa valeur est un nombre correspondant à l'ordre.
Exemple :
Votre login : <input type="text" name="login" value="écrire ici" size="12" maxlength="12" tabindex="1" /><br /> Votre mot de passe : <input type="password" name="mdp" size="12" maxlength="12" tabindex="2" />
Rendu à l'affichage :