Ex 1.
1. Créer un nouveau dossier formulaire
2. Créer une nouvelle page HTML formulaire.html
3. Cette page devra contenir les balises standards de l’en-tete et du corps de la page, ainsi
qu’une formulaire qui renvoie, après soumission, sur la page photos.php.
< form action="photos.php" method="post" >
< !-- ici vos boutons -- >
4. Rajouter un champ de texte pour un login avec le nom name="login" ainsi qu’un champ
de mot de passe avec le nom name="mdp".
5. Rajouter un menu déroulant avec le nom name="resolution" qui permet de sélectionner
de différentes résolutions des photos (en pixel, par exemple 320x200, 512x368, 800x600).
6. Rajouter des boutons ”radio” avec le nom name="langue" qui permettent de sélectionner
la langue anglaise ou française.
7. Rajouter le bouton pour soumettre le formulaire.
< input type="submit" name="bouton_soumettre" value="Envoyer">
8. Ouvrir votre page HTML avec l’URL http://127.0.0.1/formulaire/formulaire.html
Ex 2.
Feuille de style CSS
Dans cette exercice, vous découvrez comment récupérer les informations d’un formulaire.
1. Créer une nouvelle page php photos.php
2. Cette page devra contenir les balises standards de l’en-tete et du corps de la page et
affichera une photo de votre choix.
3. Récuperer le login dans une variable php et afficher le à l’écran :
< ?php
$login = $_POST[’login’];
?>
< H1>Bonjour, < ? echo $login; ?>
4. Récuperer la résolution de la photo souhaitée avec l’instruction switch de php. Les valeurs
après case correspondent au champ value de l’option du menu déroulant.
< ?php
switch ($_POST [’resolution’]) {
case "one":
$largeur = 320;
$hauteur = 200;
break;
case "two":
$largeur = 512;
$hauteur = 368;
break;
...
}
?>
5. Afficher la photo avec la résolution souhaitée en utilisant les champ width= et height=.
Ex 3.
Protection de la page
Cet exercice permettra de protéger votre page avec un mot de passe.
1. En utilisant l’instruction if, protégez le contenu de votre page :
< ?php
if ($_POST[’mdp’]=="choisissez...")
{
?>
< ! -- Contenu de la page -->
< ?php
}
else
{
?>
< ! -- Affichage : désolé, mot de passe incorrect -->
< ?php
}
?>
Ex 4.
Feuille de style dynamique
1. Faites deux copies du feuille de style style.css
et nommer ces copies styleanglais.css et stylefrancais.css.
2. Editer ces feuilles de style pour qu’il y ait une aperçu différente selon le pays.
3. Inclure la bonne feuille de style selon le bouton radio langue choisi.
