• Aucun résultat trouvé

Maîtriser le langage HTML. Les Formulaires

N/A
N/A
Protected

Academic year: 2022

Partager "Maîtriser le langage HTML. Les Formulaires"

Copied!
25
0
0

Texte intégral

(1)

Maîtriser le Maîtriser le langage HTML langage HTML

Les Formulaires

Les Formulaires

(2)

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’

internaute

internaute d’ agir. d’ agir.

Ces ingrédients s’appellent : Ces ingrédients s’appellent :

Les Formulaires

Les 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.

(3)

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.

(4)

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é

(5)

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 de

formulaires (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.

(6)

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 !)

(7)

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

(8)

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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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

(16)

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

(17)

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

(18)

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

(19)

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

(20)

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

(21)

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

(22)

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

(23)

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

(24)

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

(25)

<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>

Correction

Références

Documents relatifs

L'utilisation de formulaires de consentement est aussi une pratique quasi générale lors d'interventions pour lesquelles le consentement du patient doit être fixé sans la

• GET est la méthode par défaut et ajoute le contenu du formulaire à l’URL spécifié dans ACTION comme s’il s’agissait d’un query normalD. • POST envoie le contenu

Par exemple, un lieu de stage peut exister dans la base de données alors qu'aucun élève ne s'y rend au cours de cette année.. De même, un maître de stage peut se

Dans l'état actuel, lorsque un utilisateur valide le formulaire, les informations qu'il a rentré dans les différents contrôles ne sont pas conservées (par exemple si il a décoché

Le montant minimum d’une prime est de 50€, et ce pour toutes les primes énergies 2016. Toute demande concernant un montant de prime inférieur à 50€ est irrecevable et sera

[r]

Pour demander la modification d’un formulaire Cerfa déjà homologué, qu’il s’agisse d’une modification mineure ou d’une montée de version, cliquez sur le bouton «

Revoir taille du formulaire (bas coupé, dont bouton Retour) Optimisation de la saisie des champs Nom et Ville (majuscules...) Champ CP à mettre en numérique + masque de