What is the correct readonly attribute syntax for input text elements?

Question

As Most, I am familiar with the readonly attribute for text input, But while reading code from other websites (a nasty habit of mine ) I saw more than one implementation for this attribute:

<input type="text" value="myvalue" class="class anotherclass" readonly >

and

<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" >

and I have even seen

<input type="text" value="myvalue" class="class anotherclass" readonly="true" >

.. And I believe I saw even more, but can not recall the exact syntax now..

So, which one is the correct one that I should use?

Overskirt

possible duplicate of stackoverflow.com/questions/1033944/… because both are boolean attributes (not flagged), closely related but focuses on implementation statuses instead of standard: what is the difference between readonly="true" & readonly="readonly" – Cinema

Answer 1

From w3:

readonly = "readonly" or "" (empty string) or empty - Specifies that element represents a control whose value is not meant to be edited.

So basically it's the same.

Bashibazouk

Even if it does work, that doesn't mean you should use it. My recommendation is to stick to the standard. Don't introduce errors just because you can. – Peracid

@MrLister The standard recommends sticking to the standard, which, even though it's circular, carries more weight :) – Elflock

Answer 2

HTML5 spec:

http://www.w3.org/TR/html5/forms.html#attr-input-readonly :

The readonly attribute is a boolean attribute

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

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Conclusion:

The following are valid, equivalent and true:

<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />
<input type="text" readonly="ReAdOnLy" />

The following are invalid:

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

The absence of the attribute is the only valid syntax for false:

<input type="text"/>

Recommendation

If you care about writing valid XHTML, use readonly="readonly", since <input readonly> is invalid and other alternatives are less readable. Else, just use <input readonly> as it is shorter.

Cinema

Thanks for pointing out what an absolute brain fart the spec is: by design, you cannot calculate a value for the attribute to toggle it (e.g. - templated HTML on either server - PHP/JSP/ASP - or client - Angular - with true/false in the attribute value). You must REMOVE the attribute to turn it off. NOBODY in the committee realized what a foul-up that was??? – Purine

@Purine haha, true, it is a bit annoying. – Cinema

Very well explained. This should've been the accepted answer. – Stipple

Answer 3

is should be

<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" />

Obese

This is only one of the three valid forms. Ciro Santilli's answer is much better. – Milburr

Answer 4

The best practice is to use simply readonly. That makes it the most semantic and succinct.

Believe it or not,

readonly="false"

returns true;

To detect in JavaScript if an element is read-only, use this syntax:

element.readOnly

Vasiliki