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.

Answer 2

There is documentation for this, the official term for these kind of attributes is "Boolean Attributes"

The official standard is on the W3C website http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

It says that:

Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".

For your XHTML mark-up to be valid, you must use the long-hand

<option selected="selected"> 

For HTML, you can use the minimised form

<option selected> 

Answer 3

@Spudley has already given you the link to the XHTML specs to provide the official documentation.

The choice of making both the attribute and the value the same in XHTML was not entirely arbitrary though.

As @Sohnee says, XHTML 1.0 was a reformulation of HTML4.01 in XML and the goal was to stick to HTML 4 patterns as much as possible to make the transition as easy as possible for web authors.

HTML has always supported disabled="disabled" as a valid form for boolean attributes, and the reason for that is it permitted the shortened attribute disabled to be defined in SGML. (Note @Thaddee Tyl's "bit odd" comment)

In SGML, the disabled on it's own attribute isn't the attribute name without a value, it's the attribute value without a name. i.e. the name is inferred from the value. To make all this work in SGML and be backward compatible with what browsers have always done, the name and the value have to be defined to be the same.

Note that this only affects SGML based validation. Browsers' parser logic isn't SGML based and has never cared for this subtlety, hence you can, in practice put in whatever value for the attribute you like.

HTML5 validation isn't SGML based either, so the restriction has been relaxed. disabled="" is now valid. disabled="true" and disabled="false" are not valid though, because disabled="false" is confusing, since as you note, it disables, not enables the control. See http://www.w3.org/TR/html5/common-microsyntaxes.html#boolean-attributes for details.

Answer 4

An html4 document specifies this:

Boolean attributes may legally take a single value: the name of the attribute itself.

Boolean attributes were always a bit odd in the sgml world, so really you can put anything you want. Browser implementation is all that matters.