La balise <FORM>:

Présentation au sujet: "La balise <FORM>:"— Transcription de la présentation:

1 La balise <FORM>:
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration <FORM> ACTION METHOD ENCTYPE La balise <FORM>: Les balises <FORM> et </FORM> définissent l'espace du formulaire. Elles possèdent trois attributs: - ACTION qui définit vers quelle URL envoyer le contenu du formulaire - METHOD qui définit le mode de transmission: GET ou POST - ENCTYPE qui définit le type de contenu: chaîne ou fichier AULAS

2 Formulaires HTML/PHP ACTION :
Définition Commandes Commandes particulières Décoration <FORM> ACTION METHOD ENCTYPE ACTION : La propriété ACTION définit vers quelle URL (Universal Resource Location) envoyer le contenu du formulaire. Ex : <FORM ACTION=" </FORM> Pour renvoyer le formulaire à lui même, on écrira action="#" (voire on écrira rien du tout). AULAS

3 Formulaires HTML/PHP METHOD :
Définition Commandes Commandes particulières Décoration <FORM> ACTION METHOD ENCTYPE METHOD : La propriété METHOD définit le mode de transmission, GET ou POST: - GET : une chaîne est placée à la fin de l'URL après un caractère " ? " sous forme d'associations nomChamp=val où nomChamp est le nom du champ dans le formulaire et val la valeur saisie. Nb: le caractère " + " remplace les espaces et le caractère " & " sépare les associations nomChamp=val. - POST : la chaîne est transmise séparément de l'URL. Ex : <FORM ACTION=" METHOD="GET"> </FORM> AULAS

4 Formulaires HTML/PHP ENCTYPE :
Définition Commandes Commandes particulières Décoration <FORM> ACTION METHOD ENCTYPE ENCTYPE : La propriété ENCTYPE définit le type d'encodage des données du formulaire qui doit être utilisé pour la transmission au serveur: - application/x-www-form-urlencoded C'est l'option par défaut qui prévoit que les champs du formulaire sont transmis sous la forme d'une liste de paires nom=valeur. - multipart/form-data Cette option doit être utilisée pour transmettre des fichiers. AULAS

5 La balise <INPUT> :
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE La balise <INPUT> : A deux exceptions près, la balise <INPUT> permet de définir toutes les commandes d'un formulaire. Les éléments communs à toutes les balises INPUT: - balise ouvrante uniquement - l'attributs NAME - et l'attribut TYPE : Ex: Titre : <INPUT TYPE="text" NAME="titre"> AULAS

6 Les différents TYPE de commandes :
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Les différents TYPE de commandes : L'attribut TYPE permet de définir les différents type de commande qui sont, en vrac : - TEXT pour entrer du texte - PASSWORD pour entrer du texte masqué (mot de passe par ex.) - HIDDEN pour transmettre des infos cachées - CHECKBOX pour créer des cases à cocher - RADIO pour créer des cases à cocher exclusives - SUBMIT pour créer un bouton qui soumet le formulaire - RESET pour réinitialiser un formulaire - IMAGE pour fabriquer un joli bouton - FILE pour transférer des fichiers AULAS

7 Formulaires HTML/PHP Le type TEXT
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type TEXT La commande de type TEXT fournit à l'utilisateur l'interface suivante : On peut en contrôler la taille à l'aide de l'attribut SIZE suivi du nombre de caractères visibles dans la fenêtre. On peut également contrôler la longueur maximum autorisée à être entrée dans cette fenêtre à l'aide de l'attribut MAXLENGTH. Ex: Nom : <INPUT TYPE="text" NAME="nom" SIZE="20"> Prénom : <INPUT TYPE="text" NAME="prenom" SIZE="20"> AULAS

8 Formulaires HTML/PHP Le type PASSWORD
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type PASSWORD La commande de type PASSWORD est identique à la commande de type TEXT sauf que le texte entré n'apparaît pas à l'écran (les lettres dont remplacées par des *) : Ex: Ce type sert principalement à la saisie de mot de passe. AULAS

9 Formulaires HTML/PHP Le type HIDDEN
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type HIDDEN La commande de type HIDDEN n'est pas visible. Elle sert principalement à définir un paramètre dont la valeur est fixée, et à passer ce paramètre en même temps que ceux saisis par l'utilisateur. Ex: <INPUT TYPE="hidden" NAME="nomdepage" VALUE="ex3"> Attention: cette commande est cachée mais pas secrète: il suffit à l'utilisateur de consulter le code source pour la voir. AULAS

10 Formulaires HTML/PHP Le type CHECKBOX
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type CHECKBOX Ce type permet de créer des cases à cocher associées à des valeurs. En donnant le même attribut NAME à plusieurs cases à cocher, on indique au navigateur que ces champs doivent être groupés dans la fenêtre d'affichage. Contrairement aux commandes TEXT, les valeurs (attribut VALUE) ne sont pas visibles et doivent être définies à l'intérieur de la balise INPUT : Ex: Choléra : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="C"> Tuberculose : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="T"> Oreillons : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="O" CHECKED> Autres : <INPUT TYPE="checkbox" NAME="maladie[]" VALUE="A"> AULAS

