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

HtmlFormsReadonlyInput Field

Html 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" />

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionObmerk KronenView Question on Stackoverflow
Solution 1 - HtmlCiro Santilli Путлер Капут 六四事View Answer on Stackoverflow
Solution 2 - HtmlVuckoView Answer on Stackoverflow
Solution 3 - Htmlbillah77View Answer on Stackoverflow