PhpBB Lab Académie

Construire un premier formulaire HTML dans la page Contact, associer correctement chaque champ à un label avec for et id, comprendre le rôle de name, utiliser un champ de texte, une zone de message et un bouton d’envoi, puis vérifier le formulaire au clavier et avec un lecteur d’écran.

Nous allons enfin rendre la page Contact interactive

Depuis le début du cours, vous construisez le même petit site.

Il contient maintenant :

index.html
apropos.html
contact.html

Vous avez aussi appris à structurer chaque page avec :

header
nav
main
footer

La page

contact.html

contient encore essentiellement du texte.

Nous allons maintenant lui donner un vrai rôle : permettre à l’utilisateur de saisir son nom et un message.

Pour cela, nous allons créer notre premier formulaire HTML.

Cette leçon est importante parce qu’un formulaire peut sembler simple visuellement tout en étant difficile à utiliser si les champs ne sont pas correctement identifiés.

Nous allons donc construire dès le début un formulaire utilisable au clavier et compréhensible avec un lecteur d’écran.

1. Ce que HTML peut faire, et ce qu’il ne fera pas encore

HTML permet de créer :

- le formulaire ;
- les champs ;
- leurs libellés ;
- les boutons ;
- la structure qui relie ces éléments.

Mais HTML seul ne va pas enregistrer votre message dans une base de données ni envoyer automatiquement un e-mail.

Ce traitement sera le rôle d’un programme côté serveur, que vous apprendrez plus tard avec PHP.

Pour cette leçon, notre objectif est donc :

construire correctement le formulaire

et non :

traiter réellement les données

2. Travailler dans contact.html

Ouvrez :

contact.html

Conservez la structure générale du site déjà créée.

Nous allons travailler uniquement dans :

<main>
    ...
</main>

Votre contenu principal peut commencer ainsi :

<main>
    <h1>Contact</h1>
    <p>Utilisez le formulaire ci-dessous pour rédiger un message.</p>
</main>

Nous allons maintenant ajouter le formulaire sous ce paragraphe.

3. L’élément form

Le formulaire est contenu dans l’élément :

form

Nous pouvons commencer avec :

<form>
</form>

Tout ce qui appartient au formulaire sera placé entre ces deux balises.

Par exemple :

<form>
    ... les champs ...
    ... le bouton ...
</form>

Pour le moment, nous n’ajoutons ni

action

ni

method

.

Ces notions concernent la manière dont les données seront envoyées et traitées. Nous les étudierons lorsque nous aurons besoin de faire fonctionner réellement un formulaire avec PHP.

4. Un champ doit avoir un libellé

Nous voulons d’abord demander le nom de l’utilisateur.

Le texte visible qui explique ce que l’on doit saisir est appelé un libellé.

En HTML, nous utilisons :

label

Nous pourrions écrire :

<label>Votre nom</label>

Mais ce label n’est pas encore relié à un champ précis.

Nous allons créer cette relation correctement.

5. Créer le premier champ avec input

Pour saisir une courte ligne de texte, nous pouvons utiliser :

input

Nous préciserons aujourd’hui :

type="text"

Exemple :

<input type="text">

L’élément

input

est un élément vide.

Il n’utilise donc pas :

</input>

Vous avez déjà rencontré ce principe avec

meta

et

img

.

6. Relier label et input avec for et id

Voici la structure que nous voulons obtenir :

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom">

Deux attributs travaillent ensemble :

for="nom"

et :

id="nom"

La valeur doit correspondre exactement.

Nous avons :

label for="nom"
input id="nom"

Cette correspondance signifie :

le label "Votre nom" décrit ce champ précis

7. Pourquoi cette association est-elle importante ?

Lorsqu’un label est correctement associé à son champ :

- l’utilisateur voit clairement ce qu’il doit saisir ;
- cliquer ou activer le libellé peut placer le focus dans le champ ;
- un lecteur d’écran peut annoncer le libellé lorsque le champ reçoit le focus.

