web-dev-qa-db-fra.com

Quelle est la valeur appropriée pour un attribut vérifié d'une case à cocher HTML?

Nous savons tous comment former une entrée de case à cocher en HTML:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

Ce que je ne sais pas - quelle est la valeur techniquement correcte pour une case à cocher cochée? J'ai vu tous ces travaux: 

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">

La réponse est-elle que cela n'a pas d'importance? Je ne vois aucune preuve de la réponse marquée comme correcte ici à partir du spec lui-même:

Les cases à cocher (et les boutons radio) sont des commutateurs marche/arrêt qui peuvent être intervertis par l'utilisateur. Un interrupteur est "activé" lorsque l'élément de contrôle est coché l'attribut est défini. Lorsqu'un formulaire est soumis, cochez la case "sur" les contrôles peuvent réussir. Plusieurs cases d'un formulaire peuvent partager le même nom de contrôle. Ainsi, par exemple, les cases à cocher permettent aux utilisateurs de sélectionnez plusieurs valeurs pour la même propriété. L'élément INPUT est utilisé créer un contrôle de case à cocher.

Que dirait un rédacteur de spécifications est la bonne réponse? Veuillez fournir des réponses fondées sur des preuves.

400
buley

Strictement parlant, vous devriez mettre quelque chose de logique - selon la spécification ici , la version la plus correcte est:

<input name=name id=id type=checkbox checked=checked>

Pour HTML, vous pouvez également utiliser la syntaxe d'attribut empty , checked="" ou même simplement checked (pour XHTML plus strict, il s'agit de non pris en charge ).

Cependant, la plupart des navigateurs prendront en charge n'importe quelle valeur entre les guillemets. Tous les éléments suivants seront vérifiés:

<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

Et seuls les éléments suivants seront décochés:

<input name=name id=id type=checkbox>

Voir aussi cette question similaire sur disabled="disabled" .

426
Hannele

Spéc. HTML5:

http://www.w3.org/TR/html5/forms.html#attr-input-checked :

L'attribut de contenu désactivé est un attribut booléen.

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :

La présence d'un attribut booléen sur un élément représente la valeur vraie et l'absence de l'attribut représente la valeur fausse.

Si l'attribut est présent, sa valeur doit correspondre à la chaîne vide ou à une correspondance ASCII sans distinction de casse pour le nom canonique de l'attribut, sans espace blanc de début ou de fin.

Conclusion:

Les éléments suivants sont valide, équivalent et vrai:

<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="ChEcKeD" />

Invalid sont les suivants:

<input type="checkbox" checked="0" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />

L'absence de l'attribut est la seule syntaxe valide pour false:

<input />

Recommandation

Si vous vous souciez d'écrire du XHTML valide, utilisez checked="checked", puisque <input checked> est XHTML invalide (mais HTML valide) et que les autres alternatives sont moins lisibles. Sinon, utilisez simplement <input checked> car il est plus court.

<input ... checked />
<input ... checked="checked" />

Ceux-ci sont également valables. Et en JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
34

vous le voulez, je pense: checked='checked'

7
Johnny Craig
  1. vérifié 
  2. vérifié = ""
  3. vérifié = "vérifié"

    sont équivalents;


selon spéc case à cocher '---- ⓘ vérifié = "vérifié" ou "" (chaîne vide) ou vide Spécifie que l'élément représente un contrôle sélectionné .--- '

5
wengeezhang

C'est une ville assez folle que le seul moyen de rendre false vérifié est d'omettre les valeurs. Avec Angular 1.x, vous pouvez faire ceci:

  <input type="radio" ng-checked="false">

ce qui est beaucoup plus sain d'esprit, si vous devez le décocher.

2
Alexander Mills