Apprendre la programmation Web - HTML, CSS à travers des TD


précédentsommairesuivant

V. TD4 Les formulaires

V-A. Introduction

Nous allons ajouter un formulaire d'inscription à notre site de fans de Chuck Norris, en utilisant la balise <form>. Cette balise <form> nous permettra d'avoir des réponses à des questions des plus ouvertes (« Que voulez-vous dire à Chuck ? ») aux plus fermées (« Parmi ces trois choix quel est votre sport favori ? », « Quel est votre sexe ? »… ). Il y a beaucoup de types de questions, correspondant chacune à un type de balises <input> ou <textarea> que nous verrons par la suite.

V-B. La balise <form> et les balises <input>

Le cœur du formulaire est constitué par deux types de balises : <form> et <input>.

La balise <form> délimite le contenu du formulaire et renseigne plusieurs attributs nécessaires au fonctionnement du formulaire :

  • method : nom de la méthode HTTP utilisée pour envoyer les données. Peut prendre pour valeur post ou get :

    • get envoie les données comme composantes de l'URL du serveur et requiert par conséquent que :

      1. Les données soient encodées pour être compatibles avec les spécifications URL,
      2. L'ensemble des données du formulaire plus l'URL du serveur forment une chaîne de caractères de moins de 2000 caractères (limite imposée par certains navigateurs),
    • post envoie les données dans le corps de la requête HTTP et ne présente pas la limitation de taille, elle est donc à privilégier ;
  • action : URL du serveur où les données du formulaire doivent être envoyées.

La balise <input> permet de définir différents champs dans lesquels l'utilisateur peut entrer des données. Ces champs offrent plus ou moins de liberté d'expression selon le type utilisé. La balise <input> a pour attributs :

  • type : définit l'apparence visuelle du champ et la nature des données qui peuvent y être renseignées ;
  • value : la valeur envoyée au serveur. Si elle est déjà renseignée lors de la création du formulaire, elle fait office de valeur par défaut ;
  • name : le nom que prendra la donnée envoyée au serveur. Si l'input a pour name « firstname » et pour valeur « Éric », dans le cas d'une method get l'URL lors la soumission du formulaire contiendra ‘firstname=Éric' et si la méthode est post ces valeurs seront transmises via les champs Form Data de la requête HTTP.

Afin de pouvoir être envoyé, votre formulaire doit obligatoirement contenir une balise <input> avec l'attribut type fixé à « submit ». Cette balise définit le bouton qui déclenchera l'envoi des données au serveur lorsque l'on cliquera dessus.

Nous allons voir comment est envoyée la valeur d'un <input> lorsque l'on soumet un formulaire.

Exercice 1

  1. Créez une nouvelle page inscription.html au site de Chuck Norris. Cette page va contenir le formulaire d'inscription au fan-club de Chuck que nous allons construire dans ce TD.
  2. Ajoutez à la page inscription.html le formulaire suivant :

     
    Sélectionnez
    1.
    2.
    3.
    4.
    <form action="sendToMySecondYearInIut.php" method="post">
      <input name="uname" type="text" >
      <input type="submit" value="Envoyer">
    </form>
    
  3. Sous Chrome relativement récent uniquement : affichez la page et ouvrez la console (F12) pour aller sur l'onglet ‘Réseau', cochez la case « Preserve log », donnez la valeur dupont au champ texte, puis cliquez sur le bouton « Envoyer » du formulaire. Vous devez voir une requête contenant sendToMySecondYearInIut dans la console. Cliquez sur cette ligne et cherchez la valeur dupont dans les détails de la transaction.

  4. Donnez à l'attribut method du formulaire la valeur get. Cliquez sur le bouton « Envoyer » du formulaire, l'URL doit maintenant finir par « sendToMySecondYearInIut.php?uname=dupont ».

Note : il est normal que l'URL sendToMySecondYearInIut.php n'existe pas (le fameux code de retour HTTP 404 apparaît dans la console), puisque vous êtes en première année. Nous verrons en deuxième année dans le cours « Programmation Web - Côté Serveur » comment le serveur peut récupérer les données envoyées par notre formulaire et les traiter.

V-C. La balise <label>

Il serait bien de préciser à l'utilisateur à quoi notre champ <input> fait référence. La balise <label> permet d'associer la question sous-tendue (« Nom? ») à l'input. Cette balise comporte un attribut for qui doit prendre pour valeur celle de l'attribut id du champ auquel est associé le label (il faut donc penser à donner un id à notre <input>).

Exercice 2

  1. Remplacez le code de votre champ <input> par le code suivant :

     
    Sélectionnez
    <label for="surname">Nom</label>
    <input id="surname" name="uname" type="text">
  2. Ajoutez au formulaire une entrée qui correspondra au prénom (calqué sur l'exemple précédent).

  3. Validez ce dernier et vérifiez que vos deux champs sont bien présents dans l'URL du navigateur (l'URL doit finir par sendToMySecondYearInIut.php?uname=dupont&firstname=super et la method du formulaire doit toujours être get).

  4. Les deux champs apparaissent l'un à la suite de l'autre. Avec quelle balise vue dans le TD précédent peut-on les englober pour qu'il y ait un saut de ligne entre les deux ?

