TP6 : Les formulaires Technologies du web Elodie Bisson 1. L'utilité d'un formulaire Un formulaire permet de recueillir des informations saisies par un utilisateur et de les envoyer via une URL à une adresse mail ou à un script de web dynamique. Il comportent des éléments de différentes natures : zone de texte à saisir, case à cocher, bouton radio, liste déroulante, 2. Créer un formulaire Un formulaire est délimité par les balises <form> et </form>. On ajoute deux attributs obligatoires à la balise form : method définit par quel moyen sont envoyées les données. method="post" envoie dans le corps de la requête et method="get" envoie dans L'URL. Action indique l'adresse d'envoi (email, url ou script) L'attribut enctype est facultatif et permet de préciser le format d'encodage du formulaire. Généralement, on le précise lorsque l'on veut envoyer un fichier dans le formulaire avec enctype="multipart/form-data". Créez un fichier inscription.html contenant un formulaire. Sa méthode sera GET. L'action sera le fichier lui même afin de tester facilement la chaîne de données transmises. (En pratique, on ne passera jamais de formulaire en GET pour des raisons de sécurité.) 3. Les éléments de formulaires Les éléments de formulaire qui permettent de récupérer une saisie de texte ou un choix doivent posséder un attribut name afin de nommer la donnée à transmettre. Ils peuvent en plus posséder les attributs habituels tels que id ou class. 3.1. La zone de saisie de texte Pour insérer une zone de texte d'une seule ligne, on utilise la balise <input type= text />. La taille apparente du champ peut être définie à l'aide de l'attribut size. La taille maximale du texte saisi peut être définie à l'aide de l'attribut maxlength.
On peut pré remplir le champ à l'aide de value. On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra lorsque l'utilisateur cliquera sur le champ. Pour ajouter un libellé au champ, on utilise la balise <label></label>. Pour lier le libellé au champ, on donne un id au champ que l on rappelle dans l attribut for de label. Dans l exemple suivant, le champ fait 30 caractères de long mais ne peut en contenir que 10. Le libellé et le champ sont liés : en cliquant sur le libellé Pseudo, le curseur de l utilisateur se placera dans le champ pseudo. <p> <label for="pseudo">pseudo :</label> <input type="text" name="pseudo" id="pseudo" size="30" maxlength="10" /> </p> Insérez cet élément dans votre formulaire et créez les champs suivants et leurs libellés : - un code postal (5 caractères apparents et 5 caractères max. autorisés) dont le name est CP - un nom de ville (40 caractères apparents et 40 caractères max. autorisés) dont le name est ville Ajoutez les balises de mise en forme. 3.2. La zone de saisie de mot de passe La zone de saisie de mot de passe est semblable à la zone de saisie de texte sauf que le texte est masqué à l'écran. Insérez une zone de saisie de mot de passe à l'aide de la balise <input type= password /> avec 8 caractères apparents et 8 caractères max. autorisés et dont le name est code. 3.3. La zone de texte sur plusieurs lignes Pour saisir un texte sur plusieurs lignes, il faut utiliser une balise <textarea></textarea>. On peut indiquer son nombre de lignes avec l'attribut rows, son nombre de caractères par ligne avec l'attribut cols. Ajoutez une zone de texte de 60 caractères de large sur 4 lignes dont le name est remarque et le placeholder Avez-vous des remarques sur le site?.
3.4. La zone de texte sur plusieurs lignes HTML5 a permis l'apparition de nouveaux types d'input. Mais attention, tous les navigateurs ne les prennent pas en compte. A la place, ils affichent un input de type texte. <input type="email" /> Le code ci-dessus sera en apparence comme un champ texte mais le navigateur bloquera l'envoi et affichera un message d'erreur si le texte saisi n'est pas une adresse mail. Les types tel et url sont aussi disponibles. Ajoutez dans votre formulaire ces trois champs et leur libellé. 3.4. Les éléments d'options Liste déroulante La balise <select></select> affiche une liste déroulante présentant un choix d'éléments. La balise <option></option> affiche chaque élément de la liste. Exemple d'une liste de mois : <select name="mois"> <option value="01">janvier</option> <option value="02">février</option> </select> Si l'attribut value n'est pas précisé, c'est la valeur prise entre les deux balises <option></option> qui sera transmise. L'attribut selected= selected permet de sélectionner au préalable une des options. L'attribut size=" " détermine le nombre de lignes affichées (1 par défaut). Complétez la liste de mois et ajouter deux autres listes pour le jour et l'année pour afficher ce résultat : Bouton radio Un bouton radio est une case de forme ronde indiquant un choix exclusif : si les boutons radio concernent le même thème, cocher une des cases décoche automatiquement les autres. Elles sont réunies par thème et doivent avoir le même nom. Si l'on demande "Quel type de musique préférez-vous?", vous ne pouvez cocher qu'une seule case. <input type="radio" name="musiquepref" value="rock"> <input type="radio" name="musiquepref" value="punk">
Pour qu'une case soit préalablement cochée, on ajoute un attribut checked="checked". Ajoutez étiquette et case à cocher permettant d'indiquer : si la personne est majeure (le name sera majeur) parmi 2 choix (oui ou non) le titre de civilité (le name sera civilite) parmi 3 choix (M. Mme ou Mlle) associés respectivement aux valeurs transmises 1, 2 ou 3. Checkbox Une case à cocher est une case de forme carrée que l'utilisateur peut cocher ou décocher. Même regroupées autour d'un même thème, elles restent indépendantes les unes des autres à la différence des boutons radio (forme ronde). Le choix n'est pas exclusif. Si l'on demande "Quel type de musique aimez-vous?", vous pouvez cocher rock, punk, rap <input type="checkbox" name="rock" value="oui"> <input type="checkbox" name="punk" value="oui"> Pour qu'une case soit préalablement cochée, on ajoute un attribut checked="checked". Ajoutez des cases à cocher permettant de demander : ce que la personne aime comme musique parmi rock, punk, rap, classique, jazz si la personne souhaite recevoir la lettre d'information mensuelle (avec case précochée) 3.5. Bouton de soumission Le bouton de soumission du formulaire doit être placé dans la partie <form></form>. Il déclenche l'envoi de toutes les données correspondant aux éléments placés dans ce formulaire. Il peut se créer avec la balise : <input type="submit" value="texte du bouton"> L'attribut name n'est pas indispensable sur ce type de bouton. Ajoutez un bouton submit indiquant "Envoyer". Remplissez le formulaire et envoyez le. Étant donné qu'on a choisi la méthode GET, toutes les réponses sont transmises dans l'url. 3.6. Autres éléments de formulaire Donnée cachée Il est possible de transmettre par formulaire une donnée cachée, non saisie par l'utilisateur mais placée ou programmée par le développeur. <input type="hidden" name=" " value=" ">
Envoi de fichier Pour que l'utilisateur transmette un fichier, il faut utiliser une balise <input type="file" > et ne pas oublier de spécifier l'attribut enctype="multipart/form-data" dans la balise form. <input type="file" name=" "> Champ obligatoire Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required. <input type="text" name="prenom" id="prenom" required /> Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit impérativement être rempli. 3.7. Éléments de regroupement La balise <fieldset> </fieldset> permet de définir une zone rectangulaire regroupant visuellement une partie des éléments. Cette zone peut avoir une légende grâce à la balise <legend></legend> placée juste après la balise ouvrante <fieldset>. <fieldset> <legend>nom d'une zone de formulaire</legend> emplacement des éléments souhaités </fieldset> <fieldset> <legend>nom d'une autre zone de formulaire</legend> emplacement des éléments souhaités </fieldset>
4. Synthèse Réalisez le formulaire suivant :
Puis créez le fichier inscription.css et écrivez les règles css pour arriver à ce résultat :