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?
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
Use the ReadOnly property to specify whether the contents of the TextBox control can be changed. Setting this property to true will prevent users from entering a value or changing the existing value. Note that the user of the TextBox control cannot change this property; only the developer can.
The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control. If the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.
Read-only is a file attribute which only allows a user to view a file, restricting any writing to the file. Setting a file to “read-only” will still allow that file to be opened and read; however, changes such as deletions, overwrites, edits or name changes cannot be made.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With