10. Les Formulaires¶

Les formulaires sont les principaux moyens de communiquer entre un utilisateur et un site web. Ils donnent le moyen aux utilisateurs d'envoyer des données qu'ils contrôlent, au site web. On jette l'ancre pour ce dernier chapitre qui sera dense.

Comment ça marche ?¶

La plupart du temps, les formulaires sont composés de plusieurs champs qui n'ont pas tous la même apparence. On retrouve des listes déroulantes, des zones de textes mais également des cases à cocher ou encore des boutons radio. Généralement, ces champs sont associés à un libellé et à des instructions pour les remplir correctement.

Comme le reste du cours, nous n'aborderons pas la mise en forme mais uniquement le code HTML (Hypertext Markup Language), avec la découverte de nombreuses balises.

Nous n'aborderons pas non plus le traitement du formulaire côté serveur qui peut se traiter à l'aide d'autres langages comme : le PHP (Hypertext Preprocessor), JavaScript, Python, etc.

Les balises de formulaire

Les balises de formulaire sont des balises qui ont un comportement spécifique permettant aux utilisateur de saisir du texte, de faire des sélections de plusieurs manières et que ces informations / données puissent être envoyé à un serveur. Nous allons les découvrir pas à pas ci-dessous.

La balise <form>¶

À l'instar de <table> pour les tableaux, la balise <form> englobe tout un formulaire. Comme expliqué en introduction, derrière chaque formulaire se cache une page de destination. En effet, les formulaires sont bien traités quelque part. Prenons l'exemple d'un simple formulaire de contact, les données que l'utilisateur enregistre sont bel et bien envoyées quelque part. Deux attributs sont utilisés pour préciser ces informations :

• action="" : détermine la page qui traitera les données du formulaire enregistrées par l'utilisateur.
• method="" : précise la méthode HTTP d'envoi des données (GET ou POST).

Étant donné que nous ne traiterons pas les formulaires côté serveur, nous ferons abstraction de ces deux attributs dans le reste du chapitre. Prenons tout de même le temps de voir un exemple d'utilisation de cette balise avec ces deux attributs incontournables.

<form action="/ma-page-traitement" method="POST">...</form>

La balise <input>¶

Un formulaire est composé d'une suite de champs qui a pour but de collecter les données de l'utilisateur, qu'il aura bien voulu enregistrer. La balise orpheline <input> est celle la plus utilisée, car elle offre beaucoup de possibilités.

<input type="text">

La ligne de code HTML ci-dessus correspond à la forme la plus basique d'une balise <input>. L'attribut type="" est essentiel. La valeur par défaut de l'attribut type="" est text. Il existe bien d'autres valeurs.

Ci-après un tableau avec une liste non-exhaustive des possibilités, mais regroupant néanmoins les principales.

La liste est non-exhaustive mais permet déjà de faire beaucoup. On remarque que certaines valeurs pour l'attribut type="" demande l'utilisation d'autres attributs pour mieux les contrôler.

Certains sont spécifiques et d'autres plus globaux. Le tableau suivant permet d'en apprendre plus sur ces derniers.

Rien ne vos mieux qu'un exemple :

<form>
  <!-- Permet à l'utilisateur de renseigner du texte de maximum 32 caractères -->
  <label for="firstname-id">First name</label>
  <input type="text" id="firstname-id" name="firstname" required maxlength="32">

  <!-- Permet à l'utilisateur de renseigner un email -->
  <label for="email-id">Email</label>
  <input type="email" id="email-id" name="email">

  <!-- Permet à l'utilisateur de renseigner un mot de passe de manière masqué -->
  <label for="password-id">Password</label>
  <input type="password" id="password-id" name="password">

  <!-- Précise une date -->
  <label for="anniv">Date</label>
  <input type="date" id="anniv" name="anniv">

  <!-- Permet à l'utilisateur de sélectionner plusieurs choix, case à cocher -->
  <label>Checkbox</label>
  <input type="checkbox" name="pokemon[]" value="Pikachu"> Pikachu<br>
  <input type="checkbox" name="pokemon[]" value="Carapuce"> Carapuce<br>
  <input type="checkbox" name="pokemon[]" value="Bulbizarre"> Bulbizarre

  <!-- Permet à l'utilisateur de sélectionner un unique choix -->
  <label>Radio</label>
  <input type="radio" name="monequipefav" value="Camembert"> Camembert<br>
  <input type="radio" name="monequipefav" value="Bures-sur-Yvette"> Bures-sur-Yvette<br>
  <input type="radio" name="monequipefav" value="Dunkerque" checked="checked"> Dunkerque<br>

  <input type="submit" value="Envoyer">  
