66

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?

Obmerk Kronen
  • 15,619
  • 16
  • 66
  • 105
  • 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"](http://stackoverflow.com/questions/6172911/what-is-the-difference-between-readonly-true-readonly-readonly) – Ciro Santilli OurBigBook.com Aug 14 '14 at 07:17

4 Answers4

79

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.

Community
  • 1
  • 1
Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
  • 7
    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??? – Roboprog Aug 19 '15 at 22:47
  • @Roboprog haha, true, it is a bit annoying. – Ciro Santilli OurBigBook.com Aug 20 '15 at 07:15
  • 2
    Very well explained. This should've been the accepted answer. – Nawed Khan Nov 30 '16 at 19:50
72

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.

erhun
  • 3,549
  • 2
  • 35
  • 44
Vucko
  • 20,555
  • 10
  • 56
  • 107
  • 15
    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. – Mr Lister Dec 19 '13 at 09:01
  • 2
    @MrLister The standard recommends sticking to the standard, which, even though it's circular, carries more weight :) – aross Jul 10 '14 at 15:37
4

is should be

<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" />
g00glen00b
  • 41,995
  • 13
  • 95
  • 133
billah77
  • 196
  • 1
  • 1
  • 13
0

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
Charles Owen
  • 2,403
  • 1
  • 14
  • 25