L’utilisateur peut donc entendre quelque chose comme :

Votre nom, zone d’édition

au lieu d’entendre uniquement :

zone d’édition

C’est une différence essentielle pour comprendre le formulaire.

8. Le rôle de id

Dans :

id="nom"

id

identifie cet élément dans la page.

Dans notre formulaire, il sert notamment de cible au :

for="nom"

Un

id

doit être unique dans la page.

Nous n’écrirons donc pas deux champs différents avec :

id="nom"

Le prochain champ recevra un autre identifiant.

9. Le rôle de name

Notre champ contient également :

name="nom"

L’attribut

name

donne un nom à la donnée du champ lorsqu’un formulaire est envoyé.

Vous pouvez retenir :

id = identifie le champ dans la page
name = identifie la donnée du champ lors de l’envoi du formulaire

Aujourd’hui, aucune donnée ne sera réellement traitée.

Mais nous prenons déjà l’habitude d’ajouter un

name

utile, car il sera indispensable lorsque PHP recevra les informations du formulaire.

10. Notre premier champ complet

Nous pouvons maintenant écrire :

<form>
    <p>
        <label for="nom">Votre nom</label>
        <input type="text" id="nom" name="nom">
    </p>
</form>

Nous utilisons ici un paragraphe pour regrouper simplement le label et son champ dans notre exemple.

Le point essentiel reste la relation :

for="nom" -> id="nom"

11. Ajouter un champ pour un message

Un champ

input type="text"

convient pour une réponse courte, comme un nom.

Pour un message pouvant contenir plusieurs lignes, HTML possède :

textarea

Exemple :

<textarea></textarea>

Contrairement à

input

,

textarea

possède une balise ouvrante et une balise fermante.

Nous allons lui donner :

id="message"
name="message"

12. Associer le label du message

Le deuxième champ devient :

<label for="message">Votre message</label>
<textarea id="message" name="message"></textarea>

La relation est maintenant :

label for="message"
textarea id="message"

Le lecteur d’écran peut donc identifier correctement cette zone de saisie comme étant :

Votre message

13. Le formulaire possède maintenant deux champs

Nous pouvons écrire :

<form>
    <p>
        <label for="nom">Votre nom</label>
        <input type="text" id="nom" name="nom">
    </p>

    <p>
        <label for="message">Votre message</label>
        <textarea id="message" name="message"></textarea>
    </p>
</form>

Nous avons maintenant deux couples distincts :

for="nom" -> id="nom"
for="message" -> id="message"

Aucune ambiguïté n’existe entre les deux champs.

14. Ajouter un bouton d’envoi

Un formulaire a généralement besoin d’une action que l’utilisateur peut déclencher.

Nous allons ajouter :

<button type="submit">Envoyer le message</button>

L’élément :

button

crée un bouton.

L’attribut :

type="submit"

indique que ce bouton sert à soumettre le formulaire.

Le texte :

Envoyer le message

décrit clairement l’action.

15. Pourquoi écrire un texte précis sur le bouton ?

Comparez :

<button type="submit">OK</button>

et :

<button type="submit">Envoyer le message</button>

Le deuxième bouton est beaucoup plus clair.

L’utilisateur sait immédiatement ce qui doit se produire lorsqu’il l’active.

Un bon libellé de bouton décrit l’action.

16. Ne pas remplacer label par placeholder

Vous rencontrerez souvent l’attribut :

placeholder

Par exemple :

<input type="text" placeholder="Votre nom">

Le texte du placeholder apparaît généralement à l’intérieur du champ lorsqu’il est vide.

Mais il ne doit pas remplacer notre

label

.

Pourquoi ?

Parce que ce texte peut disparaître lorsque l’utilisateur commence à saisir et n’offre pas le même repère durable qu’un vrai libellé associé.

Dans notre cours, nous conserverons donc :

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom">

