logo Pierre AULAS
Petit rappel sur les formulaires
 Parcours  |   Réalisations  |   Cours  |   Chroniques  |   Divers
FORM
INPUT
SELECT
OPTION
OPTGROUP
TEXTAREA
LABEL
FIELDSET
TABINDEX

Récapitulatif sur les formulaires

En plus des balises normales, HTML possède un balisage pour des éléments spéciaux appelés commandes et destinés à construire des formulaires. Ce cours a pour but de vous fournir un récapitulatif de toutes les balises de formulaires disponibles avec des exemples.
Si vous voulez en savoir plus, consultez le w3c en anglais ou en français.

Petit rappel de terminologie :

Le html comprend des éléments, le plus souvent caractérisés par une balise ouvrante et une balise fermante.
Chaque élément possède des attributs qui peuvent recevoir différentes valeurs.

Dans l'exemple suivant on peut voir l'élément TEXTAREA (on parlera de commande puisqu'il s'agit d'un élément propre aux formulaires) :

<TEXTAREA name="montexte" rows="3" cols="60">Texte par défaut.</TEXTAREA>

Dans cet élément, <TEXTAREA> et </TEXTAREA> sont des balises. name, rows et cols sont des attributs et "montexte", "3" et "60" sont les valeurs définies pour chacun des attributs.
Et la chaîne de caractère "Texte par défaut" constitue le contenu de l'élément.

FORM

Un formulaire est défini par une balise <FORM> ouvrante et une balise </FORM> fermante.
La balise ouvrante doit définir obligatoirement l'attribut action qui désigne l'adresse à laquelle doit être envoyé le formulaire pour être traité et l'attribut method qui peut prendre les valeurs GET ou POST selon le mode d'envoi choisi.

Pour faire court, la méthode GET transmet l'information saisie par l'utilisateur via l'url dans le genre http://www.gogol.fr/search?hl=fr&q=toto (autrement dit à éviter pour les mots de passe, mais à privilégier pour le référencement), la méthode POST en revanche transmet l'information de manière non visible (mais non cryptée pour autant).

Il est également bon de définir l'attribut enctype qui peut prendre la valeur "application/ x-www-form-urlencoded" lorsque le formulaire se contente d'envoyer une chaîne de caractère et la valeur "multipart/form-data" lorsque le formulaire contient des fichiers à télécharger.

<FORM action="monfichier.php" method="GET" enctype="application/ x-www-form-urlencoded">
 ... Elements du formulaire
</FORM>

Haut de page

INPUT

Toutes les commandes d'un formulaire, à l'exception de celles définies par les balises TEXTAREA et SELECT commencent par la balise INPUT.
Attention : la balise INPUT fonctionne uniquement comme balise ouvrante.

Deux attributs doivent obligatoirement être définis :

Les autres attributs sont généralement optionnels :

Exemple de formulaire :


 Nom :  Prénom :  Id :
Avez-vous été touché par une de ces maladies : Choléra Tuberculose Oreillons Autres
Voulez-vous ajouter quelque chose : oui non

Si vous voulez enregistrer des documents personnels :



Pour obtenir le formulaire ci-dessus, voici le code qu'on a écrit :

<FORM action="monfichier.php" method="POST" enctype="application­/x-www-form-urlencoded">
 Nom : <INPUT type="text" name="nom" size="20"> <!-- La longueur du champs est limitée à 20 caractères -->
 Prénom : <INPUT type="text" name="prenom" size="20"> <!-- Idem -->
 Id : <INPUT type="password" name="identifiant" maxlength="6" size="20">
 <!-- Idem et l'utilisateur ne rentrer plus de 6 caractères.-->
 Avez-vous été touché par une de ces maladies :
 <INPUT type="checkbox" name="cholera">Choléra
 <INPUT type="checkbox" name="tuberculose">Tuberculose
 <INPUT type="checkbox" name="oreillons" checked>Oreillons
 <INPUT type="checkbox" name="autres ">Autres
 Voulez-vous ajouter quelque chose :
 <INPUT type="radio" name="reponse" value="oui" >oui
 <!-- L'attribut name a la même valeur pour les deux éléments radio -->
 <INPUT type="radio" name="reponse" value="non" checked>non
 Si vous voulez enregistrer des documents personnels :
 <INPUT type="hidden" name="fichier" MAXsize="0">
 <!-- Une commande hidden située devant une commande file peut déterminer la taille maximale des fichiers à télécharger (en octets)-->
 <INPUT type="file" name="fichier">
 <INPUT type="submit" value="Valider">
 <INPUT type="reset" value="Tout effacer">
 <INPUT type="image" src="./img/superbouton.gif" alt="Valider">
 <!-- Alternative graphique au bouton standard de validation -->
</FORM>

Haut de page

SELECT

La commande SELECT permet de proposer à l'utilisateur un menu déroulant dans lequel faire son choix.
Elle est encadrée par une balise ouvrante et une balise fermante.
Elle possède les attributs suivants :

Haut de page

OPTION

Les options qu'on veut voir apparaître dans le menu déroulant doivent être précédées dans le code de la balise : <OPTION>
L'attribut selected permet de séléctionner une option par défaut (et plusieurs si l'attribut multiple est activé dans la balise SELECT).

