PhpBB Lab Académie

Faire évoluer le formulaire de contact en choisissant un type de champ adapté à la donnée demandée, utiliser required sans confondre validation du navigateur et traitement serveur, ajouter des champs e-mail et téléphone correctement libellés, découvrir les cases à cocher et les boutons radio, puis regrouper une série de choix avec fieldset et legend pour conserver un formulaire clair et accessible.

Nous allons améliorer notre formulaire sans ajouter des champs au hasard

Dans la leçon précédente, vous avez créé dans

contact.html

un premier formulaire contenant :

Votre nom
Votre message
Envoyer le message

Vous savez déjà utiliser :

form
label
input
textarea
button
for
id
name

Vous savez aussi qu’un

label

visible associé avec

for

et

id

est préférable à un champ sans libellé ou à un simple

placeholder

.

Nous allons maintenant faire évoluer ce formulaire.

La nouvelle difficulté sera de choisir le bon type de saisie selon la donnée demandée.

Nous allons également apprendre à distinguer :

- un champ obligatoire ;
- un champ facultatif ;
- un champ de texte ordinaire ;
- une adresse e-mail ;
- un numéro de téléphone ;
- une case à cocher ;
- un choix unique parmi plusieurs possibilités.

L’objectif n’est pas de mémoriser une longue liste de types HTML.

L’objectif est de comprendre comment choisir le type qui correspond au sens de la donnée.

1. Reprendre le formulaire existant

Ouvrez :

contact.html

Votre formulaire peut actuellement ressembler à ceci :

<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>

Nous allons conserver cette base et l’améliorer progressivement.

2. Rendre un champ obligatoire avec required

Supposons que nous ne voulions pas accepter un formulaire sans nom.

HTML possède l’attribut :

required

Nous pouvons écrire :

<input type="text" id="nom" name="nom" required>

required

est un attribut booléen.

Cela signifie que sa présence suffit à exprimer l’information.

Nous n’avons pas besoin d’écrire :

required="oui"

ou :

required="true"

Dans notre cours, nous utiliserons simplement :

required

3. Ce que fait required

Lorsqu’un champ possède

required

, le navigateur sait que ce champ doit recevoir une valeur avant une soumission normale du formulaire.

Si vous laissez le champ vide puis activez le bouton d’envoi, le navigateur peut bloquer la soumission et signaler qu’une valeur est attendue.

Cela apporte une première aide à l’utilisateur.

Mais attention :

required n’envoie pas le formulaire
required ne stocke pas les données
required ne remplace pas la validation côté serveur

Lorsque nous apprendrons PHP, le serveur devra lui aussi vérifier les données reçues.

4. Indiquer clairement qu’un champ est obligatoire

L’attribut

required

est utile pour le navigateur et les technologies d’assistance.

Mais il est également important que l’utilisateur comprenne visiblement ce qui est obligatoire.

Nous pouvons écrire :

<label for="nom">Votre nom (obligatoire)</label>
<input type="text" id="nom" name="nom" required>

Ainsi, l’information n’est pas transmise uniquement par une couleur, un symbole ou un comportement au moment de l’erreur.

Dans ce cours, nous préférerons un texte explicite :

(obligatoire)

plutôt qu’un simple astérisque dont la signification ne serait pas expliquée.

5. Ajouter une adresse e-mail

Nous voulons maintenant demander une adresse e-mail.

Nous pourrions techniquement utiliser :

type="text"

Mais HTML possède un type plus précis :

type="email"

Nous pouvons écrire :

<label for="email">Votre adresse e-mail (obligatoire)</label>
<input type="email" id="email" name="email" required>

Le type :

email

indique que la donnée attendue est une adresse e-mail.

6. Pourquoi utiliser type="email" ?

Le type

email

donne au navigateur une information sémantique supplémentaire.

Selon l’appareil et le navigateur :

- une interface de saisie plus adaptée peut être proposée ;
- le navigateur peut effectuer une vérification élémentaire du format ;
- les outils d’assistance disposent d’une information plus précise sur le champ.

Par exemple, une valeur comme :

michel

ne ressemble pas à une adresse e-mail complète.

