Les formulaires HTML
Ils constituent un élément important du développement Web, puisqu'ils permettent principalement de recueillir certaines informations utiles auprès des visiteurs.
Un formulaire de demande de renseignements rend le site tout à coup plus interactif.
Les formulaires offrent également des options de navigation intéressantes...
Il est parfois préférables d'intégrer dans sa page html des formulaires dynamique personnalisables externes au site, comme le propose Google Drive ou Weebly par exemples. Nous en reparlons plus tard...
Un formulaire de demande de renseignements rend le site tout à coup plus interactif.
Les formulaires offrent également des options de navigation intéressantes...
Il est parfois préférables d'intégrer dans sa page html des formulaires dynamique personnalisables externes au site, comme le propose Google Drive ou Weebly par exemples. Nous en reparlons plus tard...
A. Définir la feuille de formulaire :
La conception d'un formulaire simple dans une page HTML implique 2 manoeuvres :
B. Un bon formulaire doit être accessible :
C. Balises et attributs :
Il y en a 2 :
MAILTO. Si le serveur de messagerie est accessible, le corps du message acheminé
contiendra la liste des couples champ1=valeur1.
Exemple :
<FORM action="mailto:[email protected]" method=post NAME="Fiche_inscription">
D. Les éléments d'un formulaire :
Les différents éléments d'un formulaire sont à insérer à l'intérieur des balises <FORM>...</FORM>
a) La boîte texte :
La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur.
Code source :
<P><FORM>
Nom : <INPUT NAME="Nom" SIZE="40" MAXLENGTH="40" VALUE="voilà une boîte texte">
</FORM></P>
Résultat :
La conception d'un formulaire simple dans une page HTML implique 2 manoeuvres :
- La première consiste à délimiter les éléments constituant le formulaire. Ainsi, le navigateur pourra identifier l'endroit où débute le formulaire et où il prend fin, en repérant les balises <FORM> et </FORM> dans le corps <BODY> de la page.
- La deuxième fonction consiste à spécifier les paramètres du formulaire que sont le nom, l'action, la méthode d'envoi et le type d'encodage. Tous ces paramètres se juxtaposent à l'intérieur des balises <FORM>.
B. Un bon formulaire doit être accessible :
- Mise en page simple (p. ex., sur une seule colonne) des contrôles et des zones de saisie;
- Explications ou étiquettes claires (significatives) associées aux zones et aux contrôles;
- Vérification et validation côté serveur de la saisie des données (quand c'est possible...);
- Proposition d'autres méthodes pour communiquer avec une personne-ressource et/ou transmettre de l'information;
- Il est possible de faire interagir un script CGI externe au formulaire HTML pour le rendre plus dynamique, comme par exemple le célèbre formail.CGI qui permet d'envoyer automatiquement le contenu d'un formulaire dans votre mailboxe... Pour rendre cette fonction opérationnelle, il est nécessaire que le serveur d'hébergement possède un répertoire CGI contenant les scripts appropriés (parfois proposés par les hébergeurs).
C. Balises et attributs :
- La balise FORM :
Possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer des données.
- Attribut ACTION :
<FORM ACTION="url"...>
Permet d'indiquer l'URL (protocole : http, ftp, file, mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsqu'on clique sur le bouton de validation. Plus précisément, l'URL sera l'adresse d'un programme (un script CGI par exemple) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.
- L'attribut METHOD :
L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire.
Il y en a 2 :
- La méthode GET : méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation. Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ. On obtient alors une requête adressée au serveur, du genre : http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&....
- La méthode POST : Génère une requête HTTP spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST.
- L'action MAILTO :
C'est un des moyens les plus simples pour faire expédier les informations encodées dans le formulaire par l'utilisateur. Il consiste à utiliser automatiquement le courrier électronique.
MAILTO. Si le serveur de messagerie est accessible, le corps du message acheminé
contiendra la liste des couples champ1=valeur1.
Exemple :
<FORM action="mailto:[email protected]" method=post NAME="Fiche_inscription">
D. Les éléments d'un formulaire :
Les différents éléments d'un formulaire sont à insérer à l'intérieur des balises <FORM>...</FORM>
a) La boîte texte :
La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur.
Code source :
<P><FORM>
Nom : <INPUT NAME="Nom" SIZE="40" MAXLENGTH="40" VALUE="voilà une boîte texte">
</FORM></P>
Résultat :
Explication de la syntaxe :
<P></P> Tout ce qui se trouve entre ces 2 balises est dans le même paragraphe.
INPUT définit le type de boîte, ici texte en entrée.
NAME="nom idenficateur" Nom de la boîte texte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= "nombre" Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH= "nombre" fixe le nombre maximal de caractères permis.
b) La boîte mot de passe :
La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. Les caractères tapés sont représentés par des astérisques ou des points (selon le navigateur).
Entrez votre mot de passe:
Code source :
<FORM>
Entrez votre mot de passe :
<INPUT NAME="motdepasse" SIZE="20" MAXLENGTH="20">
</FORM>
Résultat :
<P></P> Tout ce qui se trouve entre ces 2 balises est dans le même paragraphe.
INPUT définit le type de boîte, ici texte en entrée.
NAME="nom idenficateur" Nom de la boîte texte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= "nombre" Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH= "nombre" fixe le nombre maximal de caractères permis.
b) La boîte mot de passe :
La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. Les caractères tapés sont représentés par des astérisques ou des points (selon le navigateur).
Entrez votre mot de passe:
Code source :
<FORM>
Entrez votre mot de passe :
<INPUT NAME="motdepasse" SIZE="20" MAXLENGTH="20">
</FORM>
Résultat :
Explication de la syntaxe :
INPUT définit le type de boîte, ici mot de passe en entrée.
NAME="nom idenficateur" Nom de la boîte.
SIZE="nombre" Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH="nombre" fixe le nombre maximal de caractères permis.
c) Les boutons radio :
Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.
Exemple :
INPUT définit le type de boîte, ici mot de passe en entrée.
NAME="nom idenficateur" Nom de la boîte.
SIZE="nombre" Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH="nombre" fixe le nombre maximal de caractères permis.
c) Les boutons radio :
Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.
Exemple :
NB : Les boutons radio n'apparaissent pas ci-dessus (en raison de la feuille de style de ce site), mais sont présents sur une page html classique...
Code source :
<FORM>
Dans quel groupe d'âge se trouve le visiteur ?<BR>
<INPUT NAME="Groupedage" VALUE="16-25 ans" CHECKED> 16-25 ans<BR>
<INPUT NAME="Groupedage" VALUE="26-35 ans"> 26-35 ans<BR>
<INPUT NAME="Groupedage" VALUE="36-45 ans"> 36-45 ans<BR>
<INPUT NAME="Groupedage" VALUE="46-65 ans"> 46-65 ans<BR>
<INPUT NAME="Groupedage" VALUE="65 ans et plus"> 65 ans et plus
</FORM>
Explication de la syntaxe :
INPUT Cela définit le type de case, ici case radio.
NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est le même mais il peut être différent.
VALUE="valeur" Contenu par défaut ici les tranches d'âge.
CHECKED indique que l'item est sélectionné par défaut au chargement de la page.
d) Les cases à cocher :
Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix.
Exemple :
<FORM>
Dans quel groupe d'âge se trouve le visiteur ?<BR>
<INPUT NAME="Groupedage" VALUE="16-25 ans" CHECKED> 16-25 ans<BR>
<INPUT NAME="Groupedage" VALUE="26-35 ans"> 26-35 ans<BR>
<INPUT NAME="Groupedage" VALUE="36-45 ans"> 36-45 ans<BR>
<INPUT NAME="Groupedage" VALUE="46-65 ans"> 46-65 ans<BR>
<INPUT NAME="Groupedage" VALUE="65 ans et plus"> 65 ans et plus
</FORM>
Explication de la syntaxe :
INPUT Cela définit le type de case, ici case radio.
NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est le même mais il peut être différent.
VALUE="valeur" Contenu par défaut ici les tranches d'âge.
CHECKED indique que l'item est sélectionné par défaut au chargement de la page.
d) Les cases à cocher :
Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix.
Exemple :
NB : Idem, les cases à cocher n'apparaissent pas ci-dessus (en raison de la feuille de style de ce site), mais sont présents sur une page html classique...
Code source :
<FORM ACTION="" METHOD=POST>
<P>Faites votre choix :<BR>
<INPUT NAME=option1 VALUE=Danse>Danse<BR>
<INPUT NAME=option2 VALUE="Arts plastiques">Arts plastiques<BR>
<INPUT NAME=option3 VALUE=Musique>Musique<BR>
<INPUT NAME=option4 VALUE=Sport>Sport<BR>
<INPUT NAME=option5 VALUE="Multimédia">Multimédia<BR>
<INPUT NAME=option6 VALUE="Théâtre">Théâtre
</FORM>
Explication de la syntaxe :
INPUT Définit le type de case, ici case à cocher.
NAME="nom idenficateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut, ici les options d'un stage.
e) La boîte liste :
La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL.
Exemple :
Une liste de cours parmi lesquels l'utilisateur peut faire un choix...
<FORM ACTION="" METHOD=POST>
<P>Faites votre choix :<BR>
<INPUT NAME=option1 VALUE=Danse>Danse<BR>
<INPUT NAME=option2 VALUE="Arts plastiques">Arts plastiques<BR>
<INPUT NAME=option3 VALUE=Musique>Musique<BR>
<INPUT NAME=option4 VALUE=Sport>Sport<BR>
<INPUT NAME=option5 VALUE="Multimédia">Multimédia<BR>
<INPUT NAME=option6 VALUE="Théâtre">Théâtre
</FORM>
Explication de la syntaxe :
INPUT Définit le type de case, ici case à cocher.
NAME="nom idenficateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut, ici les options d'un stage.
e) La boîte liste :
La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL.
Exemple :
Une liste de cours parmi lesquels l'utilisateur peut faire un choix...
Code source :
<FORM ACTION="" METHOD=POST>
<SELECT NAME=Cours SIZE=5 MULTIPLE>
<OPTION VALUE=HTML>Apprendre le HTML
<OPTION VALUE=CHP3 SELECTED>Editeur HTML
<OPTION VALUE=FTP>Transfert de fichiers
<OPTION VALUE=CSS>Les feuilles de style
<OPTION VALUE=JAVA>Programmer en Java
</SELECT>
</FORM>
Explication de la syntaxe :
<SELECT NAME="nom de la liste" SIZE="nombre" MULTIPLE>
L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut MULTIPLE, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection.
<OPTION VALUE="Texte à définir par le webmaster"> Les entrées de la liste sont décrites par l'attribut OPTION. VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique par exemple.
<OPTION VALUE="Texte à définir par le webmaster" SELECTED> SELECTED, s'il est présent, indique que l'item est sélectionné par défaut au chargement de la page.
f) La boîte liste déroulante :
La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste.
Exemple:
<FORM ACTION="" METHOD=POST>
<SELECT NAME=Cours SIZE=5 MULTIPLE>
<OPTION VALUE=HTML>Apprendre le HTML
<OPTION VALUE=CHP3 SELECTED>Editeur HTML
<OPTION VALUE=FTP>Transfert de fichiers
<OPTION VALUE=CSS>Les feuilles de style
<OPTION VALUE=JAVA>Programmer en Java
</SELECT>
</FORM>
Explication de la syntaxe :
<SELECT NAME="nom de la liste" SIZE="nombre" MULTIPLE>
L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut MULTIPLE, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection.
<OPTION VALUE="Texte à définir par le webmaster"> Les entrées de la liste sont décrites par l'attribut OPTION. VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique par exemple.
<OPTION VALUE="Texte à définir par le webmaster" SELECTED> SELECTED, s'il est présent, indique que l'item est sélectionné par défaut au chargement de la page.
f) La boîte liste déroulante :
La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste.
Exemple:
Code source :
<FORM>
<SELECT NAME="Pays_origine">
<option value="Question" selected>Quel est votre pays d'origine</option>
<option value="Algerie">Algerie</option>
<option value="Allemagne">Allemagne</option>
<option value="Belgique">Belgique</option>
<option value="Canada">Canada </option>
<option value="Chili">Chili </option>
<option value="Chine">Chine </option>
<option value="Congo">Congo </option>
<option value="Espagne">Espagne</option>
<option value="Etats-Unis">Etats-Unis </option>
<option value="France">France </option>
<option value="Grande-Bretagne">Grande-Bretagne </option>
<option value="Grèce">Grèce </option>
<option value="Italie">Italie </option>
<option value="Japon">Japon</option>
<option value="Maroc">Maroc </option>
<option value="Suisse">Suisse </option>
</SELECT>
</FORM>
Explication de la syntaxe :
NAME= "nom de la liste"
<OPTION VALUE="Texte à définir par le webmaster"> Les entrées de la liste sont décrites par l'attribut OPTION. VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique par exemple.
<OPTION VALUE="Texte à définir par le concepteur" SELECTED> SELECTED, s'il est présent, indique que l'item est sélectionné par défaut au chargement de la page.
Un autre type de boîte liste peut également proposer une option de navigation rapide sous forme de menu déroulant sur vos pages web.
On fait appel ici à un petit code JAVASCRIPT qui s'insère dans le formulaire...
Comme illustré ci-dessous, utilisez le menu de navigation rapide (les liens peuvent être internes ou externes au site) :
Exemple de menu de navigation rapide :
Code source :
<FORM ACTION="" METHOD=POST>
<SELECT NAME=listmap onchange="if (form.listmap.selectedIndex != 0) location = form.listmap.options[form.listmap.selectedIndex].value; else alert('Veuillez choisir une autre destination.')">
<OPTION SELECTED>Navigation rapide sur ce site :
<OPTION>----
<OPTION VALUE="index.html">-> Page d'accueil
<OPTION VALUE="preacuteparation.html">-> Préparation du site web
<OPTION VALUE="html.html">-> Le langage HTML
<OPTION VALUE="la-page.html">-> Le formatage de la page
<OPTION VALUE="le-texte.html">-> Le formatage du texte
<OPTION VALUE="les-tableaux.html">-> Les tableaux
<OPTION VALUE="les-images">-> Les images
<OPTION VALUE="les-liens">-> Les liens
<OPTION VALUE="les-frames.html">-> Les frames
<OPTION VALUE="les-formulaires">-> Les formulaires
<OPTION VALUE="les-couleurs">-> Les couleurs RVB
<OPTION VALUE="les-fichiers-multimedia.html">-> Les fichiers multimedia
<OPTION VALUE="http://www.guycuvelier.net">-> Page du Webmaster
</SELECT><SCRIPT LANGUAGE=JavaScript>function src() { window.location = "view-source:" + window.location.href }</SCRIPT>
</FORM>
Il vous sera aisé de copier ce code, de le modifier et de l'insérer entre les balises BODY de votre page pour offrir une option de navigation rapide à vos visiteurs. Dans ce cas précis, les destinations proposées sont des pages html située dans le même répertoire.
Pour des pages se trouvant dans d'autres dossiers ou des pages externes au site, il faut entrer l'adresse URL complète de la page OPTION VALUE="URL de la page" (comme c'est le cas dans l'exemple pour la page du webmaster).
g) Le champ texte :
Le champ texte (ou boîte texte multilignes), à l'instar de la boîte texte, permet à l'utilisateur d'inscrire plus d'une ligne de texte et d'écrire un message complet, par exemple à l'attention du destinataire du formulaire.
Exemple :
Code source :
<FORM>
Donnez-nous vos commentaires:<BR>
<TEXTAREA NAME="Commentaires" COLS=30 ROWS=5 WRAP=virtual>
Veuillez écrire ici...
</TEXTAREA>
</FORM>
Explication de la syntaxe :
NAME="nom identificateur"
COLS="nombre de colonnes"
ROWS="nombre de rangées"
WRAP détermine la façon dont les lignes sont traitées lors d'un changement de ligne. La liste ci-dessous donne une description des différentes possibilités :
- OFF : aucun changement de ligne.
- VIRTUAL : les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.
- PHYSICAL : les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.
h) Les boutons 'envoyer' et 'recommencer':
Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup.
Exemple de code source :
<FORM>
ICI tous les éléments de votre formulaire, cases à cocher, boîte de texte, boutons radio ...<BR>
<INPUT TYPE=RESET VALUE="Envoyer">
<INPUT TYPE= SUBMIT VALUE="Recommencer">
</FORM>
Résultat :
Explication de la syntaxe :
Le bouton Envoyer est celui dont l'attribut TYPE est submit, tandis que le bouton Recommencer est reset.
i) Un exemple complet : Testez-le ! (utilisez le copier-coller)
Code source :
<TABLE BORDER=2 CELLSPACING=0 WIDTH="100%" BORDERCOLOR=green>
<TR>
<TD>
<FORM ACTION="votre adresse email" METHOD=POST NAME="Fiche_inscription">
<FONT SIZE="+1"><B>Formulaire d'inscription au stage</B><FONT><BR>
<BR>
<B>Nom :</B>
<INPUT NAME=Nom VALUE="" SIZE=30><BR><BR>
<B>Prénom :</B>
<INPUT NAME=Prenom VALUE="" SIZE=30><BR><BR>
<B>Mot de passe :</B>
<INPUT NAME=Pass VALUE="" SIZE=5><BR><BR>
<P><B>- Vous êtes dans l'enseignement :<BR>
</B><BR>
<INPUT NAME=option VALUE=Secondaire CHECKED>Secondaire<BR>
<INPUT NAME=option VALUE="Supérieur de type court">Supérieur de type court<BR>
<INPUT NAME=option VALUE="Supérieur de type long">Supérieur de type long<BR><BR>
<B>- Quelle est votre discipline préférée?</B><BR><BR>
<SELECT NAME="disciplines préférées" SIZE=5 MULTIPLE>
<OPTION>Musique
<OPTION SELECTED>Informatique
<OPTION>Cinéma
<OPTION>Sport
<OPTION>Théâtre
<OPTION>Danse
<OPTION>Bricolage
<OPTION>Lecture
</SELECT>
<BR><BR>
<B> - Ecrivez ci-dessous vos questions éventuelles :</B>
<BR><BR>
<TEXTAREA NAME="demande de renseignement " ROWS=8 COLS=55 WRAP=virtual>Voici ma demande...</TEXTAREA>
<TABLE BORDER=0 WIDTH="100%">
<TR>
<TD VALIGN=top WIDTH="50%" HEIGHT=39>
<INPUT TYPE=SUBMIT VALUE="Envoyer"><BR>
Envoyer les informations
</TD>
<TD VALIGN=top WIDTH="50%" HEIGHT=39>
<INPUT TYPE=RESET VALUE="Effacer"><BR>
Pour recommencer
</TD>
</TR>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>
Résultat :