new repository

1 files changed, 140 insertions, 0 deletions

diff --git a/devdocs/html/element%2Finput%2Freset.html b/devdocs/html/element%2Finput%2Freset.html
new file mode 100644
index 00000000..944b3e0c
--- /dev/null
+++ b/devdocs/html/element%2Finput%2Freset.html
@@ -0,0 +1,140 @@
+<header><h1>&lt;input type="reset"&gt;</h1></header><div class="section-content"><p><a href="../input"><code>&lt;input&gt;</code></a> elements of type <code>reset</code> are rendered as buttons, with a default <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event handler that resets all inputs in the form to their initial values.</p></div>
+<h2 id="try_it">Try it</h2>
+<div class="section-content">
+<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-reset.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the <a href="submit">submit button</a>).</p> </div>
+</div>
+<h2 id="value">Value</h2>
+<div class="section-content"><p>An <code>&lt;input type="reset"&gt;</code> element's <a href="../input#value"><code>value</code></a> attribute contains a string that is used as the button's label. Buttons such as <code>reset</code> don't have a value otherwise.</p></div>
+<h3 id="setting_the_value_attribute">Setting the value attribute</h3>
+<div class="section-content">
+<div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="y9upZyhUmZowaLPfEkynRvZ+cdp9NYVaRlmHmuuvlOo=" data-language="html"><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>reset<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>Reset the form<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+</pre>
+</div>
+<div class="code-example" id="sect2">
+
+<iframe class="sample-code-frame" title="Setting the value attribute sample" id="frame_setting_the_value_attribute" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/reset/runner.html?id=setting_the_value_attribute" loading="lazy"></iframe>
+</div>
+</div>
+<h3 id="omitting_the_value_attribute">Omitting the value attribute</h3>
+<div class="section-content">
+<p>If you don't specify a <code>value</code>, you get a button with the default label (typically "Reset," but this will vary depending on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>):</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="iAibKstbYIjQndax3V/srq8jblT4qs56bNSD7qLsw5g=" data-language="html"><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>reset<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+</pre>
+</div>
+<div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="Omitting the value attribute sample" id="frame_omitting_the_value_attribute" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/reset/runner.html?id=omitting_the_value_attribute" loading="lazy"></iframe>
+</div>
+</div>
+<h2 id="using_reset_buttons">Using reset buttons</h2>
+<div class="section-content"><p><code>&lt;input type="reset"&gt;</code> buttons are used to reset forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <a href="button"><code>&lt;input type="button"&gt;</code></a>, or better still, a <a href="../button"><code>&lt;button&gt;</code></a> element.</p></div>
+<h3 id="a_simple_reset_button">A simple reset button</h3>
+<div class="section-content">
+<p>We'll begin by creating a simple reset button:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="Opl3QihR5Mhz2wa3Xx50+WGt6GXfaqVID3Ye+VzwMjY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</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>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>example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Type in some sample text<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>input</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>example<span class="token punctuation">"</span></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 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 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>reset<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>Reset the form<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>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <p>This renders like so:</p>
+<div class="code-example" id="sect4">
+
+<iframe class="sample-code-frame" title="A simple reset button sample" id="frame_a_simple_reset_button" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/reset/runner.html?id=a_simple_reset_button" loading="lazy"></iframe>
+</div> <p>Try entering some text into the text field, and then pressing the reset button.</p>
+</div>
+<h3 id="adding_a_reset_keyboard_shortcut">Adding a reset keyboard shortcut</h3>
+<div class="section-content">
+<p>To add a keyboard shortcut to a reset button — just as you would with any <a href="../input"><code>&lt;input&gt;</code></a> for which it makes sense — you use the <a href="../../global_attributes#accesskey"><code>accesskey</code></a> global attribute.</p> <p>In this example, <kbd>r</kbd> is specified as the access key (you'll need to press <kbd>r</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="../../global_attributes#accesskey"><code>accesskey</code></a> for a useful list of those).</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="zbdhn8Y6s2WzA2+iVL+lInnHrsNFd+FZI6EfOCpygg0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</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>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>example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Type in some sample text<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>input</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>example<span class="token punctuation">"</span></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 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 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>reset<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>Reset the form<span class="token punctuation">"</span></span> <span class="token attr-name">accesskey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>r<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>div</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div>
+<div class="code-example" id="sect5">
+
+<iframe class="sample-code-frame" title="Adding a reset keyboard shortcut sample" id="frame_adding_a_reset_keyboard_shortcut" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/reset/runner.html?id=adding_a_reset_keyboard_shortcut" loading="lazy"></iframe>
+</div> <p>The problem with the above example is that there's no way for the user to know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the <a href="../../global_attributes#title"><code>title</code></a> attribute) can also help, although it's not a complete solution for accessibility purposes.</p>
+</div>
+<h3 id="disabling_and_enabling_a_reset_button">Disabling and enabling a reset button</h3>
+<div class="section-content">
+<p>To disable a reset button, specify the <a href="../input#disabled"><code>disabled</code></a> attribute on it, like so:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="x5/neyc9WZi/gwwktShDOF40zsR3sRcsE0gHjs3Qw24=" data-language="html"><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>reset<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>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/&gt;</span></span>
+</pre>
+</div> <p>You can enable and disable buttons at run time by setting <code>disabled</code> to <code>true</code> or <code>false</code>; in JavaScript this looks like <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> See the <a href="button#disabling_and_enabling_a_button"><code>&lt;input type="button"&gt;</code></a> page for more ideas about enabling and disabling buttons.</p> </div>
+</div>
+<h2 id="validation">Validation</h2>
+<div class="section-content"><p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p></div>
+<h2 id="examples">Examples</h2>
+<div class="section-content"><p>We've included simple examples above. There isn't really anything more to say about reset buttons.</p></div>
+<h2 id="technical_summary">Technical summary</h2>
+<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td>A string used as the button's label</td> </tr> <tr> <td><strong>Events</strong></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a></td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#type"><code>type</code></a> and <a href="../input#value"><code>value</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td><code>value</code></td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td>None</td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></td> </tr> </tbody> </table></div></figure></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#reset-button-state-(type=reset)">HTML Standard <br><small># reset-button-state-(type=reset)</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>reset</code></th>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes"><details><summary>1</summary>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic disabled state</a> of a <code>&lt;button&gt;</code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</details></td>
+<td class="bc-supports-yes">Yes</td>
+<td class="bc-supports-yes">15</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"><details><summary>4</summary>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic disabled state</a> of a <code>&lt;button&gt;</code> across page loads. Use the <code><a href="https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete">autocomplete</a></code> attribute to control this feature.</details></td>
+<td class="bc-supports-yes">14</td>
+<td class="bc-supports-yes">1</td>
+<td class="bc-supports-yes">1.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>
+<a href="../input"><code>&lt;input&gt;</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface which implements it.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#actual_buttons">Forms and buttons</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms</a></li> <li>The <a href="../button"><code>&lt;button&gt;</code></a> element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</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/Element/input/reset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset</a>
+  </p>
+</div>