web-dev-qa-db-fra.com

En html5 pour définir une case à cocher comme cochée, dois-je simplement utiliser cochée (comme propriété) ou cochée = "cochée" (comme attribut)?

Actuellement, dans notre plugin, nous configurions les cases à cocher comme vérifiées en définissant

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

C'était pour préserver la compatibilité xhtml. Je suis plus habitué à définir les chèques en tant que propriété

<input type="checkbox" checked />

Quelle est la bonne façon de procéder en html5? Faut-il encore se soucier de la compatibilité xhtml?

htmlhtml5xhtml
44
Nicola Peluchetti

C'est un attribut dans les deux cas. Et il définit une valeur (la même valeur, true) sur une propriété DOM du nœud d'élément dans les deux cas.

Dans la plupart des cas, peu importe la syntaxe que vous utilisez. Cependant, il y a quelques points à noter:

  • Si vous utilisez HTML5 dans la sérialisation XML ("XHTML5"), vous devez utiliser checked="checked".
  • Dans le style, les syntaxes ne sont pas tout à fait équivalentes lors de l'utilisation de sélecteurs d'attributs (la forme plus courte ne correspond pas à [checked=checked]), mais cela n'a pas d'importance dans la pratique: [checked] correspond aux cases cochées dans les deux cas.
  • La syntaxe maladroite checked="checked" est une valeur résiduelle de SGML et inclus à des fins de compatibilité uniquement, il peut donc donner à votre code un aspect démodé (ce qui importe rarement).
39
Jukka K. Korpela
<!-- Default to unchecked -->
<input type="checkbox">

<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />

<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>

Source: http://css-tricks.com/indeterminate-checkboxes/

25
user1649331

Checked est un attribut booléen en HTML 5. Une vraie valeur est indiquée par l'attribut présent et une fausse valeur est indiquée par son absence. S'il est présent, sa valeur doit être vide ou définie sur le nom de la propriété checked="checked". L'une ou l'autre de ces formes est correcte:

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

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

11
jncraton

Vous vous souciez de la compatibilité XHTML en HTML5, si vous créez des documents qui utilisent la sérialisation XHTML de HTML5, soit exclusivement en servant le document avec un application/xhtml+xml type mime, ou création d'un document polyglotte pouvant être servi comme application/xhtml+xml ou comme text/html (le type mime html "normal").

Si vous utilisez uniquement text/html, vous n'avez pas besoin de vous soucier de la syntaxe XHTML. Cependant, vous pouvez utilisez la syntaxe à fermeture automatique de style XML lors de l'incorporation de SVG ou de MathML dans votre page. (SVG est largement pris en charge dans les derniers navigateurs, MathML moins.) Vous pouvez également utiliser /> pour terminer void Éléments HTML tels que méta, lien, entrée, img, etc., mais cela n'a aucun effet différent de l'utilisation de > pour terminer ces éléments.

Un petit commentaire sur la terminologie. Dans le balisage, dans le langage courant, soit checked ou checked="checked" est un "attribut". Une "propriété" est autre chose.

5
Alohci

Selon http://www.w3.org/TR/html-markup/input.checkbox.html c'est un attribut

0
Dirk McQuickly