Module Wim 1.1 partie web

Formulaires en HTML

1. Écrivez une page contenant un formulaire qui demande à l'utilisateur de saisir son adresse e-mail et de choisir ses centres d'intérêt parmi sport, musique, lecture, cinéma et informatique. Ces derniers choix pourront être représentés par des cases à cocher ou une liste à sélection multiple.

   Les informations recueillies seront envoyées par la méthode GET au script générique

   http://www.iut-fbleau.fr/sitebp/get.php

   Le formulaire contiendra un bouton reset.

   Quelques conseils

   Un formulaire est déclaré à l'aide de la balise <form>.

   <form method="post" action="script" enctype="encodage" >....<form>

   1. l'attribut method précise le "mode d'envoie" des données : get ou post
   2. l'attribut action précise l'url destinatrice des données
   3. l'attribut enctype précise la façon d'encoder les données. Par défaut, application/x-www-form-urlencoded. Les autres valeurs possibles sont multipart/form-data et text/plain.

   Les différents zones d'entrées (input) ici.

   Utilisez l'attribut name pour donner un nom aux "variables" du formulaire transmises au serveur.

   Utilisez les types html5 dédiés.

   Regardez aussi les attributs placeholder, pattern, et les balises fieldset et label.

2. Écrivez une page contenant un formulaire qui demande diverses informations à l'aide de contrôles variés :

   Nom

   type text

   Prénom

   type text

   Date de naissance

   type date

   Email

   type email

   Code postal

   type number

   Téléphone portable

   type text

   Sexe

   boutons radio

   Semestre

   liste déroulante S1, S2, S3, S4.

   Niveau en html

   type range, entre 0 et 10 avec un pas de 1

   Message

   zone de texte

   Tous les champs sont requis !

   La requête résultante sera envoyée par la méthode POST au script générique

   http://www.iut-fbleau.fr/sitebp/post.php

   Le formulaire contiendra un bouton reset, et submit.

3. Rajoutez (sans utiliser Javascript), les contrôles suivants au formulaire précédent :
   • Le semestre S2 est sélectionné par défaut.
   • Le code postal a 5 chiffres au maximum.
   • Le niveau en html par défaut est 5.
   • Le numéro de portable est un numéro français valide (10 chiffres commençant par 06 ou 07). En cas d'erreur, le navigateur affiche un message "Numéro à 10 chiffres sans espace et commençant par 06 ou 07".