Une valeur comme :

michel@example.com

correspond mieux au format attendu.

7. Ce que type="email" ne garantit pas

Le navigateur ne peut pas savoir simplement grâce à

type="email"

si l’adresse existe réellement.

Par exemple :

personne-inexistante@example.com

peut avoir une forme correcte sans correspondre à une boîte réellement utilisée.

Retenez donc :

type="email" = type de donnée attendu + validation de forme par le navigateur
pas = preuve que l’adresse existe

Plus tard, un traitement côté serveur pourra effectuer d’autres vérifications selon les besoins.

8. Ajouter un numéro de téléphone facultatif

Nous allons ensuite proposer un numéro de téléphone.

Comme ce numéro n’est pas indispensable pour envoyer un message, nous le laisserons facultatif.

HTML possède :

type="tel"

Nous pouvons écrire :

<label for="telephone">Votre numéro de téléphone (facultatif)</label>
<input type="tel" id="telephone" name="telephone">

Nous n’ajoutons pas

required

.

Le champ peut donc rester vide.

9. Pourquoi ne pas utiliser type="number" pour un téléphone ?

Un numéro de téléphone contient des chiffres, mais ce n’est pas un nombre sur lequel nous faisons des calculs.

Un téléphone peut contenir par exemple :

+32 470 12 34 56

Le signe

+

, les espaces ou d’autres conventions peuvent faire partie de la manière dont l’utilisateur écrit son numéro.

Nous utiliserons donc :

type="tel"

et non :

type="number"

Retenez cette règle :

des caractères numériques ne signifient pas automatiquement que la donnée est un nombre mathématique

Le même raisonnement sera utile plus tard pour des codes postaux, numéros de client ou autres identifiants.

10. type="tel" ne valide pas automatiquement tous les formats

Les numéros de téléphone varient beaucoup selon les pays.

Le navigateur ne peut donc pas imposer un format universel simplement avec :

type="tel"

Ce type indique surtout la nature de la donnée attendue.

Si un jour nous voulons imposer une règle plus précise, nous devrons définir cette règle explicitement.

Nous ne compliquons pas encore le formulaire avec cela.

11. Aider le navigateur avec autocomplete

Pour certains champs courants, nous pouvons également utiliser l’attribut :

autocomplete

Il indique au navigateur le type d’information personnelle que le champ attend.

Par exemple :

<input type="text" id="nom" name="nom" autocomplete="name" required>

Pour une adresse e-mail :

<input type="email" id="email" name="email" autocomplete="email" required>

Pour un téléphone :

<input type="tel" id="telephone" name="telephone" autocomplete="tel">

Cela peut permettre au navigateur de proposer des données déjà connues de l’utilisateur.

Dans notre formulaire, cet attribut complète le type du champ ; il ne remplace ni le

label

ni le

name

.

12. Faire évoluer les trois premiers champs

Nous pouvons maintenant écrire :

<p>
    <label for="nom">Votre nom (obligatoire)</label>
    <input type="text" id="nom" name="nom" autocomplete="name" required>
</p>

<p>
    <label for="email">Votre adresse e-mail (obligatoire)</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
</p>

<p>
    <label for="telephone">Votre numéro de téléphone (facultatif)</label>
    <input type="tel" id="telephone" name="telephone" autocomplete="tel">
</p>

Chaque champ possède :

- un libellé visible ;
- un

id

unique ;
- un

name

utile ;
- un type correspondant à la donnée ;
-

required

uniquement lorsque la donnée est obligatoire.

13. Rendre le message obligatoire

Notre

textarea

peut lui aussi utiliser :

required

Nous écrivons :

<label for="message">Votre message (obligatoire)</label>
<textarea id="message" name="message" required></textarea>

Le fait que

textarea

ne soit pas un

input

n’empêche pas l’utilisation de

required

.

14. Une case à cocher avec type="checkbox"

Nous allons maintenant découvrir un autre type de champ :

checkbox

Une case à cocher convient lorsqu’une option peut être :

cochée
ou
non cochée

Par exemple, nous pouvons proposer :

Recevoir une copie de mon message

La structure est :

