Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 749
Obmerk Kronen Avatar asked Apr 19 '13 16:04

Obmerk Kronen


People also ask

What is the correct syntax to make element read-only?

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).

How do you use readonly in a TextBox?

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.

What is the readonly in HTML?

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.

What is read-only attribute?

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.


1 Answers

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.