Html - Question d'une novice :)

**sunshine13** · 14/08/2026, 15h25

Bonjour,

Tout d'abord, je m'excuse si ce post ne se trouve pas au bon endroit mais je n'ai pas trouvé de rubrique consacré à l'Html

J'ai commencé sur le site Udemy une formation en développement Web.
Lors d'un cours sur les formulaires en html, le but était qu'une case se coche seul.
Voici le code proposé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
    <head>
        <title>Titre de notre page</title>
    </head>
    <body>
      <form>
        <input type = "checkbox" value="velo">Velo
        <br>
        <input type = "checkbox" value="voiture" checked>voiture
        <br>
        <input type = "checkbox" value="avion">avion
        <br>
      </form>
 
    </body>
</html>

---------------------------------------------------

Si j'ajoute un tag <label>, cela fonctionne

----------------------------------------------------

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>Titre de notre page</title>
    </head>
    <body>
      <form>
        <input type = "checkbox" value="velo">Velo
        <br>
        <label>
        <input type = "checkbox" value="voiture" checked>voiture
        </label>
        <br>
        <input type = "checkbox" value="avion">avion
        <br>
      </form>
 
    </body>
</html>

----------------------------------------------------------------------------
Vu que la vidéo de formation date d'il y a quelques année, le premier code ne serait plus applicable ?

**Stellar7** · 14/08/2026, 15h51

Bonjour,

connais-tu le MDN (Mozilla Developper Network) ? C'est une mise d'informations. Tu y trouveras des informations sur quasi tout le web (front-end), en particulier les input, checkbox, label, et bien d'autres encore (et avec des exemples)…

Bonnes découvertes.

**sunshine13** · 14/08/2026, 16h00

Envoyé par Stellar7

Bonjour,

connais-tu le MDN (Mozilla Developper Network) ? C'est une mise d'informations. Tu y trouveras des informations sur quasi tout le web (front-end), en particulier les input, checkbox, label, et bien d'autres encore (et avec des exemples)…

Bonnes découvertes.

Je ne connaissais pas, C'est pépite

**casperweb** · 14/08/2026, 16h58

Bonjour, les deux codes sont valide, tu peux le vérifier grâce au validateur du W3C => https://validator.w3.org

Le checkbox est coché grâce à l'attribut checked dans les deux codes.

Le fait d'indiqué un label permet de lier le texte aux champs et de ce fait quand on clique sur le texte, le checkbox réagit.
Il est recommander de toujours indiquer des label.
Règle n° 69 opquast Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre

PS : Pour que le formulaire soit fonctionnelle (c'est à dire capable d'envoyer la valeur dans une variable coté serveur), il manque l'identification de cette variable. Cela ce fait via l'attribut name de la balise input.

**Obsidian** · 15/08/2026, 03h31

Bonjour,

Envoyé par sunshine13

J'ai commencé sur le site Udemy une formation en développement Web.
Lors d'un cours sur les formulaires en html, le but était qu'une case se coche seul.

Ce n'est pas très clair. Est-ce que tu souhaites qu'une case se coche toute seule lorsque l'on clique à proximité (sur le libellé qui lui est associé) ou souhaites-tu faire en sorte qu'une seule case parmi n soit toujours cochée dans ton formulaire ?

Dans le second cas, ce sont en fait des boutons radio qu'il te faut (c'est à cela qu'ils servent) : https://developer.mozilla.org/fr/doc...ts/input/radio
Dans le premier, on fait effectivement cela avec des éléments LABEL. Il y a deux manière de les utiliser : de façon implicite ou de façon explicite.

Lorsqu'utilisée de manière implicite, on inclut la case à cocher INPUT dans le corps de la balise LABEL, en même temps que le texte qui l'accompagne. Il est alors évident que les éléments sont liés entre eux et le mécanisme fonctionne.

Lorsqu'utilisée de manière explicite, on sépare les balises INPUT et LABEL, on donne un identifiant à la balise INPUT avec id="" et on indique au LABEL que c'est à cette case que l'étiquette est associée en passant le même identifiant à l'attribut for="" de la balise LABEL.

