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

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.

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.

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 ?

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

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.

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.

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-1. Navigation▲

V-H-2. Convivialité▲

V-H-3. Contrôle du contenu▲