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.

Vous souhaitez développer un site web ? Vous êtes au bon endroit.

Comment on fait ?

Pour commencer, tout bon travailleur possède de bons outils, on va commencer par là. Il va nous falloir un bon éditeur de code HTML, qui nous mette le code en couleurs. Il en existe plein, cherchez avec un moteur de recherche aux mots clés « IDE HTML », vous en trouverez pléthore. Personnellement j’utiliserais PSPad disponible sur http://www.pspad.com.

Une fois que vous aurez votre IDE (Integrated Development Environment – Environnement de Développement Intégré, IDE en français), vous pourrez aisément créer un fichier HTML.

Sous PSPad, cliquez sur le menu « Fichier » -> « Nouveau fichier », sélectionnez ensuite « HTML multihighlighter » et cliquez sur « OK ».

A l’heure où j’écris ces lignes, PSPad est encore par défaut en HTML 4, seulement ici on n’écrira que du HTML 5, compatible désormais avec tous les navigateurs, en particulier les mobiles.

Supprimez donc tout ([Ctrl]+[A], puis [Suppr.]), on va tout refaire de zéro.

Définition HTML

HTML signifie « HyperText Markup Language ». En français, ça donne « Langage de balisage hypertexte ». Ce n’est pas un langage de programmation à proprement parler, mais plutôt un langage de mise en forme de documents. Dans sa version 5, il possède de très nombreux atouts et permet d’éviter Adobe Flash, si on le combine proprement avec du CSS 3.

Structure de base d’un document HTML

Un document HTML commence toujours par un « doctype », suivit d’une balise « html », d’une entête de document, et d’un corps.

Dans sa version 5, le doctype a été grandement simplifié, aussi, pour définir que l’on sert de l’HTML 5 et non 4 ou autre, on commence le document ainsi :

<!DOCTYPE html>

Et c’est tout! Juste tel que, on définit de l’HTML 5. Avant cela, il fallait ajouter la version HTML utilisée. l’HTML étant pensé pour évoluer dans le temps, il n’y a plus de versioning.

Ensuite, on doit définir les balises « html » :

<html></html>

Une balise dite « ouvrante », et l’autre balise dite « fermante ».

On notera qu’une balise s’écrira toujours de la même façons :

<nombalise>
<nombaliseouverte></nombaliseouverte>

Entre nos 2 balises « html », on doit y placer l’entête, obligatoire :

<head></head>

Puis un corps de document, juste après l’entête :

<body></body>

Ce qui nous donnera au final, si on formate le code et laissons de la place pour la suite :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

La balise <title>

La balise « title » permet de définir un titre à votre document. Elle se place dans l’entête. Définissons un titre à notre document HTML :

<title>Tutoriel HTML 5</title>

Vous avez remarqué ? On a écrit le titre du document entre les deux balises « title ». Ca sera comme ça pour toutes les balises permettant d’incorporer du texte.

Les attributs

Les balises peuvent comporter des attributs, mais ceux-ci sont aujourd’hui très peu exploité de nos jours, et ont quasiment disparu en HTML 5. Cependant certains restent toujours valide, aussi je vais vous en présenter un pour notre entête.

<meta charset="UTF-8">

Voila, l’attribut « charset » a été défini pour l’entête du document, et on lui a attribué la valeur « UTF-8 ». Dans PSPad, cliquez sur le menu « Format » et sélectionnez « UTF-8 » s’il n’est pas déjà sélectionné. PSPad se chargera de transcoder tout votre document html en utf-8.

En toute logique, la balise meta contenant le jeu de caractères utilisé dans le document devrait être définie avant le titre.

UTF-8 étant un standard à l’heure où j’écris ces lignes, je vous conseille vivement d’écrire toutes vos pages web avec ce jeu de caractères, permettant entre autres, l’utilisation des accents, tout en restant compatible avec le reste du monde (qui a dit « World Wide Web » ?).

Un attribut se place donc dans la balise elle-même, la balise pouvant contenir zéro, un, ou plusieurs attributs, et un attribut peut on non posséder une valeur. S’il possède une valeur, alors on la place entre deux guillemets.