<input type="checkbox" id="copie" name="copie" value="oui">
<label for="copie">Recevoir une copie de mon message</label>

Cette fois, nous plaçons le champ avant son label.

C’est une présentation fréquente pour les cases à cocher.

L’association reste exactement la même :

for="copie" -> id="copie"

15. Le rôle de value sur une case à cocher

Vous connaissez déjà

name

.

Avec une case à cocher, nous ajoutons ici :

value="oui"

Lorsque la case est cochée et que le formulaire est envoyé, la donnée peut être représentée comme :

copie = oui

Ici :

name="copie" = nom de la donnée
value="oui" = valeur envoyée lorsque l’option est sélectionnée

Nous verrons réellement cette donnée lorsque nous apprendrons à traiter un formulaire avec PHP.

16. Une case à cocher peut être facultative

Dans notre exemple :

Recevoir une copie de mon message

est un choix facultatif.

Nous n’ajoutons donc pas

required

.

L’utilisateur peut envoyer le formulaire sans cocher cette case.

Le caractère obligatoire ou facultatif dépend du besoin réel du formulaire.

Ne rendez pas tous les champs obligatoires simplement parce que HTML permet de le faire.

17. Choisir une seule option avec type="radio"

Une case à cocher représente bien un choix indépendant.

Mais que faire lorsque nous voulons demander :

Comment préférez-vous être contacté ?

avec deux réponses possibles :

Par e-mail
Par téléphone

et que l’utilisateur doit choisir une seule réponse ?

Nous pouvons utiliser :

type="radio"

18. Les boutons radio d’un même groupe partagent le même name

Voici deux choix :

<input type="radio" id="contact-email" name="contact-prefere" value="email">
<label for="contact-email">Par e-mail</label>

<input type="radio" id="contact-telephone" name="contact-prefere" value="telephone">
<label for="contact-telephone">Par téléphone</label>

Remarquez que les deux champs ont des

id

différents :

contact-email
contact-telephone

Mais ils possèdent le même :

name="contact-prefere"

C’est ce nom commun qui indique qu’ils appartiennent au même groupe de choix.

L’utilisateur peut alors choisir une option à la fois dans ce groupe.

19. Pourquoi les id restent-ils différents ?

Chaque label doit cibler un champ précis.

Nous avons donc :

for="contact-email" -> id="contact-email"
for="contact-telephone" -> id="contact-telephone"

Les deux

id

sont uniques.

En revanche, le

name

commun sert à représenter une seule donnée :

contact-prefere

dont la valeur sera soit :

email

soit :

telephone

20. Regrouper les choix avec fieldset et legend

Les deux boutons radio répondent à une même question :

Comment préférez-vous être contacté ?

Nous allons regrouper ces choix avec :

fieldset

et donner un nom au groupe avec :

legend

Exemple :

<fieldset>
    <legend>Comment préférez-vous être contacté ?</legend>

    <p>
        <input type="radio" id="contact-email" name="contact-prefere" value="email">
        <label for="contact-email">Par e-mail</label>
    </p>

    <p>
        <input type="radio" id="contact-telephone" name="contact-prefere" value="telephone">
        <label for="contact-telephone">Par téléphone</label>
    </p>
</fieldset>

21. Pourquoi fieldset et legend sont-ils importants ?

Chaque bouton radio possède déjà son propre label.

Mais les deux boutons ont également besoin d’un contexte commun.

Le

legend

fournit précisément cette question commune :

Comment préférez-vous être contacté ?

Un utilisateur de lecteur d’écran peut ainsi mieux comprendre que :

Par e-mail

et :

Par téléphone

sont deux réponses à la même question.

Retenez :

label = nom d’un contrôle précis
legend = nom d’un groupe de contrôles liés

22. Rendre le choix obligatoire

Si nous voulons imposer un choix entre les deux boutons radio, nous pouvons ajouter :

required

à un bouton du groupe partageant le même

name

.

Pour garder notre exemple explicite, nous l’ajoutons au premier :

<input type="radio" id="contact-email" name="contact-prefere" value="email" required>

Le groupe

contact-prefere

devra alors posséder une option sélectionnée avant une soumission normale.

