Les formulaires HTML

Dans l'Égypte ancienne, les scribes enregistraient des données sur des papyrus - des noms, des nombres, des informations sur les livraisons de grain. Les formulaires HTML sont l'équivalent moderne du papyrus du scribe ! Ils sont un outil clé pour collecter des informations auprès des utilisateurs d'un site web. Tu peux les voir comme une interface interactive par laquelle les utilisateurs saisissent des données, qui peuvent ensuite être traitées, par exemple, par un serveur et enregistrées dans une base de données. Les formulaires sont essentiels pour de nombreuses activités, comme se connecter à un service, créer un nouveau compte ou envoyer des messages.

Ci-dessous, nous présentons les éléments de base utilisés lors de la création de formulaires :

<form> : C'est la balise qui enveloppe l'ensemble du formulaire. Tous les éléments du formulaire sont généralement contenus dans cette balise.

<input> : C'est l'élément de formulaire le plus polyvalent. Il permet aux utilisateurs de saisir différents types de données - du texte, à la sélection d'options, jusqu'à l'envoi du formulaire. Le type de données que l'utilisateur peut saisir dépend de l'attribut type de cet élément.

1<input type="text" name="username" placeholder="Saisis ton nom d'utilisateur">
2    

<textarea> : Cet élément permet de saisir de plus grandes quantités de texte. C'est l'endroit idéal pour des commentaires ou des avis plus longs.

1<textarea id="comment" name="comment" rows="4" cols="50" placeholder="Saisis ton commentaire ici..." required></textarea>

<select> et <option> : La balise <select> permet de créer une liste déroulante dans laquelle l'utilisateur peut choisir une ou plusieurs options. Ces options sont définies par les éléments <option> placés à l'intérieur de <select>.

1<select name="choose">
2<option value="option1">Option 1</option>
3<option value="option2">Option 2</option>
4</select>

<button> : Permet de créer des boutons aux fonctions variées - ils peuvent servir à envoyer un formulaire, réinitialiser les données saisies, ou déclencher une fonction JavaScript spécifique.

1<button type="submit">Clique-moi !</button>

<label> : C'est un élément qui permet d'ajouter une description à d'autres éléments du formulaire, comme <input>. Il est extrêmement important pour que l'utilisateur comprenne quelles données doivent être saisies dans un champ donné.

1<label for="email">E-mail :</label>
2<input type="email" id="email" name="email_adres">

Lors de la création d'un formulaire, divers attributs sont souvent utilisés pour identifier, étiqueter et pré-remplir les valeurs par défaut des champs individuels du formulaire. Des exemples d'attributs incluent name, id, value, et placeholder.

En utilisant les éléments et attributs ci-dessus, nous pouvons créer des formulaires de complexité variée qui répondront adéquatement aux besoins de nos utilisateurs.

Créer un formulaire simple

Un formulaire de base commence par la balise <form>, qui spécifie où les données doivent être envoyées, à l'aide des attributs action et method.

1<form action="/submit" method="post">
2  <!-- Champs du formulaire -->
3</form>

Champs de saisie de texte

Les champs de saisie de texte servent à collecter de petites quantités d'informations textuelles auprès de l'utilisateur. Ils sont créés à l'aide de la balise <input>.

1<label for="username">Nom d'utilisateur :</label>
2<input type="text" id="username" name="username">

Mots de passe

Pour saisir des mots de passe, on utilise le type password, qui fait que les caractères saisis sont masqués.

1<label for="password">Mot de passe :</label>
2<input type="password" id="password" name="password">

Liste déroulante

La liste déroulante <select> permet de choisir l'une des options <option> préparées.

1<label for="monument">Choisis un monument :</label>
2<select id="monument" name="monument">
3  <option value="pyramids">Pyramides de Gizeh</option>
4  <option value="sphinx">Grand Sphinx</option>
5</select>

Gestion de l'envoi de fichiers