11 Formulaires HTML/PHP Le type RADIO
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type RADIO La commande RADIO fonctionne comme CHECKBOX mais n'autorise pas un choix multiple. Le premier choix est sélectionné par défaut. Pour présélectionner un autre choix, vous pouvez utiliser l'attribut CHECKED : Ex: Oui <INPUT TYPE="radio" NAME="reponse" VALUE="O"> Non <INPUT TYPE="radio" NAME="reponse" VALUE="N" CHECKED> AULAS

12 Les types SUBMIT, RESET et IMAGE
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Les types SUBMIT, RESET et IMAGE La commande SUBMIT correspond à un bouton qui valide la saisie et envoie le contenu du formulaire au serveur. L'attribut VALUE permet de définir le texte affiché sur le bouton. Un commande complémentaire RESET, fonctionne sur le même schéma que SUBMIT et permet de réinitialiser le formulaire. Ex: <INPUT TYPE="submit" VALUE="Valider"> <INPUT TYPE="reset" VALUE="Tout effacer">  AULAS

13 Les types SUBMIT, RESET et IMAGE
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Les types SUBMIT, RESET et IMAGE Pour remplacer un bouton de type SUBMIT par une image, vous disposez de la commande IMAGE : Ex: <INPUT TYPE="image" SRC="bouton.gif"> AULAS

14 Formulaires HTML/PHP Le type FILE
Définition Commandes Commandes particulières Décoration <INPUT> TEXT PASSWORD HIDDEN CHECKBOX RADIO SUBMIT FILE Le type FILE La commande de type FILE permet de transmettre des fichiers par l'intermédiaire du formulaire. Le champ doit alors contenir le chemin d'accès au fichier sur l'ordinateur du client. Ex: <INPUT TYPE="file" SIZE="40" NAME="telFichier"> Une astuce permet de limiter la taille maximale du fichier à transmettre en utilisant une commande HIDDEN portant le nom MAX_FILE_SIZE et ayant pour valeur le nombre d'octets maximal. <INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="52000"> AULAS

15 Formulaires HTML/PHP La commande SELECT
Définition Commandes Commandes particulières Décoration <SELECT> <TEXTAREA> La commande SELECT Cette commande est assez proche des champs CHECKBOX et RADIO : Il permet à l'utilisateur de choisir un ou plusieurs éléments dans un menu déroulant. La balise <SELECT> est un conteneur dans lequel on doit énumérer, avec les balises <OPTION> tous les choix disponibles. Ces balises <OPTION> ont elles-même un attribut VALUE qui indique la valeur à envoyer au serveur lorsque l'option a été sélectionné. Elles peuvent utiliser l'attribut SELECTED pour sélectionner une valeur par défaut Ex : <SELECT> <OPTGROUP LABEL="Urgences> <OPTION VALUE="A">Broca <OPTION VALUE="B" SELECTED>Lariboisière </OPTGROUP> </SELECT> AULAS

16 Formulaires HTML/PHP La commande SELECT
Définition Commandes Commandes particulières Décoration <SELECT> <TEXTAREA> La commande SELECT La balise SELECT dispose d'un attribut SIZE qui définit le nombre de lignes visibles en même temps dans le menu déroulant. L'attribut MULTIPLE (sans valeur associée) autorise à sélectionner plusieurs valeurs dans la liste : Ex : <SELECT NAME ="lieu" SIZE="3" MULTIPLE> <OPTGROUP LABEL="Urgences> <OPTION VALUE="A">Broca <OPTION VALUE="B" SELECTED>Lariboisière </OPTGROUP> </SELECT> AULAS

17 Formulaires HTML/PHP La commande TEXTAREA
Définition Commandes Commandes particulières Décoration <SELECT> <TEXTAREA> La commande TEXTAREA La balise TEXTAREA fournit à l'utilisateur une zone dans laquelle il peut rentrer du texte. Cette commande est encadrée par une balise ouvrante et fermante. Elle possède les attributs suivants: - NAME - ROWS : indique la hauteur de la zone de texte en nombre de ligne - COLS indique la largeur de la zone de texte (en nombre de caractères). AULAS

18 Formulaires HTML/PHP La commande TEXTAREA Ex :
Définition Commandes Commandes particulières Décoration <SELECT> <TEXTAREA> La commande TEXTAREA Ex : <TEXTAREA NAME="commentaire" ROWS="3" COLS="60"> Je peux placer ici du texte par défaut. </TEXTAREA> AULAS