V-D. Les principaux types de balises <input>

Il existe un assez grand nombre de types d'input :

  • le type radio permet de ne sélectionner qu'une seule des options possibles ;
  • le type checkbox (case à cocher) permet de sélectionner autant d'options que l'utilisateur le souhaite ;
  • le type password masque automatiquement les caractères entrés.
  • les types email, URL, tel, date, time et number, etc. permettent d'adapter le clavier virtuel quand la page est affichée sur un smartphone. Suivant le navigateur, une présentation différente peut être associée. Des validateurs sont associés à ces champs (nous le verrons plus loin), une valeur de champ email doit par exemple contenir un « @ ».

Exercice 3

À l'aide de w3schools, ajoutez dans le formulaire les <input> libellés :

  1. « Sexe » avec les deux valeurs que vous connaissez ;
  2. « Date de naissance » avec le type d'input date ;
  3. « Mot de passe » avec le type d'input password ;
  4. « Email » avec le type d'input de type… email ;
  5. « Niveau en karaté » avec le type d'input number allant de 0 à 5 ;
  6. « Niveau d'engagement » avec un choix parmi trois valeurs libellées « Basique (5 €) », “Gold (15 €) » et « Tatane in your face (50 €) » ;
  7. « J'ai bien lu les clauses que je n'ai pas lues » associé à une case à cocher ;
  8. Vérifiez par envoi du formulaire que tous les champs sont bien renseignés, on rappelle que c'est l'attribut name de l'input qui est utilisé ;
  9. Faites en sorte qu'il y ait un saut de ligne entre chaque <input> (comme dans le dernier exercice de la section précédente).

