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?

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 Путлер Капут 六四事, Aug 14 '14 at 07:17

score 79 · Answer 1 · edited Jun 20 '20 at 09:12

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.

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
Very well explained. This should've been the accepted answer. — Nawed Khan, Nov 30 '16 at 19:50

score 73 · Accepted Answer · edited Feb 09 '17 at 07:31

73

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.

edited Feb 09 '17 at 07:31

erhun

3,371
2
31
43

answered Apr 19 '13 at 16:37

Vucko

19,890
7
55
105

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

score 4 · Answer 3 · edited May 09 '14 at 13:01

4

is should be

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

edited May 09 '14 at 13:01

g00glen00b

38,039
13
89
120

answered May 09 '14 at 12:39

billah77

186
1
1
12

This is only one of the three valid forms. Ciro Santilli's answer is much better. – ToolmakerSteve Sep 01 '16 at 08:30

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

3 Answers3

Linked

Related