Dans le texte de la légende, nous pouvons également préciser :

Comment préférez-vous être contacté ? (obligatoire)

23. Ne pas utiliser radio lorsqu’on peut choisir plusieurs réponses

Si l’utilisateur peut sélectionner plusieurs options indépendantes, les boutons radio ne sont pas adaptés.

Par exemple :

Je souhaite recevoir :
- les nouveautés du site
- les nouveaux tutoriels
- les annonces importantes

Plusieurs choix peuvent être cochés simultanément.

Des cases

checkbox

seraient alors plus adaptées.

Retenez :

checkbox = choix indépendant, plusieurs cases peuvent être cochées
radio = un seul choix dans un groupe partageant le même name

24. Le formulaire amélioré

Nous pouvons maintenant assembler notre formulaire :

<form>
    <p>
        <label for="nom">Votre nom (obligatoire)</label>
        <input type="text" id="nom" name="nom" autocomplete="name" required>
    </p>

    <p>
        <label for="email">Votre adresse e-mail (obligatoire)</label>
        <input type="email" id="email" name="email" autocomplete="email" required>
    </p>

    <p>
        <label for="telephone">Votre numéro de téléphone (facultatif)</label>
        <input type="tel" id="telephone" name="telephone" autocomplete="tel">
    </p>

    <fieldset>
        <legend>Comment préférez-vous être contacté ? (obligatoire)</legend>

        <p>
            <input type="radio" id="contact-email" name="contact-prefere" value="email" required>
            <label for="contact-email">Par e-mail</label>
        </p>

        <p>
            <input type="radio" id="contact-telephone" name="contact-prefere" value="telephone">
            <label for="contact-telephone">Par téléphone</label>
        </p>
    </fieldset>

    <p>
        <label for="message">Votre message (obligatoire)</label>
        <textarea id="message" name="message" required></textarea>
    </p>

    <p>
        <input type="checkbox" id="copie" name="copie" value="oui">
        <label for="copie">Recevoir une copie de mon message</label>
    </p>

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

Ce formulaire reste entièrement en HTML.

Il ne traite pas encore les données avec PHP.

25. Tester les champs obligatoires

Enregistrez puis actualisez

contact.html

.

Sans remplir le formulaire, activez :

Envoyer le message

Le navigateur doit normalement signaler le premier contrôle obligatoire qui n’est pas correctement renseigné.

Remplissez ensuite :

1. le nom ;
2. une adresse e-mail ;
3. le choix du moyen de contact ;
4. le message.

Le téléphone et la case :

Recevoir une copie de mon message

peuvent rester vides.

Vous vérifiez ainsi concrètement la différence entre obligatoire et facultatif.

26. Tester type="email"

Dans le champ e-mail, essayez temporairement :

bonjour

puis tentez une soumission.

Le navigateur peut signaler que la valeur ne correspond pas au format attendu pour une adresse e-mail.

Remplacez ensuite par une valeur de test comme :

bonjour@example.com

Cette expérience montre la différence entre :

type="text"

et :

type="email"

27. Tester les boutons radio

Avec le clavier, placez-vous sur le groupe de boutons radio.

Choisissez :

Par e-mail

puis :

Par téléphone

Vous devez constater que les deux options ne restent pas sélectionnées simultanément.

Elles partagent :

name="contact-prefere"

et appartiennent donc au même groupe.

28. Tester la case à cocher

Placez-vous ensuite sur :

Recevoir une copie de mon message

Vous pouvez la cocher ou la décocher indépendamment du choix précédent.

C’est précisément la différence avec un groupe de boutons radio.

29. Tester avec un lecteur d’écran

Si vous utilisez un lecteur d’écran, vérifiez notamment que vous pouvez identifier :

Votre nom, obligatoire
Votre adresse e-mail, obligatoire
Votre numéro de téléphone, facultatif
Comment préférez-vous être contacté ?
Par e-mail
Par téléphone
Votre message, obligatoire
Recevoir une copie de mon message
Envoyer le message

Les formulations exactes peuvent varier selon le lecteur d’écran et le navigateur.