Les formulaires peuvent aussi gérer l'envoi de fichiers, permettant aux utilisateurs d'envoyer des documents, des photos, etc.

1<label for="file">Choisis un fichier :</label>
2<input type="file" id="file" name="file">

Bouton d'envoi

Pour permettre à l'utilisateur d'envoyer le formulaire, tu dois ajouter un bouton d'envoi.

1<input type="submit" value="Envoyer">

Voici un exemple de formulaire HTML qui contient divers éléments de formulaire :

1<form>
2  <label for="name">Nom :</label>
3  <input type="text" id="name" name="name">
4
5  <label for="email">E-mail :</label>
6  <input type="email" id="email" name="email">
7
8  <label for="password">Mot de passe :</label>
9  <input type="password" id="password" name="password">
10
11  <label for="age">Âge :</label>
12  <input type="number" id="age" name="age" min="0" max="120">
13
14  <label for="gender">Genre :</label>
15  <select id="gender" name="gender">
16    <option value="">Choisir</option>
17    <option value="female">Femme</option>
18    <option value="male">Homme</option>
19    <option value="other">Autre</option>
20  </select>
21
22  <label for="newsletter">S'abonner à la newsletter :</label>
23  <input type="checkbox" id="newsletter" name="newsletter">
24
25  <label for="message">Message :</label>
26  <textarea id="message" name="message"></textarea>
27
28  <button type="submit">Envoyer</button>
29  <button type="reset">Effacer</button>
30</form>

1<form>
2<label for="name">Prénom :</label>
3<input type="text" id="name" name="name" placeholder="Saisis ton prénom" required>
4
5<label for="email">E-mail :</label>
6<input type="email" id="email" name="email" placeholder="Saisis ton adresse e-mail" required>
7
8<label for="password">Mot de passe :</label>
9<input type="password" id="password" name="password" placeholder="Saisis ton mot de passe" required>
10
11<label for="age">Âge :</label>
12<input type="number" id="age" name="age" min="0" max="120">
13
14<label for="gender">Genre :</label>
15<select id="gender" name="gender">
16<option value="">Choisir</option>
17<option value="female">Femme</option>
18<option value="male">Homme</option>
19<option value="other">Autre</option>
20</select>
21
22<label for="newsletter">S'abonner à la newsletter :</label>
23<input type="checkbox" id="newsletter" name="newsletter">
24
25<label for="message">Message :</label>
26<textarea id="message" name="message" placeholder="Saisis ton message"></textarea>
27
28<button type="submit">Envoyer</button>
29<button type="reset">Effacer</button>
30</form>

Cet exemple de formulaire comprend divers éléments de formulaire, tels que <input>, <select>, <textarea> et <button>. L'utilisateur peut saisir son nom, son adresse e-mail, son mot de passe, son âge, son genre, décider de s'abonner ou non à la newsletter, et taper un message. Après avoir rempli le formulaire, l'utilisateur peut l'envoyer en cliquant sur le bouton « Envoyer » ou effacer le formulaire en cliquant sur le bouton « Effacer ».

Applications pratiques des formulaires

Les formulaires HTML sont utilisés partout sur Internet - des simples formulaires de contact, en passant par l'inscription et la connexion, jusqu'aux systèmes de paiement avancés. Maîtriser la création de formulaires est une compétence clé pour tout développeur web.

Exercice : Créer des formulaires HTML

Dans cet exercice, tu vas apprendre à créer des formulaires HTML, qui sont un outil clé pour collecter des informations auprès des utilisateurs d'un site web. Ta tâche sera de créer une page web contenant un formulaire d'inscription.

Étape 1 : Crée la structure de base d'un document HTML

D'abord, crée un nouveau fichier HTML et ajoute la structure de base d'un document HTML.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Formulaire d'inscription</title>
7</head>
8<body>
9    <main>
10        <!-- Place ton formulaire ici -->
11    </main>
12</body>
13</html>

Étape 2 : Ajoute un formulaire HTML