Haut de page

OPTGROUP

Si les options sont nombreuses, on peut les regrouper au sein de groupes encadrés par les balises <OPTGROUP> et </OPTGROUP>.
L'attribut label permet de donner un titre à ces groupes.

Pour obtenir le menu déroulant ci-dessus, voici ce qu'il faut écrire :

<SELECT name="lieu" size="3" multiple>
 <OPTGROUP label="Urgences : ">
  <OPTION value="urg1">Broca
  <OPTION value="urg2" selected>Lariboisière
  <OPTION value="urg3">Hôtel-Dieu
 </OPTGROUP>
 <OPTGROUP label="Hôpital : ">
  <OPTION value="hop1" selected>Saint-Louis
  <OPTION value="hop2">Necker
  <OPTION value="hop3">Lariboisière
 </OPTGROUP>
 <OPTION>Autres
</SELECT>

Haut de page

TEXTAREA

La commande TEXTAREA fournit au client une zone dans laquelle il peut rentrer du texte.
Cette commande est encadrée par une balise ouvrante et fermante.
Elle possède les attributs suivants :

Pour obtenir la zone de texte ci-dessus, voici ce qu'il faut écrire :

<TEXTAREA name="montexte" rows="3" cols="60">
 Je peux placer ici du texte par défaut.
</TEXTAREA>

Haut de page

Éléments de présentation

Les éléments de mise en forme : LABEL, FIELDSET, LEGEND

LABEL

L'élément LABEL permet d'accrocher solidement une légende à une de vos commandes.
Pour cela la balise ouvrante qui définie la commande doit posséder un attribut id.
La balise <LABEL> possède quant à elle un attribut for qui indique à quel id elle se rapporte.

Pour obtenir la zone de texte ci-dessus, on peut écrire :

<LABEL for="n1">Saisissez votre texte : </LABEL>
<TEXTAREA id="n1" name="montexte" rows="3" cols="60">
 Je peux placer ici du texte par défaut.
</TEXTAREA>

FIELDSET et LEGEND

L'élément FIELDSET permet de regrouper visuellement des commandes et l'élément inclu LEGEND permet de donner un titre à ce groupement :

Données personnelles Nom : Prénom : Id :
Questionnaire Avez-vous été touché par une de ces maladies : Choléra Tuberculose Oreillons Autres

Il va de soi que l'apparence de ces éléments dépendent du navigateur.

Pour obtenir le formulaire ci-dessus, voici le code qu'il faut écrire :

<FIELDSET>
 <LEGEND>Données personnelles</LEGEND>
  Nom : <INPUT type="text" name="nom" size="20">
  Prénom : <INPUT type="text" name="prenom" size="20">
  Id : <INPUT type="password" name="identifiant" maxlength="6" size="20">
</FIELDSET>
<FIELDSET>
 <LEGEND>Questionnaire</LEGEND>
  Avez-vous été touché par une de ces maladies :
  <INPUT type="checkbox" name="cholera">Choléra
  <INPUT type="checkbox" name="tuberculose">Tuberculose
  <INPUT type="checkbox" name="oreillons" checked>Oreillons
  <INPUT type="checkbox" name="autres">Autres
</FIELDSET>

Haut de page

Donner l'attention à un élément

Lorsque les formulaires sont longs ou qu'ils doivent servir à entrer des informations de manière répétitive, il est important de faciliter la vie de l'utilisateur en lui permettant d'accéder aux différentes commandes via la tabulation ou des raccourcis clavier.
Toutes les commandes possèdent les deux attributs suivants :

Dans le formulaire ci-dessous, le premier champ est accessible via la touche ALT + MAJ + P. On peut ensuite circuler via la tabulation.

Données personnelles Nom : Prénom : Id :

Pour obtenir le formulaire ci-dessus, voici le code qu'il faut écrire :

<FIELDSET>
 <LEGEND>Données personnelles</LEGEND>
  Nom : <INPUT tabindex="1" accesskey="p" type="text" name="nom" size="20">
  Prénom : <INPUT tabindex="2" type="text" name="prenom" size="20">
  Id : <INPUT tabindex="3" type="password" name="identifiant" maxlength="6" size="20">
</FIELDSET>

Haut de page
Plan du site  |  Mentions légales  |  Crédits  |  Aide