Notes 

  • Certains de ces inputs sont issus de la norme HTML5. De fait leur adoption au sein des navigateurs n'est pas uniforme. Les développeurs web peuvent être amenés à demander la nature du parc informatique cible du site web qu'ils doivent implémenter (en clair ils demandent : « quelle est la version d'Internet Explorer encore en cours sur votre parc ? »). Le site caniuse.com permet ensuite de savoir si nous pouvons utiliser tel ou tel aspect pour la réalisation d'un site. Les types date et time par exemple sont plus ou moins bien supportés par les navigateurs. Le type number l'est un peu plus. Vous pouvez constater quelques différences d'apparence dans votre formulaire suivant que vous êtes sur Chrome, Firefox, Internet Explorer ou Edge.
  • À propos du mot de passe, remarquez que ce dernier apparaît en clair dans l'URL si vous êtes en get lors de l'envoi via à sendToMySecondYearInIut.php. Définitivement donc, un envoi avec post doit être privilégié, même si cela n'augmente pas vraiment la sécurité puisque le mot de passe transite toujours en clair sur le réseau (utilisez l'onglet Réseau comme dans l'exercice 1 pour le voir).

V-E. La balise <select>

Voyons maintenant un autre élément important d'un formulaire, correspondant à la balise <select>. Il permet de choisir parmi un ensemble de valeurs présentées par un menu déroulant. Tout comme <input>, cet élément peut aussi être libellé via un <label>. La liste déroulante permet de base de ne sélectionner qu'une option. Plusieurs options peuvent être sélectionnées si l'attribut multiple est ajouté à la balise <select>. Des groupes de choix peuvent être proposés avec la balise <optgroup>.

Exercice 4

À l'aide de developer.mozilla.org, ajoutez dans le formulaire les <input> libellés :

  1. Ajoutez un <select> libellé « Pays d'origine » qui prend comme valeur de pays U.S.A , France, Chine et Viêt Nam, les values associées ne doivent pas dépendre de la langue du formulaire (la value associée à France doit être fr par exemple). L'utilisateur ne peut pas sélectionner plusieurs valeurs, le pays sélectionné par défaut est la France (indépendamment de l'ordre des balises <option> dans le HTML) ;
  2. Ajoutez à la suite de ce champ un autre sélecteur libellé « Arts-martiaux préférés ». Les valeurs sont « Kung fu » , « Karaté » et « Full-contact ». L'utilisateur peut sélectionner plusieurs valeurs.

V-F. La balise <textarea>

La balise <textarea> permet de proposer une grande zone de texte pour que l'utilisateur puisse s'exprimer.

Exercice 5

  1. Ajoutez un champ à votre formulaire libellé « Message pour Chuck » associé à un <textarea> sur lequel l'utilisateur peut s'épancher.

V-G. La balise <fieldset>

La balise <fieldset> permet de regrouper visuellement différents champs <input>.

Exercice 6

À l'aide de cette page, regroupez les champs sur ces trois grands axes suivants :

  • « Informations personnelles » (contenant « Nom », « Prénom », « Email », etc.) ;
  • « Les sports de combat » (contenant « Sport de combat préféré » et « Niveau en karaté ») ;
  • « Inscription » (contenant « Message personnel à Chuck », « Mot de passe », la coche « J'ai bien lu.. », « Niveau d'engagement », etc.).

V-H. Ergonomie et convivialité

V-H-1. Navigation

Pour les utilisateurs avancés, la navigation à l'aide de la touche « tabulation » permet de parcourir très vite le formulaire. L'attribut « autofocus » permet de spécifier au navigateur quel élément du formulaire doit avoir le focus quand la page est chargée. L'attribut « tabindex » permet de spécifier l'ordre dans lequel les éléments sont parcourus en appuyant sur « tabulation ».

Exercice 7

  • Vérifiez que vous pouvez accéder à tous les champs avec la touche tabulation. Modifiez l'ordre de tabulation avec la propriété « tabindex ».

V-H-2. Convivialité

Quelques attributs permettent d'améliorer la convivialité des champs de votre formulaire :

  • placeholder : permet d'afficher une ligne de texte dans le champ qui disparaît dès lors que l'utilisateur tape une information. Cela permet de donner à l'utilisateur des renseignements sur le contenu attendu. À utiliser impérativement avec les champs pour lesquels vous avez spécifié un « pattern », sous peine de causer une extrême frustration à l'utilisateur. Vous devez alors utiliser l'attribut placeholder pour spécifier le format attendu, les caractères interdits/autorisés, etc.
    ex. : placeholder="Entrez votre nom ici."
  • checked / selected : pour les types « radio » et « checkbox », et pour <option> respectivement. Cet attribut permet de spécifier que l'option en question est sélectionnée/cochée par défaut. Utile quand vous savez que l'une des options sera utilisée beaucoup plus fréquemment que les autres. Vous épargnez alors du temps à l'utilisateur.

Exercice 8

  1. Ajoutez un placeholder de valeur « yourmail@domain.com » au champ Email.
  2. Ajoutez un attribut placeholder dans le <textarea> avec le texte suivant « Un inscrit sera tiré au sort, et verra son message transmis à Chuck Norris. »
  3. Faites en sorte que le pays sélectionné par défaut dans « Pays d'origine » soit la France (et cela indépendamment de l'ordre des balises <option> dans le HTML).

Note : il existe depuis peu un pseudo-attribut css ::placeholder, mais celui-ci est moins bien supporté que l'attribut.

V-H-3. Contrôle du contenu

La sécurité de votre serveur et de vos utilisateurs impose que vous contrôliez toujours au niveau du serveur les données entrées (cf. cours l'an prochain). Toutefois, le contrôle par le serveur demande que les données soient envoyées, que le serveur teste, puis réponde ; l'opération peut être longue.

Afin d'éviter une attente inutile aux utilisateurs de votre formulaire, vous pouvez demander au navigateur d'effectuer directement certains tests de validation, afin de prévenir les erreurs courantes (ex. : mauvais numéro de téléphone, mauvaise date…). Attention : cela ne vous dispense quand même pas de procéder aux vérifications côté serveur ! Deux attributs permettent de vérifier le contenu du formulaire :

  • required : spécifie que le champ doit être obligatoirement rempli. Attribut à ajouter à tous les champs dont la légende comporte un astérisque « * » ;
  • pattern : attribut spécifique aux champs « libres », il permet de spécifier une expression régulière. Cette chaîne de caractères au format particulier indique au navigateur tous les formats d'entrée autorisés pour le champ et le navigateur refusera d'envoyer le formulaire si un champ n'est pas correctement rempli. Par exemple, un « pattern » égal à 0[1-9](\.\d{2}){4} permettra de s'assurer qu'un numéro de téléphone respecte bien les règles de numérotation françaises, tandis que le pattern [a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4} bloquera les erreurs d'adresse email les plus grossières. Vous trouverez de nombreux exemples de patterns utilisables dans ce cas du HTML5pattern.
    Note : les patterns HTML sont automatiquement évalués contre la totalité de l'entrée. Il est donc inutile de les encadrer entre ^ et $ comme une expression régulière classique.

Exercice 9

  1. Rendez la coche « J'ai bien lu les clauses que je n'ai pas lues » obligatoire. Vérifiez si l'envoi du formulaire est bien impossible alors.
  2. Rendez aussi les champs « Nom » « Mot de passe » et « Email » obligatoires.
  3. Par convention d'usage, le nom des champs obligatoires est suivi d'un « * ». Ajoutez-la aux labels des <input> obligatoires.
  4. Ajoutez au champ password un pattern pour que ne soient acceptés que des caractères de l'alphabet latin ou numériques.
  5. Faites en sorte que le mot de passe acceptable soit d'une longueur de 8 caractères minimum.

Note : pour être toujours protégé contre les bogues lorsque vous cogitez sur une expression régulière, ne sortez jamais sans votre Regulex. Regulex, le visualisateur de machine d'état qu'il vous faut pour vos expressions régulières.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+