YouTip

# HTML readonly Attribute The `readonly` attribute is a boolean attribute used to specify that an input field is read-only. This tutorial provides a comprehensive guide on how to use the `readonly` attribute, its browser support, and how it differs from other similar attributes. --- ## Introduction When the `readonly` attribute is present on an `` element, the user cannot modify its value. However, unlike disabled fields, a user can still tab to the element, highlight the text, and copy it. This attribute is highly useful when you want to present information to the user that must be submitted with the form but should not be altered directly (e.g., a pre-filled country code, a calculated total, or system-generated IDs). --- ## Syntax In HTML5, `readonly` is a boolean attribute. Its presence alone enables the read-only state. ```html ``` ### XHTML vs. HTML5 In XHTML, attribute minimization is forbidden. Therefore, the attribute must be defined with its value: ```xml ``` --- ## Code Examples ### Basic Example Below is a simple HTML form containing a read-only input field. The value "Norway" is displayed but cannot be edited by the user. When the form is submitted, the value "Norway" will still be sent to the server. ```html

Country:

City:

``` ### Dynamic Read-Only Toggle with JavaScript You can use JavaScript to dynamically toggle the `readonly` state based on user interaction (e.g., checking a checkbox to unlock a field). ```html

Username: Allow editing username

``` --- ## Key Differences: `readonly` vs. `disabled` It is common to confuse the `readonly` attribute with the `disabled` attribute. The table below highlights their key differences: | Feature | `readonly` | `disabled` | | :--- | :--- | :--- | | **User Modification** | Prevented | Prevented | | **Focusable (via Tab key)** | Yes | No | | **Selectable & Copyable** | Yes | No | | **Submitted with Form** | Yes (Value is sent to the server) | No (Value is ignored during submission) | | **CSS Styling** | Matches `:read-only` pseudo-class | Matches `:disabled` pseudo-class | --- ## Supported Input Types The `readonly` attribute can be applied to input types that allow text entry. It is ignored by input types that rely on user clicks or selections (like checkboxes, radio buttons, or file uploads). * **Supported Types:** `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `datetime-local`, `month`, `week`, `time`, `number`. * **Unsupported Types:** `checkbox`, `radio`, `file`, `range`, `color`, `submit`, `button`, `image`, `hidden`. --- ## Browser Support The `readonly` attribute is fully supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Apple Safari * Opera