Une page web qui affiche du texte, des images, et tout, c’est cool. Mais on peut aussi demander des informations aux visiteurs, tels que leur adresse email, leur nom, ou simplement de laisser un message. De quels outils disposons-nous en HTML 5 ? Les formulaires sont la réponse à cette question.

Tout formulaire commence doit être contenu dans les balises <form></form>. Il ne peut y avoir d’autre formulaire à l’intérieur. Il existe bien une possibilité pour avoir un design plus responsive, mais je n’en parlerais pas, car elle n’est pas compatible avec tous les navigateurs.

<form>

La balise <form> en elle même possède plusieurs attributs. Le premier, « action », définit la page cible où envoyer les données du formulaire. Le second attribut, « method », permet de définir une méthode d’envoi. Ce denier peut prendre la valeur « GET » ou « POST ». Par défaut, si l’attribut « method » est omis, c’est la méthode « GET » qui sera utilisé. La différence entre les deux méthodes, c’est qu’avec « GET », toutes les données seront envoyées dans l’url de destination (ex: http://monsite.fr/formulaire.html?nom=monnom&commentaire=mon&nbsp;commentaire). Avec la méthode « POST », les données sont envoyées séparément de l’url de destination (l’url resterait donc http://monsite.fr/formulaire.html). C’est une méthode recommandée, surtout si vous faites un formulaire de connexion où le mot de passe doit être envoyé.

Cependant, pour traiter ces informations, il vous faudra un programme du côté du serveur qui héberge vos pages. Celui-ci peut être écris en C++, ASP, PHP, ou autre. Je travaillerais personnellement avec le PHP pour vous montrer comment récupérer les données d’un formulaire et les traiter efficacement. Lisez mon blog section Code<> / PHP pour en apprendre plus; Cet article n’a que pour but de vous informer quant au fonctionnement des formulaires en HTML 5.

Note: On peut aussi traiter les formulaires avec du JavaScript, côté client (donc chez le visiteur), mais il est rare de le faire, d’autant plus en HTML 5.

La balise <form> peut donc avoir un attribut « action », qui s’il est omis, renverra automatiquement le formulaire sur la même page. Plutôt pratique, mais déconseillé de le laisser vide.

Un début de formulaire ressemble donc à ceci :

<form action="formulaire.html" method="POST">
</form>

<input>

La balise <input> est plutôt vaste. Elle prendra des formes diverses et variées en fonction de son attribut « type ». Elle doit posséder un attribut « name » pour avoir la possibilité de récupérer sa valeur par le biais du programme côté serveur. Ces balises ne se referment pas, on entrera jamais du texte ou quoique soit d’autre entre deux balises <input> et </input>. Toutes les balise <input> peut avoir l’attribut « required » pour signaler au navigateur que le champ est obligatoire. Si le champ est laissé vide et que le visiteur clique sur le bouton d’envoi du formulaire, le navigateur affiche alors l’erreur et n’enverra pas le formulaire. Certains champs <input> peuvent utiliser en plus l’attribut « placeholder » pour afficher du texte en arrière-plan lorsque le champ n’est pas rempli, et qui s’effacera au premier caractère entré par le visiteur. Vous pouvez spécifier aussi l’attribut « value » pour soit mettre une valeur par défaut, soit spécifier une valeur de choix (ex: <input type= »radio »>).

<input type= »text »>

Permet au visiteur d’entrer du texte brut, sur une ligne. On peut spécifier l’attribut « maxlength » pour définir une longueur maximale de la chaine d’entrée.

<input type= »password »>

Permet au visiteur d’entrer un mot de passe. Similaire au type « text », mais les caractères ne sont pas visible.

<input type= »submit »>

Affiche un bouton qui enverra le formulaire. Pour définir son texte, utilisez l’attribut « value ».

<input type= »email »>

Permet de demander une adresse email au visiteur. Si l’adresse est invalide, le navigateur affichera une erreur au moment d’envoyer le formulaire, et annulera son envoi. Permet aussi aux smartphones d’afficher un clavier différent lors de la saisie.

<input type= »radio »>

Permet de demander un choix au visiteur par le biais d’un bouton radio (exemple: est-il un homme ou une femme ?). Pour que plusieurs <input> « radio » puissent fonctionner de concert, il faudra leur attribuer le même nom. De plus, il faudra spécifier l’attribut « value » pour connaître la valeur choisie. Vous pouvez spécifiez l’attribut « checked » pour présélectionner une option.

<input type= »checkbox »>

Permet d’afficher une case à cocher, pour valider par exemple des CGU ou activer ou non certaines options sur votre site. Peut utiliser l’attribut « checked ».

<input type= »button »>

Permet d’afficher un bouton, qui typiquement, ne fera rien. Il est généralement utilisé conjointement avec du JavaScript pour effectuer des actions précises. Utilisez l’attribut « value » pour lui attribuer un texte à afficher.

<input type= »url »>

Vous demander au visiteur d’indiquer l’adresse d’un site web. Ce champ ressemble au type « text », mais le navigateur attendra une adresse valide. Permet aussi aux smartphones d’afficher un clavier différent lors de la saisie. Note: Ce type de champs n’est pas forcément compatible avec tous les navigateurs.

Petit exemple de formulaire :

<form action="formulaire.html" method="post">
  <div><input type="text" name="nom" placeholder="Votre nom" required></div>
  <div><input type="password" name="motdepasse" required></div>
  <div>Êtes-vous un homme ou une femme ?</div><div>Homme <input type="radio" name="genre" value="homme" checked>
  Femme <input type="radio" name="genre" value="femme"></div>
  <div>Afficher votre nom sur le site ? <input type="checkbox" name="afficher_nom"></div>
</form>

Note: Si vous ne voulez pas avoir d’erreur 404 avec votre navigateur, enregistrez ce formulaire dans un fichier nommé « formulaire.html ».

Il existe d’autres types d'<input>, mais ne sont pas forcément pris en charge par tous les navigateurs, ce qui est regrettable. A vous de voir si vous souhaitez vous en servir ou non. Dans tous les cas, pour les champs de type « date », « range », « number » ou encore « color », il reste la possibilité d’utiliser du JavaScript pour obtenir le même effet.

<textarea>

Si vous voulez que votre visiteur vous laisse un commentaire par exemple, c’est cette balise qu’il vous faut. Elle permet au visiteur d’entrer du texte sur plusieurs lignes. Cette balise par contre, se referme!

Exemple :

<form action="formulaire.html method="post">
  <textarea name="commentaire">Texte du visiteur</textarea>
</form>

<label>

Le label permet de spécifier un titre au champ voulu. C’est une balise qui doit se refermer, et qui utilise l’identifiant du champ (attribut « id » du champ, et attribut « for » du <label>) pour faire effet (on peut cliquer sur le label, qui aura le même effet que de cliquer sur le champ associé).

Exemple :

<form action="formulaire.html" method="post">
  <label for="nom">Votre nom : </label><input type="text" name="nom" id="nom" placeholder="Entrez votre nom ici" required>
</form>

Conclusion

Voila, vous ne connaissez maintenant un minimum sur les formulaires. Encore une fois, pour traiter les envois de formulaires, on utilisera en règle générale un langage de programmation côté serveur. J’utiliserais moi-même le PHP, je vous conseillerais donc de regarder dans le menu Code <> puis PHP.