DéfinitionCommandesCommandes particulièresDécoration La balise : Formulaires HTML/PHP Les balises...
29
Définition Commandes Commandes particulières Décoration La balise <FORM>: Formulaires HTML/PHP 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 <FORM> ACTION ENCTYPE METHOD
-
Upload
paule-guyon -
Category
Documents
-
view
108 -
download
0
Transcript of DéfinitionCommandesCommandes particulièresDécoration La balise : Formulaires HTML/PHP Les balises...
Définition Commandes Commandes particulières Décoration
La balise <FORM>:
Formulaires HTML/PHP
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
<FORM> ACTION ENCTYPEMETHOD
Définition Commandes Commandes particulières Décoration
ACTION :
Formulaires HTML/PHP
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
<FORM> ACTION ENCTYPEMETHOD
Définition Commandes Commandes particulières Décoration
METHOD :
Formulaires HTML/PHP
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
<FORM> ACTION ENCTYPEMETHOD
Définition Commandes Commandes particulières Décoration
ENCTYPE :
Formulaires HTML/PHP
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
<FORM> ACTION ENCTYPEMETHOD
Définition Commandes Commandes particulières Décoration
La balise <INPUT> :
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Les différents TYPE de commandes :
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type TEXT
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type PASSWORD
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type HIDDEN
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type CHECKBOX
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type RADIO
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Les types SUBMIT, RESET et IMAGE
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Les types SUBMIT, RESET et IMAGE
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
Le type FILE
Formulaires HTML/PHP
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
<INPUT> PASSWORD FILETEXT HIDDEN CHECKBOX RADIO SUBMIT
Définition Commandes Commandes particulières Décoration
La commande SELECT
Formulaires HTML/PHP
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
<SELECT> <TEXTAREA>
Définition Commandes Commandes particulières Décoration
La commande SELECT
Formulaires HTML/PHP
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
<SELECT> <TEXTAREA>
Définition Commandes Commandes particulières Décoration
La commande TEXTAREA
Formulaires HTML/PHP
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
<SELECT> <TEXTAREA>
Définition Commandes Commandes particulières Décoration
La commande TEXTAREA
Formulaires HTML/PHP
Ex :
<TEXTAREA NAME="commentaire" ROWS="3" COLS="60">
Je peux placer ici du texte par défaut.
</TEXTAREA>
AULAS - 2007
<SELECT> <TEXTAREA>
Définition Commandes Commandes particulières Décoration
La balise <FIELDSET>
Formulaires HTML/PHP
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
Définition Commandes Commandes particulières Décoration
Tester les variables globales
Formulaires HTML/PHP
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
