04.04.2025

Valores Corretos para os Atributos checked e selected em HTML

Resposta Rápida

Em HTML, atributos booleanos como checked e selected são interpretados como verdadeiro se estiverem presentes. Para que um atributo seja considerado falso, basta simplesmente omiti-lo.

Checkbox não selecionado:

<!-- Checkbox regular aguardando seleção -->
<input type="checkbox" name="opcao">

Opção não selecionada:

<select>
  <option value="opcao1">Opção 1</option>
</select>

Ou seja, a ausência do atributo é interpretada como falso, e sua presença como verdadeiro. É aconselhável não usar valores como "false" ou "0".

Valores Vazios e Inválidos? O Resultado é o Mesmo!

Um checkbox permanecerá marcado mesmo que o atributo checked receba um valor vazio ou inválido. HTML foca na presença do atributo checked, não em seu valor.

<!-- Eu apareço vazio, mas ainda estou marcado -->
<input type="checkbox" checked="">
<!-- Um checkbox típico com marcação, definitivamente marcado -->
<input type="checkbox" checked="checked">
<!-- Parece que eu deveria ser falso, mas segundo as regras do HTML, estou marcado! -->
<input type="checkbox" checked="false">
<!-- Sem dúvida, marcado -->
<input type="checkbox" checked="CHECKED">

Lembre-se de que ao trabalhar com XHTML, você deve usar checked="".

Funcionalidades Interessantes dos Navegadores

Ferramentas de desenvolvimento como Firebug ou Ferramentas de Desenvolvedor do IE8 podem exibir checked de maneira diferente, mas o princípio geral permanece o mesmo — todos os checkboxes com o atributo checked estarão marcados. Os navegadores lidam bem com essas nuances!

O Significado da Verdade e da Falsidade no HTML5

O HTML5 afirma que a presença de um atributo booleano em um elemento é equivalente a verdadeiro. checked e selected precisam simplesmente existir para significar verdadeiro. Caso contrário, estamos lidando com falsidade. O importante aqui é a simplicidade e clareza.

Visualização

Analogamente, você pode pensar nos atributos checked e selected em HTML como um interruptor de luz:

Posições do interruptor de luz:

[ON] = "checked" ou "selected"  // Luz da Verdade!
[OFF] = nenhum atributo          // Escuridão da Falsidade.

💡🔼: A luz está acesa – atributo está presente. A verdade prevalece!
💡🔽: A luz está apagada – atributo está ausente. O mundo é envolvido pela falsidade.

Quando você acende a luz, você sinaliza a verdade. Nenhum rótulo "true" é necessário. Quando você apaga a luz, você permanece na escuridão da falsidade. E novamente, o rótulo "false" é desnecessário.

Curso Expresso sobre a Ação dos Atributos Booleanos

Comportamento do Checkbox

Em todos os navegadores modernos, um checkbox será marcado se tiver o atributo checked, independentemente do seu valor:

<!-- Checkboxes marcados. Para todos e para todas! -->
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
<input type="checkbox" checked="CHECKED">
<input type="checkbox" checked="true">
<input type="checkbox" checked="false">

Recursos do Select Dropdown

Uma opção em um elemento select será considerada selecionada se tiver o atributo selected. O valor deste atributo não importa:

<!-- Área de seleção: e o escolhido será... -->
<select>
  <option value="1">Não selecionada</option>
  <option value="2" selected>Selecionada</option>
</select>

Regras de Validade do HTML5

Para atender aos padrões do HTML5, um atributo deve ser uma string vazia ou corresponder ao nome ASCII do atributo. No entanto, o HTML não é rigoroso e considera checkboxes marcados e opções selecionadas, mesmo que seus valores sejam inválidos.

Dicas Profissionais para Desenvolvedores

Compreender essas nuances ajuda a escrever um código verdadeiramente previsível. Olhando para o futuro, aqui estão alguns conselhos:

• Não aplique os atributos checked ou selected se os elementos não devem ser marcados ou selecionados.
• Foque na confiabilidade e estabilidade entre diferentes navegadores. Evite usar os valores "false" e remova cuidadosamente quaisquer atributos desnecessários.
• Seja extremamente cauteloso ao manipular o DOM — mudar o valor de um atributo pode não refletir em seu estado atual.

Recursos Úteis

1. <input>: Elemento de Entrada (Entrada de Formulário) - HTML: Linguagem de Marcação de Hipertexto | MDN - O MDN sempre ajuda com perguntas sobre interação com elementos HTML <input>.
2. Padrão HTML — a especificação oficial do HTML para elementos de formulário descrevendo sua funcionalidade completa e precisa.
3. Padrão HTML — uma análise detalhada do comportamento do atributo checked em HTML.
4. Elementos de Formulário HTML — o site W3Schools fornece um tutorial com exemplos práticos.
5. "Checkbox Hack" (e o que fazer com isso) | CSS-Tricks — experimentando com checkboxes em CSS: explore e divirta-se.
6. <option>: Elemento de Opção HTML - HTML: Linguagem de Marcação de Hipertexto | MDN` — visão geral do MDN sobre HTML <option> e o uso do atributo selected.
7. Tag HTML select — referência do W3Schools com exemplos prontos para melhor compreensão e aplicação.

Video

Navigation