Ca y’est, on a désormais un document valide HTML 5. Il ne reste plus qu’à le remplir un peu. Ecrivons un peu dans le corps du document et voyons ce que ça donne :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Tutoriel HTML 5</title>
  </head>
  <body>
    J'apprends l'HTML 5.
  </body>
</html>

Enregistrez le fichier sous « index.html », puis ouvrez-le avec votre navigateur favori. Pourquoi « index » et pas « tutoriel1 » par exemple ? Pour vous apprendre que quand on appelle une adresse internet en la terminant par un nom de dossier, le serveur web cherche en priorité la page « index.html ». L’entrée d’un site web se fait toujours par l’index, alors va falloir s’y habituer!

Et si on veut de la couleur ?

Eh bien, si on veut mettre un peu de couleur, en HTML 5 il nous faudra obligatoirement passer par une feuille de style, l’attribut « style », ou la balise « style » dans l’entête permettant de définir une feuille de style à l’intérieur même du document html. Seulement l’HTML 5 n’est plus qu’un langage de mise en forme générale du document et descriptif.

Je vous conseille donc d’aller voir du côté du CSS pour en apprendre plus. Je ne traiterais pas des couleurs mais uniquement de la mise en forme et de la partie description.

Quelques balises courantes

<h1> […] <h6>

Les balises <h1>, <h2>, <h3> … jusque <h6> permettent de décrire un titre d’entête à un paragraphe.

<h3>Titre de mon paragraphe</h3>

<p>

La balise <p> permet de décrire un paragraphe. On peut y incorporer une balise <hX> par exemple, ou d’autres balises que je vous montrerais plus tard.

<p>Mon paragraphe</p>

<hr>

Cette balise est une des exceptions html. Elle ne se ferme pas et permet de tracer une ligne horizontale.

<hr>

<div>

La balise <div> permet de créer un bloc brut et de regrouper des éléments en son sein.

<div>
  <h3>Mon titre</h3>
  <p>Mon paragraphe</p>
</div>

<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

Ces balises servent à créer des tableaux. <thead> permet de décrire l’entête d’un tableau, <tbody> son corps, et <tfoot> son pied. <tr> sert à créer une nouvelle ligne, <td> quant à elle, permet de créer une cellule. La balise <th> est similaire à la balise <td>, mais sert aux entêtes des tableaux. Si vous avez des données qui nécessitent une représentation de type tableur, ces balises peuvent vous être utile.

La balise <td> peut être accompagnée de l’attribut « colspan » pour spécifier le nombre de cellules qu’elle regroupe. Il existe aussi l’attribut « rowspan » pour regrouper une cellule sur plusieurs lignes.

<table>
  <thead>
    <tr>
      <th>Fruit</th>
      <th>Provenance</th>
      <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Fraise</th>
      <td>Espagne</td>
      <td>1.50€/kg</td>
    </tr>
    <tr>
      <th>Pomme</th>
      <td>France</td>
      <td>1.25€/kg</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Produits d'Europe uniquement</td>
    </tr>
  </tfoot>
</table>

Certaines de ces balises, telles que <thead> ou <tfoot> sont optionnelles. Cependant, je vous conseille d’utiliser au maximum la bonne sémantique pour être bien compris que ce soit tant au niveau des navigateurs que des moteurs de recherches.

<span>

La balise <span> permet de regrouper des éléments sur une même ligne. Elle peut servir par exemple à coloriser une partie d’un texte ou le formater différemment (italique, gras, souligné, barré …).

<p>Petit paragraphe <span>d'une</span> ligne.</p>

Conclusions

Pour conclure, voila ce qu’il nous faut retenir: HTML est langage descriptif de documents, qui, en version 5, se voit accompagné de feuille(s) de style (CSS) pour la mise en page. Il faut bien différencier HTML et CSS.

J’ai volontairement omis certaines balises, d’une parce que je ne vais pas toutes les mettre, de deux parce que ceci n’est qu’une introduction, et de trois, parce qu’on en verra certaines d’entre elles dans d’autres articles.