Maîtriser le Maîtriser le langage HTML langage HTML
Les Formulaires
Les Formulaires
L'interactivité L'interactivité
Un site web au départ est fait pour lire et Un site web au départ est fait pour lire et obtenir des informations.
obtenir des informations.
On remarque ainsi que le site manque de On remarque ainsi que le site manque de mouvements, on peut donc ajouter des mouvements, on peut donc ajouter des
ingrédients qui demande à l’
ingrédients qui demande à l’
internauteinternaute d’ agir. d’ agir.
Ces ingrédients s’appellent : Ces ingrédients s’appellent :
Les FormulairesLes Formulaires
Avec les formulaires, Html vous ouvre les Avec les formulaires, Html vous ouvre les portes de l'interactivité et vous permet de portes de l'interactivité et vous permet de recevoir des informations provenant recevoir des informations provenant directement de votre lecteur et directement de votre lecteur et
éventuellement de lui répondre directement.
éventuellement de lui répondre directement.
L'interactivité L'interactivité
Votre site aura des éléments des programmes Votre site aura des éléments des programmes informatiques: cases à cocher, boutons, zones informatiques: cases à cocher, boutons, zones pour écrire, listes déroulantes, boutons pour écrire, listes déroulantes, boutons
d’options…
d’options…
En général, par la suite, on clique sur un bouton " En général, par la suite, on clique sur un bouton "
Envoyer
Envoyer " , ce qui déclenche le traitement des " , ce qui déclenche le traitement des données que l’utilisateur a entrées, et leur données que l’utilisateur a entrées, et leur envoie sur le site, sur votre courrier électronique, envoie sur le site, sur votre courrier électronique,
voilà en gros à quoi consiste un formulaire.
voilà en gros à quoi consiste un formulaire.
les données récupérées dans un formulaire les données récupérées dans un formulaire d'une page web peuvent être traitées de d'une page web peuvent être traitées de
nombreuses façon suivant ce que l'on souhaite nombreuses façon suivant ce que l'on souhaite
faire.
faire.
Quelques exemples, pour vous montrer leur Quelques exemples, pour vous montrer leur utilité:
utilité:
Un questionnaire sur l’internaute, ses Un questionnaire sur l’internaute, ses habitudes et ce qui lui plait ou pas sur habitudes et ce qui lui plait ou pas sur
votre site votre site
Un vote pour un jeu, une idée, un site …Un vote pour un jeu, une idée, un site …
Une commande sur un site de vente.Une commande sur un site de vente.
L'interactivité
L'interactivité
Définition d'un Définition d'un
formulaire
formulaire
Avant de pouvoir utiliser les différentes sortes de Avant de pouvoir utiliser les différentes sortes deformulaires (ligne de texte, liste déroulante, cases à formulaires (ligne de texte, liste déroulante, cases à cocher, etc.), il faut déclarer au browser qu'il devra cocher, etc.), il faut déclarer au browser qu'il devra
gérer
gérer des formulairesdes formulaires et ce qu'il devra en faire. et ce qu'il devra en faire.
<FORM method="post" action="URL d'expédition"
<FORM method="post" action="URL d'expédition"
enctype="text/plain">
enctype="text/plain">
... les formulaires proprement dit ...
... les formulaires proprement dit ...
</FORM>
</FORM>
L'attribut "L'attribut "methodmethod" vous offre le choix " vous offre le choix entre
entre getget et et postpost. La différence entre ces deux . La différence entre ces deux méthodes repose sur la façon dont
méthodes repose sur la façon dont les données les données
seront transmises au serveur et exploitées par celui- seront transmises au serveur et exploitées par celui- cici. Avec le temps, la méthode post s'est imposée car . Avec le temps, la méthode post s'est imposée car
elle apparaît plus efficace et permet le traitement elle apparaît plus efficace et permet le traitement
d'une quantité plus importante de données.
d'une quantité plus importante de données.
Définition d'un Définition d'un
formulaire
formulaire
L'attribut "L'attribut "actionaction" spécifie l'adresse d'expédition des " spécifie l'adresse d'expédition des données.données.
Dans le cas d'un envoie vers une autre page de Dans le cas d'un envoie vers une autre page de
traitement des données, on spécifie l’adresse de la traitement des données, on spécifie l’adresse de la
page.
page.
<FORM method="post" action="http://adressePage">
<FORM method="post" action="http://adressePage">
Dans le cas d'un envoi vers en adresse Dans le cas d'un envoi vers en adresse
électronique (email), on utilise le protocole
électronique (email), on utilise le protocole mailtomailto: : suivi de l'adresse électronique de destinataire
suivi de l'adresse électronique de destinataire (généralement votre adresse email).
(généralement votre adresse email).
<FORM method="post"action="mailto:nom.prenom@ensas.
<FORM method="post"action="mailto:nom.prenom@ensas.
ma">
ma">
(sans espace entre mailto
(sans espace entre mailto: et l'adresse email !): et l'adresse email !)
L'attribut L'attribut ""enctypeenctype" " (optionnel) (optionnel) spécifie spécifie l'encodage utilisé pour le contenu du l'encodage utilisé pour le contenu du formulaire. Ce paramètre ne peut être utilisé formulaire. Ce paramètre ne peut être utilisé qu'accompagné par la méthode post. Ainsi qu'accompagné par la méthode post. Ainsi
enctype="text/plain"
enctype="text/plain" encode le contenu du encode le contenu du formulaire en format texte lisible par le formulaire en format texte lisible par le destinataire. Cette option est particulièrement destinataire. Cette option est particulièrement
adaptée à l'action du type
adaptée à l'action du type mailtomailto..
Définition d'un Définition d'un
formulaire
formulaire
Il n'est pas inutile de prévoir l'attribut Il n'est pas inutile de prévoir l'attribut name="nom"
name="nom" si la page comporte plusieurs si la page comporte plusieurs formulaires.
formulaires.
Attention !!! emporté par votre impatience à Attention !!! emporté par votre impatience à encoder les formulaires, vous allez oublier la encoder les formulaires, vous allez oublier la
balise de fin
balise de fin </FORM>.</FORM>. Dans ce cas, à la Dans ce cas, à la visualisation dans le navigateur, rien ne sera visualisation dans le navigateur, rien ne sera
affiché.
affiché.
Définition d'un Définition d'un
formulaire
formulaire
INPUT type="text" indique un champ de saisie INPUT type="text" indique un champ de saisie d'une seule ligne. C'est assurément le formulaire d'une seule ligne. C'est assurément le formulaire
le plus simple à mettre en oeuvre : le plus simple à mettre en oeuvre :
<FORM>
<FORM>
<INPUT type="text" name="nom" size="50">
<INPUT type="text" name="nom" size="50">
</FORM>
</FORM>
L'attribut L'attribut name="nom du formulaire"name="nom du formulaire" est est quasiment obligatoire car on n'utilise que quasiment obligatoire car on n'utilise que
rarement un seul formulaire. Le nom va identifier rarement un seul formulaire. Le nom va identifier
la chaîne de caractères du champ de saisie. De la chaîne de caractères du champ de saisie. De façon schématique, nom = (ce qui est introduit façon schématique, nom = (ce qui est introduit
dans la ligne de texte).
dans la ligne de texte).
Ligne de texte
Ligne de texte
L'attribut L'attribut sizesize (optionnel) définit la longueur (optionnel) définit la longueur du champ de saisie. Notons que l'on peut
du champ de saisie. Notons que l'on peut introduire un nombre de caractères plus introduire un nombre de caractères plus
élevé que celui de la longueur.
élevé que celui de la longueur.
Il existe l'attribut Il existe l'attribut maxlength="x"maxlength="x"
(optionnel) qui limite le nombre réel de (optionnel) qui limite le nombre réel de
caractères que l'on peut introduire dans le caractères que l'on peut introduire dans le
champ de saisie.
champ de saisie.
La balise La balise <INPUT><INPUT> n'a pas de balise de fin. n'a pas de balise de fin.
Ligne de texte
Ligne de texte
La balise La balise <TEXTAREA></TEXTAREA><TEXTAREA></TEXTAREA> introduit introduit une zone de texte multilignes et non plus une une zone de texte multilignes et non plus une
simple ligne de texte. La syntaxe est : simple ligne de texte. La syntaxe est :
<FORM>
<FORM>
<TEXTAREA name="nom" rows=4
<TEXTAREA name="nom" rows=4 cols=40>Valeur par
cols=40>Valeur par défaut</TEXTAREA>
défaut</TEXTAREA>
</FORM>
</FORM>
L'attribut L'attribut namename permet de donner un nom au permet de donner un nom au formulaire.
formulaire.
Zone de saisie
Zone de saisie
L'attribut L'attribut rows=x rows=x détermine le nombre de détermine le nombre de lignes de la zone de texte.
lignes de la zone de texte.
L'attribut L'attribut cols=y cols=y détermine le nombre de détermine le nombre de caractères visibles sur chaque ligne ou si caractères visibles sur chaque ligne ou si
vous préférez le nombre de colonnes.
vous préférez le nombre de colonnes.
Attention !!! La balise Attention !!! La balise <TEXTAREA> <TEXTAREA> a une a une balise de fin, soit
balise de fin, soit </TEXTAREA>. </TEXTAREA>.
Zone de saisie
Zone de saisie
La balise <SELECT></SELECT> indique au La balise <SELECT></SELECT> indique au browser l'usage d'une liste déroulante. Les browser l'usage d'une liste déroulante. Les
éléments de la liste sont introduits par la éléments de la liste sont introduits par la
balise <OPTION> ... (</OPTION> facultatif).
balise <OPTION> ... (</OPTION> facultatif).
<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION>mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
Liste déroulante
Si vous cliquez sur la petite flèche vers le bas, vous Si vous cliquez sur la petite flèche vers le bas, vous obtiendrez la liste déroulante où on retrouve les
obtiendrez la liste déroulante où on retrouve les éléments de la liste (<OPTION>).
éléments de la liste (<OPTION>).
L'attribut name="nom" définit le nom du formulaire.L'attribut name="nom" définit le nom du formulaire.
L'attribut size="x" détermine le nombre d'éléments L'attribut size="x" détermine le nombre d'éléments de liste affiché dans la boite d'entrée. En fait,
de liste affiché dans la boite d'entrée. En fait, size="1" est optionnel car "1" est la valeur par size="1" est optionnel car "1" est la valeur par
défaut. Le même exemple avec size="3" donne : défaut. Le même exemple avec size="3" donne :
Liste déroulante
On peut présélectionner l'élément affiché dans la boite On peut présélectionner l'élément affiché dans la boite d'entrée (par défaut, le premier élément de la liste
d'entrée (par défaut, le premier élément de la liste sera retenu). On utilise pour ce faire l'attribut
sera retenu). On utilise pour ce faire l'attribut selectedselected de la balise
de la balise <OPTION>.<OPTION>. Pour faire afficher d'entrée Pour faire afficher d'entrée mercredi au lieu de lundi notre exemple devient : mercredi au lieu de lundi notre exemple devient :
<FORM>
<SELECT name="nom" size="1">
<OPTION>lundi
<OPTION>mardi
<OPTION selected> mercredi
<OPTION>jeudi
<OPTION>vendredi
</SELECT>
</FORM>
La balise La balise <SELECT><SELECT> a un balise de fin a un balise de fin </SELECT></SELECT>
tandis que le balise de fin
tandis que le balise de fin </OPTION> est facultative.</OPTION> est facultative.
Liste déroulante
Il serait plus logique de parler de boutons d'option car ils Il serait plus logique de parler de boutons d'option car ils n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un n'ont de sens que s'ils sont plusieurs. Ainsi on parle d'un groupe de boutons d'options. Les boutons d'option, aussi groupe de boutons d'options. Les boutons d'option, aussi appelés boutons
appelés boutons radioradio, ont comme particularité qu'une , ont comme particularité qu'une seule option à la fois peut être activée (le "ou" exclusif).
seule option à la fois peut être activée (le "ou" exclusif).
La syntaxe de base est : La syntaxe de base est :
<FORM>
<INPUT type="radio" name="nom du groupe" value="valeur du bouton">
</FORM>
Ainsi, si on propose un choix entre, ou le tarif de jour ou Ainsi, si on propose un choix entre, ou le tarif de jour ou le tarif de nuit ou le tarif de week-end, l'exemple devient le tarif de nuit ou le tarif de week-end, l'exemple devient
<FORM>
<INPUT type= "radio" name="tarif" value="jour"> tarif de jour
<INPUT type= "radio" name="tarif" value="nuit"> tarif de nuit
<INPUT type= "radio" name="tarif" value="week-end"> tarif de week-end
</FORM>
Bouton d'option
Vous avez compris que l'attribut name="nom" doit Vous avez compris que l'attribut name="nom" doit avoir le même nom pour tout le groupe de boutons avoir le même nom pour tout le groupe de boutons
d'option.
d'option.
L'attribut "checked" (optionnel) permet de L'attribut "checked" (optionnel) permet de présélectionner un bouton radio. Ainsi
présélectionner un bouton radio. Ainsi
<INPUT type= "radio" name="tarif" value="jour"
checked> tarif de jour
présenterait le bouton radio "tarif de jour" en position présenterait le bouton radio "tarif de jour" en position
présélectionnée.
présélectionnée.
Le contenu de l'attribut "value" du bouton retenu sera renvoyé par Le contenu de l'attribut "value" du bouton retenu sera renvoyé par mailto ou utilisé par le Javascript.
mailto ou utilisé par le Javascript.
La balise <INPUT> n'a pas de balise de fin.La balise <INPUT> n'a pas de balise de fin.
Pour la petite histoire le terme radio ferait référence aux anciens Pour la petite histoire le terme radio ferait référence aux anciens
postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait postes de radio sur lesquels le fait d'appuyer sur un bouton désactivait le bouton précédemment enfoncé.
le bouton précédemment enfoncé.
Bouton d'option
La philosophie des cases à cocher [checkbox] est assez similaire aux boites La philosophie des cases à cocher [checkbox] est assez similaire aux boites d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés. La d'option. Ici, cependant, plusieurs choix simultanés peuvent être réalisés. La syntaxe de base est :
syntaxe de base est :
<FORM>
<INPUT type="checkbox" name="nom" value="valeur attachée au bouton">
</FORM>
Comme exemple :Comme exemple :
<FORM>
<INPUT type="checkbox" name="choix1" value="1"> glace vanille
<INPUT type="checkbox" name="choix2" value="2"> chantilly
<INPUT type="checkbox" name="choix3" value="3"> chocolat chaud
<INPUT type="checkbox" name="choix4" value="4"> biscuit
</FORM>
Case à cocher
Les règles pour l'attribut name="nom" sont moins précises que pour Les règles pour l'attribut name="nom" sont moins précises que pour les boutons d'option. Vous pouvez employer des noms identiques ou les boutons d'option. Vous pouvez employer des noms identiques ou des noms différents pour chaque case à cocher. Cependant des noms des noms différents pour chaque case à cocher. Cependant des noms différents sont nécessaires pour l'utilisation d'un script.
différents sont nécessaires pour l'utilisation d'un script.
L'attribut checked (optionnel) permet de présélectionner une case à L'attribut checked (optionnel) permet de présélectionner une case à cocher. Ainsi
cocher. Ainsi
<INPUT type="checkbox" name="choix1" value="1" checked
> glace vanille
présenterait la case à cocher "glace vanille" en position présélectionnée.
présenterait la case à cocher "glace vanille" en position présélectionnée.
Le contenu de l'attribut "value" du ou des boutons retenus seront Le contenu de l'attribut "value" du ou des boutons retenus seront renvoyés par mailto ou utilisé par le Javascript.
renvoyés par mailto ou utilisé par le Javascript.
La balise <INPUT> n'a pas de balise de fin.La balise <INPUT> n'a pas de balise de fin.
Case à cocher
Avec l'introduction des langages de scripts (Javascript et VBscript) Avec l'introduction des langages de scripts (Javascript et VBscript) l'usage du bouton de commande présente un intérêt certain.
l'usage du bouton de commande présente un intérêt certain.
Simplement à titre d'illustration ou pour vous donner envie d'en Simplement à titre d'illustration ou pour vous donner envie d'en
savoir plus sur le Javascript, je vous propose d'en découvrir la savoir plus sur le Javascript, je vous propose d'en découvrir la
syntaxe : syntaxe :
<FORM>
<INPUT type="button" name="nom" value="texte du bouton"
onclick="fonction Javascript">
</FORM>
Voyons un petit exemple.Voyons un petit exemple.
<FORM>
<INPUT type="button" name="nom" value= "Bouton de test"
onclick="alert('Test réussi !')">
</FORM>
En cliquant sur le bouton "Bouton de test", on va déclencher une En cliquant sur le bouton "Bouton de test", on va déclencher une fonction Javascript élémentaire [mon cher Watson] qui consiste à fonction Javascript élémentaire [mon cher Watson] qui consiste à afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".
afficher une petite boite (dite d'alerte) avec le texte "Test réussi!".
Bouton de commande
L'attribut "value" permet d'adapter le texte du bouton à L'attribut "value" permet d'adapter le texte du bouton à vos souhaits.
vos souhaits.
Avec le bouton de commande, il n'est pas nécessaire Avec le bouton de commande, il n'est pas nécessaire
d'avertir le browser qu'on utilisera du Javascript par une d'avertir le browser qu'on utilisera du Javascript par une
balise du genre
balise du genre
<SCRIPT language="javascript">.<SCRIPT language="javascript">. En En effet, le navigateur (compatible Javascript) reconnaît par effet, le navigateur (compatible Javascript) reconnaît par
défaut les fonctions en Javascript. Par contre, si vous défaut les fonctions en Javascript. Par contre, si vous
utilisez du VBscript, il faudra utiliser l'encodage utilisez du VBscript, il faudra utiliser l'encodage
<INPUT type="button" name="test" value="Pour un test"
<INPUT type="button" name="test" value="Pour un test"
language="VBscript" OnClick="MsgBox 'Test réussi!'">
language="VBscript" OnClick="MsgBox 'Test réussi!'">
Bouton de commande
1. Submit
Le bouton Submit a la tâche spécifique de transmettre toutes les informations Le bouton Submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire à l'URL désignée dans les attributs ACTION et contenues dans le formulaire à l'URL désignée dans les attributs ACTION et
METHOD du tag <FORM>. L
METHOD du tag <FORM>. La syntaxe Html est :a syntaxe Html est :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :Soit par exemple :
<FORM>
<INPUT TYPE="submit" NAME="nom" VALUE=" Envoyer ">
</FORM>
Les modifications seront peu nombreuses car le bouton Submit a une Les modifications seront peu nombreuses car le bouton Submit a une
fonction Html très spécifique. Seul le texte du bouton pourra être modifié fonction Html très spécifique. Seul le texte du bouton pourra être modifié
(par défaut Submit).
(par défaut Submit).
La balise <INPUT> n'a pas de balise de fin.La balise <INPUT> n'a pas de balise de fin.
Submit et Reset
2. Reset
Le bouton Reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de
restaurer les valeurs par défaut. La syntaxe Html est :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE="texte du bouton">
</FORM>
Soit par exemple :
<FORM>
<INPUT TYPE="reset" NAME="nom" VALUE=" Annuler ">
</FORM>
Les modifications seront peu nombreuses car le bouton Reset a une fonction Html très spécifique.
Seul le texte du bouton pourra être modifié (par défaut Reset).
La balise <INPUT> n'a pas de balise de fin.
Submit et Reset
Proposer le code HTML qui permet la Proposer le code HTML qui permet la présentation du formulaire ci-après : présentation du formulaire ci-après :
Exercice
<HTML>
<HTML>
<FORM METHOD="POST" ACTION="">
<FORM METHOD="POST" ACTION="">
<p>
<p>
<h4><CENTER>Essai Formulaire </CENTER></H4>
<h4><CENTER>Essai Formulaire </CENTER></H4>
<pre><b>
<pre><b>
<LI>NOM: <input type="text« name="name" size=30>
<LI>NOM: <input type="text« name="name" size=30>
<LI>ADRESSE: <input type="text" name="street.address" size=30>
<LI>ADRESSE: <input type="text" name="street.address" size=30>
<LI>VILLE<input type="text" name="city" size=30>
<LI>VILLE<input type="text" name="city" size=30>
<LI>PROVINCE: <input type="text" size=15 name="state">
<LI>PROVINCE: <input type="text" size=15 name="state">
<LI>CODE POSTAL: <input type="text" name="zip" size=10>
<LI>CODE POSTAL: <input type="text" name="zip" size=10>
<LI>PAYS:<input type="text" name="country" size=20>
<LI>PAYS:<input type="text" name="country" size=20>
<LI>TELEPHONE: <input type="text" name="phone" size=10>
<LI>TELEPHONE: <input type="text" name="phone" size=10>
<LI>COURRIER ELECTRONIQUE: <input type="text" name="email"
<LI>COURRIER ELECTRONIQUE: <input type="text" name="email"
size=30>
size=30>
</b></pre>
</b></pre>
<input type="submit" value="Soumettre"> <input type="reset"
<input type="submit" value="Soumettre"> <input type="reset"
value="Effacer et value="Effacer et recommencer"><P>
recommencer"><P>
</form><p>
</form><p>
</BODY>
</BODY>
</HTML>
</HTML>