<< Retour au sommaire

 

HTML 5, Les formulaires

 

 

 

Table des matières

  1. Qu’est-ce qu’un formulaire ?
  2. La PRINCIPALE balise du formulaire, <form>

2.1  le champ de saisie text ;

2.2  Le champ de saisie mot de passe password ;

2.3  Le champ de saisie pour une adresse de messagerie email ;

2.4  Le champ de saisie pour une adresse de site url ;

2.5  Le champ de saisie pour le téléphone « tel » ;

2.6  Le champ de saisie pour un nombre entier number ;

2.7  Le champ de saisie multi ligne textarea ;

2.8  Le champ case à cocher checkbox ;

2.9  La zone d’options radio ;

2.10                     La liste déroulante select.

  1. Définir des raccourcis clavier avec l’attribut accesskey ;
  2. Définir la prise de focus via la propriété autofocus ;
  3. Rendre un champ obligatoire avec la propriété required ;
  4. Regrouper les champs de formulaires par catégorie avec fieldset legend ;
  5. Valider le formulaire via le bouton submit ;
  6. Envoyer le formulaire par E-mail ;
  7. Un exemple.

 

Qu’est-ce qu’un formulaire ?

 

Un formulaire est une zone de la page qui contient des champs de saisies, des zones de listes déroulantes, des boutons etc.…

L’utilisateur peut donc saisir des données, réaliser des choix dans des zones de listes déroulantes, cocher ou décocher des cases à cocher, valider des boutons !

Tous ces éléments sont appelés des champs et ils sont intégrés à un bloc appelé le formulaire dont la balise est <form>.

La balise <form> n’étant pas une balise de type « block », il conviendra d’imbriquer le formulaire dans des balises « block » du genre <p> ou <table>, mais à mon sens, la balise <table> reste la structure de bloc idéale pour une bonne présentation du formulaire…

Cependant, si le HTML 5 est en mesure d’offrir une telle interface d’échange avec l’utilisateur, il n’en est pas pour autant capable d’en faire grand-chose… En effet, généralement, lorsque les différents champs du formulaire sont renseignés, et que l’utilisateur valide le bouton qui permet de déclencher l’envoi des données saisies, nous utilisons un fichier script pour réaliser le traitement qui en découle, et ce fichier script est toujours écrit dans un langage de programmation dynamique tel que le PHP.

 

Nous pouvons néanmoins, en HTML 5, expédier les données saisies dans le formulaires par l’intermédiaire d’un courrier électronique. 

 

 


La PRINCIPALE balise du formulaire, <form>

 

Un formulaire est un bloc de balise dont la plus importante est la balise <form>

Puis, entre les balises <form> et </form>, viennent les différents champs du formulaire.

Les champs sont par exemple des zones d’édition, des zones de listes déroulantes, des cases à cocher, des boutons radio etc.

 

La structure globale est la suivante :

 

<form>

-         Premier champ,

-         Deuxième champ,

-         Troisième champ, etc.

</form>

 

La balise <form> peut recevoir plusieurs attributs :

 

·        Action, c’est l’action qui doit être réalisée lorsque l’utilisateur clique sur le bouton de validation du formulaire. L’action peut être l’exécution d’un « fichier script « », technique bien sûr réservée aux programmeurs, ou l’envoie du formulaire par E-Mail, et dans ce cas de figure, la propriété de cet attribut est l’adresse de messagerie du Webmaster précédée du mot clef « mailto », par exemple,

action="mailto:philippe.boulanger@jaws-actions.fr"

·        method, c’est la méthode de transfert que l’on va utiliser pour expédier les données. C’est un aspect assez technique du net…

Bon, mais si ça peut vous rassurer, depuis un formulaire, on utilise toujours la même méthode.

C’est la méthode «  »post », donc : method="post"

L’autre méthode, c’est lorsqu’on passe des données en paramètres à un lien, c’est la méthode « get ».

 

Voici maintenant la syntaxe du formulaire un peut plus complète :

 

<form action="mailto:votre_E-Mail" method="post">

-    Premier champ,

-    Deuxième champ,

-    Troisième champ, etc.

</form>

 

