new repository

1 files changed, 144 insertions, 0 deletions

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 @@
+<header><h1>HTML attribute: readonly</h1></header><div class="section-content"><p>The Boolean <code>readonly</code> attribute, when present, makes the element not mutable, meaning the user can not edit the control.</p></div>
+<h2 id="try_it">Try it</h2>
+<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-readonly.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
+<h2 id="overview">Overview</h2>
+<div class="section-content">
+<p>If the <code>readonly</code> attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation.</p> <p>The <code>readonly</code> attribute is supported by <code><a href="../element/input/text">text</a></code>, <code><a href="../element/input/search">search</a></code>, <code><a href="../element/input/url">url</a></code>, <code><a href="../element/input/tel">tel</a></code>, <code><a href="../element/input/email">email</a></code>, <code><a href="../element/input/password">password</a></code>, <code><a href="../element/input/date">date</a></code>, <code><a href="../element/input/month">month</a></code>, <code><a href="../element/input/week">week</a></code>, <code><a href="../element/input/time">time</a></code>, <code><a href="../element/input/datetime-local">datetime-local</a></code>, and <code><a href="../element/input/number">number</a></code> <code><a href="../element/input"><code>&lt;input&gt;</code></a></code> types and the <code><a href="../element/textarea"><code>&lt;textarea&gt;</code></a></code> form control elements. If present on any of these input types and elements, the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"><code>:read-only</code></a></code> pseudo class will match. If the attribute is not included, the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write"><code>:read-write</code></a></code> pseudo class will match.</p> <p>The attribute is not supported or relevant to <code><a href="../element/select"><code>&lt;select&gt;</code></a></code> or input types that are already not mutable, such as <a href="../element/input/checkbox">checkbox</a> and <a href="../element/input/radio">radio</a> or cannot, by definition, start with a value, such as the <a href="../element/input/file">file</a> input type. <a href="../element/input/range">range</a> and <a href="../element/input/color">color</a>, as both have default values. It is also not supported on <a href="../element/input/hidden">hidden</a> 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 <code>image</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> 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 <code>readonly</code> attribute does not apply.</p> </div> <p>When an input has the <code>readonly</code> attribute, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"><code>:read-only</code></a> pseudo-class also applies to it. Conversely, inputs that support the <code>readonly</code> attribute but don't have the attribute set match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write"><code>:read-write</code></a> pseudo-class.</p>
+</div>
+<h3 id="attribute_interactions">Attribute interactions</h3>
+<div class="section-content">
+<p>The difference between <a href="disabled"><code>disabled</code></a> and <code>readonly</code> 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.</p> <p>Because a read-only field cannot have its value changed by a user interaction, <a href="required"><code>required</code></a> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> <p>The only way to modify dynamically the value of the readonly attribute is through a script.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <code>required</code> attribute is not permitted on inputs with the <code>readonly</code> attribute specified.</p> </div>
+</div>
+<h3 id="usability">Usability</h3>
+<div class="section-content"><p>Browsers display the <code>readonly</code> attribute.</p></div>
+<h3 id="constraint_validation">Constraint validation</h3>
+<div class="section-content"><p>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.</p></div>
+<h2 id="example">Example</h2>
+
+<h3 id="html">HTML</h3>
+<div class="section-content"><div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="RJCuRfbiBrnq5z4Kdk+qq+xa9m0RIyhhUiI4LLrqoZw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Some value<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Text box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-01-01<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Date<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Some value<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Some value<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pwd<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ta<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Some value<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ta<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div></div>
+<h3 id="result">Result</h3>
+<div class="section-content"><div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="Example sample" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/readonly/runner.html?id=example" loading="lazy"></iframe>
+</div></div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute">HTML Standard <br><small># the-readonly-attribute</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>readonly</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">≤6</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">≤4</td>
+<td class="bc-supports-yes">4.4</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">≤3.2</td>
+<td class="bc-supports-yes">1.0</td>
+</tr></tbody>
+</table></div>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>readonly</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">5.5</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">4.4</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">1.0</td>
+</tr></tbody>
+</table></div>
+<h3 id="html.elements.input.readonly">html.elements.input.readonly</h3>
+<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p>
+<h3 id="html.elements.textarea.readonly">html.elements.textarea.readonly</h3>
+<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"><code>:read-only</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write"><code>:read-write</code></a>
+</li> <li><a href="../element/input"><code>&lt;input&gt;</code></a></li> <li><a href="../element/select"><code>&lt;select&gt;</code></a></li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly</a>
+  </p>
+</div>