Ce qui compte est que chaque contrôle ait un nom compréhensible et que le groupe de boutons radio possède un contexte commun.

30. Ne pas ajouter ARIA lorsqu’un élément HTML natif suffit

Nous disposons maintenant de :

-

label

pour nommer un champ ;
-

fieldset

et

legend

pour nommer un groupe ;
-

required

pour déclarer un contrôle obligatoire ;
- des types d’

input

adaptés aux données.

Nous n’avons donc pas besoin d’ajouter artificiellement :

aria-label
role
aria-required

pour reproduire des informations que le HTML natif exprime déjà correctement.

C’est une règle importante pour la suite :

utiliser d’abord l’élément HTML prévu pour le besoin

31. La validation du navigateur n’est pas une protection de sécurité

Vous devez retenir une distinction importante avant le cours PHP.

Les attributs HTML comme :

required
type="email"

améliorent l’expérience de saisie et permettent certaines vérifications dans le navigateur.

Mais un utilisateur ou un programme peut envoyer des données sans respecter ces contrôles.

Lorsque nous traiterons un formulaire avec PHP, le serveur devra toujours vérifier les données reçues.

Retenez :

validation HTML = aide côté navigateur
validation serveur = vérification indispensable avant de faire confiance aux données

32. Choisir le type selon le sens de la donnée

Vous connaissez maintenant plusieurs types :

text
email
tel
checkbox
radio

Ne choisissez pas un type parce qu’il « ressemble » visuellement au champ souhaité.

Posez-vous plutôt cette question :

Quelle donnée l’utilisateur doit-il fournir ?

Puis choisissez l’élément ou le type HTML qui décrit correctement cette donnée.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- le rôle de

required

;
- pourquoi une indication visible « obligatoire » reste utile ;
- la différence entre

type="text"

,

type="email"

et

type="tel"

;
- pourquoi un numéro de téléphone n’est pas un

type="number"

;
- le rôle de

autocomplete

pour des informations courantes ;
- la différence entre une case

checkbox

et un bouton

radio

;
- pourquoi les boutons radio d’un même groupe partagent le même

name

;
- le rôle de

value

;
- pourquoi un groupe de choix peut utiliser

fieldset

et

legend

;
- pourquoi la validation HTML ne remplace pas la validation côté serveur.

Dans la prochaine leçon, vous allez reprendre tout ce que vous avez appris depuis le début du cours pour construire une petite page complète, vérifier sa structure et effectuer une véritable révision finale de votre HTML.

Imaginons un formulaire d’inscription à une activité.

Nous demandons :

- un nom obligatoire ;
- une adresse e-mail obligatoire ;
- un téléphone facultatif ;
- un choix obligatoire entre matin et après-midi ;
- une case facultative pour recevoir les prochaines dates.

Une structure adaptée pourrait être :

<form>
    <p>
        <label for="nom">Votre nom (obligatoire)</label>
        <input type="text" id="nom" name="nom" autocomplete="name" required>
    </p>

    <p>
        <label for="email">Votre adresse e-mail (obligatoire)</label>
        <input type="email" id="email" name="email" autocomplete="email" required>
    </p>

    <p>
        <label for="telephone">Votre téléphone (facultatif)</label>
        <input type="tel" id="telephone" name="telephone" autocomplete="tel">
    </p>

    <fieldset>
        <legend>Horaire souhaité (obligatoire)</legend>

        <p>
            <input type="radio" id="matin" name="horaire" value="matin" required>
            <label for="matin">Matin</label>
        </p>

        <p>
            <input type="radio" id="apres-midi" name="horaire" value="apres-midi">
            <label for="apres-midi">Après-midi</label>
        </p>
    </fieldset>

    <p>
        <input type="checkbox" id="actualites" name="actualites" value="oui">
        <label for="actualites">Recevoir les prochaines dates</label>
    </p>

    <button type="submit">Envoyer l’inscription</button>
</form>

Le champ e-mail utilise

type="email"

parce qu’il attend une adresse e-mail.

Le téléphone utilise

type="tel"

parce qu’un numéro de téléphone n’est pas une valeur mathématique.

Les deux horaires utilisent le même

name="horaire"

