HTML / XHTML Les formulaires (clients)
description
Transcript of HTML / XHTML Les formulaires (clients)
![Page 1: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/1.jpg)
420-B63 Programmation Web AvancéeAuteur : Frédéric Thériault
1
![Page 2: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/2.jpg)
Exemples
2
![Page 3: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/3.jpg)
Le fonctionnement
Serveurs Google
3
![Page 4: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/4.jpg)
Syntaxe
<form action="…" method="…">
----- champs du formulaire ici -----
</form>
action : L’URL où doit être traité la requête
method : "get" ou "post"
4
![Page 5: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/5.jpg)
L’attribut « action »
action="url" Uniform Resource Locator Identifie le programme auquel les
données du formulaire seront soumises.
http://www.google.ca/search?hl=en&q=cvm
protocole serveur programme
5
![Page 6: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/6.jpg)
L’attribut method
2 possibilités:- get
○ Les données du formulaire sont ajouté à l’URL spécifié par l’attribut action.
○ Ex: http://www.google.ca/search?hl=en&q=cvm
- post○ Les données sont envoyées dans le corps de la
requête et ne sont donc pas ajoutées à L’URL.○ Ex: Tout formulaire d’authentification
6
![Page 7: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/7.jpg)
Le champ d’insertion à 1 ligne <input type="text" name="" value="" />
L’URL résultante de la requête est :http://www.google.ca/search?hl=en&q=cvm . Pouvez-vous y voir le
nom du champ d’insertion ?
7
![Page 8: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/8.jpg)
Insertion d’un bloc de texte <textarea name="" cols="" rows=""><textarea>
○ cols = nombre de colonnes○ rows = nombre de lignes
<html>
<head>
</head>
<body>
<form action="" method="get">
<textarea name="monTexte" cols="5" rows="2"></textarea>
</form>
</body>
</html>
8
![Page 9: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/9.jpg)
Insertion d’un bloc de texte (suite)
<html>
<head>
</head>
<body>
<form action="" method="get">
<textarea name="monTexte" cols=“25" rows=“5"></textarea>
</form>
</body>
</html>
9
![Page 10: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/10.jpg)
Insertion d’un bloc de texte (suite)
<html>
<head>
</head>
<body>
<form action="" method="get">
<textarea name="monTexte" cols=“25" rows=“5">Ceci est un texte de départ!!</textarea>
</form>
</body>
</html>
10
![Page 11: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/11.jpg)
Les groupes de boutons radio
• <input type="radio" name="" value="" />…
<input type="radio" name="couleur" value="rouge" /> rouge <br/>
<input type="radio" name="couleur" value="vert" /> vert <br/>
<input type="radio" name="couleur" value="bleue" /> bleue <br/>
…
11
![Page 12: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/12.jpg)
Les groupes de boutons radio (suite)• Pour sélectionner un des choix, utiliser l’attribut
« checked »…
<input type="radio" name="couleur" value="rouge" checked="checked" /> rouge <br/>
<input type="radio" name="couleur" value="vert" /> vert <br/>
<input type="radio" name="couleur" value="bleue" /> bleue <br/>
…
12
![Page 13: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/13.jpg)
Les cases à cocher <input type="checkbox" name="" value="" />…
<form action="" method="get">
Je possède une voiture : <input type="checkbox" name="voiture" value="oui" /><br/>
Je possède 3 ordinateurs : <input type="checkbox" name="ordinateurs" value="oui" /><br/>
Je travaille la fin de semaine : <input type="checkbox" name="travaille" value="oui" /><br/>
</form>
….
13
![Page 14: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/14.jpg)
Les cases à cocher (suite)
Pour sélectionner, utiliser l’attribut « checked » …
<form action="" method="get">
Je possède une voiture : <input type="checkbox" name="voiture" value="oui" checked="checked"/><br/>
Je possède 3 ordinateurs : <input type="checkbox" name="ordinateurs" value="oui" /><br/>
Je travaille la fin de semaine : <input type="checkbox" name="travaille" value="oui" /><br/>
</form>
….
14
![Page 15: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/15.jpg)
Les mots de passe
<input type="password" name="" />
15
![Page 16: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/16.jpg)
Les champs invisibles (ou cachés) <input type="hidden" name="" value="" />
○ Permet de spécifier certaines informations dont l’utilisateur n’a pas à modifier.
16
![Page 17: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/17.jpg)
Les boutons
<input type="submit" value="Envoyer" />Ce type de bouton permet de soumettre le formulaire
au serveur
<input type="reset" value="Réinitialiser" />○ Ce type de bouton sert à réinitialiser le formulaire
<input type="button" value="Déclencher !" onclick="alert(‘Hello world !’)" />
○ Ce type de bouton sert à déclencher des événements Javascript
17
![Page 18: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/18.jpg)
Les boutons de type image <input type="image" src="image.jpg" />
Ce bouton graphique permettant de soumettre le formulaire au serveur.
18
![Page 19: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/19.jpg)
Les listes…
Choisissez l'une des marques
d'ordinateurs suivantes :
<select name="maListe">
<option value="produit1">DELL</option>
<option value="produit2">Acer</option>
<option value="produit3">HP</option>
<option value="produit4">Sony</option>
</select>
…
19
![Page 20: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/20.jpg)
Les listes – attribut « size » <select name="" size="3">
20
![Page 21: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/21.jpg)
Les listes – attribut « multiple » <select name="" multiple="multiple">
21
![Page 22: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/22.jpg)
Les listes – attribut « selected » <option value="…" selected="selected">
22
![Page 23: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/23.jpg)
La balise <label>
La balise label est pratique dans un formulaire surtout lors de l’utilisation de balises de type radio ou checkbox.
<input type="radio" name="sexe" id="homme" value="1"/><labe lfor="homme">Homme</label><br/>
<input type="radio" name="sexe" id="femme" value="2"/><label for="femme">Femme</label> <br/>
<input type="radio" name="sexe" id="alien" value="3"/><label for="alien">Alien</label> <br/>
En cliquant sur le mot, c’est comme si on cliquait sur le bouton directement
23
![Page 24: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/24.jpg)
Transmission du formulaire par courriel Transmet le formulaire par courriel. Les champs sont sauvegardés
à même le corps du courriel <form action="mailto:[email protected]" method="post">
<form action="mailto:[email protected]" method="post">
<input type="text" name="nom" />
<input type="text" name="prenom" />
<input type="text" name="dateNaissance" />
<input type="submit" value="Envoyer" />
</form>
24
![Page 25: HTML / XHTML Les formulaires (clients)](https://reader035.fdocuments.net/reader035/viewer/2022081501/56814543550346895db20f81/html5/thumbnails/25.jpg)
Transmission du formulaire par courriel (suite)
25