Le champ reste compréhensible avant, pendant et après la saisie.

17. Nous n’avons pas besoin d’aria-label ici

Vous trouverez parfois des exemples ajoutant :

aria-label="Votre nom"

sur un champ qui possède déjà un

label

correctement associé.

Ce n’est pas nécessaire pour notre formulaire simple.

Le HTML natif fournit déjà la relation dont nous avons besoin :

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom">

Nous privilégions donc les éléments HTML prévus pour le besoin avant d’ajouter des attributs ARIA.

18. Assembler le formulaire complet

Votre contenu principal peut maintenant devenir :

<main>
    <h1>Contact</h1>
    <p>Utilisez le formulaire ci-dessous pour rédiger un message.</p>

    <form>
        <p>
            <label for="nom">Votre nom</label>
            <input type="text" id="nom" name="nom">
        </p>

        <p>
            <label for="message">Votre message</label>
            <textarea id="message" name="message"></textarea>
        </p>

        <p>
            <button type="submit">Envoyer le message</button>
        </p>
    </form>
</main>

Enregistrez puis actualisez la page.

19. Tester le formulaire au clavier

Un formulaire ne doit pas être testé uniquement avec la souris.

Utilisez la touche :

Tab

pour déplacer le focus.

Vous devez pouvoir atteindre successivement :

champ Votre nom
zone Votre message
bouton Envoyer le message

Vous devez également pouvoir saisir du texte dans les deux champs.

Le bouton doit pouvoir recevoir le focus lui aussi.

20. Tester avec un lecteur d’écran

Si vous utilisez un lecteur d’écran, placez le focus dans le premier champ.

Vous devez pouvoir identifier clairement :

Votre nom

Puis, dans le deuxième :

Votre message

Enfin, le bouton doit annoncer une action compréhensible :

Envoyer le message

Si vous entendez seulement quelque chose comme :

zone d’édition

sans savoir ce que vous devez saisir, vérifiez immédiatement la correspondance entre

for

et

id

.

21. Que se passe-t-il si vous activez le bouton maintenant ?

Notre formulaire ne possède encore aucun traitement côté serveur.

Le bouton

submit

peut donc provoquer une soumission simple ou un rechargement de la page selon le contexte du navigateur, mais aucune donnée ne sera enregistrée par magie.

C’est normal.

Nous apprenons ici la structure HTML du formulaire.

Plus tard, PHP pourra recevoir les valeurs associées aux attributs :

name="nom"
name="message"

et décider quoi en faire.

22. Nous n’ajoutons pas encore required ni les autres types de champs

Vous pourriez vouloir rendre le nom obligatoire, créer un champ d’adresse e-mail ou utiliser une case à cocher.

HTML sait faire tout cela.

Mais cela introduit plusieurs nouvelles notions :

required
type="email"
checkbox
radio
et d’autres types de saisie

Nous les étudierons dans la prochaine leçon.

Pour aujourd’hui, vous devez maîtriser parfaitement la base :

form
label
input
textarea
button
for
id
name

23. Les erreurs les plus fréquentes à repérer

Erreur 1 : label sans association

<label>Votre nom</label>
<input type="text" id="nom" name="nom">

Le texte est visible, mais nous n’avons pas créé explicitement la relation avec le champ.

Nous préférons :

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom">

Erreur 2 : for et id différents

<label for="nom">Votre nom</label>
<input type="text" id="utilisateur" name="nom">

Ici,

for="nom"

cherche un élément portant :

id="nom"

mais le champ possède :

id="utilisateur"

La relation est donc cassée.

Erreur 3 : même id sur plusieurs champs

<input id="champ" ...>
<textarea id="champ" ...></textarea>

Un

id

doit rester unique dans la page.

Erreur 4 : utiliser placeholder comme seul libellé

<input type="text" placeholder="Votre nom">

Nous conservons un vrai

label

visible et associé.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- le rôle de

form

;
- pourquoi HTML seul ne traite pas encore les données ;
- le rôle de

