Dernière mise à jour le 28 novembre 2022
Jusqu'ici nous avons uniquement créé des pages Web statiques, ne contenant que de l'information à l'usage de l'internaute. Par exemple, une "chronique cryptozoologique".
Naviguer parmi ces pages Web c'est un peu comme lire un livre, un magazine ou un journal, sauf qu'on le fait sur le Web.
Les sites Web les plus intéressants sont les sites transactionnels, c'est-à-dire ceux qui permettent un échange entre l'internaute et le site.
Dans ces cas, le site Web peut carrément être considéré comme un programme, une application Web.
Quelques exemples d'applications Web :
Nous n'aborderons pas directement le développement d'applications Web dans ce document. Ce type de programme sera le sujet des cours 420-KB9 en sessions 3 et 420-KBD en session 4.
Puisque ces applications sont de véritables programmes, il est généralement nécessaires de leur fournir des données pour qu'elles puissent accomplir leur tâche.
C'est là qu'entrent en jeu les formulaires HTML, car ils constituent le principal moyen de fournir les données à ces programmes côté serveur.
Par exemple, après avoir choisi des articles sur un site de commerce électronique à l'aide de formulaires, il vous faudra entrer votre adresse et votre moyen de paiement, encore à l'aide de formulaires.
Même si nous ne verrons pas tout de suite comment développer des applications Web, nous allons dès maintenant apprendre à créer les formulaires HTML nécessaires pour leur envoyer les données dont elles ont besoin.
Un formulaire HTML est créé à l'aide de l'élément form :
<form> ... </form>
L'attribut action est l'URL du programme côté serveur qui recevra les données du formulaire.
Dans l'exemple suivant, c'est le programme login.php du site prog101.com (un script écrit dans le langage PHP) qui recevra les données du formulaire.
<form action="https://prog101.com/login.php"> ... </form>
L'attribut method est le type de requête HTTP qui sera généré par le formulaire.
L'etude du protocole HTTP n'est pas prévue ici. Sachez seulement que les méthodes les plus répandues sont GET et POST, GET étant la valeur par défaut en l'absence d'un attribut method.
Exemple :
<form action="https://prog101.com/login.php" method="POST"> ... </form>
L'image suivante montre le formulaire de connexion au site prog101.com :
Il est composé...
Ce formulaire utilise abondamment les styles CSS. Voici une version épurée sans la mise en forme :
Et voilà le code HTML :
<form action="https://prog101.com/login.php" method="POST">
<input type="text" name="code"
placeholder="Adresse courriel ou code utilisateur" required><br>
<input type="password" name="mdp" placeholder="Mot de passe" required><br>
<input type="submit">
</form>
À chaque donnée entrée dans le formulaire ou à chaque action (ex : envoyer les données) correspond un élément HTML.
Il s'agit généralement d'un élément input.
Et puisqu'il existe une variété de données pouvant être entrées dans les champs de formulaires, il existe aussi une variété de champs input.
L'attribut type d'un champ input indique le type de la donnée attendue (ex : texte, nombre, mot de passe, date, adresse courriel, etc.).
Examinons d'abord le champ d'entrée le plus utilisé, soit celui dont l'attribut type a la valeur text :
<input type="text" id="..." name="..." required minlength="..." maxlength="..."
size="..." placeholder="..." value="...">
Le tableau suivant indique le rôle des autres attributs lorsqu'on a input type="text" :
| Attribut | Utilisation |
|---|---|
| id | Idententifie l'élément de manière unique. Utilisé par l'élément label et comme sélecteur CSS. |
| name | Permet de donner un nom à la donnée transmise (essentiel pour la récupérer côté serveur). |
| required | Rend le champ obligatoire (le formulaire ne pourra être soumis si le champ n'est pas rempli). |
| minlength | Nombre minimum de caractères. |
| maxlength | Nombre maximum de caractères. |
| size | Longueur de la boîte de texte (sans rapport avec les deux attributs précédents). |
| placeholder | Description du champ ou exemple de donnée saisie. N'est pas la même chose que value. |
| value | Valeur courante (pré-remplie). N'est pas la même chose que placeholder. |
Exemple :
<input type="text" id="pseudo" name="pseudo" required minlength="4" maxlength="12"
size="16" placeholder="Choisissez un pseudonyme">
Sortie :
Le champ texte que nous venons de créer est intéressant, mais il serait encore mieux si on ajoutait un libellé qui renseigne l’usager sur ce qui doit être entré dans ce champ.
Exemple :
<label for="pseudo">Choisissez un pseudonyme</label>
<input type="text" id="pseudo" name="pseudo" required minlength="4" maxlength="12"
size="6" placeholder="bob">
Sortie :
On peut évidemment, comme dans le formulaire vu plus haut, se passer de l'élément label et écrire nos libellés directement en texte, mais l'utilisation de cet élément a deux avantages lorsqu'il est bien utilisé :
Attention! La valeur de l’attribut for doit absolument correspondre à la valeur que l’on donne à l’attribut id (pas à name)!
Les éléments input de type password permettent à l’utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran.
Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole particulier afin que le texte saisi ne puisse être lu. Ce symbole est généralement un astérisque (*) et parfois un point (•).
Code HTML :
<label for="passe">Choisissez votre mot de passe :</label>
<input type="password" id="passe" name="motdepasse" placeholder="8 caractères minimum"
minlength="8" required>
Sortie dans le navigateur :
Les éléments input de type email permettent à l’utilisateur de saisir une adresse courriel.
À partir du moment où le champ contient un caractère, une validation sera effectuée avant l'envoi des données.
Le contenu du champ devra être constitué d'au moins un caractère, suivi du symbole @ et d'un autre caractère (validation sommaire).
Les éléments input de type number permettent à l'utilisateur de saisir des nombres dans un formulaires. Ce contrôle est très pratique car il inclut des mécanismes de validation natifs pour rejeter les valeurs non-numériques.
Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter / décrémenter la valeur grâce à la souris (ou encore avec le doigt).
Les attributs les plus utilisés sont min et max qui permette de fixer l'étendue des valeurs acceptables.
Code HTML :
<p> Entrez un nombre de 1 à 10 : <input type="number" min="1" max="10"> </p>
Sortie dans le navigateur :
Entrez un nombre de 1 à 10 :
Entrez une valeur numérique et utilisez les petites flèches à droite de la boîte pour la faire varier.
Les éléments input de type checkbox sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elle permettent de sélectionner une ou plusieurs valeurs dans un formulaire.
L’attribut name permet de distinguer ou de grouper les boîtes ensemble (nous verrons l'utilité plus tard).
Notez que, contrairement aux boutons radio et même s’ils sont visuellement groupés, il est possible de cocher une ou plusieurs valeurs.
Code HTML :
<p>Choisissez un ou plusieurs jours de la fin de semaine :</p> <div> <input type="checkbox" id=“Samedi" name="samedi" checked> <label for=“Samedi">Samedi</label> </div> <div> <input type="checkbox" id=“Dimanche" name="dimanche"> <label for=“Dimanche">Dimanche</label> </div>
Sortie dans le navigateur :
Choisissez un ou plusieurs jours de la fin de semaine :
Les éléments input de type radio sont utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une seule valeur.
Le nom de ce composant tire son origine des anciens appareils radio qu'on trouvait autrefois dans les automobiles. Ces appareils étaient pourvus de boutons mécaniques et d'un système de ressorts pour qu'un seul de ces boutons (ou aucun) puissent être sélectionné à la fois.
Les "boutons radio" sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.
Exemple :
<legend>Menu principal</legend> <input type="radio" id="soupe" name="mets" value="soupe" checked> <label for="soupe">Soupe</label><br> <input type="radio" id="sandwich" name="mets" value="sandwich"> <label for="sandwich">Sandwich</label><br> <input type="radio" id="pizza" name="mets" value="pizza"> <label for="pizza">Pizza</label>
Ce qui donne :
Remarques importantes :
Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut name. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupe (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).
Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (attribut name) unique.
C'est ici que l’attribut for pour le label prend toute son importance, car sur certains écran, il peut être difficile de cliquer exactement sur le cercle qui représente notre choix. Avec l’attribut for du label, l’utilisateur peut cliquer sur le titre et le bouton deviendra actif. Notons que la valeur de l’attribut for doit correspondre à la valeur que l’on met dans l’attribut id (et non dans l'attribut name) de l’élément input.
Les éléments input dont l'attribut type vaut range permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante.
Ces éléments sont généralement représentés par un curseur qui peut se déplacer de gauche à droite. Ce genre de contrôle n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.
Exemple :
<input type="range" id="volume" name="volume" min="0" max="100"> <br> <label for="volume">Réglage du volume</label>
Ce qui donne (essayez-le!) :
L'élément input dont l'attribut type vaut date permet la saisie des dates à l'aide d'un champ texte dont la valeur est validée grâce à un sélecteur de date (genre de calendrier interactif). Ce sélecteur offre l'année, le mois et le jour.
Exemple :
<form action="..."> <label for="reservation">Vous voulez réserver pour le</label> <input type="date" id="reservation" name="date_reserv"> <br> <input type="submit"> </form>
Ce qui donne :
Comme pour les autres champs d'entrée, on peut offrir à l'utilisateur une date par défaut avec l'attribut value. Il est même possible de fixer un intervalle de validité avec les attributs min et max :
<input type="date" id="reservation" name="date_reserv" value="2022-04-20"
min="2022-04-15" max="2022-06-15">
Ce qui donne :
Il existe plusieurs façons de créer un bouton de formulaire, mais la façon classique est d'utiliser un élément input de type submit.
Exemple :
<input type="submit">
Sortie :
Le message écrit sur le bouton peut varier d'un navigateur à l'autre, mais ressemble toujours à "Envoyer".
On peut choisir le texte écrit sur le bouton à l'aide de l'attribut value.
Exemple :
<input type="submit" value="Envoyer les données">
Sortie :
Il est possible de mettre à la disposition de l'utilisateur un bouton pour effacer d'un seul coup toutes les données entrées dans le formulaire.
Il s'agit tout simplement d'un élément input de type reset.
Exemple :
<input type="reset">
Sortie :
Le message écrit sur le bouton peut varier d'un navigateur à l'autre, mais ressemble toujours à "Effacer".
On peut choisir le texte écrit sur le bouton à l'aide de l'attribut value.
Exemple :
<input type="reset" value="Tout recommencer">
Sortie :
La liste déroulante (aussi appelée boîte de sélection) est créée avec l'élément select complétée d'un ou plusieurs éléments enfants option qui définissant les valeurs possibles.
Exemple :
<select name="fruit"> <option>Banane</option> <option selected>Citron</option> <!-- option sélectionnée par défaut --> <option>Orange</option> <option>Pamplemousse</option> </select>
Sortie :
Dans l'exemple précédent, la valeur sélectionnée dans la liste sera transmise au programme côté serveur dans la variable fruit. Cette valeur correspond au texte entre les balises <option> et </option>.
Si on veut transmettre une valeur différente de celle affichée, on doit alors utiliser l'attribut value.
Par exemple, dans le formulaire suivant, si l'utilisateur sélectionne "Frodon", la valeur transmise dans la variable hobbit sera "Frodon Sacquet".
<select name="hobbit"> <option value="Frodon Sacquet">Frodon</option> <option value="Sam Gamegie">Sam</option> <option value="Meriadoc Brandebouc">Merry</option> <option value="Peregin Touque">Pippin</option> </select>
Sortie :
Même si cela n'est pas très fréquent, les éléments option peuvent être imbriqués dans des éléments optGroup pour créer des groupes de valeurs associées.
Exemple :
<select>
<optGroup label="Fruits">
<option>Banane</option>
<option>Citron</option>
<option>Orange</option>
<option>Pamplemousse</option>
</optGroup>
<optGroup label="Légumes">
<option>Aubergin</option>
<option>Carotte</option>
<option>Pomme de terre</option>
<option>Navet</option>
</optGroup>
</select>
Sortie :
Puisque nous ne programmerons pas côté serveur dans ce cours, il nous faut trouver un moyen de vérifier si nos formulaires sont bien construits et permettent au navigateur d'envoyer les données correctement.
J'ai dans ce but écrit un script PHP pour afficher les données envoyées via un formulaire. L'URL de ce programme est https://prog101.com/outils/testform/.
Pour l'utiliser, vous n'avez qu'à utiliser cet URL comme valeur de l'attribut action de votre formulaire.
Exemple :
<form action="https://prog101.com/outils/testform/" method="POST">
<label for="pseudo">Choisissez un pseudonyme</label><br>
<input type="text" id="pseudo" name="pseudo" required minlength="4" maxlength="12"
size="6" placeholder="Ex : bob">
<input type="submit">
</form>
Sortie (essayez pour voir) :
Enfin, pour donner du style à un formulaire, rien de mieux que les éléments fieldset et legend!
Exemple :
<fieldset style="width: fit-content;">
<legend>Veuillez remplir S.V.P.</legend>
<form action="https://prog101.com/outils/testform/" method="POST">
<label for="pseudo">Choisissez un pseudonyme</label><br>
<input type="text" id="pseudo" name="pseudo" required minlength="4" maxlength="12"
size="6" placeholder="Ex : bob">
<input type="submit">
</form>
</fieldset>
Sortie :
On peut rendre plus visible l'état valide ou invalide d'un champ se saisie en construisant des sélecteurs qui utilisent les pseudo-classes :valid et :invalid.
Dans l'exemple suivant, on utilise cette astuce pour indiquer à l'utilisateur qu'il n'a pas entré assez de caractères. Dès qu'il commence à entrer des caractères, le champ de saisie prend un aspect différent tant qu'il n'a pas atteint le minimum requis.
Remarquez qu'il ne peut entrer trop de caractères puisqu'il est limité par la valeur de l'attribit maxlength.
Code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple</title>
<style>
#mot:invalid {
background-color: #fee;
color: #f00;
}
</style>
</head>
<body>
<form action="https://prog101.com/outils/testform/" method="POST">
<label for="mot">Entrez un mot de 5 à 10 lettres</label>
<input id="mot" name="mot" type="text" minlength="5" maxlength="10">
<input type="submit">
</form>
</body>
</html>
Ajoutez l'attribut required et voyez comment le champ devient invalide dès le départ étant donné qu'il ne contient rien.