Maintenant, ajoute un formulaire à l'intérieur de l'élément <main>. Commence par définir le formulaire et les champs de texte de base.

1<form action="/submit" method="post">
2    <label for="name">Nom :</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">E-mail :</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Mot de passe :</label>
9    <input type="password" id="password" name="password">
10</form>

Étape 3 : Ajoute des champs de formulaire supplémentaires

Enrichis le formulaire avec des champs supplémentaires, comme un nombre, une sélection de genre, une case à cocher d'abonnement à la newsletter, et une zone de texte pour les messages.

1<form action="/submit" method="post">
2    <label for="name">Nom :</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">E-mail :</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Mot de passe :</label>
9    <input type="password" id="password" name="password">
10
11    <label for="age">Âge :</label>
12    <input type="number" id="age" name="age" min="0" max="120">
13
14    <label for="gender">Genre :</label>
15    <select id="gender" name="gender">
16        <option value="">Choisir</option>
17        <option value="female">Femme</option>
18        <option value="male">Homme</option>
19        <option value="other">Autre</option>
20    </select>
21
22    <label for="newsletter">S'abonner à la newsletter :</label>
23    <input type="checkbox" id="newsletter" name="newsletter">
24
25    <label for="message">Message :</label>
26    <textarea id="message" name="message"></textarea>
27</form>

Étape 4 : Ajoute des boutons au formulaire

Ajoute des boutons pour envoyer et réinitialiser le formulaire.

1<form action="/submit" method="post">
2    <label for="name">Nom :</label>
3    <input type="text" id="name" name="name">
4
5    <label for="email">E-mail :</label>
6    <input type="email" id="email" name="email">
7
8    <label for="password">Mot de passe :</label>
9    <input type="password" id="password" name="password">
10
11    <label for="age">Âge :</label>
12    <input type="number" id="age" name="age" min="0" max="120">
13
14    <label for="gender">Genre :</label>
15    <select id="gender" name="gender">
16        <option value="">Choisir</option>
17        <option value="female">Femme</option>
18        <option value="male">Homme</option>
19        <option value="other">Autre</option>
20    </select>
21
22    <label for="newsletter">S'abonner à la newsletter :</label>
23    <input type="checkbox" id="newsletter" name="newsletter">
24
25    <label for="message">Message :</label>
26    <textarea id="message" name="message"></textarea>
27
28    <button type="submit">Envoyer</button>
29    <button type="reset">Effacer</button>
30</form>

Résultat

Après avoir terminé toutes les étapes, ton fichier HTML devrait ressembler à ceci :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Formulaire d'inscription</title>
7</head>
8<body>
9    <main>
10        <form action="/submit" method="post">
11            <label for="name">Nom :</label>
12            <input type="text" id="name" name="name">
13
14            <label for="email">E-mail :</label>
15            <input type="email" id="email" name="email">
16
17            <label for="password">Mot de passe :</label>
18            <input type="password" id="password" name="password">
19
20            <label for="age">Âge :</label>
21            <input type="number" id="age" name="age" min="0" max="120">
22
23            <label for="gender">Genre :</label>
24            <select id="gender" name="gender">
25                <option value="">Choisir</option>
26                <option value="female">Femme</option>
27                <option value="male">Homme</option>
28                <option value="other">Autre</option>
29            </select>
30
31            <label for="newsletter">S'abonner à la newsletter :</label>
32            <input type="checkbox" id="newsletter" name="newsletter">
33
34            <label for="message">Message :</label>
35            <textarea id="message" name="message"></textarea>
36
37            <button type="submit">Envoyer</button>
38            <button type="reset">Effacer</button>
39        </form>
40    </main>
41</body>
42</html>

Maintenant, tu as une page web complète avec un formulaire d'inscription. Tu peux continuer à expérimenter en ajoutant plus de champs, en changeant les attributs, ou en stylisant les éléments avec le CSS pour améliorer l'apparence du formulaire.