HTML - attributes - readonly

revision:


Content

"readonly" attribute : boolean attribute that specifies that field is readonly syntax some examples


"readonly" attribute : boolean attribute that specifies that field is readonly

top

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). The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.
A form will still submit an input field that is readonly, but will not submit an input field that is disabled!

The readonly attribute is supported by "text", "search", "url", "tel", "email", "password", "date", "month", "week", "time", "datetime-local", and "number" <input> types and the <textarea> form control elements.

If present on any of these input types and elements, the "":read-only" pseudo class will match. If the attribute is not included, the ":read-write" pseudo class will match.


syntax

top

<element readonly></element>

readonly means the content cannot be modified in an HTML document.


some examples

top




codes:
                    <form style="margin-left:3vw;" action="/action_page.php">
                        <label for="fname">First name:</label>
                        <input type="text" id="fname" name="fname"><br><br>
                        <label for="country">Country:</label>  
                        <input type="text" id="country" name="country" value="Norway" readonly><br><br>                 
                        <input type="submit" value="Submit">
                    </form>
                
codes:
                    <textarea style="margin-left:3vw;" rows="4" cols="50" readonly> Here you will learn how 
                    to make a website. We just ask for some willingness to spend time and effort on understanding 
                    the basics and develop some logical reasoning needed for front-end web construction. </textarea>