From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/attributes%2Freadonly.html | 144 ++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 devdocs/html/attributes%2Freadonly.html (limited to 'devdocs/html/attributes%2Freadonly.html') diff --git a/devdocs/html/attributes%2Freadonly.html b/devdocs/html/attributes%2Freadonly.html new file mode 100644 index 00000000..3846fd3c --- /dev/null +++ b/devdocs/html/attributes%2Freadonly.html @@ -0,0 +1,144 @@ +

HTML attribute: readonly

The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control.

+

Try it

+
+

Overview

+
+

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.

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.

The attribute is not supported or relevant to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image.

Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

When an input has the readonly attribute, the :read-only pseudo-class also applies to it. Conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class.

+
+

Attribute interactions

+
+

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

Because a read-only field cannot have its value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified.

The only way to modify dynamically the value of the readonly attribute is through a script.

Note: The required attribute is not permitted on inputs with the readonly attribute specified.

+
+

Usability

+

Browsers display the readonly attribute.

+

Constraint validation

+

If the element is read-only, then the element's value can not be updated by the user, and does not participate in constraint validation.

+

Example

+ +

HTML

+
+

html

+
<div class="group">
+  <input type="text" value="Some value" readonly="readonly" id="text" />
+  <label for="text">Text box</label>
+</div>
+<div class="group">
+  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
+  <label for="date">Date</label>
+</div>
+<div class="group">
+  <input type="email" value="Some value" readonly="readonly" id="email" />
+  <label for="email">Email</label>
+</div>
+<div class="group">
+  <input type="password" value="Some value" readonly="readonly" id="pwd" />
+  <label for="pwd">Password</label>
+</div>
+<div class="group">
+  <textarea readonly="readonly" id="ta">Some value</textarea>
+  <label for="ta">Message</label>
+</div>
+
+
+

Result

+
+ + +
+

Specifications

+
+ + +
Specification
HTML Standard
# the-readonly-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
readonly1121≤6≤12.1≤44.4184≤12.1≤3.21.0
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
readonly11215.5≤12.114.4184≤12.111.0
+

html.elements.input.readonly

+

BCD tables only load in the browser

+

html.elements.textarea.readonly

+

BCD tables only load in the browser

+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly +

+
-- cgit v1.2.3