Balises de formulaire

Balises de formulaire
• Les formulaires XHTML permettent de
recueillir les informations saisies par un
utilisateur, puis de les transmettre à un
programme serveur.
• Nous verrons :
- la structure d’un formulaire
- les éléments d’un formulaire
94
• La balise <form>
- contient le texte ainsi que les éléments
constituant le formulaire
• Exemple
-
Balises de formulaire
Structure
<form action=”add.php” method=”post”>
...
</form>
95
• Attributs
- action : (obl) URL du script ou programme qui va traiter les données
- accept : précise la liste de types MIME autorisés par le serveur
Balises de formulaire
Structure
- accept-charset : jeu de caractère autorisé par le serveur
- enctype : par défaut “application/x-www-form-urlencoded” ou
“multipart/form-data” si l’on transmet un fichier.
- method : méthode de transfert des données “get” ou “post”. “get”
par défaut, les données suivent l’URL. Avec “post”, les données sont
envoyées dans une requête séparée.
96
• La balise <input />
- place l’un des contrôle suivant dans un
formulaire :
‣
texte, mot de passe, champ masqué
‣
case à cocher
‣
bouton d’option
‣
pièce jointe
‣
bouton graphique
‣
bouton de commande
‣
bouton de soumission
Balises de formulaire
Elément input
97
• Attributs
- name : (obl) identifie le champ de manière unique
Balises de formulaire
Elément input
- type : le type de champ (texte, case à cocher,...)
- accesskey : raccourci clavier pour sélectionner le champ
- tabindex : position du champ dans la séquence de tabulations
- Les autres attributs sont différents selon le type
98
• Le type text ou password
- value : permet de remplir le champ avec une valeur par défaut
- size : indique la longueur (nombre de caractères) de l’affichage du
champ
Balises de formulaire
Elément input
- maxlength : précise le nombre de caractères pouvant être saisis
- disable : pour désactiver le champ (disable=”disable”)
- readonly : laisse le champ actif, mais interdit la saisie
• Exemple
-
:
<input type=”text” name=”pseudo” length=”8” maxlength=”50”>
99
• Le type checkbox (case à cocher)
- value : valeur à envoyer au serveur
- checked : coche la case au chargement (checked=”checked”)
Balises de formulaire
Elément input
- disable : désactive la case
-
ici name donne un nom unique à la case
100
• Le type radio
- value : valeur est la valeur à envoyer au serveur
- checked : active l’option au chargement
Balises de formulaire
Elément input
- disabled : désactive l’option
-
ici on donne la même valeur à name pour les options du même groupe
(un seul choix possible)
101
• Le type file (pour envoyer un fichier)
- value : prédéfini un nom de fichier
Balises de formulaire
Elément input
- accept : définit les types MIME autorisés
-
avec le type file, il faut impérativement passer les attributs suivants à la
structure du formulaire :
‣
method=”post” (un fichier ne peut être envoyé dans l’URL)
‣
enctype=”multipart/form-data”
102
• Le type hidden (élément caché)
- value : valeur à transmettre au serveur
Balises de formulaire
Elément input
• Le type button
- value : l’intitulé du bouton
- onclick : script à executer au click
103
• Le type image (bouton graphique)
- src : URL de l’image
Balises de formulaire
Elément input
- alt : propose un texte de substitution
- usemap : nom de la carte client à utiliser
-
par défaut cette image ne validera pas le formulaire si elle est cliquée.
104
• Le type submit et reset
Balises de formulaire
Elément input
- value : définit le texte à mettre sur le bouton
-
submit est un bouton qui valide le formulaire et envoie les valeurs
entrées au script
-
reset est un bouton qui réinitialise le formulaire à ses valeurs par défaut
105
• Exemple :
-
<form action=”/cgi-bin/script.pl”>
Utilisateur : <input type=”text” name=”login” size=”12” /><br />
Mot de passe : <input type=”password” name=”passwd” size=”12” />
<input type=”hidden” name=”browser” value=”ie5” /><br />
Sexe : <input type=”radio” name=”sex” value=”f” />Féminin
<input type=”radio” name=”sex” value=”m” />Masculin<br />
<input type=”button” value=”Validation” onclick=”validate()” />
<input type=”submit” value=”Soumetre” />
<input type=”reset” value=”Annuler” />
</form>
Balises de formulaire
Elément input
106
• La balise <select>
-
Définit une liste de choix permettant une sélection ou des sélections
multiples
• Attributs
Balises de formulaire
Elément select
- disabled : désactive le champ
- multiple : permet d’effectuer plusieurs choix dans la liste
- name : donne un nom unique au champ
- size : nombre d’options affichées simultanément
- tabindex : position du champ dans la séquence de tabulation
107
• Exemple :
- <p>Choisissez une taille :</p>
<select name=”size”>
<option>Petit</option>
<option>Moyen</option>
<option>Grand</option>
<option>Très grand</option>
...
</select>
Balises de formulaire
Elément select
108
• La balise <option>
- Définit une option de l’élément <select>
• Attributs
Balises de formulaire
Elément select
- disabled : désactive l’option
- label : propose un libellé pour l’option.
- selected : sert à présélectionner l’option (selected=”selected”)
- value : indique la valeur à passer au navigateur lorsque l’option est
sélectionnée. A défaut de la valeur, c’est le texte de l’option qui est
utilisé.
109
• La balise <optgroup>
- définit un groupe logique d’options.
-
Balises de formulaire
Elément select
tous les navigateurs ne supportent pas encore cet élément.
• Attributs
- disabled : désactive les options du groupe
- label : (obl) donne un libellé au groupe d’options
110
• Exemple
- <optgroup label=”Premier Trimestre”>
<option value=”Jan”>janvier</option>
<option value=”Feb”>février</option>
<option value=”Mar”>mars</option>
</optgroup>
...
Balises de formulaire
Elément select
111
• La balise <textarea>
- crée une zone de texte de plusieurs lignes
• Attributs
Balises de formulaire
Elément textarea
- cols : (obl) nombre de caractères autorisés par ligne
- rows : (obl) nombre de lignes autorisées
- readonly : active le contrôle, mais ne permet pas d’en modifier le
contenu
- name, disabled, accesskey, tabindex
112
• Exemple
-
<textarea name=”feedback” rows=”10” cols=”40”>
Merci de vos commentaires.
Effacez ce texte et tapez vos commentaires à la place.
</textarea>
Balises de formulaire
Elément textarea
113
• La balise <button>
- Place un bouton dans le formulaire (≠input)
- Tout ce qui est entre <button> et </button> est
le contenu du bouton (texte, image, etc...)
Balises de formulaire
Elément button
• Attributs
- type : submit, reset ou button en fonction de l’action désirée
- value : valeur transmise au serveur lorsque le bouton est cliqué
- name, accesskey, disabled, tabindex
114
• Exemple
- <button type=”submit”>
<img src=”tick.jpg”>
</button>
Balises de formulaire
Elément button
115
• Le balise <fieldset>
- regroupe des champs apparentés dans un
formulaire.
Balises de formulaire
Elément fieldset
• Attributs
- aucun
116
• La balise <legend>
- Donne un nom à un groupe de champs
• Attributs
Balises de formulaire
Elément legend
- accesskey éventuellement
• Exemple
-
<fieldset>
<legend>Identification</legend>
Utilisateur : <input .../>
Mot de passe : <input .../>
</fieldset>
117
• La balise <label>
- donne un libellé à un champ de formulaire
- indique à l’utilisateur ce qu’il doit saisir dans le
champ
Balises de formulaire
Labels
• Attributs
- for : correspond à la valeur de l’id du champ auquel il réfère
- accesskey : définit un raccourci clavier
118
Labels
•
Exemple
<label for=”usr”>Votre pseudo :</label>
<input type=”text” id=”usr” name=”user” />
<br />
<label for=”pw” accesskey=”p”>Votre mot de
passe :</label>
<input type=”password” id=”pw” name=”passwd” />
119
• Donnez le code complet du formulaire
suivant :
Balises de formulaire
Exercice
• Modifiez le pour avoir le formulaire
suivant :
120
Balises de formulaire
Correction
<form action="/cgi-bin/script.pl" method=”GET”>
<fieldset>
<legend>Authentification</legend>
<label for="txtlogin">Utilisateur : </label><input type="text" id="txtlogin" name="login" size="12" /><br />
<label for="pwdpasswd">Mot de passe : </label><input type="password" id="pwdpasswd" name="passwd" size="12" /><br />
</fieldset>
<fieldset>
Ton animal préféré :
<input type="radio" name="ani" id="rdchien" value="chien" /><label for="rdchien">Chien</label>
<input type="radio" name="ani" id=”rdchat”value="chat" /><label for="rdchat">Chat</label>
<br />Tes loisirs :
<label for="chksport">Le sport </label>
<input type="checkbox" name="sport" id="chksport" />
<label for="chklect">La lecture </label>
<input type="checkbox" name="lecture" id="chklect" />
</fieldset><br />
<input type="submit" value="Valider" />
<input type="reset" value="Annuler" />
</form>
121
• Reproduisez le formulaire suivant :
Balises de formulaire
Exercice 2
122