19 La balise <FIELDSET>
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration La balise <FIELDSET> La balise <FIELDSET> est uniquement décorative : elle permet d'entourer un groupe de commande par un léger filet gris. On peut donner un titre à ce groupe à l'aide de la balise <LEGEND>. Ex: <FIELDSET> <LEGEND>Données personnelles</LEGEND> Nom : <INPUT TYPE="text" NAME="nom" SIZE="20"> Prénom : <INPUT TYPE="text" NAME="prenom" SIZE="20"> Id : <INPUT TYPE="password" NAME="identifiant" SIZE="20"> </FIELDSET> AULAS

20 Tester les variables globales
Formulaires HTML/PHP Définition Commandes Commandes particulières Décoration Tester les variables globales foreach ($GLOBALS as $clef=>$valeur) print "$clef == $valeur"; foreach ($_SERVER as $clef=>$valeur) print $_SERVER['PHP_SELF']; foreach ($_GET as $clef=>$valeur) Nb: phpinfo(); renvoie un contenu mis en forme des différentes variables globales AULAS

21 L'âge du capitaine <?php ?> <HTML> <BODY>
<H3>Trouvez l'âge du capitaine!</H3> <FORM ACTION="<?php $_SERVER["PHP_SELF"]?>" METHOD="GET"> Tentez votre chance : <INPUT TYPE="text" NAME="age" SIZE="20" MAXLENGTH="3"> </FORM> </BODY> </HTML> AULAS

22 L'âge du capitaine <?php
if (!empty($_GET)) // ou isset($_GET['age']) { } ?> <HTML> <BODY> <H3>Trouvez l'âge du capitaine!</H3> <FORM ACTION="<?php $_SERVER["PHP_SELF"]?>" METHOD="GET"> Tentez votre chance : <INPUT TYPE="text" NAME="age" SIZE="20" MAXLENGTH="3"> </FORM> </BODY> </HTML> AULAS

23 L'âge du capitaine <?php $message = "";
if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; } ?> <HTML> <BODY> <H3>Trouvez l'âge du capitaine!</H3> <? print $message ?> <FORM ACTION="<?php $_SERVER["PHP_SELF"]?>" METHOD="GET"> Tentez votre chance : <INPUT TYPE="text" NAME="age" SIZE="20" MAXLENGTH="3"> </FORM> </BODY> </HTML> AULAS

24 L'âge du capitaine <?php $age_a_trouver = 34; $message = "";
if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; } ?> AULAS

25 L'âge du capitaine <?php $age_a_trouver = 34; $message = "";
if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; if ($_GET['age']>$age_a_trouver) $message .= "Il est moins vieux que cela voyons!<BR>"; elseif ($_GET['age']<$age_a_trouver) $message .= "Vous êtes flatteur mais il est plus âgé!<BR>"; } ?> AULAS

26 L'âge du capitaine <?php $age_a_trouver = 34; $message = "";
if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; if ($_GET['age']>$age_a_trouver) $message .= "Il est moins vieux que cela voyons!<BR>"; elseif ($_GET['age']<$age_a_trouver) $message .= "Vous êtes flatteur mais il est plus âgé!<BR>"; else $message .= "Bingo! Vous avez trouvé l'âge du capitaine!<BR>"; } ?> AULAS

27 L'âge du capitaine ?><HTML> <BODY>
<H3>Trouvez l'âge du capitaine!</H3> <? print $message ?> <FORM ACTION="<?php $_SERVER["PHP_SELF"]?>" METHOD="GET"> Tentez votre chance : <INPUT TYPE="text" NAME="age" SIZE="20" MAXLENGTH="3"> <INPUT TYPE="hidden" NAME="nb_tentative" VALUE="<?= $nb_tentative; ?>"> </FORM> </BODY> </HTML> AULAS

28 L'âge du capitaine <?php $age_a_trouver = 34; $message = "";
$nb_tentative = (isset($_GET['nb_tentative'])) ? ++$_GET['nb_tentative'] : 0 ; if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; if ($_GET['age']>$age_a_trouver) $message .= "Il est moins vieux que cela voyons!<BR>"; elseif ($_GET['age']<$age_a_trouver) $message .= "Vous êtes flatteur mais il est plus âgé!<BR>"; else $message .= "Bingo! Vous avez trouvé l'âge du capitaine!<BR>"; } ?> AULAS

29 L'âge du capitaine <?php $age_a_trouver = 34; $message = "";
$nb_tentative = (isset($_GET['nb_tentative'])) ? ++$_GET['nb_tentative'] : 0 ; if (!empty($_GET)) // ou isset($_GET['age']) { $message = "Vous avez dit : ".$_GET['age']." ans.<BR>"; if ($_GET['age']>$age_a_trouver) $message .= "Il est moins vieux que cela voyons!<BR>"; elseif ($_GET['age']<$age_a_trouver) $message .= "Vous êtes flatteur mais il est plus âgé!<BR>"; else { $message .= "Bingo! Vous avez trouvé l'âge du capitaine!<BR>"; $message .= "Il vous a tout de même fallu $nb_tentative tentatives!<BR>"; } ?> AULAS