</form>

La balise <label>¶

Si vous avez bien remarqué, une balise a fait son apparition dans l'exemple : <label>. Cette balise très simple permet d'étiqueter un champ pour lui donner un nom ou une courte explication. Pour lier un avec un champ, on utilise l'attribut for="". On inscrit en valeur de cet attribut la valeur de l'id="" du champ, comme dans l'exemple ci-après.

<div>
   <label for="city">Ville</label>
   <input type="text" id="city" name="city">
</div>

La balise <textarea>¶

La balise <textarea> est dédiée aux champs textuels multilingues. Contrairement à la balise <input>, <textarea> a une balise ouvrante et fermante. Si on souhaite inscrire un contenu par défaut à l'intérieur de la balise, il faut le préciser au coeur de la balise. En effet, celle-ci n'accepte pas l'attribut value="".

On note pour cette balise deux attributs particuliers, qui jouent sur la mise en forme :

• cols="" : la largeur visible du champ, exprimée en largeur moyenne de caractères.
• rows="" : le nombre de lignes visibles dans le champ.

<label for="message-id">Mon message</label>
<textarea rows="3" id="message-id" name="message">Je rédige mon texte ici librement</textarea>

Les balises <select> et <option>¶

La balise <select> permet de construire des listes de sélection ou déroulantes. C'est une balise que l'on retrouve dans de nombreux formulaires. Elle est très pratique car elle permet de contrôler les différents choix qui sont proposés à l'utilisateur. Les éléments d'une liste déroulante sont déterminés par la balise <option>.

<select name="moncocktail">
  <option value="Mojito">Mojito</option>
  <option value="Daïquiri" selected="selected">Daïquiri</option>
  <option value="White Lady">White Lady</option>
  <option value="Old fashioned">Old fashioned</option>
</select>

La balise <button>¶

Le nom de cette balise est assez explicite, elle est la manière la plus simple de créer un bouton. On en distingue trois grands type="" :

• submit : similaire à <input type="submit">
• reset : permet de remettre à zéro instantanément l'ensemble des valeurs des balises du formulaire. A utiliser avec précaution dans des cas précis
• button : bouton sans sens et fonctionnalité particulière

<button type="submit">Envoyer</button>

Les balises <fieldset> et <legend>¶

La balise <fieldset> permet de regrouper des blocs de contenu. C'est une balise normale et on la retrouve régulièrement à l'intérieur d'un

<form>
  <fieldset>
      <legend>Ingrédients</legend>

      <div>
        <label for="agrume">Agrume</label>
        <input type="text" id="agrume" name="agrume">
      </div>

      <div> 
        <label for="spiritueux">Spiritueux</label>
        <input type="text" id="spiritueux" name="spiritueux">
      </div>
  </fieldset>

  <fieldset>
      <legend>Recette</legend>

      <div>
        <label>Type de verre</label>
        <input type="radio" name="typedeverre" value="Verre à cocktail"> Verre à cocktail<br>
        <input type="radio" name="typedeverre" value="Tumbler"> Tumbler<br>
        <input type="radio" name="typedeverre" value="Hurricane glass"> Hurricane glass
      </div>

      <div>
        <label>Servi</label>
        <input type="radio" name="servi" value="On the rocks"> On the rocks<br>
        <input type="radio" name="servi" value="Sec"> Sec<br>
        <input type="radio" name="servi" value="Frappé sans glace"> Frappé sans glace
      <div>
  </fieldset>
</form>