Ce que vous devez assimiler, c’est qu’à l’intérieur du formulaire, vous allez élaborer des balises qui vont déclencher l’affichage de champs d’édition, de zones de listes déroulantes et autre type de champ, et un bouton qui permettra à l’utilisateur de valider sa saisie dans le formulaire.

 


Le champ de saisie text

 

Le champ de saisie « text » permet d’afficher à l’écran une zone de saisie d’une seule ligne.

 

La syntaxe :

<label for="NomDuLabel">Texte à afficher</label>

<input type="text" name="NomDuChamp" id="NomDuChamp" />

 

La description :

·        « Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ».

(Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

·        text est la propriété « type », il permet de spécifier que nous souhaitons une zone de texte d’une seule ligne.

·        NomDuChamp est la propriété de l’attribut « name », il permet de spécifier un nom au champ. Ce nom sera utilisé ensuite dans l’E-Mail que vous receverez, il permet d’identifier l’information. Pour le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attributs complémentaires :

·        size vous permet de spécifier la taille de la largeur du champ à afficher, cette valeur doit être exprimée en nombre de caractères, par exemple, pour un champ d’une largeur de 30 caractères : size="30"

·        maxlength vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

·        value vous permet de définir une valeur initiale à l'intérieur du champ dès son affichage à l'écran. Par exemple : value="bonjour"

 

Un exemple :

 

<h1>Saisie de votre nom</h1>

<form actions="mailto:toto@orange.fr" method="post">

<p>

<label for="Nom">Veuillez saisir votre nom</label>

<input type="text" name="Nom" id="Nom" size="30" maxlength="25" />

</p>

</form>

 


le champ de saisie mot de passe password

 

Le type de formulaire « password » permet d’afficher à l’écran une zone de saisie, dont les caractères saisis par l’utilisateur seront remplacés par des astérisques. 

Cette astuce permet de masquer les mots de passe saisis à l’écran, c’est monnaie courante !

 

La syntaxe :

<label for="NomDuLabel">Texte à afficher</label>

<input type="password" name="NomDuChamp" id="NomDuChamp" />

 

La description :

·        « Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ». (Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

·        « password » est la propriété de l’attribut « type », il permet de spécifier que nous souhaitons une zone de texte d’une seule ligne et protégée à l’affichage par l’utilisation d’astérisques.

·        « NomDuChamp » est la propriété de l’attribut « name », il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attributs complémentaires :

·        size vous permet de spécifier la taille de la largeur du champ à afficher, cette valeur doit être exprimée en nombre de caractères, par exemple, pour un champ d’une largeur de 30 caractères : size="30"

·        maxlength vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

·        value vous permet d'initier une valeur dans le champ et ce, dès son affichage.  par exemple : value="bonjour"

 

Un exemple :

<h1>Saisie du mot de passe</h1>

<form action=«mailto:toto@orange.fr» method="post">

<p>

<label for="MotDePasse">Veuillez saisir votre mot de passe</label>

<input type="password" name="MotDePasse" id="MotDePasse" size="25" maxlength="25" />

</p>

</form>

 

Le champ de saisie pour une adresse de messagerie email

 

Comme son nom l’indique clairement, ce type de champ permet de récupérer une adresse de messagerie, il s’agit là d’une nouveauté du HTML 5, il permet à certains navigateurs d’afficher des outils ou des contrôles liés aux différentes règles d’écriture d’une adresse de messagerie. Par contre, si le navigateur est trop ancien pour reconnaître ce type de champ, une simple zone de texte sera affichée.

 

La syntaxe :

<label for="Nom_du_label">Texte à afficher</label>

<input type="email" id="nom_du_label" name="nom_du_champ" />

 

La description :

·        « Nom_du_label_, il s’agit de la propriété de l’attribut « for », elle doit être identique à « Nom_du_label » spécifié en tant que propriété à l’attribut « id » de la balise « input ».

·        « Nom_du_champ », il s’agit là de l’identifiant du champ, il sera spécifié lors de l’affichage de l’adresse de messagerie dans l’E-Mail du formulaire.

 

Attributs complémentaires :

·        « size », permet de spécifier la taille en caractères du champ, par exemple : size="55".

·        « maxlength », permet d’indiquer la longueur maximale autorisée du champ, par exemple : maxlength="55".

·        « value », permet d’afficher un texte par défaut dans la zone de texte, par exemple : value="essai@domaine.com".

 

Voici un exemple :

<h1>Un peu de curiosité</h1>

<form action="toto@orange.fr" method="post">

<p>

<label for="email">Votre adresse de messagerie : </label>

<input type="email" id="email" name="email" size="50" />

</p>

</form>

 

Le champ de saisie pour une adresse de site url

 

Comme son nom l’indique clairement, ce type de champ permet de récupérer L’URL d’un site, d’une page WEB, il s’agit là d’une nouveauté du HTML 5, il permet à certains navigateurs d’afficher des outils ou des contrôles liés aux différentes règles d’écriture d’une URL.

Par contre, si le navigateur est trop ancien pour reconnaître ce type de champ, une simple zone de texte sera affichée.

 

La syntaxe :

<label for="Nom_du_label">Texte à afficher</label>

<input type="url" id="nom_du_label" name="nom_du_champ" />

 

La description :

·        « Nom_du_label_, il s’agit de la propriété de l’attribut « for », elle doit être identique à « Nom_du_label » spécifié en tant que propriété à l’attribut « id » de la balise « input ».

·        « Nom_du_champ », il s’agit là de l’identifiant du champ, il sera spécifié lors de l’affichage de L’URL dans l’E-Mail du formulaire.

 

Attributs complémentaires :

·        « size », permet de spécifier la taille en caractères du champ, par exemple : size="55".

·        « maxlength », permet d’indiquer la longueur maximale autorisée du champ, par exemple : maxlength="55".

·        « value », permet d’afficher un texte par défaut dans la zone de texte, par exemple : value="http://www.MonSite.com".

 

Voici un exemple :

 

<h1>Qui êtes-vous ?</h1>

<form action="mailto:toto@orange.fr" method="post">

<p>

<label for="URL">L'adresse de votre site : </label>

<input type="url" id="URL" name="URL" size="60" />

</p>

</form>

 

Le champ de saisie pour un numéro de téléphone tel

 

Comme son nom l’indique clairement, ce type de champ permet de récupérer un numéro de téléphone, il s’agit là d’une nouveauté du HTML 5, il permet à certains navigateurs d’afficher des outils ou des contrôles liés aux différentes règles d’écriture d’un numéro de téléphone.

Par contre, si le navigateur est trop ancien pour reconnaître ce type de champ, une simple zone de texte sera affichée.

 

La syntaxe :

<label for="Nom_du_label">Texte à afficher</label>

<input type="tel" id="nom_du_label" name="nom_du_champ" />

 

La description :

·        « Nom_du_label_, il s’agit de la propriété de l’attribut « for », elle doit être identique à « Nom_du_label » spécifié en tant que propriété à l’attribut « id » de la balise « input ».

·        « Nom_du_champ », il s’agit là de l’identifiant du champ, il sera spécifié lors de l’affichage du numéro de téléphone dans l’E-Mail du formulaire.

 

Attributs complémentaires :

·        « size », permet de spécifier la taille en caractères du champ, par exemple : size="55".

·        « maxlength », permet d’indiquer la longueur maximale autorisée du champ, par exemple : maxlength="55".

·        « value », permet d’afficher un texte par défaut dans la zone de texte, par exemple : value="01.99.99.99.99".

 

Voici un exemple :

 

<h1>Quelles sont vos coordonnées ?</h1>

<form action="mailto:toto@orange.fr" method="post">

<p>

<label for="téléphone"> Votre numéro de portable, merci :  </label>

<input type="tel" id="téléphone" name="téléphone" size="14" />

</p>

</form>

 

Le champ de saisie pour un nombre entier number

 

Ce champ est une nouveauté du HTML 5, il permet la récupération d’un entier, ainsi, des outils ou des contrôles peuvent être mis en œuvre par certains navigateurs.

 

La syntaxe :

<label for="Nom_du_champ">Texte à afficher</label>

<input type="number" id="Nom_du_champ" name="nom_du_champ" />

 

La description :

·        « nom_du_champ » est l’identifiant employé ici pour réaliser la relation entre l’attribut « for » et « id », ainsi que pour identifier le champ via l’attribut « name ».

·        « number » est la propriété de l’attribut « type », elle permet d’indiquer que la donnée à récupérer est de type « nombre entier ».

 

Des attributs complémentaires :

·        size, permet de spécifier la largeur du champ en caractères, par exemple size="15"

·        min, permet de spécifier l’entier le plus petit autorisé, par exemple : min="18"

·        max, permet de spécifier l’entier le plus grand autorisé, par exemple : max="100"

·        step, dans le cas où le navigateur offre la possibilité de choisir le nombre en le faisant défiler avec la souris, step permet de spécifier la valeur du pas, l’incrémentation, par exemple « 10 » pour avancer ou reculer de 10 en 10, step="10"

 

Par exemple :

<h1>Une offre spéciale</h1>

<form action="mailto:toto@orange.fr" method="post">

<p>

<label for="remise">Choisissez la remise qui vous convient le mieux (en pourcentage) : </label>

<input  type="number" id="remise" name="remise" size="3" min="5" max="100" step="5" />

</p>

</form>

 

Le champ de saisie multi lignes textarea

 

A l’écran, <textarea> ressemble beaucoup au champ de type « text », excepté que l’utilisateur peut ici saisir plusieurs lignes…

 

La syntaxe :

<label for="NomDuLabel">Texte à afficher</label>

<textarea name="NomDuChamp" id="NomDuChamp" rows="NombreLignes" cols="TailleLargeur">

« éventuellement ici un texte dores et déjà présent dans le champ »

</textarea>

 

La description :

·        « Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ».

(Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

·        « NomDuChamp » est la propriété de l’attribut « name », il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

·        « NombreLignes » est la propriété que l’on doit spécifier à l’attribut « rows ». Il indique le nombre de lignes que doit contenir le champ.

·        « TailleLargeur » est la propriété que vous devez spécifier dans l’attribut « cols ». Elle doit être exprimée en caractères, ce sera la largeur affichée de la zone de texte à l’écran.

 

Pourquoi la balise « input » s’écrit-elle en une seule balise tandis que « textarea » s’écrit avec l’éléments de début de balise <textarea> et l’élément de fin de balise </textarea> ?

Eh bien tout simplement parce que vous pouvez saisir vous-mêmes le texte initial entre les deux balises…

<textarea les attributs>texte initial</textarea>

Il s’agit donc du texte à afficher dès l’initialisation du champ à l’écran…

 

Attributs complémentaires :

·       « maxlength » vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

 


Un exemple :

 

<h1>Observations sur ce manuel</h1>

<form action=«mailto:toto@orange.fr» method="post">

<p>

<label for="Observation">Avez-vous des observations à me soumettre concernant ce manuel ?</label>

<br />

<textarea name="Observation" id="Observation" rows="5" cols="75">

En réalité, Je sais que tout est parfait...

<br />

lol

</textarea>

</p>

</form>

 

Le champ case à cocher checkbox

 

« checkbox » est une propriété de l’attribut « type » de la balise « input ».

C’est la case à cocher…

 

La syntaxe :

<p>Texte à afficher à l’utilisateur

<input type="checkbox" name="NomDuChamp" id="NomDuChamp" />

<label for="NomDuLabel">Texte de la case à cocher</label>

</p>

 

La description :

·        « Texte à afficher » est le texte à afficher devant la case à cocher.

Il peut s’agir parfois d’une question du genre, :

Est-ce que vous m’aimez ?

·        Par contre, « texte de la case à cocher » est le texte directement placé sur la case à cocher, il peut être en quelle que sorte la réponse à la question…

Ce texte doit être placé entre les éléments de la balise <label> et </label>.

Il utilise l’attribut « for » qui permet de donner un nom au label, généralement, vous lui donnerez le même nom que celui que vous allez choisir juste après pour le champ, par l’intermédiaire des attributs « name » et « id ».

·        NomDuChamp est la valeur des attributs name et id, il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attribut complémentaire :

·        Checked est un attribut de la balise « input », il ne peut accepter que la propriété « checked », et il permet de définir si la case à cocher doit être cochée dès son affichage.

Par défaut la case à cocher n’est pas cochée !

Pour la cocher, spécifiez checked= »checked ».

 

Un exemple :

<h1>Proposition de voyage</h1>

<p>

<form action=«mailto:toto@orange.fr» method="post">

désirez-vous visiter PARIS ?

<input type="checkbox" name="Reponse" id="Reponse" />

<label for="Reponse">Oui j'aimerais</label>

</form></p>

 


La zone d’options radio

 

La zone d'options vous permet de faire un choix (et un seul) parmi une liste de possibilités.

C’est ce que l’on appelle plus couramment le bouton radio !

Dans la balise « input », vous devez affecter la propriété « radio » à l’attribut « type ».

 

La syntaxe :

<p>

Le texte à afficher, ou une question

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix1" id="NomDuChoix1" />

<label for="NomDuChoix1">Texte du premier choix affiché</label><br />

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix2" id="NomDuChoix2" />

<label for="NomDuChoix2">Texte du deuxième choix affiché</label><br />

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix3" id="NomDuChoix3" />

<label for="NomDuChoix3">Texte du troisième choix affiché</label>

( etc.)

</p>

 

La description :

·        NomDuBoutonRadio » est le nom du bouton radio à affecter à l’attribut « name », il doit être le même dans tous les « input ».

·        « NomDuChoix1 », « NomDuChoix2 », « NomDuChoix3 » etc., ce sont les noms des différents choix proposés dans le bouton radio. Il s’agit de la valeur à affecter aux attributs « value », « id » et « for ». Le nom choisi doit différer d’un input à l’autre…

En effet, chaque choix du bouton radio doit avoir son propre identifiant !

·        « Nom du premier choix », « Nom du deuxième choix », « Nom du troisième choix »etc., ce sont tout simplement le nom des choix affichés à l’écran dans le bouton radio. Ces noms doivent bien sûr également différer d’un label à l’autre…

 

Attribut complémentaire :

·        checked vous permet de définir l’un des choix à cocher par défaut lors de l’affichage du bouton radio. Seule l’une des balises doit contenir cet attribut et il est facultatif.

Cet attribut ne peut recevoir qu’une seule propriété, c’est « checked ». Vous devez donc écrire : checked= »checked ».

 


Un exemple :

 

<h1>Question indiscrète</h1>

<form action=«mailto:toto@orange.fr» method="post">

<p>

Où habitez-vous ?

<input type="radio" name="ville" value="paris" id="paris" /><label for="paris">Dans la grande et belle ville de PARIS</label> <br />

<input type="radio" name="ville" value="Marseille" id="Marseille" /><label for="Marseille">Là où on pêche beaucoup de sardines dans le port, MARSEILLE</label> <br />

<input type="radio" name="ville" value="saintbouillez" id="saintbouillez" /><label for="saintbouillez">Euh, là où personne ne veut aller, à Saint-BOUILLEZ de puis en perdu du petit bois</label>

</p>

</form>


La liste déroulante select

 

La liste déroulante « select » permet d’afficher une liste de choix dont l’utilisateur ne pourra réaliser qu’un choix unique.

 

La syntaxe :

<p>

<label for="NomDeLaListe">Question à poser</label>

<select name="NomDeLaListe" id="NomDeLaListe">

<option value="NomDuChoix1">Text du premier choix</option>

<option value="NomDuChoix2">Text du deuxième choix</option>

<option value="NomDuChoix3">Text du troisième choix</option>

<blablabla)

</select></p>

 

La description :

·        Les attributs « for » « name » et « id » doivent recevoir la même propriété, c’est le nom que l’on donne à la liste.

·        « La question à poser » est le texte à afficher au-dessus de la liste, il doit être imbriqué entre les éléments de balises <label> et </label>.

·        Ensuite viennent les différents choix de la liste…

Chacun des choix de la liste doit avoir son propre texte bien sûr, ça coule de source !

Le texte est placé entre les éléments de balises <option> et </option>.

·        L’attribut value « » de la balise « option » précise le nom de l’élément de la liste, c’est un identifiant, il doit être unique pour chacun des éléments de la liste.

 

Attribut complémentaire :

·        L’attribut « selected » peut être placé dans l’une des balises « option ». Il permet de définir quel élément doit être sélectionné au moment de l’affichage de la liste. La propriété qu’il peut recevoir est « selected », donc : selected= »selected ».

 

Un exemple :

 

<h1>La destination de votre voyage</h1>

<form action=«mailto:toto@orange.fr» method="post">

<p>

<label for="pays">Dans quel pays désirez-vous partir ?</label>

<select name="pays" id="pays">

<option value="france">LA FRANCE</option>

<option value="italie">L'ITALIE</option>

<option value="bresil">LE BRESIL</option>

<option value="japon">LE JAPON</option>

<option value="chine">LA CHINE</option>

</select>

</p>

</form>

 


La balise <optgroup> : :

 

La balise <optgroup> permet d’encapsuler des éléments de la liste pour définir des éléments de même catégorie.

Vous devez ouvrir la balise <optgroup> en spécifiant le nom du groupe, puis vienne les différents éléments <option> contenu dans le groupe, et pour finir, vous devez refermer le groupe par l’élément de fin </optgroup>.

Un exemple :

 

<h1>Choix d'un prénom</h1>

<form action=«mailto:toto@orange.fr» method="post">

<p>

<label for="prenom">Quel prénom désirez-vous donner à votre nouvel enfant ?</label>

<select name="prenom" id="prenom">

<optgroup label="fille">

<option value="brigitte">Brigitte</option>

<option value="margueritte">Margueritte</option>

<option value="corinne">Corinne</option>

</optgroup>

<optgroup label="garçon">

<option value="marc">Marc</option>

<option value="pascal">Pascal</option>

<option value="philippe">Philippe</option>

</optgroup>

</select>

</p>

</form>

Définir des raccourcis clavier avec l’attribut accesskey

 

L’attribut « accesskey » vous permet d’associer un raccourci clavier à un champ du formulaire.

Il vous suffit d’ajouter l’attribut « accesskey » dans la balise du formulaire et de lui affecter en valeur une lettre ».

Dans le navigateur INTERNET EXPLORER, la combinaison de la touche ALT et de la lettre spécifiée dans « accesskey » aura pour conséquence de mettre le focus sur le champ contenant l’attribut…

Il se peut toutefois que certains navigateurs choisissent une autre touche que la touche ALT.

 

Par exemple, dans INTERNET EXPLORER, pour associer le raccourci clavier ALT +E au bouton enregistrer :

<input type="submit" value"Enregistrer" accesskey="e" />

 


Définir la prise de focus avec la propriété autofocus

 

La propriété  « autofocus » est employé dans un formulaire pour définir la priorité de la prise de focus.

Si vous souhaitez par exemple que le focus soit placé dans le champ « nom » :

<label for="nom">Votre nom ici : </label>

<input type="text" id="nom" name="nom" size="25" autofocus />

 

Remarque :

·        Compte tenue du fait qu’un seul champ peut prendre le focus lors de l’ouverture d’une page, seul le champ concerné du formulaire peut posséder la propriété « autofocus ».

 

Rendre un champ obligatoire avec la propriété required

 

En plaçant la propriété « required » dans un champ, certains navigateurs s’assurent que ce champ a été conformément renseigné. Si ce n’est pas le cas, un message d’erreur est affiché.

Par exemple :

<label for="nom">Votre nom ici : </label>

<input type="text" id="nom" name="nom" size="25" autofocus required />

 

Regrouper les champs de formulaires avec fieldset legend

 

Si votre formulaire est de grande taille, vous pouvez regrouper les différents champs qui le composent par catégorie, et ce, par l’intermédiaire des balises <fieldset> et </fieldset>.

Il vous suffit d’imbriquer les champs de même catégorie à l’intérieur d’un bloc <fieldset> afin que le regroupement soit réalisé…

De plus, pour nommer chacune des catégories, vous disposez de la balise <legend>.

 

La syntaxe :

 

<form action=«mailto:toto@orange.fr» method="post">

<p>

<fieldset>

<legend>Première catégorie de champs</legend>

<label blablabla...

<input blablabla...

>label blablabla...

<input blablabla...

</fieldset>

<fieldset>

 <legend>Deuxième catégorie de champs</legend>

<label blablabla...

<input blablabla...

<label blablabla...

<input blablabla...

</fieldsect>

</p>

</form>

 


Voici un exemple :

<h1>Création d'un compte</h1>

<form action="mailto:toto@orange.fr method="post">

<!-- ouverture du premier groupe de champs -->

<fieldset label="identité">

<legend>Informations sur votre identité</legend>

<p>

<label for="nom">Votre nom : </label>

<input type="text" id="nom" name="nom" size="50" />

</p>

<p>

<label for="prénom">Votre prénom : </label>

<input type="text" id="prénom" name="prénom" size="50" />

</p>

<p>

<label for="messagerie">Votre adresse de messagerie : </label>

<input type="email" id="messagerie" name="messagerie" size="50" />

</p>

</fieldset>

<!-- Ouverture du second groupe de champs -->

<fieldset label="compte">

<legend>Informations sur votre compte</legend>

<p>

<label for="login">Choisissez un login : </label>

<input type="text" id="login" name="login" size="50" />

</p>

<p>

<label for="MotDePasse1">Mot de passe : </label>

<input type="password" id="MotDePasse1" name="MotDePasse1" size="35" />

</p>

<p>

<label for="MotDePasse2">Confirmez le mot de passe : </label>

<input type="password" id="MotDePasse2" name="MotDePasse2" size="40" />

</p>

</fieldset>

</form>


Valider le formulaire via le boutonsubmit

 

Voilà, maintenant que vous avez étudié les différents types de champs que vous pouvez présenter dans un formulaire, il vous faut découvrir par quel moyen le formulaire va être validé.

Il existe 3 types de boutons :

  1. submit, qui valide le formulaire en exécutant le nom du fichier spécifié dans l’attribut « action » de la balise « form », et bien sûr, comme vue précédemment dans tous les exemples, une adresse de messagerie peut être spécifiée.
  2. reset, qui réinitialise les différents champs du formulaire à zéro. Attention, avec JAWS, vous devez impérativement rafraîchir l’écran avec Insère +échappement pour pouvoir apprécier le fulgurant résultat !
  3. button, qui ne fait rien de particulier, mais les langages de programmation événementiels tel que le JavaScript s’en servent pour y associer des traitements.

 

Ici nous allons donc nous intéresser aux deux premiers…

 

La syntaxe :

Pour le bouton de validation du formulaire :

<input type="submit" value="NomDuBouton" />

Pour le bouton de réinitialisation :

<input type="reset" value="NomDuBouton" />

 

La description :

·        “NomDuBouton” est le nom du bouton affiché à l’écran, tout simplement…

Il peut être du genre : »Valider », « Enregistrer », « Effacer », « Accepter » etc.

 

Par exemple :

<input type="submit" value="Valider" />

<br />

<input type="reset" value="Effacer" />


Envoyer le formulaire par E-Mail

 

Sur le NET, vous pouvez concevoir un formulaire dont le rôle sera de vous expédier des informations saisies par les visiteurs de votre site.

Les informations du formulaire vous seront expédiées par courrier électronique via la méthode « post ». Toutefois, il faut que le visiteur ait un compte de messagerie sur son ordinateur s’il désire utiliser cette technologie…

Voici globalement le schéma du formulaire :

 

<form action="mailto:VotreAdresseDeMessagerie" method="post" enctype="text/plain">

<!-- ici, c'est la conception du formulaire avec un bouton de type "submit" -->

 

La description :

·        action="mailto:VotreAdresseDeMessagerie" est l’attribut qui permet de définir l’adresse de messagerie vers lequel l’E-Mail contenant le formulaire devra être dirigé.

Vous devez écrire l’adresse de messagerie juste après « mailto: ». Cependant, vous pouvez rajouter l’objet du courrier en tant que paramètre. Dans ce cas de figure, avant de fermer les guillemets, vous placez un « point d’interrogation » suivi de « subject: » et de l’objet lui-même. Par exemple, pour envoyer un E-Mail à « toto@orange.fr » avec l’objet « prise de contact », voici ce qu’il faut écrire :

action="mailto:toto@orange.fr?subject:Prise de contact"

·        method="post" est la méthode de transfert utilisée par INTERNET.

·        enctype="text/plain" est l’attribut et la propriété permettant de placer le contenu du formulaire dans le corps de l’E-Mail et de façon claire.

 


Un exemple

 

Voici l’instant de vous présenter un formulaire relativement significatif…

Tester la page >>

 

Le code :

<!DOCTYPE html enctype="text/plain">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title> mon titre </title>

<bgsound src="../../audio/exemple.mp3" />

</head>

<body>

 

</body>

</html>

 

Philippe BOULANGER