label

;
- le rôle de

input type="text"

;
- la différence entre

input

et

textarea

;
- comment

for

et

id

associent un label à son champ ;
- pourquoi chaque

id

doit être unique ;
- le rôle de

name

;
- le rôle de

button type="submit"

;
- pourquoi le texte d’un bouton doit décrire son action ;
- pourquoi un placeholder ne remplace pas un label ;
- pourquoi nous n’avons pas besoin d’ajouter

aria-label

lorsque le label natif est correctement associé.

Dans la prochaine leçon, nous apprendrons les champs obligatoires et plusieurs types de saisie adaptés aux données demandées.

Imaginons un formulaire très court pour demander un prénom et un commentaire.

Nous pouvons écrire :

<form>
    <p>
        <label for="prenom">Votre prénom</label>
        <input type="text" id="prenom" name="prenom">
    </p>

    <p>
        <label for="commentaire">Votre commentaire</label>
        <textarea id="commentaire" name="commentaire"></textarea>
    </p>

    <p>
        <button type="submit">Envoyer le commentaire</button>
    </p>
</form>

Le premier couple est :

for="prenom" -> id="prenom"

Le second est :

for="commentaire" -> id="commentaire"

Les deux champs ont donc un libellé explicite.

Le bouton décrit aussi clairement l’action :

Envoyer le commentaire

Nous n’avons ajouté aucun

aria-label

, car les éléments HTML natifs fournissent déjà les informations nécessaires.

Reprenez votre fichier

contact.html

.

Conservez la structure générale du site avec

header

,

nav

,

main

et

footer

.

Travaillez dans

main

.

1. Conservez ou ajoutez :

<h1>Contact</h1>

2. Ajoutez un paragraphe expliquant que l’utilisateur peut rédiger un message.

3. Créez un élément :

form

4. Dans le formulaire, créez un champ de texte pour le nom.

Le label doit afficher :

Votre nom

Utilisez :

for="nom"

Le champ doit utiliser :

type="text"
id="nom"
name="nom"

5. Créez ensuite une zone de texte pour le message.

Le label doit afficher :

Votre message

Utilisez :

for="message"

et :

id="message"
name="message"

6. Ajoutez un bouton :

Envoyer le message

avec :

type="submit"

7. N’utilisez pas

placeholder

à la place des labels.

8. N’ajoutez pas

aria-label

aux champs : les labels correctement associés suffisent ici.

9. Enregistrez puis actualisez la page.

10. Utilisez

Tab

pour atteindre successivement les deux champs et le bouton.

11. Si vous utilisez un lecteur d’écran, vérifiez que chaque champ est annoncé avec son libellé.

Pour terminer, expliquez avec vos propres mots la différence entre :

id="nom"

et :

name="nom"

Un formulaire HTML est contenu dans :

form

Pour une courte saisie de texte, nous pouvons utiliser :

<input type="text">

Pour un message sur plusieurs lignes :

textarea

Chaque champ doit posséder un libellé compréhensible.

Nous utilisons :

label

et nous relions le label au champ avec :

for

et :

id

Exemple :

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom">

La valeur de

for

doit correspondre exactement à l’

id

du champ.

Chaque

id

doit être unique dans la page.

L’attribut

name

identifie la donnée du champ lorsqu’un formulaire est envoyé.

Un bouton d’envoi peut être créé avec :

<button type="submit">Envoyer le message</button>

Le texte du bouton doit décrire son action.

Un

placeholder

ne remplace pas un véritable label.

Lorsque le label natif est correctement associé au champ, nous n’avons pas besoin d’ajouter

aria-label

.

HTML construit la structure du formulaire, mais ne stocke ni n’envoie à lui seul les données vers une base ou un e-mail. Le traitement sera étudié plus tard avec PHP.

Dans la prochaine leçon, nous découvrirons les champs obligatoires et plusieurs types de saisie HTML.