TD5 Les formulaires.

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.

La balise <form> et les balises <input>

Le coeur 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 :

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:

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.

  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 :

    <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’, cocher 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.

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 la valeur de l’attribut id du champ auquel est associé le label (il faut donc penser à donner un id à notre <input>).

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

    <label for="surname">Nom</label>
<input id="surname" name="uname" type="text">
  2. Rajoutez 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 les uns à la suite des autres. 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 ?

Les principaux types de balises <input>

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

A 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érifier 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. Faite 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 :

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>.

A l’aide de developer.mozilla.org :

  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.

La balise <textarea>

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

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

La balise <fieldset>

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

A l’aide de cette page, regroupez les champs sur ces trois grands axes suivant :

  • “Informations personnelles” (contenant “Nom”, “Prénom”, “Email”, etc.),
  • “Les sports de combat” (contenenant “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.).

Ergonomie et convivialité

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”.

  • Vérifiez que vous pouvez accéder à tous les champs avec la touche tabulation. Modifier l’ordre de tabulation avec la propriété “tabindex”.

Convivialité

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

  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.”

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

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 :

  1. Rendre 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. Rendre aussi les champs “Nom” “Mot de passe” et “Email” obligatoires.
  3. Par convention d’usage, le nom des champs obligatoires est suivi d’une “*”. 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 bugs 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.