What is the correct readonly attribute syntax for input text elements?
HtmlFormsReadonlyInput FieldHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
is should be
<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" />