C'est la méthode explicite qui est recommandée et la plus propre parce que, sémantiquement, le corps de la balise LABEL ne contient que le libellé lui-même (le texte de l'étiquette). Il peut être récupéré facilement par analyse du document (spécialement dans le cas du XHTML) ou par le Javascript, qui peut même le remplacer sans risquer d'écraser la case à cocher en même temps. C'est aussi utile, voire nécessaire, lorsque ces éléments prennent place au sein d'un tableau TABLE et que chacun d'eux doit se trouver dans une cellule TD propre.

En revanche, cela oblige à identifier toutes les cases, ce qui peut être fastidieux si elles sont nombreuses et spécialement si le formulaire est auto-généré (soit par le serveur, soit par le Javascript). Cela dit, il est déjà nécessaire de donner un nom name="" à chaque case. Donc…

**sunshine13** · 16/08/2026, 21h11

Envoyé par casperweb

Bonjour, les deux codes sont valide, tu peux le vérifier grâce au validateur du W3C => https://validator.w3.org

Le checkbox est coché grâce à l'attribut checked dans les deux codes.

Le fait d'indiqué un label permet de lier le texte aux champs et de ce fait quand on clique sur le texte, le checkbox réagit.
Il est recommander de toujours indiquer des label.
Règle n° 69 opquast Chaque champ de formulaire est associé dans le code source à une étiquette qui lui est propre

PS : Pour que le formulaire soit fonctionnelle (c'est à dire capable d'envoyer la valeur dans une variable coté serveur), il manque l'identification de cette variable. Cela ce fait via l'attribut name de la balise input.

Merci pour les informations

**sunshine13** · 16/08/2026, 21h14

Envoyé par Obsidian

Bonjour,

Ce n'est pas très clair. Est-ce que tu souhaites qu'une case se coche toute seule lorsque l'on clique à proximité (sur le libellé qui lui est associé) ou souhaites-tu faire en sorte qu'une seule case parmi n soit toujours cochée dans ton formulaire ?

Dans le second cas, ce sont en fait des boutons radio qu'il te faut (c'est à cela qu'ils servent) : https://developer.mozilla.org/fr/doc...ts/input/radio
Dans le premier, on fait effectivement cela avec des éléments LABEL. Il y a deux manière de les utiliser : de façon implicite ou de façon explicite.

Lorsqu'utilisée de manière implicite, on inclut la case à cocher INPUT dans le corps de la balise LABEL, en même temps que le texte qui l'accompagne. Il est alors évident que les éléments sont liés entre eux et le mécanisme fonctionne.

Lorsqu'utilisée de manière explicite, on sépare les balises INPUT et LABEL, on donne un identifiant à la balise INPUT avec id="" et on indique au LABEL que c'est à cette case que l'étiquette est associée en passant le même identifiant à l'attribut for="" de la balise LABEL.

C'est la méthode explicite qui est recommandée et la plus propre parce que, sémantiquement, le corps de la balise LABEL ne contient que le libellé lui-même (le texte de l'étiquette). Il peut être récupéré facilement par analyse du document (spécialement dans le cas du XHTML) ou par le Javascript, qui peut même le remplacer sans risquer d'écraser la case à cocher en même temps. C'est aussi utile, voire nécessaire, lorsque ces éléments prennent place au sein d'un tableau TABLE et que chacun d'eux doit se trouver dans une cellule TD propre.

En revanche, cela oblige à identifier toutes les cases, ce qui peut être fastidieux si elles sont nombreuses et spécialement si le formulaire est auto-généré (soit par le serveur, soit par le Javascript). Cela dit, il est déjà nécessaire de donner un nom name="" à chaque case. Donc…

Merci pour les informations

le but ici était que la case soit cochée par défaut et, effectivement, j'ai vu le RADIO dans le cours suivant.
Je garde bien précieusement toute les explications fournie dans les différentes réponse.

Html - Question d'une novice :)

Discussions similaires

Partager

Partager