parce qu’un seul choix doit être sélectionné.

La case

actualites

reste indépendante et facultative.

Reprenez votre fichier

contact.html

et le formulaire créé dans la leçon précédente.

Votre objectif est de le faire évoluer sans supprimer les labels déjà correctement associés.

1. Rendez le champ

nom

obligatoire.

Son label doit indiquer clairement :

Votre nom (obligatoire)

2. Ajoutez au champ

nom

:

autocomplete="name"

3. Entre le nom et le message, ajoutez un champ d’adresse e-mail.

Le label doit être :

Votre adresse e-mail (obligatoire)

Le champ doit utiliser :

type="email"
id="email"
name="email"
autocomplete="email"
required

4. Ajoutez ensuite un téléphone facultatif.

Le label doit être :

Votre numéro de téléphone (facultatif)

Le champ doit utiliser :

type="tel"
id="telephone"
name="telephone"
autocomplete="tel"

N’utilisez pas

type="number"

.

5. Créez un groupe de choix intitulé :

Comment préférez-vous être contacté ? (obligatoire)

Utilisez :

fieldset
legend

6. Ajoutez deux boutons radio :

Par e-mail
Par téléphone

Ils doivent partager :

name="contact-prefere"

mais posséder deux

id

différents.

7. Ajoutez

required

au premier bouton radio du groupe afin qu’un choix soit demandé.

8. Rendez également le

textarea

du message obligatoire.

Son label doit devenir :

Votre message (obligatoire)

9. Ajoutez enfin une case à cocher facultative :

Recevoir une copie de mon message

avec :

type="checkbox"
id="copie"
name="copie"
value="oui"

10. Conservez le bouton :

Envoyer le message

11. Enregistrez puis actualisez la page.

12. Testez une soumission avec tous les champs obligatoires vides.

13. Testez ensuite une adresse e-mail incorrecte, par exemple :

bonjour

14. Sélectionnez tour à tour les deux boutons radio et vérifiez qu’un seul reste sélectionné.

15. Cochez et décochez la case

Recevoir une copie de mon message

.

16. Parcourez tout le formulaire avec la touche

Tab

.

17. Si vous utilisez un lecteur d’écran, vérifiez que chaque contrôle possède un nom compréhensible et que les deux boutons radio sont présentés dans le contexte de leur légende.

Pour terminer, expliquez avec vos propres mots :

- pourquoi

type="email"

est préférable à

type="text"

pour l’adresse e-mail ;
- pourquoi

type="tel"

est préférable à

type="number"

pour un téléphone ;
- pourquoi les deux boutons radio utilisent le même

name

mais pas le même

id

.

L’attribut :

required

indique qu’un contrôle doit être renseigné avant une soumission normale du formulaire.

Il est utile de compléter cette information par un texte visible comme :

(obligatoire)

Un champ de texte ordinaire utilise :

type="text"

Une adresse e-mail utilise :

type="email"

Un téléphone utilise :

type="tel"

Un téléphone ne doit pas être traité comme un

type="number"

simplement parce qu’il contient principalement des chiffres.

L’attribut :

autocomplete

peut aider le navigateur à proposer des informations courantes comme le nom, l’e-mail ou le téléphone.

Une case indépendante utilise :

type="checkbox"

Un choix unique parmi plusieurs options peut utiliser :

type="radio"

Les boutons radio d’un même groupe partagent le même :

name

mais gardent des

id

uniques.

L’attribut :

value

représente la valeur associée au contrôle lors de l’envoi.

Pour regrouper plusieurs contrôles liés, nous pouvons utiliser :

fieldset

avec :

legend

qui donne le nom ou la question commune au groupe.

Nous continuons à privilégier les éléments HTML natifs :

label

,

fieldset

,

legend

,

required

et les types d’input adaptés fournissent déjà beaucoup d’informations utiles sans ajouter inutilement des attributs ARIA.

Enfin, la validation effectuée dans le navigateur améliore l’expérience de saisie mais ne remplace jamais la validation côté serveur.

Dans la prochaine leçon, nous construirons une page complète et nous vérifierons l’ensemble du HTML appris depuis le début du cours.