Qual é o valor correto para o atributo desativado?


167

Qual é o valor correto para o disabledatributo para uma caixa de texto ou área de texto?

Já vi o seguinte usado antes:

<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />

5
Os atributos precisam ter um valor, mesmo para os atributos cuja mera presença sinaliza que algo deve ser feito. disabled="false"ainda desativaria o elemento, porque é a PRESENÇA disabledque aciona a desativação, não o valor do atributo.
Marc B

O link que eu postei como um comentário à confirma a resposta de js1568 / esclarece o que @ Marc B está dizendo: whatwg.org/specs/web-apps/current-work/multipage/...
James Allardice

possível duplicata de stackoverflow.com/questions/1033944/... porque ambos são atributos booleanos (não assinalado)
Ciro Santilli郝海东冠状病六四事件法轮功

Respostas:


148
  • Para XHTML, <input type="text" disabled="disabled" />é a marcação válida.
  • Para HTML5, <input type="text" disabled />é válido e usado pelo W3C em suas amostras.
  • De fato, ambas as formas funcionam em todos os principais navegadores.

15
No html5, a entrada é um elemento nulo e não precisa de uma barra com fechamento automático: w3.org/TR/html5/syntax.html#void-elements e w3.org/TR/html5/syntax.html#syntax-start- tag
Daniel

1
@ Daniel K. Ele não precisa, a menos que faça a marcação HTML / XML poliglota.
Patanjali

108

Especificação HTML5 :

http://www.w3.org/TR/html5/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute :

O atributo de conteúdo verificado é um atributo booleano

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

A presença de um atributo booleano em um elemento representa o valor verdadeiro e a ausência do atributo representa o valor falso.

Se o atributo estiver presente, seu valor deverá ser a cadeia vazia ou um valor que não diferencia maiúsculas de minúsculas ASCII do nome canônico do atributo, sem espaços em branco à esquerda ou à direita.

Conclusão :

A seguir, são válidos, equivalentes e verdadeiros :

<input type="text" disabled />
<input type="text" disabled="" />
<input type="text" disabled="disabled" />
<input type="text" disabled="DiSaBlEd" />

O seguinte é inválido :

<input type="text" disabled="0" />
<input type="text" disabled="1" />
<input type="text" disabled="false" />
<input type="text" disabled="true" />

A ausência do atributo é a única sintaxe válida para false :

<input type="text" />

Recomendação

Se você se preocupa em escrever XHTML válido, use disabled="disabled", pois <input disabled>é inválido e outras alternativas são menos legíveis. Caso <input disabled>contrário , basta usar , pois é mais curto.


3
Nota: Se você usa AngularJS e precisa vincular o estado desativado a uma variável, pode usar ng-disabled. Similar com outros atributos como este, geralmente eles têm inteligente ng-*homólogo
jakub.g

5
disabled={true}funciona no código JSX do reactJs, mas tenho certeza de que ele seria transpilado para um dos formatos HTML5 válidos / permitidos apenas.
RBT 23/10

1

Eu apenas tentei tudo isso e, para o IE11, a única coisa que parece funcionar é desativada = "true". Valores desabilitados ou nenhum valor fornecido não funcionaram. Por uma questão de fato, o jsp obteve um erro igual para todos os campos, então tive que especificar disabled = "true" para que isso funcionasse.


1
A pergunta do OP era sobre HTML (isto é, controles do lado do cliente). Você está olhando para os controles do lado do servidor; aqueles têm convenções diferentes. Você notará a diferença se inspecionar a saída HTML do seu JSP. Se você ainda tiver dúvidas, tente este violão no IE11.
Ruud Helderman

Eu vi a mesma coisa no lado do cliente no IE 11. O IE 11 força algo a existir, portanto, apenas definir resultados desabilitados em desabilitado = ""
Robert Achmann 7/17

1

No HTML5, não existe um valor correto; todos os principais navegadores não se importam com o atributo, apenas estão verificando se o atributo existe para que o elemento seja desativado.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.