Temps de lecture approximative : 21 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.
<form>À 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 :
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. C'est pour votre culture et commencer à comprendre quelques notions, notamment la séparation entre le HTML, la mise en forme et le traitement des données. 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><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. 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" />La ligne de code HTML ci-dessus correspond à la forme la plus basique d'une balise <input />. L'attribut type="" est essentiel. C'est la valeur de cet attribut qui transforme la balise du tout au tout. La valeur par défaut de l'attribut type="" est text. Si vous ne précisez pas de type="" pour une balise <input />, alors celle-ci sera type="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.
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 |
Minute papillon ! Effectivement, on enchaîne les notions sans exemple depuis un moment, depuis trop longtemps peut-être. Je résouds votre contrariété immédiatement. Ci-après un exemple d'utilisation pour chaque valeur de type="" listée dans le tableau.
<!-- Permet à l'utilisateur de renseigner du texte de maximum 16 caractères -->
<label for="moncocktail">Text</label>
<input type="text" id="moncocktail" name="moncocktail" required="required" maxlength="16" />
<!-- Permet à l'utilisateur de renseigner un email -->
<label for="monemail">Email</label>
<input type="email" id="monemail" name="monemail" />
<!-- Permet à l'utilisateur de renseigner un mot de passe de manière masqué -->
<label for="motdepasse">Password</label>
<input type="password" id="motdepasse" name="motdepasse" />
<!-- Permet à l'utilisateur d'inscrire l'adresse un site -->
<label for="monsite">URL</label>
<input type="url" id="monsite" name="monsite" />
<!-- Permet à l'utilisateur de reseigner plus facilement un numéro de téléphone -->
<label for="montel">Tel</label>
<input type="tel" id="montel" name="montel" />
<!-- 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/>
<!-- Indique un nombre entier ou à virgule, minimum 1000 € et maximum 25 000 €, intervalle de 250 € -->
<label for="prixvehicule">Number</label>
<input type="number" id="prixvehicule" name="prixvehicule" min="1000" max="25000" step="250" />
<!-- Précise une date -->
<label for="anniv">Date</label>
<input type="date" id="anniv" name="anniv" />
<!-- Indique une couleur -->
<label for="macouleur">Color</label>
<input type="color" id="macouleur" name="macouleur" />
<!-- Permet à l'utilisateur d'envoyer seulement une image -->
<label for="monimage">File</label>
<input type="file" id="monemail" name="monimage" accept="image/*" />
<!-- Précise une configuration précise au seveur, invisible à l'utilisateur -->
<label for="configuration">Hidden</label>
<input type="hidden" id="configuration" name="configuration" value="42" />
<!-- Bouton permettant la soumission du formulaire. Cependant, il est désactivé. -->
<label for="validation">Submit</label>
<input type="submit" id="validation" name="validation" value="Envoyer" disabled="disabled" />
Cette fois-ci, il n'y aura pas d'impression écran d'un navigateur web pour apprécier le rendu, mais un aperçu avec les styles du site.
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.
<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 <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.
<textarea>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" name="montexte">Je rédige mon texte ici librement</textarea><select> et <option>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>
<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><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> 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.
See the Pen CodePen Home HTML - Chap.9 - <fieldset> & <legend> by AAymericcccc (@aaymeric) on CodePen.
Notre cours se termine sur ce chapitre consacré aux formulaires. Vous êtes désormais en mesure de vous frotter au quiz et à la totalité des exercices relatifs au cours sur le HTML. Vous trouverez également une page memento 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.