Qual è il valore corretto per l'attributo disabilitato?


167

Qual è il valore corretto per l' disabledattributo per una casella di testo o un'area di testo?

Ho visto quanto segue usato prima:

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

5
Gli attributi devono avere un valore, anche per gli attributi la cui semplice presenza segnala che bisogna fare qualcosa. disabled="false"disabiliterebbe comunque l'elemento, perché è la PRESENZA disabledche attiva la disabilitazione, non il valore dell'attributo.
Marc B,

Il link che ho pubblicato come commento alla risposta di js1568 conferma / chiarisce cosa dice @Marc B: whatwg.org/specs/web-apps/current-work/multipage/…
James Allardice,

possibile duplicato di stackoverflow.com/questions/1033944/… perché entrambi sono attributi booleani (non contrassegnati)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Risposte:


148
  • Per XHTML, <input type="text" disabled="disabled" />è il markup valido.
  • Per HTML5, <input type="text" disabled />è valido e utilizzato da W3C sui propri campioni.
  • In effetti, entrambi i modi funzionano su tutti i principali browser.

15
In html5, l'input è un elemento vuoto e non necessita di una barra che si chiude automaticamente: w3.org/TR/html5/syntax.html#void-elements e w3.org/TR/html5/syntax.html#syntax-start- tag
Daniel

1
@Daniel K. Non ne ha bisogno, a meno che non esegua markup HTML / XML poliglotta.
Patanjali,

108

Specifiche HTML5 :

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

L'attributo del contenuto verificato è un attributo booleano

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

La presenza di un attributo booleano su un elemento rappresenta il valore vero e l'assenza dell'attributo rappresenta il valore falso.

Se l'attributo è presente, il suo valore deve essere la stringa vuota o un valore che corrisponde a una corrispondenza maiuscole / minuscole ASCII per il nome canonico dell'attributo, senza spazi bianchi iniziali o finali.

Conclusione :

Sono validi, equivalenti e veri :

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

Non sono validi :

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

L'assenza dell'attributo è l'unica sintassi valida per false :

<input type="text" />

Raccomandazione

Se ti interessa scrivere XHTML valido, usa disabled="disabled", poiché <input disabled>non è valido e altre alternative sono meno leggibili. Altrimenti, usa solo <input disabled>perché è più corto.


3
Nota: se si utilizza AngularJS e si deve associare lo stato disabilitato a una variabile, è possibile utilizzare ng-disabledinvece. Simile con altri attributi come questo, generalmente hanno una ng-*controparte intelligente
jakub.g

5
disabled={true}funziona con il codice JSX di reattJs ma sono sicuro che verrebbe trasferito in uno dei formati HTML5 validi / consentiti.
RBT

1

Ho appena provato tutti questi, e per IE11, l'unica cosa che sembra funzionare è disabilitato = "vero". I valori di disabilitato o nessun valore dato non funzionavano. È un dato di fatto, il jsp ha ricevuto un errore che è uguale per tutti i campi, quindi ho dovuto specificare disabled = "true" per farlo funzionare.


1
La domanda di OP riguardava l'HTML (ovvero i controlli sul lato client). Stai guardando i controlli sul lato server; quelli hanno convenzioni diverse. Noterai la differenza se controlli l'output HTML dal tuo JSP. Se hai ancora dubbi, prova questo violino in IE11.
Ruud Helderman,

Ho visto la stessa cosa sul lato client su Internet Explorer 11. IE 11 impone l'esistenza di qualcosa, quindi solo l'impostazione dei risultati disabilitati in disabled = ""
Robert Achmann,

1

In HTML5, non esiste un valore corretto, tutti i principali browser non si preoccupano veramente dell'attributo, stanno solo controllando se l'attributo esiste, quindi l'elemento è disabilitato.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.