html - Why do we need disabled="disabled"?

Question

It seems to be common consensus that for XHTML attributes which do not require any value, we should repeat the attribute name. E.g. <input disabled> in correct XHTML is <input disabled="disabled"/>.

However, we can get the HTML <input> element to be disabled using any of the following:

• <input disabled=" "/>

• <input disabled=""/>

• <input disabled="asdfg">

• <input disabled="false">

Is there actually an official rule to use disabled="disabled"? Or is it a matter of taste?

Answer 1

The officially correct xhtml syntax is disabled="disabled".

The reason for this is that xhtml is an XML syntax, and XML requires that attributes have values. The xhtml specs also explicitly specify that the value should be "disabled".

The reason for the choice of this value over any other possible value was fairly arbitrary; they simply decided that all previously boolean attributes should be converted to XML format by making their value the same as their name.

So yes, there is an official spec which says you must use that full syntax. But it only applies to xhtml documents. You can find it here (if you search for disabled in that page, you will find that it is listed as only allowing "disabled" as the value. Similarly for the readonly and checked attributes).

Plain HTML - both v4 and v5 - isn't tied to XML's restrictions in this way, and doesn't require an attribute value for disabled; the mere existence of the disabled attribute is sufficient to disable the field, regardless of whether you have a value for the attribute, or what that value is.

The final upshot of all this is that if you are using an XHTML doctype, or you wish to remain XML-compliant, you should use disabled="disabled". If you're not using XHTML and you don't care about having valid XML syntax, then you can just use disabled on its own, or with any attribute value you like.

One other thing I would note (getting slightly off topic, but may be relevant) is that this may have an impact on any CSS or JQuery code that may reference the field. For example, I've seen people using JQuery selectors such as $('[disabled=disabled]'), and similar in CSS. This obviously relies on the attribute having the expected value. Therefore, if you're going to reference a boolean attribute like this in a selector, you should reference it without a value, like so: $('[disabled]') as this will work whatever the attribute is set to.