HTML: Les Bases, Structure d’un Formulaire

Bonjour à tous !

Lorsque vous concevez un formulaire, bien le structurer garantit que celui-ci pourra être correctement renseigné et accessible.
Aujourd’hui, nous allons donc voir comment structurer un formulaire en HTML.
Je vous invite à consultez l’article  HTML, les bases le BODY.

A quoi cela peut servir ?

Les formulaires servent à recueillir des informations fournies par l’utilisateur.
Pour cela, il rempli différents champs appelés INPUTS (Entrées). Ces inputs peuvent être de plusieurs types :

  •  Texte (type text)
  • Liste déroulent (type select)
  • Option (type radio)
  • Sélection (type checkbox)

 

Pour intégrer un formulaire dans une page HTML, on utilise la balise <form>. Celle-ci sera placée dans la balise <body> comme ceci :

<body>
     <form>
          //Votre Code se place ici.
     </form>
</body>

Ensuite, nous pouvons y placer nos fameux INPUTS :

<body>
     <form>
          <input> //Notre premier Champs
     </form>
</body>

Certaines entrées, possèdent leurs propres spécificités.  Par exemple :

  • Masquer la saisie, pour les mots de passes
  • Activer les touches de notre smartphone permettant de saisir une adresses Mail
  • Activer les touches de notre smartphone permettant de saisir un numéro de téléphone
  • Choisir entre plusieurs options ou champs
  • Et beaucoup d'autres...

 

Pour spécifier la nature de notre entrée, il suffit de lui lui ajouter un attribut "type" à l’intérieur de sa balise, puis d'indiquer une valeur. Rien de plus simple, juger par vous-même:

<body>
     <form>
          <input type="text"/><br/> //Pour un simple Champ texte
          <input type="password"><br/> //Pour un champ Mot de passe
          <input type="email"/><br/> //Pour un Champ d'adresse Mail
          <input type="tel"/><br/> //Pour un Champ de numéro de téléphone
          <input type="checkbox"/><br/> //Pour les cases à cocher
          <input type="radio"/><br/> //Pour les boutons radio
          <input type="file"/><br/> //Pour récupérer un fichier
     </form>
</body>

Les champs de type liste déroulante possèdent une structure un peut différente , car elles se caractérisent par une balise <select>, dans laquelle on place nos champs dans une balise <option>:

Exemple :

<body>
     <form>
          <select>
               <option>Option 1 </option> //Première Option de la liste
               <option>Option 2</option> //Seconde Option de la liste
          </select><br/>
     </form>
</body>

La Propriété "Value"

Chaque input interprètent cette propriété différemment.  Par exemple la propriété "value" d'un input type "text", renvoie le contenue saisie par l'utilisation.

Essayez le code suivant :

<body>
     <form>
          <input type="text" value="Ma valeur saisie"><br/>
     </form>
</body>

Vous aurez donc compris que lors de la transmission du formulaire, seule les valeurs des propriétés "value" des inputs seront envoyées. C'est pour cette raison qu'il convient d’attribuer une valeur par défaut sur les balises de sélection, comme les balises <option>, <input type="radio">, <input type="checkbox"> ...

Exemple :

<form>
     <input type="checkbox" value="fruit"><br/> //Transmettra "fruit"
     <input type="radio" value="pomme"><br/> //Transmettra "pomme"
     <select>
           <option value="valeur1">Option 1</option>
           <option value="Valeur2">Option 2</option>
     </select><br/> //Transmettra "Valeur2" si l'Option 2 est sélectionné
</form>

Les Indications

C'est bien beau de placer des champs de saisie, mais encore faut-il que l'utilisateur sache ce qu'il doit saisir. Pour y remédier,  il existe trois méthodes:

  • En indiquant un libellé devant ou après le champ
  • En regroupant les champs dans un cadre
  • En indiquant directement dans le champs les informations a saisir

 

Première méthode: Les libellés

Pour placer un libellé, on utilise la balise <label> :

<form>
     <label>nom : </label><input type="text"/><br/>
     <input type="checkbox" value="pomme"/><label>Fruit</label>
</form>

Deuxième méthode: Les Fieldsets

Si nous souhaitons ajouter un encadré pour compartimenter notre formulaire, on utilise la balise <fieldset> pour délimiter notre cadre, et la balise <legend> pour lui donner un titre:

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text"/><br/>
     </fieldset>
</form>

 Troisème méthode: L’attribut Placeholder

Enfin, pour plus d’ergonomie, il est parfois nécessaire d'indiquer à l'intérieur de l'input les informations à saisir. Pour cela l’attribut placeholder convient parfaitement:

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text" placeholder="Entrer votre nom"/><br/>
     </fieldset>
</form>

Les boutons

Il ne reste plus qu’à ajouter nos boutons! Il existe trois types de boutons :

  • Bouton Générique (type "button")
  • Bouton de Validation (type submit)
  • Bouton de Réinitialisation (type Reset)

 

Le premier est un générique, il ne possède pas d’action prédéfinie, ni de valeur par défaut. Pour lui donner un titre, il suffit de lui attribuer une valeur:

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text" placeholder="Entrer votre nom"/><br/>
          <input type="button" value="Cliquer"><br/>
     </fieldset>
</form>

Le second valide le formulaire dès que l’on clique dessus, sa valeur par défaut est «valider».

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text" placeholder="Entrer votre nom"/><br/>
          <input type="submit"/><br/>
     </fieldset>
</form>

Le troisième réinitialise le formulaire dès que l’on clique dessus, sa valeur par défaut est «réinitialiser».

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text" placeholder="Entrer votre nom"/><br/>
          <input type="reset"/><br/>
     </fieldset>
</form>

Enfin, afin de finaliser notre structure de formulaire, il est important de nommer nos champs. Sinon, les "values" ne seront pas transférées lors de la validation. Pour nommer une balise, on utilise l'attibut "name" :

Exemple :

<form>
     <fieldset>
          <legend>Titre du Compartiment</legend>
          <label>nom: </label><input type="text" placeholder="Entrer votre nom" name="nom"/><br/>
          <input type="button" value="Cliquer"><br/>
     </fieldset>
</form>

Voilà, vous êtes maintenant capable de faire un formulaire simple!

Laisser un commentaire