Transcript powerpoint

Formulaires HTML/PHP
Définition
<FORM>
Commandes
ACTION
Commandes particulières
METHOD
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<FORM>
Commandes
ACTION
Commandes particulières
METHOD
Décoration
ENCTYPE
ACTION :
La propriété ACTION définit vers quelle URL (Universal Resource
Location) envoyer le contenu du formulaire.
Ex :
<FORM ACTION="http://www.monsite.fr/traitement.php">
</FORM>
Pour renvoyer le formulaire à lui même, on écrira action="#" (voire on
écrira rien du tout).
AULAS - 2007
Formulaires HTML/PHP
Définition
<FORM>
Commandes
ACTION
Commandes particulières
METHOD
Décoration
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="http://www.monsite.fr/traitement.php" METHOD="GET">
</FORM>
AULAS - 2007
Formulaires HTML/PHP
Définition
<FORM>
Commandes
ACTION
Commandes particulières
METHOD
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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 - 2007
Formulaires HTML/PHP
Définition
<INPUT>
Commandes
TEXT
Commandes particulières
PASSWORD
HIDDEN
CHECKBOX
Décoration
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.
Ex:
<INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="52000">
AULAS - 2007
Formulaires HTML/PHP
Définition
<SELECT>
Commandes
Commandes particulières
Décoration
<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 - 2007
Formulaires HTML/PHP
Définition
<SELECT>
Commandes
Commandes particulières
Décoration
<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 - 2007
Formulaires HTML/PHP
Définition
<SELECT>
Commandes
Commandes particulières
Décoration
<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 - 2007
Formulaires HTML/PHP
Définition
Commandes
<SELECT>
Commandes particulières
Décoration
<TEXTAREA>
La commande TEXTAREA
Ex :
<TEXTAREA NAME="commentaire" ROWS="3" COLS="60">
Je peux placer ici du texte par défaut.
</TEXTAREA>
AULAS - 2007
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 - 2007
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 "$clef == $valeur";
print $_SERVER['PHP_SELF'];
foreach ($_GET as $clef=>$valeur)
print "$clef == $valeur";
Nb: phpinfo(); renvoie un contenu mis en forme des différentes variables
globales
AULAS - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007
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 - 2007