Temps de lecture : 25 Minutes
Le dernier chapitre de ce cours portera uniquement sur une notion précise mais ô combien importante et dense : les formulaires. Ces derniers 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. 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'un autre langage : le PHP (Hypertext Preprocessor). On jette l'ancre pour ce dernier chapitre qui sera dense.
À l'instar de <table< pour les tableaux, la balise <form< englobe tout un formulaire. Il y a donc une balise ouvrante et une fermante. Nous détaillerons au cours du chapitre l'ensemble des balises que peut accuellir cette dernière. 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 :
<form action="/ma-page-traitement" method="POST">...<form>
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. Le polymorphisme de cette balise nous incombe de nous attarder longuement sur elle. Nous allons commencer par la forme la plus basique de la balise pour ensuite détailler les nombreuses options.
<input type="text" />
Valeur de l'attribut type="" |
Description | Attributs pertinents |
|---|---|---|
text |
Champ textuel le plus simple. Valeur par défaut de la balise <input /> |
maxlength, placeholder, required, readonly |
email |
Champ textuel permettant de saisir une adresse email | placeholder, required, readonly |
password |
Champ textuel permettant de saisir un mot de passe de manière masquée | required, readonly |
url |
Champ textuel permettant de saisir l'adresse URL absolue d'un site (exemple : https://www.google.fr) | placeholder, required, readonly |
tel |
Champ textuel permettant de saisir un numéro de téléphone | maxlength, placeholder, required, readonly |
checkbox |
Case à cocher. Aucune ou plusieurs cases peuvent être cochées. | value, checked, required |
radio |
Bouton radio. Seul un bouton peut être sélectionné. | value, checked, required |
number |
Champ permettant de saisir un nombre à virgule ou non | max, min, step, required |
date |
Champ permettant de sélectionner une date | max, min, required, readonly |
color |
Champ textuel permettant de saisir un mot de passe de manière masquée | required |
file |
Champ permettant à un utilisateur de sélectionner un fichier pour qu'il soit envoyé au serveur | accept, required |
hidden |
Champ textuel non visible mais dont la valeur est bel et bien envoyée au serveur | |
button |
Bouton par défaut sans sens et fonctionnalité particulière | |
submit |
Bouton qui permet de soumettre le formulaire |
La liste est non-exhaustive mais permet déjà de faire beaucoup. On remarque que certaines valeurs pour l'attribut type="" déclenchent 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.
Attributs pertinents de <input /> |
Description |
|---|---|
name="" |
Détermine le nom de la balise quand elle sera envoyée au serveur. Cet attribut est différent et ne remplace pas id="". Il peut être utilisé sur tous les éléments d'un formulaire |
value="" |
Initialise la valeur du champ. Cet attribut est optionnel sauf pour type="radio" et type="checkbox" |
required="" |
Permet de préciser que la valeur du champ est requise pour que le formulaire puisse être envoyé au serveur |
placeholder="" |
Indication destinée à l'utilisateur sur la valeur attendue du champ |
readonly="" et disabled="" |
Désactive la modification du champ à l'utilisateur |
accept="" |
Permet de préciser les types de fichiers acceptés par le serveur. Cet attribut est utilisé uniquement avec type="file" |
maxlength="" |
Détermine le nombre maximal de caractères |
checked="" |
Permet de contrôler quelle balise sera cochée par défaut. Cet attribut est utilisé uniquement avec type="radio" et type="checkbox" |
max="" |
Détermine la valeur maximale (numérique ou temporelle). Celle-ci ne peut être inférieure à la valeur de l'attribut min="" |
min="" |
Détermine la valeur minimale (numérique ou temporelle). Celle-ci ne peut être supérieure à la valeur de l'attribut max="" |
step="" |
Détermine l'incrément pour passer d'une valeur à l'autre |
Ci-après un exemple d'utilisation pour chaque valeur de type="" listée dans le tableau.
<!-- Champ text -->
<input type="text" maxlength="50" placeholder="Entrez votre texte ici" required readonly />
<!-- Champ email -->
<input type="email" placeholder="email@example.com" required readonly />
<!-- Champ password -->
<input type="password" placeholder="Mot de passe" required readonly />
<!-- Champ url -->
<input type="url" placeholder="https://example.com" required readonly />
<!-- Champ tel -->
<input type="tel" maxlength="15" placeholder="+123456789" required readonly />
<!-- Case à cocher -->
<input type="checkbox" value="Option1" checked required />
Option 1
<!-- Bouton radio -->
<input type="radio" name="choix" value="OptionA" checked required />
Option A
<!-- Champ number -->
<input type="number" min="1" max="100" step="1" required />
<!-- Champ date -->
<input type="date" required/>
<!-- Champ color -->
<input type="color" required />
<!-- Champ fichier -->
<input type="file" accept=".jpg, .png" required />
<!-- Champ hidden -->
<input type="hidden" name="identifiant" value="12345" />
<!-- Bouton simple -->
<input type="button" value="Cliquer" />
<!-- Bouton de soumission -->
<input type="submit" value="Envoyer" />
Comme nous venons de le voir, la balise <input /> est puissante et offre de nombreuses possibilités. Bien que celle-ci permette une myriade d'options, elle ne peut pas tout réaliser. Pour couvrir d'autres cas, d'autres balises existent. Nous nous plongeons dedans sans plus tarder.
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 <label> 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" />
</div>
Attention à ne pas confondre l'attribut name="" et id="". Ce sont deux attributs différents mais qui peuvent avoir les mêmes valeurs.
La balise <input /> permet de répondre à plusieurs besoins, dont celui d'enregistrer un texte simple avec type="text". Seulement, celle-ci ne permet pas d'inscrire un texte plus important, avec notamment des sauts de ligne. La balise <textarea> répond à ce besoin. Elle est dédiée aux champs textuels multilignes. 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.
<textarea rows="3" cols="50" name="montexte">Je rédige mon texte ici librement</textarea>
La balise <select> permet de constuire 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>
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>
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> pour organiser les différents champs. Elle est facultative et on peut en retrouver plusieurs par formulaire. Cette balise est souvent accompagnée de la balise <legend>. Celle-ci permet d'ajouter un libellé au <fieldset>. Il n'y a pas d'attributs pertinents notables pour un niveau de débutant pour cette balise. Focus sur son utilisation.
Notre cours se termine sur ce chapitre consacré aux formulaires. Vous êtes désormais en mesure de vous frotter au Quiz de ce chapitre et à la totalité des exercices relatifs au cours sur le HTML. Vous trouverez également une page mémento qui regroupe et récapitule tout un tas de balises que nous avons découvertes pour les retrouver plus rapidement. Vous êtes désormais capable de créer des pages simples en HTML5.
N'oubliez pas qu'en tant que développeur, votre meilleur ami est Google (ou votre moteur de recherche préféré). Le web regorge de ressources sur les technologies web : des cours, des tutoriels, des exemples, des vidéos, des forums, etc. Vous trouverez presque toujours la réponse à votre question.
Naturellement, le prochain cours que je vous conseille est celui sur le CSS. En effet, pour le moment notre page web est peut-être fonctionnelle mais elle n'est pas encore mise en forme.
Ce cours sur le HTML en est un parmi tant d'autres. Le web regorge de ressources sur le développement web. Celui-ci a été rédigé par mes soins et est orienté pour les débutants. Il est non-exhaustif. Si vous repérez une erreur ou un oubli, vous pouvez bien évidemment me contacter. me contacter
Ce cours a été rédigé en mars 2025.