En html5 para establecer una casilla de verificación como marcada, ¿debería simplemente usar marcada (como propiedad) o marcada = “marcada” (como atributo)?

4 minutos de lectura

avatar de usuario
Nicola Peluchetti

Actualmente, en nuestro complemento, estábamos configurando las casillas de verificación como marcadas por la configuración

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

Esto fue para preservar la compatibilidad con xhtml. Estoy más acostumbrado a establecer marcado como una propiedad

<input type="checkbox" checked />

¿Cuál es la forma correcta de proceder en html5? ¿Deberíamos preocuparnos por la compatibilidad con xhtml?

  • Tenga en cuenta que no necesita el /> en HTML5, tampoco.

    – Marcos Reed

    8 de septiembre de 2012 a las 13:52

  • Eso no es una propiedad, sigue siendo un atributo. Solo está configurando la propiedad si lo hace en un script, o en cualquier otro lugar que lo llame propiedad. Pero en el marcado HTML y XML, se llama atributo.

    – BoltClock

    8 de septiembre de 2012 a las 14:49


Es un atributo en cualquier caso. Y establece un valor (el mismo valor, true) en una propiedad DOM del nodo del elemento en cualquier caso.

Para la mayoría de los propósitos, no importa qué sintaxis use. Sin embargo, hay algunos puntos a tener en cuenta:

  • Si usa HTML5 en la serialización XML (“XHTML5”), debe usar checked="checked".
  • En estilo, las sintaxis no son del todo equivalentes cuando se usan selectores de atributos (la forma más corta no coincide [checked=checked]), pero esto no importa en la práctica: [checked] coincide con las casillas marcadas en cualquier caso.
  • La sintaxis torpe checked="checked" es un remanente de SGML y se incluye solo por compatibilidad, por lo que puede hacer que su código parezca anticuado (lo que rara vez importa).

  • ¿Fue esa sintaxis un vestigio de SGML que se llevó a XHTML (a diferencia de XML)?

    – BoltClock

    08/09/2012 a las 14:50


  • los checked="checked" la sintaxis también se llevó a XML. HTML5 no se basa en SGML o XML, por lo que puede definir su propia sintaxis de una manera más natural: un atributo “booleano” es solo un nombre (sin necesidad de explicarlo como una forma reducida de sintaxis nombre=valor).

    – Jukka K. Korpela

    8 de septiembre de 2012 a las 15:08

  • @DanDascalescu Cuando use jQuery para establecer un atributo, deberá llamar a .prop(‘checked’, ‘checked’) porque prop(‘checked’) obviamente solo recuperará el estado de la casilla de verificación y attr no funcionará. [Attributes vs. Properties: api.jquery.com/prop ]

    – Randall Flagg

    24/02/2016 a las 16:40


<!-- Default to unchecked -->
<input type="checkbox">

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

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

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

avatar de usuario
jncraton

Checked es un atributo booleano en HTML 5. La presencia del atributo indica un valor verdadero y la ausencia indica un valor falso. Si está presente, su valor debe estar vacío o establecerse en el nombre de la propiedad. checked="checked". Cualquiera de estas formas es correcta:

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

https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

  • Este es uno de los mejores ejemplos de por qué diseñar (fallar) por comité puede ser algo malo. Verdadero/falso para el valor tiene un gran sentido intuitivo, pero supongo que W3C no pensó que fuera lo suficientemente confuso.

    – AR

    11/09/2015 a las 13:40

  • @Gamadril Gracias! He actualizado la URL en mi respuesta. En el futuro, siéntete libre de hacer modificaciones como esta tú mismo. La colaboración es lo que hace que las respuestas en este sitio sean excelentes.

    – jncratón

    26 de febrero de 2021 a las 14:56


Le importa la compatibilidad con XHTML en HTML5, si está creando documentos que usan la serialización XHTML de HTML5, ya sea exclusivamente sirviendo el documento con un application/xhtml+xml tipo mimo, o creando un documento políglota que se puede servir como application/xhtml+xml o como text/html (el tipo mimo html ‘normal’).

Si solo estás usando text/html, entonces no necesita preocuparse por la sintaxis XHTML. Sin embargo, usted mayo utilice la sintaxis de cierre automático al estilo XML cuando incruste SVG o MathML en su página. (SVG es ampliamente compatible con los navegadores más recientes, MathML menos). También puede usar /> para terminar vacío Elementos HTML como meta, enlace, entrada, img, etc., pero esto no tiene un efecto diferente al uso > para acabar con esos elementos.

Un comentario menor sobre la terminología. En el marcado, en el lenguaje común, ya sea checked o checked="checked" es un “atributo”. Una “propiedad” es otra cosa.

De acuerdo a http://www.w3.org/TR/html-markup/input.checkbox.html es un atributo

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad