Programmation Web

Les formulaires HTML
Côté client : L’objectif d’un formulaire est d’offrir un ensemble de
champs que l’utilisateur peut remplir
Le résultat est alors envoyé au serveur qui traite les informations
via un script
Les formulaires HTML
!
!
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
55 / 123
Les champs d’un formulaire
PHP pour le traitement
Javascript pour du contrôle de champs
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
56 / 123
La balise form
La balise form ouvre le formulaire. Deux attributs principaux :
!
action pour indiquer
"
"
Les champs à remplir se présentent sous la forme
!
d’une zone de texte
method qui prend la valeur "get" ou "post" selon le mode de
transfert des informations au serveur
"
d’une liste de boutons dont un seul est à cocher
"
d’une liste de boutons qui sont tous sélectionnables
d’un menu déroulant
le nom du fichier à exécuter
ou l’URL d’un script
GET : apparition des valeurs saisies en paramètres de l’URL de la
page action
POST : les valeurs saisies sont transmises séparément, quantité de
données possibles plus importante
POST est préférée, car elle évite les très longues URL
Les principales balises filles (input , select , textarea) de form sont
la balises qui permettent de définir les champs qui constituent le
formulaire
Groupe de champs : la balise fieldset, souvent associée avec la
balise legend
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
57 / 123
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
58 / 123
La balise input
Zone de texte
Pour une zone de texte, les autres attributs sont :
Elle permet de construire une zone de texte et des listes de
sélection grâce à son attribut type
!
!
!
!
!
!
!
type="text" : une zone de texte
type="radio" : une liste à choix unique
type="checkbox" : une liste à choix multiple
type="password" : un champ mot de passe
type="hidden" : un champ caché
type="file" : pour transmettre un fichier
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
!
!
!
Exemple :
<input type="text" name="nomPrenom" size="50pxe"
maxlength="10">
Année 2009-2010
59 / 123
Liste à choix unique
!
!
Programmation Web
Année 2009-2010
60 / 123
Il faut autant de input de type checkbox que de choix proposés
Les attributs associés sont :
!
name="nomListephp " : le nom de la liste (donc commun à tous les
choix)
value="nomBoutonphp " : pour distinguer chaque choix (le nom du
bouton correspondant)
checked : ne peut être présent que dans un seul input de la liste, il
permet d’avoir un bouton coché par défaut
Exemple :
<input type="radio" name="civil" value="M" checked >Monsieur
<input type="radio" name="civil" value="Mme" >Madame
<input type="radio" name="civil" value="Mlle" >Mademoiselle
Thi-Bich-Hanh Dao (Université d’Orléans)
Thi-Bich-Hanh Dao (Université d’Orléans)
Liste à choix multiple
Il faut autant de input de type radio que de choix possibles
(boutons à cocher)
Les attributs associés sont :
!
name="nomPHP" où nomPHP sera relié au traitement PHP du
formulaire
value="texte par défaut", attribut optionnel et le texte devra être
effacé pour être modifié
size pour donner une taille à cette zone
maxlength pour donner le nombre max de caractères
Programmation Web
Année 2009-2010
61 / 123
!
!
name="nomListephp []" : le nom de la liste (donc commun à tous les
choix)
value="nomBoutonphp " : pour distinguer chaque choix (le nom du
bouton correspondant)
checked : ne peut être présent que dans un seul input de la liste, il
permet d’avoir un bouton coché par défaut
Exemple :
<input type="checkbox"
checked >Le cinéma
<input type="checkbox"
La musique
<input type="checkbox"
La lecture
<input type="checkbox"
La cuisine
Thi-Bich-Hanh Dao (Université d’Orléans)
name="loisir[]" value="cinema"
name="loisir[]" value="musique" >
name="loisir[]" value="lecture" >
name="loisir[]" value="cuisine" >
Programmation Web
Année 2009-2010
62 / 123
Menu déroulant (1/2)
Menu déroulant (2/2)
Construit par la balise select, dont la balise fille option permet de
définir les items du menu
Les attributs sont :
!
!
!
name pour le traitement PHP
size pour le nombre d’items du menu apparaissant dans le menu
déroulant
multiple dont la présence indique qu’un choix multiple est possible
(par la touche ctrl)
"
"
multiple présent =⇒ name="nomListephp []"
multiple absent =⇒ name="nomListephp "
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
63 / 123
Zone de texte étendu
!
!
<select name="langue[]" size=3 multiple>
<option> français</option>
<option> anglais </option>
<option> espagnol</option>
<option> chinois</option>
<option> japonais</option>
</select>
Thi-Bich-Hanh Dao (Université d’Orléans)
Année 2009-2010
64 / 123
Comment terminer le formulaire et déclencher l’envoi des
informations remplies ?
!
rows pour le nombre de lignes du cadre
cols pour le nombre de colonnes du cadre
name="nomZonephp pour le traitement PHP
Encore la balise input pour définir un bouton à cliquer grâce aux
attributs
"
"
!
Exemple :
<textarea name="texte" rows="5" cols="30"></textarea>
Programmation Web
Année 2009-2010
"
65 / 123
type="submit"
value="un texte" où "un texte" apparaîtra sur le bouton créé
Raffinement : création d’un bouton supplémentaire qui annule tous
les champs remplis
"
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
La fermeture d’un formulaire
Balise textarea : zone de texte de plusieurs lignes
Les attributs principaux sont :
!
Exemple
type="reset"
value="un texte"
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
66 / 123
Exemple d’un formulaire (1/2)
Exemple d’un formulaire (2/2)
<form action="contact.php" method="post"> <fieldset>
<legend>Nous contacter</legend>
<input type="radio" name="civil" value="M" checked >Monsieur
<input type="radio" name="civil" value="Mme" >Madame
<input type="radio" name="civil" value="Mlle" >Mademoiselle
<br>
Nom et prénom
<input type="text" name="nomPrenom" size="50pxe" maxlength="10">
<br>
Votre commentaire
<br>
<textarea name="commentaire" rows="5" cols="30">
</textarea>
<br>
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</fieldset></form>
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
67 / 123
Thi-Bich-Hanh Dao (Université d’Orléans)
Programmation Web
Année 2009-2010
68 / 123