diff options
Diffstat (limited to 'devdocs/html')
231 files changed, 36567 insertions, 0 deletions
diff --git a/devdocs/html/attributes%2Faccept.html b/devdocs/html/attributes%2Faccept.html new file mode 100644 index 00000000..3de38bcb --- /dev/null +++ b/devdocs/html/attributes%2Faccept.html @@ -0,0 +1,153 @@ +<header><h1>HTML attribute: accept</h1></header><div class="section-content"><p>The <code>accept</code> attribute takes as its value a comma-separated list of one or more file types, or <a href="#unique_file_type_specifiers">unique file type specifiers</a>, describing which file types to allow.</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-accept.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="overview">Overview</h2> +<div class="section-content"> +<p>The accept property is an attribute of the <a href="../element/input/file">file</a> <a href="../element/input"><code><input></code></a> type. It was supported on the <a href="../element/form"><code><form></code></a> element, but was removed in favor of <a href="../element/input/file">file</a>.</p> <p>Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable.</p> <p>For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <code><input></code> like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="VowkInl5TqdMjEIRHbdCVcl9oRwha/DRyTLFyyL0Faw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>docpicker<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Whereas if you're accepting a media file, you may want to be include any format of that media type:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="pY4M+8wxJ27U9qey55XdBtR84UaAwzvkTefKVXtgDi8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>soundFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>videoFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>imageFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>The <code>accept</code> attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.</p> <p>Because of this, you should make sure that expected requirement is validated server-side.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Fhu0seVLMmzLXLzMTk6LLMfRgTEYE22+EKIX7Grjfow=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>soundFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select an audio file:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>soundFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>videoFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select a video file:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>videoFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>imageFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select some images:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>imageFile<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/accept/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>Note the last example allows you to select multiple images. See the <a href="multiple"><code>multiple</code></a> attribute for more information.</p> +</div> +<h2 id="unique_file_type_specifiers">Unique file type specifiers</h2> +<div class="section-content"> +<p>A <strong>unique file type specifier</strong> is a string that describes a type of file that may be selected by the user in an <a href="../element/input"><code><input></code></a> element of type <code>file</code>. Each unique file type specifier may take one of the following forms:</p> <ul> <li>A valid case-insensitive filename extension, starting with a period (".") character. For example: <code>.jpg</code>, <code>.pdf</code>, or <code>.doc</code>.</li> <li>A valid MIME type string, with no extensions.</li> <li>The string <code>audio/*</code> meaning "any audio file".</li> <li>The string <code>video/*</code> meaning "any video file".</li> <li>The string <code>image/*</code> meaning "any image file".</li> </ul> <p>The <code>accept</code> attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vaXAnYa80YDd/ePiItp1UmN0zsKPqN0izC31G0hsyIg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*,.pdf<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="using_file_inputs">Using file inputs</h2> + +<h3 id="a_basic_example">A basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="F/T1yJHvhAVwkARDAgYCgjkZ4KzGemRGO90oG0vofHE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose file to upload<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This produces the following output:</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="A basic example sample" id="frame_a_basic_example" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/accept/runner.html?id=a_basic_example" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html" target="_blank">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html" target="_blank">see it running live</a>.</p> </div> <p>Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.</p> <p>Including the <a href="multiple"><code>multiple</code></a> attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd>, and then clicking). If you only want the user to choose a single file per <code><input></code>, omit the <code>multiple</code> attribute.</p> +</div> +<h3 id="limiting_accepted_file_types">Limiting accepted file types</h3> +<div class="section-content"> +<p>Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as <a href="https://developer.mozilla.org/en-US/docs/Glossary/JPEG">JPEG</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/PNG">PNG</a>.</p> <p>Acceptable file types can be specified with the <a href="../element/input/file#accept"><code>accept</code></a> attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:</p> <ul> <li> +<code>accept="image/png"</code> or <code>accept=".png"</code> — Accepts PNG files.</li> <li> +<code>accept="image/png, image/jpeg"</code> or <code>accept=".png, .jpg, .jpeg"</code> — Accept PNG or JPEG files.</li> <li> +<code>accept="image/*"</code> — Accept any file with an <code>image/*</code> MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)</li> <li> +<code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accept anything that smells like an MS Word document.</li> </ul> <p>Let's look at a more complete example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sO1n56AipdPykkyYIzuTKOBrH9jWxWeWOgHs6OXK758=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>profile_pic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose file to upload<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>profile_pic<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>profile_pic<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.jpg, .jpeg, .png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Limiting accepted file types sample" id="frame_limiting_accepted_file_types" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/accept/runner.html?id=limiting_accepted_file_types" 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#attr-input-accept">HTML Standard <br><small># attr-input-accept</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>accept</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">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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications">Using files from web applications</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File API</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/accept" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fautocomplete.html b/devdocs/html/attributes%2Fautocomplete.html new file mode 100644 index 00000000..258d2299 --- /dev/null +++ b/devdocs/html/attributes%2Fautocomplete.html @@ -0,0 +1,186 @@ +<header><h1>HTML attribute: autocomplete</h1></header><div class="section-content"> +<p>The HTML <code>autocomplete</code> attribute lets web developers specify what if any permission the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.</p> <p>It is available on <a href="../element/input"><code><input></code></a> elements that take a text or numeric value as input, <a href="../element/textarea"><code><textarea></code></a> elements, <a href="../element/select"><code><select></code></a> elements, and <a href="../element/form"><code><form></code></a> elements.</p> <p>The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.</p> <p>If an <a href="../element/input"><code><input></code></a>, <a href="../element/select"><code><select></code></a> or <a href="../element/textarea"><code><textarea></code></a> element has no <code>autocomplete</code> attribute, then browsers use the <code>autocomplete</code> attribute of the element's form owner, which is either the <a href="../element/form"><code><form></code></a> element that the element is a descendant of, or the <code><form></code> whose <code>id</code> is specified by the <a href="../element/input#form"><code>form</code></a> attribute of the element (see the <code><form></code> <a href="../element/form#autocomplete"><code>autocomplete</code></a> attribute).</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> In order to provide autocompletion, user-agents might require <code><input></code>/<code><select></code>/<code><textarea></code> elements to:</p> <ol> <li>Have a <code>name</code> and/or <code>id</code> attribute</li> <li>Be descendants of a <code><form></code> element</li> <li>The form to have a <a href="../element/input/submit">submit</a> button</li> </ol> </div> +</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-autocomplete.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="values">Values</h2> +<div class="section-content"> +<dl> <dt id="sect2"> +<a href="#sect2">"</a><code>off</code>"</dt> <dd> <p>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to "<code>off</code>" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</p> </div> </dd> <dt id="sect4"> +<a href="#sect4">"</a><code>on</code>"</dt> <dd> <p>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</p> </dd> <dt id="sect5"> +<a href="#sect5">"</a><code>name</code>"</dt> <dd> <p>The field expects the value to be a person's full name. Using "<code>name</code>" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components:</p> <dl> <dt id="sect6"> +<a href="#sect6">"</a><code>honorific-prefix</code>"</dt> <dd> <p>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</p> </dd> <dt id="sect7"> +<a href="#sect7">"</a><code>given-name</code>"</dt> <dd> <p>The given (or "first") name.</p> </dd> <dt id="sect8"> +<a href="#sect8">"</a><code>additional-name</code>"</dt> <dd> <p>The middle name.</p> </dd> <dt id="sect9"> +<a href="#sect9">"</a><code>family-name</code>"</dt> <dd> <p>The family (or "last") name.</p> </dd> <dt id="sect10"> +<a href="#sect10">"</a><code>honorific-suffix</code>"</dt> <dd> <p>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</p> </dd> <dt id="sect11"> +<a href="#sect11">"</a><code>nickname</code>"</dt> <dd> <p>A nickname or handle.</p> </dd> </dl> </dd> <dt id="sect12"> +<a href="#sect12">"</a><code>email</code>"</dt> <dd> <p>An email address.</p> </dd> <dt id="sect13"> +<a href="#sect13">"</a><code>username</code>"</dt> <dd> <p>A username or account name.</p> </dd> <dt id="sect14"> +<a href="#sect14">"</a><code>new-password</code>"</dt> <dd> <p>A new password. When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password">Preventing autofilling with autocomplete="new-password"</a>).</p> </dd> <dt id="sect15"> +<a href="#sect15">"</a><code>current-password</code>"</dt> <dd> <p>The user's current password.</p> </dd> <dt id="sect16"> +<a href="#sect16">"</a><code>one-time-code</code>"</dt> <dd> <p>A one-time password (OTP) for verifying user information, most commonly a phone number used as an additional factor in a sign-in flow.</p> </dd> <dt id="sect17"> +<a href="#sect17">"</a><code>organization-title</code>"</dt> <dd> <p>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</p> </dd> <dt id="sect18"> +<a href="#sect18">"</a><code>organization</code>"</dt> <dd> <p>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</p> </dd> <dt id="sect19"> +<a href="#sect19">"</a><code>street-address</code>"</dt> <dd> <p>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</p> <dl> <dt id="sect20"> +<a href="#sect20">"</a><code>shipping</code>"</dt> <dd> <p>The street address to send the product. This can be combined with other tokens, such as "<code>shipping street-address</code>" and "<code>shipping address-level2</code>".</p> </dd> <dt id="sect21"> +<a href="#sect21">"</a><code>billing</code>"</dt> <dd> <p>The street address to associate with the form of payment used. This can be combined with other tokens, such as "<code>billing street-address</code>" and "<code>billing address-level2</code>".</p> </dd> </dl> </dd> <dt id="sect22"> +<a href="#sect22">"</a><code>address-line1</code>", "<code>address-line2</code>", "<code>address-line3</code>"</dt> <dd> <p>Each individual line of the street address. These should only be present if the "<code>street-address</code>" is not present.</p> </dd> <dt id="sect23"> +<a href="#sect23">"</a><code>address-level4</code>"</dt> <dd> <p>The finest-grained <a href="#administrative_levels_in_addresses">administrative level</a>, in addresses which have four levels.</p> </dd> <dt id="sect24"> +<a href="#sect24">"</a><code>address-level3</code>"</dt> <dd> <p>The third <a href="#administrative_levels_in_addresses">administrative level</a>, in addresses with at least three administrative levels.</p> </dd> <dt id="sect25"> +<a href="#sect25">"</a><code>address-level2</code>"</dt> <dd> <p>The second <a href="#administrative_levels_in_addresses">administrative level</a>, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</p> </dd> <dt id="sect26"> +<a href="#sect26">"</a><code>address-level1</code>"</dt> <dd> <p>The first <a href="#administrative_levels_in_addresses">administrative level</a> in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</p> </dd> <dt id="sect27"> +<a href="#sect27">"</a><code>country</code>"</dt> <dd> <p>A country or territory code.</p> </dd> <dt id="sect28"> +<a href="#sect28">"</a><code>country-name</code>"</dt> <dd> <p>A country or territory name.</p> </dd> <dt id="sect29"> +<a href="#sect29">"</a><code>postal-code</code>"</dt> <dd> <p>A postal code (in the United States, this is the ZIP code).</p> </dd> <dt id="sect30"> +<a href="#sect30">"</a><code>cc-name</code>"</dt> <dd> <p>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</p> </dd> <dt id="sect31"> +<a href="#sect31">"</a><code>cc-given-name</code>"</dt> <dd> <p>A given (first) name as given on a payment instrument like a credit card.</p> </dd> <dt id="sect32"> +<a href="#sect32">"</a><code>cc-additional-name</code>"</dt> <dd> <p>A middle name as given on a payment instrument or credit card.</p> </dd> <dt id="sect33"> +<a href="#sect33">"</a><code>cc-family-name</code>"</dt> <dd> <p>A family name, as given on a credit card.</p> </dd> <dt id="sect34"> +<a href="#sect34">"</a><code>cc-number</code>"</dt> <dd> <p>A credit card number or other number identifying a payment method, such as an account number.</p> </dd> <dt id="sect35"> +<a href="#sect35">"</a><code>cc-exp</code>"</dt> <dd> <p>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</p> </dd> <dt id="sect36"> +<a href="#sect36">"</a><code>cc-exp-month</code>"</dt> <dd> <p>The month in which the payment method expires.</p> </dd> <dt id="sect37"> +<a href="#sect37">"</a><code>cc-exp-year</code>"</dt> <dd> <p>The year in which the payment method expires.</p> </dd> <dt id="sect38"> +<a href="#sect38">"</a><code>cc-csc</code>"</dt> <dd> <p>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</p> </dd> <dt id="sect39"> +<a href="#sect39">"</a><code>cc-type</code>"</dt> <dd> <p>The type of payment instrument (such as "Visa" or "Master Card").</p> </dd> <dt id="sect40"> +<a href="#sect40">"</a><code>transaction-currency</code>"</dt> <dd> <p>The currency in which the transaction is to take place.</p> </dd> <dt id="sect41"> +<a href="#sect41">"</a><code>transaction-amount</code>"</dt> <dd> <p>The amount, given in the currency specified by "<code>transaction-currency</code>", of the transaction, for a payment form.</p> </dd> <dt id="sect42"> +<a href="#sect42">"</a><code>language</code>"</dt> <dd> <p>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag" target="_blank">BCP 47 language tag</a>.</p> </dd> <dt id="sect43"> +<a href="#sect43">"</a><code>bday</code>"</dt> <dd> <p>A birth date, as a full date.</p> </dd> <dt id="sect44"> +<a href="#sect44">"</a><code>bday-day</code>"</dt> <dd> <p>The day of the month of a birth date.</p> </dd> <dt id="sect45"> +<a href="#sect45">"</a><code>bday-month</code>"</dt> <dd> <p>The month of the year of a birth date.</p> </dd> <dt id="sect46"> +<a href="#sect46">"</a><code>bday-year</code>"</dt> <dd> <p>The year of a birth date.</p> </dd> <dt id="sect47"> +<a href="#sect47">"</a><code>sex</code>"</dt> <dd> <p>A gender identity (such as "Female", "Fa'afafine", "Hijra", "Male", "Nonbinary"), as freeform text without newlines.</p> </dd> <dt id="sect48"> +<a href="#sect48">"</a><code>tel</code>"</dt> <dd> <p>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:</p> <dl> <dt id="sect49"> +<a href="#sect49">"</a><code>tel-country-code</code>"</dt> <dd> <p>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</p> </dd> <dt id="sect50"> +<a href="#sect50">"</a><code>tel-national</code>"</dt> <dd> <p>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</p> </dd> <dt id="sect51"> +<a href="#sect51">"</a><code>tel-area-code</code>"</dt> <dd> <p>The area code, with any country-internal prefix applied if appropriate.</p> </dd> <dt id="sect52"> +<a href="#sect52">"</a><code>tel-local</code>"</dt> <dd> <p>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "<code>tel-local-prefix</code>" for "555" and "<code>tel-local-suffix</code>" for "6502".</p> </dd> </dl> </dd> <dt id="sect53"> +<a href="#sect53">"</a><code>tel-extension</code>"</dt> <dd> <p>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</p> </dd> <dt id="sect54"> +<a href="#sect54">"</a><code>impp</code>"</dt> <dd> <p>A URL for an instant messaging protocol endpoint, such as "xmpp:<a href="mailto:username@example.net">username@example.net</a>".</p> </dd> <dt id="sect55"> +<a href="#sect55">"</a><code>url</code>"</dt> <dd> <p>A URL, such as a home page or company website address as appropriate given the context of the other fields in the form.</p> </dd> <dt id="sect56"> +<a href="#sect56">"</a><code>photo</code>"</dt> <dd> <p>The URL of an image representing the person, company, or contact information given in the other fields in the form.</p> </dd> <dt id="sect57"> +<a href="#sect57">"</a><code>webauthn</code>"</dt> <dd> <p>Passkeys generated by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API</a>, as requested by a conditional <a href="https://developer.mozilla.org/en-US/docs/Web/API/CredentialsContainer/get"><code>navigator.credentials.get()</code></a> call (i.e., one that includes <code>mediation: 'conditional'</code>). See <a href="https://web.dev/passkey-form-autofill/" target="_blank">Sign in with a passkey through form autofill</a> for more details.</p> </dd> </dl> <p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill" target="_blank">WHATWG Standard</a> for more detailed information.</p> <div class="notecard note" id="sect58"> <p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> element, <code><textarea></code> element, or entire <code><form></code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply by virtue of its <code>type</code>. See <a href="https://bugzil.la/654072" target="_blank">Firefox bug 654072</a>.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="m8U6bVSv9gxNxQ7gDNxY2AWEj4MKGK4JyxNC4u8RHsk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>cc-number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your credit card number<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cc-number<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>cc-number<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="administrative_levels_in_addresses">Administrative levels in addresses</h2> +<div class="section-content"> +<p>The four administrative level fields (<code>address-level1</code> through <code>address-level4</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p> <p><code>address-level1</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p> +</div> +<h3 id="form_layout_flexibility">Form layout flexibility</h3> +<div class="section-content"><p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p></div> +<h3 id="variations">Variations</h3> +<div class="section-content"> +<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p> <h4 id="united_states">United States</h4> <p>A typical home address within the United States looks like this:</p> <p> 432 Anywhere St Exampleville CA 95555 </p> <p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>address-level1</code> is the state, or "CA" in this case.</p> <p>The second-least specific portion of the address is the city or town name, so <code>address-level2</code> is "Exampleville" in this example address.</p> <p>United States addresses do not use levels 3 and up.</p> <h4 id="united_kingdom">United Kingdom</h4> <p>Address input forms in the UK should contain one address level and one, two or three address lines, depending on the address. A complete address would look like so:</p> <p> 103 Frogmarch Street Upper-Wapping Winchelsea TN99 8ZZ </p> <p>The address levels are:</p> <ul> <li> +<code>address-level1</code>: The post town — "Winchelsea" in this case.</li> <li> +<code>address-line2</code>: The locality — "Upper-Wapping" in this case.</li> <li> +<code>address-line1</code>: The house/street particulars — "103 Frogmarch Street".</li> </ul> <p>The postcode is separate. Note that you can actually use just the postcode and <code>address-line1</code> to successfully deliver mail in the UK, so they should be the only mandatory items, but usually people tend to provide more details.</p> <h4 id="china">China</h4> <p>China can use as many as three administrative levels: the province, the city, and the district.</p> <p>The 6 digit postal code is not always needed but when supplied it is placed separately with a label for clarity. For example:</p> <p> 北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元 邮编：100005 </p> <h4 id="japan">Japan</h4> <p>An address in Japan is typically <strong>written in one line</strong>, in an order from the least-specific to more-specific portions (in <strong>reverse order to the United States</strong>). There are two or three administrative levels in an address. Additional line can be used to show building names and room numbers. The postal code is separate. For example:</p> <p> 〒 381-0000 長野県長野市某町 123 </p> <p>"〒" and following seven digits shows the postal code.</p> <p><code>address-level1</code> is used for prefectures or the Tokyo Metropolis; "長野県" (Nagano Prefecture) is in this case. <code>address-level2</code> is typically used for cities, counties, towns and villages; "長野市" (Nagano City) in this case. "某町 123" is <code>address-line1</code> which consists of an area name and a lot number.</p> +</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/form-control-infrastructure.html#attr-fe-autocomplete">HTML Standard <br><small># attr-fe-autocomplete</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>autocomplete</code></th> +<td class="bc-supports-yes"><details><summary>14</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>["In Samsung Internet 9.0, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Samsung Internet does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +</tr> +<tr> +<th><code>new-password</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>one-time-code</code></th> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">84</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">14.0</td> +</tr> +<tr> +<th><code>webauthn</code></th> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The <a href="../element/input"><code><input></code></a> element</li> <li>The <a href="../element/select"><code><select></code></a> element</li> <li>The <a href="../element/textarea"><code><textarea></code></a> element</li> <li>The <a href="../element/form"><code><form></code></a> element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms</a></li> <li>All <a href="../global_attributes">global attributes</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/autocomplete" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fcapture.html b/devdocs/html/attributes%2Fcapture.html new file mode 100644 index 00000000..47a7979e --- /dev/null +++ b/devdocs/html/attributes%2Fcapture.html @@ -0,0 +1,80 @@ +<header><h1>HTML attribute: capture</h1></header><div class="section-content"> +<p>The <code>capture</code> attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the <a href="accept"><code>accept</code></a> attribute.</p> <p>Values include <code>user</code> and <code>environment</code>. The capture attribute is supported on the <a href="../element/input/file">file</a> input type.</p> <p>The <code>capture</code> attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the <a href="accept">accept</a> attribute indicates that the input should be of one of those types.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>user</code></td> <td>The user-facing camera and/or microphone should be used.</td> </tr> <tr> <td><code>environment</code></td> <td>The outward-facing camera and/or microphone should be used</td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.</p> </div> +</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/attribute-capture.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>When set on a file input type, operating systems with microphones and cameras will display a user interface allowing the selection from an existing file or the creating of a new one.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="AUc+/evJbN5THWxxxjQg2zgx0EVtDbc8piVRFUZ/dY0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>soundFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What does your voice sound like?:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>soundFile<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>audio/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>videoFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Upload a video:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>videoFile<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>environment<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>imageFile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Upload a photo of yourself:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>imageFile<span class="token punctuation">"</span></span> <span class="token attr-name">capture</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/capture/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>Note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.</p> +</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://w3c.github.io/html-media-capture/#dfn-capture">HTML Media Capture <br><small># dfn-capture</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>capture</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications">Using files from web applications</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File API</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files"><code>HTMLInputElement.files</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/capture" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fcrossorigin.html b/devdocs/html/attributes%2Fcrossorigin.html new file mode 100644 index 00000000..effd40dc --- /dev/null +++ b/devdocs/html/attributes%2Fcrossorigin.html @@ -0,0 +1,202 @@ +<header><h1>HTML attribute: crossorigin</h1></header><div class="section-content"> +<p>The <code>crossorigin</code> attribute, valid on the <a href="../element/audio"><code><audio></code></a>, <a href="../element/img"><code><img></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/script"><code><script></code></a>, and <a href="../element/video"><code><video></code></a> elements, provides support for <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute.</p> <p>The <code>crossorigin</code> content attribute on media elements is a CORS settings attribute.</p> <p>These attributes are <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a>, and have the following possible values:</p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p>Request uses CORS headers and credentials flag is set to <code>'same-origin'</code>. There is no exchange of <strong>user credentials</strong> via cookies, client-side TLS certificates or HTTP authentication, unless destination is the same origin.</p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p>Request uses CORS headers, credentials flag is set to <code>'include'</code> and <strong>user credentials</strong> are always included.</p> </dd> <dt id="sect1"><a href="#sect1"><code>""</code></a></dt> <dd> <p>Setting the attribute name to an empty value, like <code>crossorigin</code> or <code>crossorigin=""</code>, is the same as <code>anonymous</code>.</p> </dd> </dl> <p>An invalid keyword and an empty string will be handled as the <code>anonymous</code> keyword.</p> <p>By default (that is, when the attribute is not specified), CORS is not used at all. The user agent will not ask for permission for full access to the resource and in the case of a cross-origin request, certain limitations will be applied based on the type of element concerned:</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <tbody> <tr> <th class="header">Element</th> <th class="header">Restrictions</th> </tr> <tr> <td> +<code>img</code>, <code>audio</code>, <code>video</code> +</td> <td>When resource is placed in <a href="../element/canvas"><code><canvas></code></a>, element is marked as <a href="../cors_enabled_image#security_and_tainted_canvases"><em>tainted</em></a>.</td> </tr> <tr> <td><code>script</code></td> <td>Access to error logging via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event"><code>window.onerror</code></a> will be limited.</td> </tr> <tr> <td><code>link</code></td> <td>Request with no appropriate <code>crossorigin</code> header may be discarded.</td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <code>crossorigin</code> attribute is not supported for <a href="rel#icon"><code>rel="icon"</code></a> in Chromium-based browsers. See the <a href="https://crbug.com/1121645" target="_blank">open Chromium issue</a>.</p> </div> +</div> +<h3 id="example_crossorigin_with_the_script_element">Example: <code>crossorigin</code> with the <code><script></code> element</h3> +<div class="section-content"> +<p>You can use the following <a href="../element/script"><code><script></code></a> element to tell a browser to execute the <code>https://example.com/example-framework.js</code> script without sending user-credentials.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gmqRYTcssVuwG1FefnItqBu/UE7w3Jg+n1G/xD9L18g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/example-framework.js<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="example_web_manifest_with_credentials">Example: Web manifest with credentials</h3> +<div class="section-content"> +<p>The <code>use-credentials</code> value must be used when fetching a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">manifest</a> that requires credentials, even if the file is from the same origin.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qUcPtbg+8FhpveA2KUhgWKnN9kHckcDS7x8ZhcAtFJA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manifest<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/app.webmanifest<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>use-credentials<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</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/urls-and-fetching.html#cors-settings-attributes">HTML Standard <br><small># cors-settings-attributes</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>crossorigin</code></th> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">74<details><summary>12–74</summary>With <code>crossorigin="use-credentials"</code>, cookies aren't sent during seek. See <a href="https://bugzil.la/1532722">bug 1532722</a>.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">4.4.3</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">79<details><summary>14–79</summary>With <code>crossorigin="use-credentials"</code>, cookies aren't sent during seek. See <a href="https://bugzil.la/1532722">bug 1532722</a>.</details> +</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">2.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>crossorigin</code></th> +<td class="bc-supports-yes">19</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>6</summary>The <code>crossorigin</code> attribute was implemented in WebKit in WebKit <a href="https://webkit.org/b/81438">bug 81438</a>.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>6</summary>The <code>crossorigin</code> attribute was implemented in WebKit in WebKit <a href="https://webkit.org/b/81438">bug 81438</a>.</details></td> +<td class="bc-supports-yes">1.5</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>crossorigin</code></th> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">2.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>crossorigin</code></th> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.img.crossorigin">html.elements.img.crossorigin</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.link.crossorigin">html.elements.link.crossorigin</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.script.crossorigin">html.elements.script.crossorigin</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.video.crossorigin">html.elements.video.crossorigin</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/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> <li><a href="rel">HTML attribute: <code>rel</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/crossorigin" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fdirname.html b/devdocs/html/attributes%2Fdirname.html new file mode 100644 index 00000000..2d0a77f8 --- /dev/null +++ b/devdocs/html/attributes%2Fdirname.html @@ -0,0 +1,159 @@ +<header><h1>HTML attribute: dirname</h1></header><div class="section-content"><p> The <code>dirname</code> attribute can be used on <a href="../element/textarea"><code><textarea></code></a> and <a href="../element/input"><code><input></code></a> elements and describes the directionality of the element's text content during form submission. The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented. When used, the element's text directionality value is included in form submission data along with the <code>dirname</code> attribute's value as the name of the field. </p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code>dirname</code> attribute can be used on any <a href="../element/textarea"><code><textarea></code></a> element, or any <a href="../element/input"><code><input></code></a> element with <a href="../element/input/text">text</a>, <a href="../element/input/search">search</a>, <a href="../element/input/tel">tel</a>, <a href="../element/input/url">url</a>, or <a href="../element/input/email">email</a> type.</p> <p> The format of the submitted data is <code>{dirname_value}={direction}</code> where <code>{dirname_value}</code> is the value of the <code>dirname</code> attribute and <code>{direction}</code> is the directionality of the text. For example, if the user enters "Hello" in an element with the attributes <code>name="comment"</code> and <code>dirname="comment-direction"</code>, the URL-encoded form submission data for <code>GET</code> requests will be <code>comment=Hello&comment-direction=ltr</code>. The directionality is one of the following: </p> <dl> <dt id="rtl"><a href="#rtl"><code>rtl</code></a></dt> <dd> <p>The text entered by the user is in a right-to-left writing direction.</p> </dd> <dt id="ltr"><a href="#ltr"><code>ltr</code></a></dt> <dd> <p>The text entered by the user is in a left-to-right writing direction.</p> </dd> </dl> <p>If no text directionality is specified, the user agent will use the directionality of the parent element containing the form, and if that is not specified, the default directionality of the user agent.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="textarea_element_directionality">Textarea element directionality</h3> +<div class="section-content"> +<p>In this example, the <code>dir="auto"</code> attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="D/i4KTM2oIqeVpzTUmSWA2aWicCPoBw2mdC7Bl1SmaI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com/submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> <span class="token attr-name">dirname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment-direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>سيب<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send my greetings<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p> When the user submits the form, the user agent includes two fields, one called <code>comment</code> with the value "سيب", and one called <code>comment-direction</code> with the value "rtl". The URL-encoded submission body looks like this: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">url</span></p> +<pre data-signature="oRt/irJiSU35s0O3h6mA9sRSl+G5m1uNKn3crpe6xng=" data-language="url"><span class="token scheme">https<span class="token scheme-delimiter">:</span></span><span class="token authority"><span class="token authority-delimiter">//</span><span class="token host">www.example.com</span></span><span class="token path"><span class="token path-separator">/</span>submit</span><span class="token query"><span class="token query-delimiter">?</span><span class="token pair"><span class="token key">comment</span>=<span class="token value">%D8%B3%D9%8A%D8%A8</span></span><span class="token pair-delimiter">&</span><span class="token pair"><span class="token key">comment-direction</span>=<span class="token value">rtl</span></span></span> +</pre> +</div> +</div> +<h3 id="input_element_directionality">Input element directionality</h3> +<div class="section-content"> +<p>In this example, the <code>dir="auto"</code> attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/GWykrJ3aclIs+j6d0e5ks4n7JjgRbJ6QOydesHKBEU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com/submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment-input<span class="token punctuation">"</span></span> + <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> + <span class="token attr-name">dirname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment-direction<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>Hello<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send my greetings<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>When the user submits the form, the user agent includes two fields, one called <code>comment-input</code> with the value "Hello", and one called <code>comment-direction</code> with the value "ltr":</p> <div class="code-example"> +<p class="example-header"><span class="language-name">url</span></p> +<pre data-signature="GRcc4OZLMq6g4sCGAf6ZGfzSJfEiTyrYDKMuKkRwazg=" data-language="url"><span class="token scheme">https<span class="token scheme-delimiter">:</span></span><span class="token authority"><span class="token authority-delimiter">//</span><span class="token host">www.example.com</span></span><span class="token path"><span class="token path-separator">/</span>submit</span><span class="token query"><span class="token query-delimiter">?</span><span class="token pair"><span class="token key">comment-input</span>=<span class="token value">Hello</span></span><span class="token pair-delimiter">&</span><span class="token pair"><span class="token key">comment-direction</span>=<span class="token value">ltr</span></span></span> +</pre> +</div> +</div> +<h3 id="inheriting_directionality">Inheriting directionality</h3> +<div class="section-content"> +<p>The following <code><input></code> and <code><textarea></code> elements do not have a <code>dir</code> attribute, so they inherit the explicit directionality of their parent element, which is <code>rtl</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iD4n0+42/ve5r/mKiB6Tm6DeoHlF0qUetz34Upy8mP0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com/submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> + <span class="token attr-name">dirname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user-direction<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>LTR Username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment<span class="token punctuation">"</span></span> <span class="token attr-name">dirname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>comment-direction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>LTR Comment<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Post Comment<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The URL-encoded submission body looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">url</span></p> +<pre data-signature="JQGIBJN43BACCjHqTdb16jCssbhWCbxrg0Bmqe46ZYU=" data-language="url"><span class="token scheme">https<span class="token scheme-delimiter">:</span></span><span class="token authority"><span class="token authority-delimiter">//</span><span class="token host">www.example.com</span></span><span class="token path"><span class="token path-separator">/</span>submit</span><span class="token query"><span class="token query-delimiter">?</span><span class="token pair"><span class="token key">user</span>=<span class="token value">LTR+Username</span></span><span class="token pair-delimiter">&</span><span class="token pair"><span class="token key">user-direction</span>=<span class="token value">rtl</span></span><span class="token pair-delimiter">&</span><span class="token pair"><span class="token key">comment</span>=<span class="token value">LTR+Comment</span></span><span class="token pair-delimiter">&</span><span class="token pair"><span class="token key">comment-direction</span>=<span class="token value">rtl</span></span></span> +</pre> +</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/form-control-infrastructure.html#attr-fe-dirname">HTML Standard <br><small># attr-fe-dirname</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>dirname</code></th> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</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>dirname</code></th> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.textarea.dirname">html.elements.textarea.dirname</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.input.dirname">html.elements.input.dirname</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="../global_attributes/dir"><code>dir</code> attribute</a></li> <li><a href="../element/input"><code><input></code></a></li> <li><a href="../element/textarea"><code><textarea></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dirname" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/dirname</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fdisabled.html b/devdocs/html/attributes%2Fdisabled.html new file mode 100644 index 00000000..51153549 --- /dev/null +++ b/devdocs/html/attributes%2Fdisabled.html @@ -0,0 +1,392 @@ +<header><h1>HTML attribute: disabled</h1></header><div class="section-content"><p>The Boolean <code>disabled</code> attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.</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/attribute-disabled.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="overview">Overview</h2> +<div class="section-content"> +<p>If the <code>disabled</code> attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.</p> <p>The <code>disabled</code> attribute is supported by <a href="../element/button"><code><button></code></a>, <a href="../element/fieldset"><code><fieldset></code></a>, <a href="../element/optgroup"><code><optgroup></code></a>, <a href="../element/option"><code><option></code></a>, <a href="../element/select"><code><select></code></a>, <a href="../element/textarea"><code><textarea></code></a> and <a href="../element/input"><code><input></code></a>.</p> <p>This Boolean disabled attribute indicates that the user cannot interact with the control or its descendant controls. If this attribute is not specified, the control inherits its setting from the containing element, for example <code>fieldset</code>; if there is no containing element with the <code>disabled</code> attribute set, and the control itself does not have the attribute, then the control is enabled. If declared on an <a href="../element/optgroup"><code><optgroup></code></a>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If a <a href="../element/fieldset"><code><fieldset></code></a> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <a href="../element/legend"><code><legend></code></a>.</p> </div> <p>When a supporting element has the <code>disabled</code> attribute applied, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled"><code>:disabled</code></a> pseudo-class also applies to it. Conversely, elements that support the <code>disabled</code> attribute but don't have the attribute set match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled"><code>:enabled</code></a> pseudo-class.</p> <p>This Boolean attribute prevents the user from interacting with the button. If this attribute isn't set, the button can still be disabled from a containing element, for example <a href="../element/fieldset"><code><fieldset></code></a>; if there is no containing element with the <code>disabled</code> attribute set, then the button is enabled.</p> <p>Firefox will, unlike other browsers, persist the dynamic disabled state of a <a href="../element/button"><code><button></code></a> across page loads. Use the <a href="autocomplete"><code>autocomplete</code></a> attribute to control this feature.</p> +</div> +<h3 id="attribute_interactions">Attribute interactions</h3> +<div class="section-content"> +<p>The difference between <code>disabled</code> and <a href="readonly"><code>readonly</code></a> 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 disabled field cannot have its value changed, <a href="required"><code>required</code></a> does not have any effect on inputs with the <code>disabled</code> attribute also specified. Additionally, since the elements become immutable, most other attributes, such as <a href="pattern"><code>pattern</code></a>, have no effect, until the control is enabled.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <code>required</code> attribute is not permitted on inputs with the <code>disabled</code> attribute specified.</p> </div> +</div> +<h3 id="usability">Usability</h3> +<div class="section-content"> +<p>Browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.</p> <p>If present on a supporting elements, the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled"><code>:disabled</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/:enabled"><code>:enabled</code></a></code> pseudo class will match. If the element doesn't support the disabled attribute, the attribute will have no effect, including not leading to being matched by the <code>:disabled</code> and <code>:enabled</code> pseudo classes.</p> +</div> +<h3 id="constraint_validation">Constraint validation</h3> +<div class="section-content"><p>If the element is <code>disabled</code>, then the element's value can not receive focus and cannot be updated by the user, and does not participate in constraint validation.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>When form controls are disabled, many browsers will display them in a lighter, greyed-out color by default. Here are examples of a disabled checkbox, radio button, <a href="../element/option"><code><option></code></a> and <a href="../element/optgroup"><code><optgroup></code></a>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <code><a href="../element/fieldset"><code><fieldset></code></a></code> element. The <a href="../element/option"><code><option></code></a>s are disabled, but the <a href="../element/select"><code><select></code></a> itself is not. We could have disable the entire <a href="../element/select"><code><select></code></a> by adding the attribute to that element rather than its descendants.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EOsEK3sitO2qLwgsbHG5V2CfWpfRgmmb/kb/Ue92lto=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Checkboxes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chbox<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>regular<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Regular + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chbox<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">/></span></span> disabled + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Radio buttons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>regular<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Regular <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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">/></span></span> disabled + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> + <span class="token punctuation">></span></span>Select an option: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 1.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 3<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Disabled 3.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Disabled 3.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Disabled 3.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Disabled fieldset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>regular<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Regular + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Number: <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="500" height="450" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/disabled/runner.html?id=examples" 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/form-control-infrastructure.html#attr-fe-disabled">HTML Standard <br><small># attr-fe-disabled</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-optgroup-disabled">HTML Standard <br><small># attr-optgroup-disabled</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-option-disabled">HTML Standard <br><small># attr-option-disabled</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>disabled</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>disabled</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">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>disabled</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">Yes</td> +<td class="bc-supports-yes">15</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">14</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>disabled</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">8</td> +<td class="bc-supports-yes">15</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">14</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>disabled</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> +<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>disabled</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes"><details><summary>12</summary>Does not work with nested fieldsets. For example: <code><fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset></code></details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">bug 817488: input[type='file'] not disabled inside disabled fieldset</a> and IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">bug 962368: Can still edit input[type='text'] within fieldset[disabled]</a>.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</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>disabled</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.button.disabled">html.elements.button.disabled</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.fieldset.disabled">html.elements.fieldset.disabled</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.input.disabled">html.elements.input.disabled</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.optgroup.disabled">html.elements.optgroup.disabled</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.option.disabled">html.elements.option.disabled</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.select.disabled">html.elements.select.disabled</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.disabled">html.elements.textarea.disabled</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/:disabled"><code>:disabled</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled"><code>:enabled</code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/disabled" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Felementtiming.html b/devdocs/html/attributes%2Felementtiming.html new file mode 100644 index 00000000..b4a5d860 --- /dev/null +++ b/devdocs/html/attributes%2Felementtiming.html @@ -0,0 +1,26 @@ +<header><h1>HTML attribute: elementtiming</h1></header><div class="section-content"> +<p>The <code>elementtiming</code> attribute is used to indicate that an element is flagged for tracking by <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> objects using the <code>"element"</code> type. For more details, see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> interface.</p> <p>This attribute may be applied to <a href="../element/img"><code><img></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"><code><image></code></a> elements inside an <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a>, poster images of <a href="../element/video"><code><video></code></a> elements, elements which have a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image"><code>background-image</code></a>, and elements containing text nodes, such as a <a href="../element/p"><code><p></code></a>.</p> <p>In the DOM, this attribute is reflected as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming"><code>Element.elementTiming</code></a>.</p> +</div> +<h2 id="usage">Usage</h2> +<div class="section-content"> +<p>The value given for <code>elementtiming</code> becomes an identifier for the observed element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="w87uhoL1QZvo2KwrTNuXDIr4E9WacRy37Vr05EEFP1o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alt<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">elementtiming</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label for element<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Good contenders for elements you might want to observe are:</p> <ul> <li>The main image for an article.</li> <li>A blog post title</li> <li>Images in a carousel for a shopping site.</li> <li>The poster image for the main video on a page.</li> </ul> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YX9Ph3kJBCGuX2XRXVEKuZTv4qBwpwoXKEAsTW3eKeE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alt for a main blog post image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-massive-image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">elementtiming</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Main image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">elementtiming</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>important-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Some very important information.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p"</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/elementTiming"><code>Element.elementTiming</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/elementtiming" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Ffor.html b/devdocs/html/attributes%2Ffor.html new file mode 100644 index 00000000..b021cd77 --- /dev/null +++ b/devdocs/html/attributes%2Ffor.html @@ -0,0 +1,113 @@ +<header><h1>HTML attribute: for</h1></header><div class="section-content"><p>The <code>for</code> attribute is an allowed attribute for <a href="../element/label"><code><label></code></a> and <a href="../element/output"><code><output></code></a>. When used on a <code><label></code> element it indicates the form element that this label describes. When used on an <code><output></code> element it allows for an explicit relationship between the elements that represent values which are used in the output.</p></div> +<h2 id="usage">Usage</h2> +<div class="section-content"> +<p>When used as an attribute of <code><label></code>, the <code>for</code> attribute has a value which is the <code>id</code> of the form element it relates to.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="k90DFR/sdhD7TkaAGdVvWQdQG3HU2AzS8of0F0qC6Jg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Your name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>When used as an attribute of <code><output></code>, the <code>for</code> attribute has a value which is a space separated list of the <code>id</code> values of the elements which are used to create the output.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3QYBkr0U2S7ekr01qqTzYcFYMkyK0jMTQAncV7h+xwk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>b<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<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>50<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<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>a<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<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>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> = +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>result<span class="token punctuation">"</span></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>a b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>60<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See examples of usage on the element pages for <a href="../element/label"><code><label></code></a> and <a href="../element/output"><code><output></code></a>.</p></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/forms.html#attr-label-for">HTML Standard <br><small># attr-label-for</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-output-for">HTML Standard <br><small># attr-output-for</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>for</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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">11</td> +<td class="bc-supports-yes">7</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>for</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.label.for">html.elements.label.for</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.output.for">html.elements.output.for</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/for" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fmax.html b/devdocs/html/attributes%2Fmax.html new file mode 100644 index 00000000..acd702fc --- /dev/null +++ b/devdocs/html/attributes%2Fmax.html @@ -0,0 +1,154 @@ +<header><h1>HTML attribute: max</h1></header><div class="section-content"> +<p>The <code>max</code> attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the <a href="../element/input#value"><code>value</code></a> of the element is greater than this, the element fails <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validation</a>. This value must be greater than or equal to the value of the <a href="min"><code>min</code></a> attribute. If the <code>max</code> attribute is present but is not specified or is invalid, no <code>max</code> value is applied. If the <code>max</code> attribute is valid and a non-empty value is greater than the maximum allowed by the <code>max</code> attribute, constraint validation will prevent form submission.</p> <p>Valid for the numeric input types, including the <a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and both the <a href="../element/progress"><code><progress></code></a> and <a href="../element/meter"><code><meter></code></a> elements, the <code>max</code> attribute is a number that specifies the most positive value a form control to be considered valid.</p> <p>If the value exceeds the max value allowed, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> will be true, and the control will be matched by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-classes.</p> +</div> +<h3 id="syntax">Syntax</h3> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>max</code> values by input <code>type</code> </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/input/date">date</a></td> <td><code>yyyy-mm-dd</code></td> <td><code><input type="date" max="2019-12-25" step="1"></code></td> </tr> <tr> <td><a href="../element/input/month">month</a></td> <td><code>yyyy-mm</code></td> <td><code><input type="month" max="2019-12" step="12"></code></td> </tr> <tr> <td><a href="../element/input/week">week</a></td> <td><code>yyyy-W##</code></td> <td><code><input type="week" max="2019-W23" step=""></code></td> </tr> <tr> <td><a href="../element/input/time">time</a></td> <td><code>hh:mm</code></td> <td><code><input type="time" max="17:00" step="900"></code></td> </tr> <tr> <td><a href="../element/input/datetime-local">datetime-local</a></td> <td><code>yyyy-mm-ddThh:mm</code></td> <td><code><input type="datetime-local" max="2019-12-25T23:59"></code></td> </tr> <tr> <td><a href="../element/input/number">number</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="number" min="0" step="5" max="100"></code></td> </tr> <tr> <td><a href="../element/input/range">range</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="range" min="60" step="5" max="100"></code></td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in constraint validation and will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> pseudo-classes.</p> </div> <p>See <a href="../constraint_validation">Client-side validation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>rangeOverflow</code></a> for more information.</p> <p>For the <a href="../element/progress"><code><progress></code></a> element, the <code>max</code> attribute describes how much work the task indicated by the <code>progress</code> element requires. If present, must have a value greater than zero and be a valid floating point number. For the <a href="../element/meter"><code><meter></code></a> element, the <code>max</code> attribute defines the upper numeric bound of the measured range. This must be greater than the minimum value (<a href="min"><code>min</code></a> attribute), if specified. In both cases, if omitted, the value defaults to 1.</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>max</code> values for other elements </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/progress"><code><progress></code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><progress id="file" max="100" value="70"> 70% +</progress></code></td> </tr> <tr> <td><a href="../element/meter"><code><meter></code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><meter id="fuel" min="0" max="100" low="33" high="66" +optimum="80" value="40"> at 40/100</meter></code></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the <code>max</code> attribute, ensure this maximum requirement is understood by the user. Providing instructions within the <a href="../element/label"><code><label></code></a> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a>.</p></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-min-and-max-attributes">HTML Standard <br><small># the-min-and-max-attributes</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-max">HTML Standard <br><small># attr-meter-max</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max">HTML Standard <br><small># attr-progress-max</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>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</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>max</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.input.max">html.elements.input.max</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.meter.max">html.elements.meter.max</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.progress.max">html.elements.progress.max</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="step"><code>step</code></a></li> <li><a href="min"><code>min</code></a></li> <li>other meter attributes: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/low" class="page-not-created"><code>low</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/high" class="page-not-created"><code>high</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/optimum" class="page-not-created"><code>optimum</code></a> +</li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> <li><a href="../element/input"><code><input></code></a></li> <li> +<a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and the <a href="../element/meter"><code><meter></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/max" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fmaxlength.html b/devdocs/html/attributes%2Fmaxlength.html new file mode 100644 index 00000000..f8fc3fbf --- /dev/null +++ b/devdocs/html/attributes%2Fmaxlength.html @@ -0,0 +1,114 @@ +<header><h1>HTML attribute: maxlength</h1></header><div class="section-content"> +<p>The <code>maxlength</code> attribute defines the maximum <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">string length</a> that the user can enter into an <a href="../element/input"><code><input></code></a> or <a href="../element/textarea"><code><textarea></code></a>. The attribute must have an integer value of 0 or higher.</p> <p>The length is measured in UTF-16 code units, which (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length#strings_with_length_not_equal_to_the_number_of_characters">for most scripts</a>) is equivalent to the number of characters. If no <code>maxlength</code> is specified, or an invalid value is specified, the input has no maximum length.</p> <p>Any <code>maxlength</code> value must be greater than or equal to the value of <a href="minlength"><code>minlength</code></a>, if present and valid. The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="constraint_validation">Constraint validation</h3> +<div class="section-content"><p>While the browser will generally prevent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong"><code>tooLong</code></a> property of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> object will be true.</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-maxlength.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6ccbeNUrp6Dm4PAnSJPQTwdGLtQXwnKcSrq67FxHF88=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/maxlength/runner.html?id=examples" 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-maxlength-and-minlength-attributes">HTML Standard <br><small># the-maxlength-and-minlength-attributes</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>maxlength</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">5</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>maxlength</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.maxlength">html.elements.input.maxlength</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.maxlength">html.elements.textarea.maxlength</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="minlength"><code>minlength</code></a></li> <li><a href="size"><code>size</code></a></li> <li><a href="pattern"><code>pattern</code></a></li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="../element/input"><code><input></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/maxlength" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fmin.html b/devdocs/html/attributes%2Fmin.html new file mode 100644 index 00000000..260da1ae --- /dev/null +++ b/devdocs/html/attributes%2Fmin.html @@ -0,0 +1,129 @@ +<header><h1>HTML attribute: min</h1></header><div class="section-content"> +<p>The <code>min</code> attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the <a href="../element/input#value"><code>value</code></a> of the element is less than this, the element fails <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validation</a>. This value must be less than or equal to the value of the <code>max</code> attribute.</p> <p>Some input types have a default minimum. If the input has no default minimum and a value is specified for <code>min</code> that can't be converted to a valid number (or no minimum value is set), the input has no minimum value.</p> <p>It is valid for the input types including: <a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and the <a href="../element/meter"><code><meter></code></a> element.</p> +</div> +<h3 id="syntax">Syntax</h3> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>min</code> values by input <code>type</code> </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/input/date">date</a></td> <td><code>yyyy-mm-dd</code></td> <td><code><input type="date" min="2019-12-25" step="1"></code></td> </tr> <tr> <td><a href="../element/input/month">month</a></td> <td><code>yyyy-mm</code></td> <td><code><input type="month" min="2019-12" step="12"></code></td> </tr> <tr> <td><a href="../element/input/week">week</a></td> <td><code>yyyy-W##</code></td> <td><code><input type="week" min="2019-W23" step=""></code></td> </tr> <tr> <td><a href="../element/input/time">time</a></td> <td><code>hh:mm</code></td> <td><code><input type="time" min="09:00" step="900"></code></td> </tr> <tr> <td><a href="../element/input/datetime-local">datetime-local</a></td> <td><code>yyyy-mm-ddThh:mm</code></td> <td><code><input type="datetime-local" min="2019-12-25T19:30"></code></td> </tr> <tr> <td><a href="../element/input/number">number</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="number" min="0" step="5" max="100"></code></td> </tr> <tr> <td><a href="../element/input/range">range</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="range" min="60" step="5" max="100"></code></td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the min value set, the value is considered invalid in constraint validation and will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> pseudo-classes.</p> </div> <p>See <a href="../constraint_validation">Client-side validation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>rangeUnderflow</code></a> for more information.</p> <p>For the <a href="../element/meter"><code><meter></code></a> element, the <code>min</code> attribute defines the lower numeric bound of the measured range. This must be less than the minimum value (<a href="max"><code>max</code></a> attribute), if specified. In both cases, if omitted, the value defaults to 1.</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>min</code> values for other elements </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/meter"><code><meter></code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><meter id="fuel" min="0" max="100" low="33" high="66" +optimum="80" value="40"> at 40/100</meter></code></td> </tr> </tbody> </table></div></figure> +</div> +<h3 id="impact_on_step">Impact on step</h3> +<div class="section-content"> +<p>The value of <code>min</code> and <code>step</code> define what are valid values, even if the <code>step</code> attribute is not included, as <code>step</code> defaults to <code>0</code>.</p> <p>We add a big red border around invalid inputs:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="6PMEpHs0vkMNWTCDnxCiFvk6vsP7Y36Lf2EE3Y3cOfI=" data-language="css"><span class="token selector">input:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> solid red 3px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="IBE0MUa6DsxcbCQLivNNQhubuPsXnlrlV7GbPV/KSVU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myNumber<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myNumber<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7.2<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>8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Because <code>step</code> defaults to 1, valid values include <code>7.2</code>, <code>8.2</code>, <code>9.2</code>, and so on. The value 8 is not valid. As we included an invalid value, supporting browsers will show the value as invalid.</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Impact on step sample" id="frame_impact_on_step" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/min/runner.html?id=impact_on_step" loading="lazy"></iframe> +</div> <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types.</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the <code>min</code> attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <a href="../element/label"><code><label></code></a> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a>.</p></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-min-and-max-attributes">HTML Standard <br><small># the-min-and-max-attributes</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-max">HTML Standard <br><small># attr-meter-max</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>min</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</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>min</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.input.min">html.elements.input.min</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.meter.min">html.elements.meter.min</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="step"><code>step</code></a></li> <li><a href="max"><code>max</code></a></li> <li>other meter attributes: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/low" class="page-not-created"><code>low</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/high" class="page-not-created"><code>high</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/optimum" class="page-not-created"><code>optimum</code></a> +</li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> <li><a href="../element/input"><code><input></code></a></li> <li> +<a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and the <a href="../element/meter"><code><meter></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/min" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fminlength.html b/devdocs/html/attributes%2Fminlength.html new file mode 100644 index 00000000..485e3f77 --- /dev/null +++ b/devdocs/html/attributes%2Fminlength.html @@ -0,0 +1,125 @@ +<header><h1>HTML attribute: minlength</h1></header><div class="section-content"> +<p>The <code>minlength</code> attribute defines the minimum <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">string length</a> that the user can enter into an <a href="../element/input"><code><input></code></a> or <a href="../element/textarea"><code><textarea></code></a>. The attribute must have an integer value of 0 or higher.</p> <p>The length is measured in UTF-16 code units, which (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length#strings_with_length_not_equal_to_the_number_of_characters">for most scripts</a>) is equivalent to the number of characters. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of <a href="maxlength">maxlength</a>, otherwise the value will never be valid, as it is impossible to meet both criteria.</p> <p>The input will fail constraint validation if the length of the text value of the field is less than minlength UTF-16 code units long, with <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a> returning <code>true</code>. Constraint validation is only applied when the value is changed by the user. Once submission fails, some browsers will display an error message indicating the minimum length required and the current length.</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-minlength.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>By adding <code>minlength="5"</code>, the value must either be empty or five characters or longer to be valid.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BVDyOX4r0iz2c7Z3QxxOuELvexWmwfvpHnUK14xF5Mc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fruit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a fruit name that is at least 5 letters long<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<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>fruit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>We can use pseudoclasses to style the element based on whether the value is valid. The value will be valid as long as it is either null (empty) or five or more characters long. <em>Lime</em> is invalid, <em>lemon is valid</em>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Q8x3i75AtKMOIhTESyx16mmg2Nv/Vgs/sjUou9yeZOs=" data-language="css"><span class="token selector">input</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid currentcolor<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">input:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px dashed red<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">input:invalid:focus</span> <span class="token punctuation">{</span> + <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>pink<span class="token punctuation">,</span> lightgreen<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/minlength/runner.html?id=examples" 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-maxlength-and-minlength-attributes">HTML Standard <br><small># the-maxlength-and-minlength-attributes</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>minlength</code></th> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">4.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>minlength</code></th> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">4.0</td> +</tr></tbody> +</table></div> +<h3 id="html.elements.input.minlength">html.elements.input.minlength</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.minlength">html.elements.textarea.minlength</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="maxlength"><code>maxlength</code></a></li> <li><a href="size"><code>size</code></a></li> <li><a href="pattern"><code>pattern</code></a></li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="../element/input"><code><input></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/minlength" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fmultiple.html b/devdocs/html/attributes%2Fmultiple.html new file mode 100644 index 00000000..f297c683 --- /dev/null +++ b/devdocs/html/attributes%2Fmultiple.html @@ -0,0 +1,159 @@ +<header><h1>HTML attribute: multiple</h1></header><div class="section-content"><p>The Boolean <code>multiple</code> attribute, if set, means the form control accepts one or more values. Valid for the <a href="../element/input/email">email</a> and <a href="../element/input/file">file</a> input types and the <a href="../element/select"><code><select></code></a>, the manner by which the user opts for multiple values depends on the form control.</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/attribute-multiple.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="overview">Overview</h2> +<div class="section-content"> +<p>Depending on the type, the form control may have a different appearance if the <code>multiple</code> attribute is set. For the file input type, the native messaging the browser provides differs. In Firefox, the file input reads "No files selected" when the attribute is present and "No file selected" when it is not. Most browsers display a scrolling list box for a <a href="../element/select"><code><select></code></a> control with the <code>multiple</code> attribute set and a single line dropdown when the attribute is omitted. The <a href="../element/input/email">email</a> input displays the same whether or not the <code>multiple</code> attribute is included, but will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-class if more than one comma-separated email address is included if the attribute is not present.</p> <p>When <code>multiple</code> is set on the <a href="../element/input/email">email</a> input type, the user can include zero (if not also <a href="required"><code>required</code></a>), one or more comma-separated email addresses.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QowIHGkNqAEjNj5jyMQlwp5DksSgSSL0ducELPGZ2RI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">multiple</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emails<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>emails<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>If and only if the <code>multiple</code> attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.</p> <p>When <code>multiple</code> is set on the <a href="../element/input/file">file</a> input type, the user can select one or more files. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd>, and then clicking).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7pVAeg/iHHqeuZ2FApeNxEZCWcuo9y8UV5gYehGqdX8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uploads<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>uploads<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>When the attribute is omitted, the user can only select a single file per <code><input></code>.</p> <p>The <code>multiple</code> attribute on the <a href="../element/select"><code><select></code></a> element represents a control for selecting zero or more options from the list of options. Otherwise, the <a href="../element/select"><code><select></code></a> element represents a control for selecting a single <a href="../element/option"><code><option></code></a> from the list of options.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="MJvJ40YWZuMl7QG2AycZ95PtrNyveY9xoun2UN1Qnik=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">multiple</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dwarfs<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>dwarfs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Grumpy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Happy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Sleepy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Bashful<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Sneezy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Dopey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Doc<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div> <p>When <code>multiple</code> is specified, most browsers will show a scrolling list box instead of a single line dropdown.</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the <code>multiple</code> attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma."</p> <p>Setting <code>size="1"</code> on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability. Don't do that. If you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="email_input">email input</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4EZ7EWsBKMVDrj29KMx6Q7S1iMZu9kUt2xrGNMS/Gh4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Who do you want to email?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">multiple</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emails<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>emails<span class="token punctuation">"</span></span> + <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dwarf-emails<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>dwarf-emails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>grumpy@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Grumpy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>happy@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Happy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>sleepy@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sleepy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>bashful@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bashful<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>sneezy@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sneezy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>dopey@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dopey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>doc@woodworkers.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Doc<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If and only if the <code>multiple</code> attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list. If the <a href="required"><code>required</code></a> attribute is present, at least one email address is required.</p> <p>Some browsers support the appearance of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list" class="page-not-created"><code>list</code></a> of options from the associated <a href="../element/datalist"><code><datalist></code></a> for subsequent email addresses when <code>multiple</code> is present. Others do not.</p> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="email input sample" id="frame_email_input" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/multiple/runner.html?id=email_input" loading="lazy"></iframe> +</div> +</div> +<h3 id="file_input">file input</h3> +<div class="section-content"> +<p>When <code>multiple</code> is set on the <a href="../element/input/file">file</a> input type, the user can select one or more files:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="flenzpLLVWJHxnY36hMSf9XVAvMa1djslUqW8vxU/h8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uploads<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Choose the images you want to upload: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>uploads<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uploads<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.jpg, .jpeg, .png, .svg, .gif<span class="token punctuation">"</span></span> + <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Pick a text file to upload: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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 attr-name">name</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">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.txt<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="file input sample" id="frame_file_input" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/multiple/runner.html?id=file_input" loading="lazy"></iframe> +</div> <p>Note the difference in appearance between the example with <code>multiple</code> set and the other <code>file</code> input without.</p> <p>When the form is submitted, had we used <a href="../element/form"><code>method="get"</code></a> each selected file's name would have been added to URL parameters as<code>?uploads=img1.jpg&uploads=img2.svg</code>. However, since we are submitting <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/multipart" class="page-not-created">multipart</a> form data, we much use post. See the <a href="../element/form"><code><form></code></a> element and <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data#the_method_attribute">sending form data</a> for more information.</p> +</div> +<h3 id="select">select</h3> +<div class="section-content"> +<p>The <code>multiple</code> attribute on the <a href="../element/select"><code><select></code></a> element represents a control for selecting zero or more options from the list of options. Otherwise, the <a href="../element/select"><code><select></code></a> element represents a control for selecting a single <a href="../element/option"><code><option></code></a> from the list of options. The control generally has a different appearance based on the presence of the multiple attribute, with most browsers displaying a scrolling list box instead of a single line dropdown when the attribute is present.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WBZK5MxF9qVM8MmECfKYaPM6QQ7JASifA23YPkwUkt0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>dwarfs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select the dwarf woodsman you like:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">multiple</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dwarfs<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>dwarfs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>grumpy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>happy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>sleepy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>bashful@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>sneezy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>dopey@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>doc@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>favoriteOnly<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select your favorite:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favoriteOnly<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>favoriteOnly<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>grumpy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>happy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>sleepy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>bashful@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>sneezy@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>dopey@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>doc@woodworkers.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="select sample" id="frame_select" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/multiple/runner.html?id=select" loading="lazy"></iframe> +</div> <p>Note the difference in appearance between the two form controls.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="O6N6BoahQy8qGs8UrZIrX7dv1pQPKQx9/f9KyMcQeD8=" data-language="css"><span class="token comment">/* uncomment this CSS to make the multiple the same height as the single */</span> + +<span class="token comment">/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</span> +</pre> +</div> <p>There are a few ways to select multiple options in a <code><select></code> element with a <code>multiple</code> attribute. Depending on the operating system, mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys and then click multiple options to select/deselect them. Keyboard users can select multiple contiguous items by focusing on the <code><select></code> element, selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options. The selection of non-contiguous is not as well-supported: items should be able to be selected and deselected by pressing <kbd>Space</kbd>, but support varies between browsers.</p> +</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#attr-input-multiple">HTML Standard <br><small># attr-input-multiple</small></a></td></tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../element/input"><code><input></code></a></li> <li><a href="../element/select"><code><select></code></a></li> <li><a href="../element/input/email#allowing_multiple_email_addresses">Allowing multiple email addresses</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/multiple" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fpattern.html b/devdocs/html/attributes%2Fpattern.html new file mode 100644 index 00000000..126d4f69 --- /dev/null +++ b/devdocs/html/attributes%2Fpattern.html @@ -0,0 +1,143 @@ +<header><h1>HTML attribute: pattern</h1></header><div class="section-content"><p>The <code>pattern</code> attribute specifies a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">regular expression</a> the form control's value should match. If a non-<code>null</code> value doesn't conform to the constraints set by the <code>pattern</code> value, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> object's read-only <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> property will be true.</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-pattern.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="overview">Overview</h2> +<div class="section-content"> +<p>The <code>pattern</code> attribute is an attribute of the <a href="../element/input/text">text</a>, <a href="../element/input/tel">tel</a>, <a href="../element/input/email">email</a>, <a href="../element/input/url">url</a>, <a href="../element/input/password">password</a>, and <a href="../element/input/search">search</a> input types.</p> <p>The <code>pattern</code> attribute, when specified, is a regular expression which the input's <a href="../element/input#value"><code>value</code></a> must match for the value to pass <a href="../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Use the <a href="../element/input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You <strong>must not</strong> rely on the tooltip alone for an explanation. See below for more information on usability.</p> </div> <p>Some of the input types supporting the pattern attribute, notably the <a href="../element/input/email">email</a> and <a href="../element/input/url">url</a> input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> object's read-only <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch"><code>typeMismatch</code></a> property will be true.</p> +</div> +<h3 id="usability">Usability</h3> +<div class="section-content"><p>When including a <code>pattern</code>, provide a description of the pattern in visible text near the control. Additionally, include a <a href="../global_attributes/title"><code>title</code></a> attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.</p></div> +<h3 id="constraint_validation">Constraint validation</h3> +<div class="section-content"> +<p> If the input's value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> object's <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> property being <code>true</code>. The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a <code>^(?:</code> were implied at the start of the pattern and <code>)$</code> at the end. </p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> If the <code>pattern</code> attribute is specified with no value, its value is implicitly the empty string. Thus, <strong>any non-empty</strong> input <code>value</code> will result in constraint violation.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="matching_a_phone_number">Matching a phone number</h3> +<div class="section-content"> +<p>Given the following:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bSNhJiPOVFDeFrcbD2TBpPUo4vQe8EA1m95U94Ywec8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Enter your phone number in the format (123) - 456 - 7890 (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel1<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{3}<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>###<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-digit area code<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>) - + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel2<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{3}<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>###<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-digit prefix<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + - + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel3<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{4}<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>####<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4-digit number<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the <code>pattern</code> attribute set on each.</p> <p>If the values are too long or too short, or contain characters that aren't digits, the <code>patternMismatch</code> will be true. When <code>true</code>, the element matches the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS pseudo-classes.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="wBpzHvL3Pu7mzdO6qRM7EYa0KIfeehgEAeIrvwIRltw=" data-language="css"><span class="token selector">input:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> red solid 3px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Matching a phone number sample" id="frame_matching_a_phone_number" width="300" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/pattern/runner.html?id=matching_a_phone_number" loading="lazy"></iframe> +</div> <p>If we had used <a href="minlength"><code>minlength</code></a> and <a href="maxlength"><code>maxlength</code></a> attributes instead, we may have seen <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong"><code>validityState.tooLong</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a> being true.</p> +</div> +<h3 id="specifying_a_pattern">Specifying a pattern</h3> +<div class="section-content"> +<p>You can use the <a href="../element/input#pattern"><code>pattern</code></a> attribute to specify a regular expression that the inputted value must match in order to be considered valid (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course on using regular expressions to validate inputs).</p> <p>The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="efeBlE0yUh+25rwG8YBXEKbzp6i7eZOW/uyDSEIiG2Y=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[a-z]{4,8}<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4 to 8 lowercase letters<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Usernames must be lowercase and 4-8 characters in length.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Specifying a pattern sample" id="frame_specifying_a_pattern" width="600" height="110" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/pattern/runner.html?id=specifying_a_pattern" loading="lazy"></iframe> +</div> +</div> +<h3 id="accessibility_concerns">Accessibility Concerns</h3> +<div class="section-content"> +<p>When a control has a <code>pattern</code> attribute, the <code>title</code> attribute, if used, must describe the pattern. Relying on the <code>title</code> attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.</p> <p>While <code>title</code>s are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.</p> +</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#attr-input-pattern">HTML Standard <br><small># attr-input-pattern</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>pattern</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">4</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="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Forms: Data form validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">Regular Expressions</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/pattern" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fplaceholder.html b/devdocs/html/attributes%2Fplaceholder.html new file mode 100644 index 00000000..d5cb64e8 --- /dev/null +++ b/devdocs/html/attributes%2Fplaceholder.html @@ -0,0 +1,137 @@ +<header><h1>HTML attribute: placeholder</h1></header><div class="section-content"> +<p>The <code>placeholder</code> attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.</p> <p>Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a <a href="../element/label"><code><label></code></a>. As the placeholder is not visible if the value of the form control is not null, using <code>placeholder</code> instead of a <code><label></code> for a prompt harms usability and accessibility.</p> <p>The <code>placeholder</code> attribute is supported by the following input types: <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>, and <code><a href="../element/input/password">password</a></code>. It is also supported by the <code><a href="../element/textarea"><code><textarea></code></a></code> element. The <a href="#example">example</a> below shows the <code>placeholder</code> attribute in use to explain the expected format of an input field.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>placeholder</code> attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.</p> </div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Placeholders should only be used to show an example of the type of data that should be entered into a form; never as a replacement for a <code><label></code> element; doing so harms accessibility and user experience.</p> <p>The <code><label></code> text is visually and programmatically associated with its corresponding form control. Screen readers don't announce placeholder content by default, but they do announce label content; it's the label that informs assistive technology users what data should be entered in the control. Labels also improve user experience for users of pointing devices: When a user clicks, touches, or taps a <code><label></code>, focus is moved to the the label's associated form control.</p> <p>Placeholders can not be relied upon as a replacement for a label even for those not relying on assistive technology. Placeholder text is displayed at lower color contrast than the default form control text. This is by design, as you don't want users to be confused by what is placeholder text versus what is a filled-in form field. However, this lack of contrast can cause issues for low-vision users. Additionally, placeholder text disappears from form fields when users start entering text. If the placeholder text contains instructional information or examples that disappear, it can be confusing to users with cognitive issues and can make the form inaccessible if the placeholder contained the label.</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="4NUwyJ+AwnTlWvC4oCctLcsL+h659fLzEGV+zq4OZ/o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/en-US/docs/Web/HTML/Attributes/placeholder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your name:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>e.g. Mike Shinoda<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" width="150px" height="150px" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/placeholder/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#attr-input-placeholder">HTML Standard <br><small># attr-input-placeholder</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>placeholder</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>line_breaks</code></th> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">3.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>placeholder</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤37</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> +<h3 id="html.elements.input.placeholder">html.elements.input.placeholder</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.placeholder">html.elements.textarea.placeholder</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>HTML <a href="../global_attributes/title"><code>title</code></a> +</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown"><code>:placeholder-shown</code></a> pseudo-class selector</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder"><code>::placeholder</code></a> pseudo-element selector</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/placeholder" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder</a> + </p> +</div> 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><input></code></a></code> types and the <code><a href="../element/textarea"><code><textarea></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><select></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"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Text box<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Date<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Some value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Message<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></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><input></code></a></li> <li><a href="../element/select"><code><select></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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> diff --git a/devdocs/html/attributes%2Frel%2Fdns-prefetch.html b/devdocs/html/attributes%2Frel%2Fdns-prefetch.html new file mode 100644 index 00000000..0fb97005 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fdns-prefetch.html @@ -0,0 +1,56 @@ +<header><h1>rel=dns-prefetch</h1></header><div class="section-content"> +<p>The <code>dns-prefetch</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing DNS resolution for that origin.</p> <p>See <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch">Using dns-prefetch</a> for more details.</p> +</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/links.html#link-type-dns-prefetch">HTML Standard <br><small># link-type-dns-prefetch</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>dns-prefetch</code></th> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="dns-prefetch"></code> and other similar performance improvement features.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/dns-prefetch" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/dns-prefetch</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fmanifest.html b/devdocs/html/attributes%2Frel%2Fmanifest.html new file mode 100644 index 00000000..c3c6c0fd --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fmanifest.html @@ -0,0 +1,53 @@ +<header><h1>rel=manifest</h1></header><div class="section-content"> +<div class="notecard experimental" id="sect1"><p><strong>Experimental:</strong> <strong>This is an <a href="https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental">experimental technology</a></strong><br>Check the <a href="#browser_compatibility">Browser compatibility table</a> carefully before using this in production.</p></div> <p>The <code>manifest</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element indicates that the target resource is a <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Web app manifest</a>.</p> +</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/links.html#link-type-manifest">HTML Standard <br><small># link-type-manifest</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>manifest</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">39</td> +<td class="bc-supports-yes">39</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/manifest" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/manifest</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fme.html b/devdocs/html/attributes%2Frel%2Fme.html new file mode 100644 index 00000000..a905b869 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fme.html @@ -0,0 +1,17 @@ +<header><h1>rel=me</h1></header><div class="section-content"> +<p>The <code>me</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> and <a href="../../element/a"><code><a></code></a> elements indicates that the current resource is represented by the linked party. The <code>me</code> value was introduced in the <a href="https://gmpg.org/xfn/" target="_blank">XHTML Friends Network (XFN) specification</a>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5oIcwAnqsbOVHFdfTzGpWFqEvofbyOpUL/dZCYCgknw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me<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>example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>The <code>rel="me"</code> attribute is used in <a href="https://microformats.org/wiki/RelMeAuth" target="_blank">RelMeAuth</a> and <a href="https://microformats.org/wiki/web-sign-in" target="_blank">Web sign in</a> specifications as a way to enable a person to identify themselves to a web service using their domain name or a particular URL.</p> +</div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.link.rel.me</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/me" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/me</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fmodulepreload.html b/devdocs/html/attributes%2Frel%2Fmodulepreload.html new file mode 100644 index 00000000..5c6ffc3e --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fmodulepreload.html @@ -0,0 +1,104 @@ +<header><h1>rel=modulepreload</h1></header><div class="section-content"> +<p>The <code>modulepreload</code> keyword, for the <a href="../rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element, provides a declarative way to preemptively fetch a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">module script</a>, parse and compile it, and store it in the document's module map for later execution.</p> <p> Preloading allows modules and their dependencies to be downloaded early, and can also significantly reduce the overall download and processing time. This is because it allows pages to fetch modules in parallel, instead of sequentially as each module is processed and its dependencies are discovered. Note however that you can't just preload everything! What you choose to preload must be balanced against other operations that might then be starved, adversely affecting user experience. </p> <p> Links with <code>rel="modulepreload"</code> are similar to those with <a href="preload"><code>rel="preload"</code></a>. The main difference is that <code>preload</code> just downloads the file and stores it in the cache, while <code>modulepreload</code> gets the module, parses and compiles it, and puts the results into the module map so that it is ready to execute. </p> <p> When using <code>modulepreload</code> the fetch request mode is always <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/mode#cors"><code>cors</code></a>, and the <a href="../crossorigin"><code>crossorigin</code></a> property is used to determine the request <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials">credential mode</a>. If <code>crossorigin</code> is set to <a href="../crossorigin#anonymous"><code>anonymous</code></a> or <a href="../crossorigin#sect1"><code>""</code></a> (default), then the credentials mode is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials#same-origin"><code>same-origin</code></a>, and user credentials such as cookies and authentication are only sent for requests with the <code>same-origin</code>. If <code>crossorigin</code> is set to <a href="../crossorigin#use-credentials"><code>use-credentials</code></a> then the credentials mode is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials#include"><code>include</code></a>, and user credentials for both single- and cross-origin requests. </p> <p> The <a href="../../element/link#as"><code>as</code></a> attribute is optional for links with <code>rel="modulepreload"</code>, and defaults to <code>"script"</code>. It can be set to <code>"script"</code> or any script-like destination, such as <code>"audioworklet"</code>, <code>"paintworklet"</code>, <code>"serviceworker"</code>, <code>"sharedworker"</code>, or <code>"worker"</code>. An <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/Event"><code>Event</code></a> named "error" is fired on the element if any other destination is used. </p> <p> A browser <em>may</em> additionally also choose to automatically fetch any dependencies of the module resource. Note however that this is a browser-specific optimization — the only approach to ensure that all browsers will try to preload a module's dependencies is to individually specify them! Further, the events named <code>load</code> or <code>error</code> fire immediately following success or failure of loading the <em>specified</em> resources. If dependencies are automatically fetched, no additional events are fired in the main thread (although you might monitor additional requests in a service worker or on the server). </p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>Consider the <a href="https://github.com/mdn/js-examples/tree/master/module-examples/basic-modules" target="_blank">basic-modules</a> example (<a href="https://mdn.github.io/js-examples/module-examples/basic-modules/" target="_blank">live version</a>), introduced in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#basic_example_structure">JavaScript modules</a> guide.</p> <p>This has a file structure as shown below, consisting of the top level module <code>main.js</code>, which statically imports two dependency modules <code>modules/canvas.js</code> and <code>modules/square.js</code> using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a>.</p> <pre data-language="plain">index.html +main.js +modules/ + canvas.js + square.js +</pre> <p> The HTML for the example below shows how <code>main.js</code> is fetched in a <code><script></code> element. Only after <code>main.js</code> has loaded does the browser discover and fetch the two dependency modules. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jW/jmzFr6CY9QwprqwWpVqib77j1flxc0+ET/POkqrY=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Basic JavaScript module example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">canvas</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <p> The HTML below updates the example to use <code><link></code> elements with <code>rel="modulepreload"</code> for the main file and each of the dependency modules. This is much faster because the three modules all start downloading asynchronously and in parallel before they are needed. By the time <code>main.js</code> has been parsed and its dependencies are known, they have already been fetched and downloaded. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="S1a/U9BeJAqxxi3SJS9xxBNfUKltl5xrXN25AXBLfrc=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Basic JavaScript module example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modules/canvas.js<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modulepreload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>modules/square.js<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">canvas</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</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/links.html#link-type-modulepreload">HTML Standard <br><small># link-type-modulepreload</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>modulepreload</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">115</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">115</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">9.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="modulepreload"></code> and other similar performance improvement features.</li> <li> +<a href="https://developer.chrome.com/blog/modulepreload" target="_blank">Preloading modules</a> (developer.chrome.com)</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/modulepreload" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fnoopener.html b/devdocs/html/attributes%2Frel%2Fnoopener.html new file mode 100644 index 00000000..ec1438cc --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fnoopener.html @@ -0,0 +1,53 @@ +<header><h1>rel=noopener</h1></header><div class="section-content"> +<p>The <code>noopener</code> keyword for the <a href="../rel"><code>rel</code></a> attribute of the <a href="../../element/a"><code><a></code></a>, <a href="../../element/area"><code><area></code></a>, and <a href="../../element/form"><code><form></code></a> elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>Window.opener</code></a> property on the opened window (it returns <code>null</code>).</p> <p>This is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>Window.opener</code></a> property (see <a href="https://mathiasbynens.github.io/rel-noopener/" target="_blank">About rel=noopener</a> for more details), while still providing the <code>Referer</code> HTTP header (unless <code>noreferrer</code> is used as well).</p> <p>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting <code>target="_blank"</code> on <code><a></code> elements now implicitly provides the same <code>rel</code> behavior as setting <code>rel="noopener"</code> which does not set <code>window.opener</code>. See <a href="../../element/a#browser_compatibility">browser compatibility</a> for support status.</p> </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/links.html#link-type-noopener">HTML Standard <br><small># link-type-noopener</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>noopener</code></th> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">5.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/noopener" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/noopener</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fnoreferrer.html b/devdocs/html/attributes%2Frel%2Fnoreferrer.html new file mode 100644 index 00000000..deecac13 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fnoreferrer.html @@ -0,0 +1,51 @@ +<header><h1>rel=noreferrer</h1></header><div class="section-content"><p>The <code>noreferrer</code> keyword for the <a href="../rel"><code>rel</code></a> attribute of the <a href="../../element/a"><code><a></code></a>, <a href="../../element/area"><code><area></code></a>, and <a href="../../element/form"><code><form></code></a> elements instructs the browser, when navigating to the target resource, to omit the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header and otherwise leak no referrer information — and additionally to behave as if the <a href="noopener"><code>noopener</code></a> keyword were also specified.</p></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/links.html#link-type-noreferrer">HTML Standard <br><small># link-type-noreferrer</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>noreferrer</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes"><details><summary>11</summary>Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)</details></td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/noreferrer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/noreferrer</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fpreconnect.html b/devdocs/html/attributes%2Frel%2Fpreconnect.html new file mode 100644 index 00000000..2584c793 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fpreconnect.html @@ -0,0 +1,68 @@ +<header><h1>rel=preconnect</h1></header><div class="section-content"> +<p>The <code>preconnect</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).</p> <p><code><link rel="preconnect"></code> will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.</p> <p>If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The <code><link rel="preconnect"></code> hint is best used for only the most critical connections. For the others, just use <a href="dns-prefetch"><code><link rel="dns-prefetch"></code></a> to save time on the first step — the DNS lookup.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PYT4/2ue7hu0mrX90lIY7QK5OYVdsVtH/UE3L5jMOuA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>You can also implement preconnect as an HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">Link</a> header, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">http</span></p> +<pre data-signature="U963iZTksn1xospr3idfnUb+T9AbbIbtg/1wWsgVgiE=" data-language="http"><span class="token header"><span class="token header-name keyword">Link</span><span class="token punctuation">:</span> <span class="token header-value"><https://example.com>; rel="preconnect"</span></span> +</pre> +</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/links.html#link-type-preconnect">HTML Standard <br><small># link-type-preconnect</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>preconnect</code></th> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>39</summary>Before Firefox 41, it doesn't obey the <code>crossorigin</code> attribute.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes"><details><summary>39</summary>Before Firefox 41, it doesn't obey the <code>crossorigin</code> attribute.</details></td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">4.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="preconnect"></code> and other similar performance improvement features.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/preconnect" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fprefetch.html b/devdocs/html/attributes%2Frel%2Fprefetch.html new file mode 100644 index 00000000..83f845ca --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fprefetch.html @@ -0,0 +1,81 @@ +<header><h1>rel=prefetch</h1></header><div class="section-content"> +<p>The <code>prefetch</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. <code><link rel="prefetch"></code> is used for same-site navigation resources, or for subresources used by same-site pages.</p> <p>The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a> headers could block prefetching (for example <code>no-cache</code> or <code>no-store</code>).</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Because of such limitations, you are advised to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a> for document prefetches instead, where it is supported.</p> </div> <p><code><link rel="prefetch"></code> is functionally equivalent to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"><code>fetch()</code></a> call with a <code>priority: "low"</code> option set on it, except that the former will generally have an even lower priority, and it will have a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Purpose"><code>Sec-Purpose: prefetch</code></a> header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via <a href="preload"><code><link rel="preload"></code></a>) — the current page is more important than the next.</p> <p> The fetch request for a <code>prefetch</code> operation results in an HTTP request that includes the HTTP header <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Purpose"><code>Sec-Purpose: prefetch</code></a>. A server might use this header to change the cache timeouts for the resources, or perform other special handling. The request will also include the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest"><code>Sec-Fetch-Dest</code></a> header with the value set to <code>empty</code>. </p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_prefetch">Basic prefetch</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="/Ls6GUDrZudPYrLMOVKY6i48azjtXl/o2EA9LWcB48M=" data-language="js"><span class="token operator"><</span>link rel<span class="token operator">=</span><span class="token string">"prefetch"</span> href<span class="token operator">=</span><span class="token string">"main.js"</span> <span class="token operator">/</span><span class="token operator">></span> +</pre> +</div></div> +<h3 id="navigation_and_subresource_prefetches">Navigation and subresource prefetches</h3> +<div class="section-content"> +<p>Prefetching can be used to fetch both HTML and sub-resources for a possible next navigation. A common use case is to have a simple website landing page that fetches more "heavy-weight" resources used by the rest of the site.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TaeRr673Zj/f8zwm7QcpH9HYpbmTpfssHCh+GFXapCM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/app/style.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/landing-page<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="the_effects_of_cache_partitioning">The effects of cache partitioning</h3> +<div class="section-content"> +<p>Many browsers now implement some form of <a href="https://developer.chrome.com/en/blog/http-cache-partitioning/" target="_blank">cache partitioning</a>, which makes <code><link rel="prefetch"></code> useless for resources intended for use by different top-level sites. This includes the main document when navigating cross-site. So, for example, the following prefetch:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="W3qTXzhHDj8cM+de/m5U+GiVkGsG4FTStsGJRVmJlPo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://news.example/article<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Would not be accessible from <code>https://aggregator.example/</code>.</p> +</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/links.html#link-type-prefetch">HTML Standard <br><small># link-type-prefetch</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>prefetch</code></th> +<td class="bc-supports-yes"><details><summary>8</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>2</summary>Requires secure context</details></td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>15</summary>Requires secure context</details></td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>14</summary>Requires secure context</details></td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>Requires secure context</details></td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="prefetch"></code> and other similar performance improvement features.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/prefetch" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fpreload.html b/devdocs/html/attributes%2Frel%2Fpreload.html new file mode 100644 index 00000000..3b4d04a2 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fpreload.html @@ -0,0 +1,210 @@ +<header><h1>rel=preload</h1></header><div class="section-content"><p> The <code>preload</code> value of the <a href="../../element/link"><code><link></code></a> element's <a href="../../element/link#rel"><code>rel</code></a> attribute lets you declare fetch requests in the HTML's <a href="../../element/head"><code><head></code></a>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term <em>load</em>, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority. </p></div> +<h2 id="the_basics">The basics</h2> +<div class="section-content"> +<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Fy1x8+lx2y3l/bJGL8WXEzKwA9uYxGeqeAOsICWJ844=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles/main.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> <ul> <li>The path to the resource in the <a href="../../element/link#href"><code>href</code></a> attribute.</li> <li>The type of resource in the <a href="../../element/link#as"><code>as</code></a> attribute.</li> </ul> <p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css" target="_blank">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/" target="_blank">also live</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3Qr0zNO79CWzpGxlBSrNPKu1pqwx/mbVVBlpM87md7M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>JS and CSS preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>script<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>bouncing balls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> <ul> <li>Resources that are pointed to from inside CSS, like fonts or images.</li> <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> <li>Larger images and video files.</li> </ul> <p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> <ul> <li>Prioritize resource loading more accurately.</li> <li>Store in the cache for future requests, reusing the resource if appropriate.</li> <li>Apply the correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> <li>Set the correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> request headers for it.</li> </ul> +</div> +<h3 id="what_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> +<div class="section-content"> +<p>Many content types can be preloaded. The possible <code>as</code> attribute values are:</p> <ul> <li> +<code>audio</code>: Audio file, as typically used in <a href="../../element/audio"><code><audio></code></a>.</li> <li> +<code>document</code>: An HTML document intended to be embedded by a <a href="../../element/frame"><code><frame></code></a> or <a href="../../element/iframe"><code><iframe></code></a>.</li> <li> +<code>embed</code>: A resource to be embedded inside an <a href="../../element/embed"><code><embed></code></a> element.</li> <li> +<code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer, WebAssembly binary, or JSON file.</li> <li> +<code>font</code>: Font file.</li> <li> +<code>image</code>: Image file.</li> <li> +<code>object</code>: A resource to be embedded inside an <a href="../../element/object"><code><object></code></a> element.</li> <li> +<code>script</code>: JavaScript file.</li> <li> +<code>style</code>: CSS stylesheet.</li> <li> +<code>track</code>: WebVTT file.</li> <li> +<code>worker</code>: A JavaScript web worker or shared worker.</li> <li> +<code>video</code>: Video file, as typically used in <a href="../../element/video"><code><video></code></a>.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <code>font</code> and <code>fetch</code> preloading requires the <code>crossorigin</code> attribute to be set; see <a href="#cors-enabled_fetches">CORS-enabled fetches</a> below.</p> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions" target="_blank">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination" target="_blank">request destinations</a>.</p> </div> +</div> +<h2 id="including_a_mime_type">Including a MIME type</h2> +<div class="section-content"> +<p><code><link></code> elements can accept a <a href="../../element/link#type"><code>type</code></a> attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> <p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video" target="_blank">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/" target="_blank">the live version</a>), a code snippet from which is shown below. This illustrates the core behavior behind preloading in general.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bXIfM4C5rs07wKhoc8SigaJZ2k9+0Mtja1k/zpFWSlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Video preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video<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>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<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>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.webm<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>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Your browser doesn't support HTML video. Here is a + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>link to the video<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> instead. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The code in the example above causes the <code>video/mp4</code> video to be preloaded only in supporting browsers — and for users who have <code>video/mp4</code> support in their browsers, causes the <code>video/mp4</code> video to actually be used (since it's the first <a href="../../element/source"><code><source></code></a> specified). That makes the video player hopefully smoother/more responsive for users who have <code>video/mp4</code> support in their browsers.</p> <p>Note that for users whose browsers have both <code>video/mp4</code> and <code>video/webm</code> support, if in that code a <code><link rel="preload" href="sintel-short.webm" as="video" type="video/webm"></code> element were also specified, then <em>both</em> the <code>video/mp4</code> and <code>video/webm</code> videos would be preloaded — even though only one of them would actually be used.</p> <p>Therefore, specifying preloading for multiple types of the same resource is discouraged. Instead, the best practice is to specify preloading only for the type the majority of your users are likely to actually use. That's why the code in the example above doesn't specify preloading for the <code>video/webm</code> video.</p> <p>However, the lack of preloading doesn't prevent the <code>video/webm</code> video from actually being used by those who need it: for users whose browsers don't have <code>video/mp4</code> support but do have <code>video/webm</code> support, the code in the example above does still cause the <code>video/webm</code> video to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users.</p> +</div> +<h2 id="cors-enabled_fetches">CORS-enabled fetches</h2> +<div class="section-content"> +<p>When preloading resources that are fetched with <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a> enabled (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"><code>fetch()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">fonts</a>), special care needs to be taken to setting the <a href="../../element/link#crossorigin"><code>crossorigin</code></a> attribute on your <a href="../../element/link"><code><link></code></a> element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.</p> <p>As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements" target="_blank">Font fetching requirements</a>).</p> <p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts" target="_blank">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/" target="_blank">also see it live</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/dOvrgkbrmb1VH98URZWLpCsEVUZJqkJn8Tjg9vrDuI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Web font example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fonts/cicle_fina-webfont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<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>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fonts/zantroke-webfont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<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>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + … +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to make sure the preload's CORS mode matches the eventual font resource request.</p> +</div> +<h2 id="including_media">Including media</h2> +<div class="section-content"> +<p>One nice feature of <code><link></code> elements is their ability to accept <a href="../../element/link#media"><code>media</code></a> attributes. These can accept <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types">media types</a> or full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> <p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media" target="_blank">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/" target="_blank">live example</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="wu6VDO6qfsibEfG5ZPLvtqfLp3FD4PB5V+hEJxOI2kM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Responsive preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-image-narrow.png<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-image-wide.png<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 601px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My site<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token keyword">const</span> mediaQueryList <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">"(max-width: 600px)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> header <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>mediaQueryList<span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span> + header<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundImage <span class="token operator">=</span> <span class="token string">"url(bg-image-narrow.png)"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + header<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundImage <span class="token operator">=</span> <span class="token string">"url(bg-image-wide.png)"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia"><code>Window.matchMedia</code></a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList"><code>MediaQueryList</code></a> to do this (see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries">Testing media queries</a> for more).</p> <p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> <p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> +</div> +<h2 id="scripting_and_preloads">Scripting and preloads</h2> +<div class="section-content"> +<div class="notecard note" id="sect3"> <p><strong>Note:</strong> Use <a href="modulepreload"><code><link rel="modulepreload"></code></a> instead if you are working with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a>.</p> </div> <p> Another nice thing about these preloads is that you can execute them with script. For example, here we create a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a> instance, then attach it to the DOM: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="8GShPYRKgV1EntJUC1XRqeGIVGlNJ4Ge2PwuSi8nS44=" data-language="js"><span class="token keyword">const</span> preloadLink <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"link"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">"myscript.js"</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>rel <span class="token operator">=</span> <span class="token string">"preload"</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>as <span class="token operator">=</span> <span class="token string">"script"</span><span class="token punctuation">;</span> +document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>preloadLink<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="4LhLTrzH4GchtbyiNlcYdN9JcBetf3+4zukpHK0nCEA=" data-language="js"><span class="token keyword">const</span> preloadedScript <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +preloadedScript<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"myscript.js"</span><span class="token punctuation">;</span> +document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>preloadedScript<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> +</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/links.html#link-type-preload">HTML Standard <br><small># link-type-preload</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>preload</code></th> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes"><details><summary>≤79</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>50</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>5.0</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="preload"></code> and other similar performance improvement features.</li> <li> +<a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/" target="_blank">Preload: What Is It Good For?</a> by Yoav Weiss</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/preload" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel%2Fprerender.html b/devdocs/html/attributes%2Frel%2Fprerender.html new file mode 100644 index 00000000..dbb7be27 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fprerender.html @@ -0,0 +1,56 @@ +<header><h1>rel=prerender</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> +<div class="notecard nonstandard" id="sect2"><p><strong>Non-standard:</strong> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p></div> <p>The <code>prerender</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code><link></code></a> element is a hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.</p> <p>This feature is superceded by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>.</p> +</div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.link.rel.prerender</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</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>prerender</code></th> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="prerender"></code> and other similar performance improvement features.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel/prerender" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prerender</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frel.html b/devdocs/html/attributes%2Frel.html new file mode 100644 index 00000000..7987e306 --- /dev/null +++ b/devdocs/html/attributes%2Frel.html @@ -0,0 +1,395 @@ +<header><h1>HTML attribute: rel</h1></header><div class="section-content"> +<p>The <code>rel</code> attribute defines the relationship between a linked resource and the current document. Valid on <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, <a href="../element/area"><code><area></code></a>, and <a href="../element/form"><code><form></code></a>, the supported values depend on the element on which the attribute is found.</p> <p>The type of relationships is given by the value of the <code>rel</code> attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from a <code>class</code> name, which does not express semantics, the <code>rel</code> attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the <code>rel</code> attribute are the <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml" target="_blank">IANA link relation registry</a>, the <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes" target="_blank">HTML Living Standard</a>, and the freely-editable <a href="https://microformats.org/wiki/existing-rel-values" target="_blank">existing-rel-values page</a> in the microformats wiki, <a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types" target="_blank">as suggested</a> by the Living Standard. If a <code>rel</code> attribute not present in one of the three sources above is used some HTML validators (such as the <a href="https://validator.w3.org/" target="_blank">W3C Markup Validation Service</a>) will generate a warning.</p> <p>The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th> +<code>rel</code> value</th> <th>Description</th> <th><a href="../element/link"><code><link></code></a></th> <th> +<a href="../element/a"><code><a></code></a> and <a href="../element/area"><code><area></code></a> +</th> <th><a href="../element/form"><code><form></code></a></th> </tr> </thead> <tbody> <tr> <td><a href="#alternate"><code>alternate</code></a></td> <td>Alternate representations of the current document.</td> <td>Link</td> <td>Link</td> <td>Not allowed</td> </tr> <tr> <td><a href="#author"><code>author</code></a></td> <td>Author of the current document or article.</td> <td>Link</td> <td>Link</td> <td>Not allowed</td> </tr> <tr> <td><a href="#bookmark"><code>bookmark</code></a></td> <td>Permalink for the nearest ancestor section.</td> <td>Not allowed</td> <td>Link</td> <td>Not allowed</td> </tr> <tr> <td><a href="#canonical"><code>canonical</code></a></td> <td>Preferred URL for the current document.</td> <td>Link</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/dns-prefetch"><code>dns-prefetch</code></a></td> <td>Tells the browser to preemptively perform DNS resolution for the target resource's origin.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="#external"><code>external</code></a></td> <td>The referenced document is not part of the same site as the current document.</td> <td>Not allowed</td> <td>Annotation</td> <td>Annotation</td> </tr> <tr> <td><a href="#help"><code>help</code></a></td> <td>Link to context-sensitive help.</td> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td><a href="#icon"><code>icon</code></a></td> <td>An icon representing the current document.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="#license"><code>license</code></a></td> <td>Indicates that the main content of the current document is covered by the copyright license. described by the referenced document.</td> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td><a href="rel/manifest"><code>manifest</code></a></td> <td>Web app manifest.</td> <td>Link</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/me"><code>me</code></a></td> <td>Indicates that the current document represents the person who owns the linked content.</td> <td>Link</td> <td>Link</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/modulepreload"><code>modulepreload</code></a></td> <td>Tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="#next"><code>next</code></a></td> <td>Indicates that the current document is a part of a series and that the next document in the series is the referenced document.</td> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td><a href="#nofollow"><code>nofollow</code></a></td> <td>Indicates that the current document's original author or publisher does not endorse the referenced document.</td> <td>Not allowed</td> <td>Annotation</td> <td>Annotation</td> </tr> <tr> <td><a href="rel/noopener"><code>noopener</code></a></td> <td>Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate <code>target</code> attribute value).</td> <td>Not allowed</td> <td>Annotation</td> <td>Annotation</td> </tr> <tr> <td><a href="#noreferrer"><code>noreferrer</code></a></td> <td>No <code>Referer</code> header will be included. Additionally, has the same effect as <code>noopener</code>.</td> <td>Not allowed</td> <td>Annotation</td> <td>Annotation</td> </tr> <tr> <td><a href="#opener"><code>opener</code></a></td> <td>Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "<code>_blank</code>" as <code>target</code> attribute value).</td> <td>Not allowed</td> <td>Annotation</td> <td>Annotation</td> </tr> <tr> <td><a href="#pingback"><code>pingback</code></a></td> <td>Gives the address of the pingback server that handles pingbacks to the current document.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/preconnect"><code>preconnect</code></a></td> <td>Specifies that the user agent should preemptively connect to the target resource's origin.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/prefetch"><code>prefetch</code></a></td> <td>Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/preload"><code>preload</code></a></td> <td>Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the <a href="../element/link#as"><code>as</code></a> attribute (and the priority associated with the corresponding destination).</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="rel/prerender"><code>prerender</code></a></td> <td>Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="#prev"><code>prev</code></a></td> <td>Indicates that the current document is a part of a series and that the previous document in the series is the referenced document.</td> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td><a href="#search"><code>search</code></a></td> <td>Gives a link to a resource that can be used to search through the current document and its related pages.</td> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td><a href="#stylesheet"><code>stylesheet</code></a></td> <td>Imports a style sheet.</td> <td>External Resource</td> <td>Not allowed</td> <td>Not allowed</td> </tr> <tr> <td><a href="#tag"><code>tag</code></a></td> <td>Gives a tag (identified by the given address) that applies to the current document.</td> <td>Not allowed</td> <td>Link</td> <td>Not allowed</td> </tr> </tbody> </table></div></figure> <p>The <code>rel</code> attribute is relevant to the <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, <a href="../element/area"><code><area></code></a>, and <a href="../element/form"><code><form></code></a> elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insensitive.</p> <p>The <code>rel</code> attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on <a href="../element/link"><code><link></code></a> and <a href="../element/form"><code><form></code></a>, if the <code>rel</code> attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a href="../element/a"><code><a></code></a> and <a href="../element/area"><code><area></code></a> will still created links, but without a defined relationship.</p> +</div> +<h2 id="values">Values</h2> +<div class="section-content"><dl> <dt id="alternate"><a href="#alternate"><code>alternate</code></a></dt> <dd> <p>Indicates an alternate representation of the current document. Valid for <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, the meaning depends on the values of the other attributes.</p> <ul> <li>With the <a href="#stylesheet"><code>stylesheet</code></a> keyword on a <code><link></code>, it creates an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">alternate stylesheet</a>. <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NueofBy35JP7hJ/L51T5doTDodhtHbtdA6AdwaNxMUo=" data-language="html"><span class="token comment"><!-- a persistent style sheet --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- alternate style sheets --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highcontrast.css<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>High contrast<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> </li> <li>With an <a href="../element/link#hreflang"><code>hreflang</code></a> attribute that differs from the document language, it indicates a translation.</li> <li>With the <a href="../element/link#type"><code>type</code></a> attribute value of <code>"application/rss+xml"</code>or <code>"application/atom+xml"</code>, it creates a hyperlink referencing a syndication feed. <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kNf/pONEvjkGN5vHr5slx28Bi+Iyq/IQwC37wPrin6k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<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>application/atom+xml<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>posts.xml<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Blog<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> </li> <li>Otherwise, it creates a hyperlink referencing an alternate representation of the current document, whose nature is given by the <a href="../element/link#hreflang"><code>hreflang</code></a> and <a href="../element/link#type"><code>type</code></a> attributes. <ul> <li>If <code>hreflang</code> is given alongside <code>alternate</code>, and the value of <code>hreflang</code> is different from the current document's language, it indicates that the referenced document is a translation.</li> <li>If <code>type</code> is given alongside <code>alternate</code>, it indicates that the referenced document is an alternative format (such as a PDF).</li> <li>The <code>hreflang</code> and <code>type</code> attributes may both be given alongside <code>alternate</code>.</li> </ul> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Brbb9n1cD/opGX1vGu+QNj0RKQ+dIrk+4vKJjBLiLoQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fr/html/print<span class="token punctuation">"</span></span> + <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fr<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/html<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>French HTML (for printing)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fr/pdf<span class="token punctuation">"</span></span> + <span class="token attr-name">hreflang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fr<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>application/pdf<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>French PDF<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> </li> </ul> </dd> <dt id="author"><a href="#author"><code>author</code></a></dt> <dd> <p>Indicates the referenced document provides further information about the author of the current document or article. Relevant for <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a> elements.</p> <p>With <a href="../element/a"><code><a></code></a> and <a href="../element/area"><code><area></code></a>, it indicates the linked document (or <code>mailto:</code>) provides information about the author of the nearest <a href="../element/article"><code><article></code></a> ancestor if there is one, otherwise the entire document.</p> <p>With <a href="../element/link"><code><link></code></a>, it represents the author of the entire document.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> For historical reasons, the obsolete attribute value <code>rev="made"</code> is treated as <code>rel="author"</code>.</p> </div> </dd> <dt id="bookmark"><a href="#bookmark"><code>bookmark</code></a></dt> <dd> <p>Relevant as the <code>rel</code> attribute value for the <a href="../element/a"><code><a></code></a> and <a href="../element/area"><code><area></code></a> elements. Gives a permalink for the nearest ancestor <a href="../element/article"><code><article></code></a> element, if there is one. If there is no ancestor <code><article></code> element, gives a permalink for the section the linking element is most closely associated with.</p> </dd> <dt id="canonical"><a href="#canonical"><code>canonical</code></a></dt> <dd> <p>Valid for <a href="../element/link"><code><link></code></a>, it defines the preferred URL for the current document, which helps search engines reduce duplicate content.</p> </dd> <dt id="dns-prefetch"><a href="#dns-prefetch"><code>dns-prefetch</code></a></dt> <dd> <p>Relevant for the <a href="../element/link"><code><link></code></a> element both in the <a href="../element/body"><code><body></code></a> and <a href="../element/head"><code><head></code></a>, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch">dns-prefetch</a> described in <a href="https://w3c.github.io/resource-hints/" target="_blank">resource hints</a>.</p> </dd> <dt id="external"><a href="#external"><code>external</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.</p> </dd> <dt id="help"><a href="#help"><code>help</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, the <code>help</code> keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <code><link></code>, the help is for the whole document. When included with <a href="../element/a"><code><a></code></a> and <a href="../element/area"><code><area></code></a> and supported, the default <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor"><code>cursor</code></a> will be <code>help</code> instead of <code>pointer</code>.</p> </dd> <dt id="icon"><a href="#icon"><code>icon</code></a></dt> <dd> <p>Valid with <a href="../element/link"><code><link></code></a>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.</p> <p>The most common use for the <code>icon</code> value is the favicon:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bNWRQSgMJ5lvH4tEqJJoMKBlYGGEJbaC1RB6YHUh+EE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>If there are multiple <code><link rel="icon"></code>s, the browser uses their <a href="../element/link#media"><code>media</code></a>, <a href="../element/link#type"><code>type</code></a>, and <a href="../element/link#sizes"><code>sizes</code></a> attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <a href="crossorigin"><code>crossorigin</code></a> attribute is not supported for <code>rel="icon"</code> in Chromium-based browsers. See the <a href="https://crbug.com/1121645" target="_blank">open Chromium issue</a>.</p> </div> <div class="notecard note" id="sect3"> <p> <strong>Note:</strong> Apple's iOS does not use this link type, nor the <a href="../element/link#sizes"><code>sizes</code></a> attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4" target="_blank"><code>apple-touch-icon</code></a> and <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6" target="_blank"><code>apple-touch-startup-image</code></a> respectively. </p> </div> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> The <code>shortcut</code> link type is often seen before <code>icon</code>, but this link type is non-conforming, ignored and <strong>web authors must not use it anymore</strong>.</p> </div> </dd> <dt id="license"><a href="#license"><code>license</code></a></dt> <dd> <p>Valid on the <a href="../element/a"><code><a></code></a>, <a href="../element/area"><code><area></code></a>, <a href="../element/form"><code><form></code></a>, <a href="../element/link"><code><link></code></a> elements, the <code>license</code> value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the <a href="../element/head"><code><head></code></a> element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/O63utXt1yaBe1nXdLnhGgmKoJ8f+RczbV2Ov/nTxP0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>license<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#license<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Although recognized, the synonym <code>copyright</code> is incorrect and must be avoided.</p> </div> </dd> <dt id="manifest"> +<a href="#manifest"><code>manifest</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Web app manifest</a>. Requires the use of the CORS protocol for cross-origin fetching.</p> </dd> <dt id="modulepreload"><a href="#modulepreload"><code>modulepreload</code></a></dt> <dd> <p>Useful for improved performance, and relevant to the <a href="../element/link"><code><link></code></a> anywhere in the document, setting <code>rel="modulepreload"</code> tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. <code>modulepreload</code> links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also <a href="rel/modulepreload"><code>modulepreload</code></a>.</p> </dd> <dt id="next"><a href="#next"><code>next</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, the <code>next</code> values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a <code><link></code>, browsers may assume that document will be fetched next, and treat it as a resource hint.</p> </dd> <dt id="nofollow"><a href="#nofollow"><code>nofollow</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, the <code>nofollow</code> keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.</p> </dd> <dt id="noopener"><a href="#noopener"><code>noopener</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate <code>target</code> attribute value). In other words, it makes the link behave as if <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a> were null and <code>target="_parent"</code> were set.</p> <p>This is the opposite of <a href="#opener"><code>opener</code></a>.</p> </dd> <dt id="noreferrer"><a href="#noreferrer"><code>noreferrer</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, including this value makes the referrer unknown (no <code>Referer</code> header will be included), and creates a top-level browsing context as if <code>noopener</code> were also set.</p> </dd> <dt id="opener"><a href="#opener"><code>opener</code></a></dt> <dd> <p>Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "<code>_blank</code>" as <code>target</code> attribute value). Effectively, the opposite of <a href="#noopener">noopener</a>.</p> </dd> <dt id="pingback"><a href="#pingback"><code>pingback</code></a></dt> <dd> <p>Gives the address of the pingback server that handles pingbacks to the current document. See the <a href="https://www.hixie.ch/specs/pingback/pingback" target="_blank">Pingback specification</a>.</p> </dd> <dt id="preconnect"><a href="#preconnect"><code>preconnect</code></a></dt> <dd> <p>Provides a hint to the browser suggesting that it open a connection to the linked website in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</p> </dd> <dt id="prefetch"><a href="#prefetch"><code>prefetch</code></a></dt> <dd> <p> Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. See <a href="https://developer.mozilla.org/en-US/docs/Glossary/Prefetch">prefetch</a> for more information. </p> </dd> <dt id="preload"><a href="#preload"><code>preload</code></a></dt> <dd> <p>Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the <a href="../element/link#as"><code>as</code></a> attribute (and the priority associated with the corresponding destination). See the page for the <a href="rel/preload"><code>preload</code></a> value.</p> </dd> <dt id="prerender"> +<a href="#prerender"><code>prerender</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future, for example by fetching its subresources or performing some rendering.</p> </dd> <dt id="prev"><a href="#prev"><code>prev</code></a></dt> <dd> <p>Similar to the <a href="#next"><code>next</code></a> keyword, relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a>, the <code>prev</code> values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.</p> <p>Note: The synonym <code>previous</code> is incorrect and should not be used.</p> </dd> <dt id="search"><a href="#search"><code>search</code></a></dt> <dd> <p>Relevant to <a href="../element/form"><code><form></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a> elements, the <code>search</code> keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.</p> <p>If the <a href="../element/link#type"><code>type</code></a> attribute is set to <code>application/opensearchdescription+xml</code> the resource is an <a href="https://developer.mozilla.org/en-US/docs/Web/OpenSearch">OpenSearch</a> plugin that can be easily added to the interface of Firefox.</p> </dd> <dt id="stylesheet"><a href="#stylesheet"><code>stylesheet</code></a></dt> <dd> <p>Valid for the <a href="../element/link"><code><link></code></a> element, it imports an external resource to be used as a stylesheet. The <a href="../element/link#type"><code>type</code></a> attribute is not needed as it's a <code>text/css</code> stylesheet, as that is the default value. If it's not a stylesheet of type <code>text/css</code> it is best to declare the type.</p> <p>While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used.</p> <p>When used with the <a href="#alternate"><code>alternate</code></a> keyword, it defines an alternative style sheet. In this case, include a non-empty <a href="../element/link#title"><code>title</code></a>.</p> <p>The external stylesheet will not be used or even downloaded if the media does not match the value of the <a href="../element/link#media"><code>media</code></a> attribute.</p> <p>Requires the use of the CORS protocol for cross-origin fetching.</p> </dd> <dt id="tag"><a href="#tag"><code>tag</code></a></dt> <dd> <p>Valid for the <a href="../element/a"><code><a></code></a>, and <a href="../element/area"><code><area></code></a> elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the <code>tag</code> value of the <code>rel</code> attribute is for a single document.</p> </dd> </dl></div> +<h3 id="non-standard_values">Non-standard values</h3> +<div class="section-content"><dl> <dt id="apple-touch-icon"><a href="#apple-touch-icon"><code>apple-touch-icon</code></a></dt> <dd> <p>Specifies the icon for a web application on an iOS device.</p> </dd> </dl></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/links.html#linkTypes">HTML Standard <br><small># linkTypes</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>rel</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>noopener</code></th> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>noreferrer</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes"><details><summary>11</summary>Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)</details></td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.5</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>rel</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>noopener</code></th> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes"><details><summary>52</summary>Before Firefox 63, <code>rel="noopener"</code> created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.</details></td> +<td class="bc-supports-yes">36</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>noreferrer</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes"><details><summary>11</summary>Only supported in IE11 in later versions of Windows 10 (creators update). (Per caniuse.com.)</details></td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.5</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>rel</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">Yes</td> +<td class="bc-supports-yes">9</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>alternate_stylesheet</code></th> +<td class="bc-supports-no">1–48</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-no">15–35</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">4.4–48</td> +<td class="bc-supports-no">18–48</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">14–35</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">1.0–5.0</td> +</tr> +<tr> +<th><code>dns-prefetch</code></th> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>icon</code></th> +<td class="bc-supports-yes"><details><summary>4</summary>If both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.).</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>In version 79 and later (Blink-based Edge), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)</details></td> +<td class="bc-supports-yes"><details><summary>2</summary>Before Firefox 83, the <code>crossorigin</code> attribute is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>9</summary>In version 15 and later (Blink-based Opera), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)</details></td> +<td class="bc-supports-yes"><details><summary>3.1</summary>If both ICO and PNG are available, will ALWAYS use ICO file, regardless of sizes set. (Per caniuse.com.)</details></td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>No</summary>Does not use favicons at all (but may have alternative for bookmarks, etc.). (Per caniuse.com.)</details></td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>manifest</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">39</td> +<td class="bc-supports-yes">39</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>modulepreload</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">115</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">115</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>preconnect</code></th> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>39</summary>Before Firefox 41, it doesn't obey the <code>crossorigin</code> attribute.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes"><details><summary>39</summary>Before Firefox 41, it doesn't obey the <code>crossorigin</code> attribute.</details></td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>prefetch</code></th> +<td class="bc-supports-yes"><details><summary>8</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>2</summary>Requires secure context</details></td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>15</summary>Requires secure context</details></td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Requires secure context</details></td> +<td class="bc-supports-yes"><details><summary>14</summary>Requires secure context</details></td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>Requires secure context</details></td> +</tr> +<tr> +<th><code>preload</code></th> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes"><details><summary>≤79</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>50</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>5.0</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +</tr> +<tr> +<th><code>prerender</code></th> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr> +</tbody> +</table></div> +<h3 id="html.elements.link.rel">html.elements.link.rel</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.a.rel">html.elements.a.rel</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.area.rel">html.elements.area.rel</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/API/HTMLLinkElement/relList"><code>HTMLLinkElement.relList</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/relList"><code>HTMLAnchorElement.relList</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement/relList"><code>HTMLAreaElement.relList</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rel" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Frequired.html b/devdocs/html/attributes%2Frequired.html new file mode 100644 index 00000000..11773658 --- /dev/null +++ b/devdocs/html/attributes%2Frequired.html @@ -0,0 +1,48 @@ +<header><h1>HTML attribute: required</h1></header><div class="section-content"> +<p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML">Boolean</a> <code>required</code> attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.</p> <p>The <code>required</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>, <code><a href="../element/input/number">number</a></code>, <code><a href="../element/input/checkbox">checkbox</a></code>, <code><a href="../element/input/radio">radio</a></code>, <code><a href="../element/input/file">file</a></code>, <a href="../element/input"><code><input></code></a> types along with the <a href="../element/select"><code><select></code></a> and <a href="../element/textarea"><code><textarea></code></a> form control elements. If present on any of these input types and elements, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> pseudo class will match. If the attribute is not included, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a> pseudo class will match.</p> <p>The attribute is not supported or relevant to <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> <p>Note <code>color</code> and <code>range</code> don't support <code>required</code> as both always have a value. Type <code>color</code> defaults to <code>#000000</code>. The default for <code>range</code> is the midpoint between <code>min</code> and <code>max</code> — with <code>min</code> and <code>max</code> defaulting to 0 and 100 respectively in most browsers if not declared.</p> <p>In the case of a same named group of <a href="../element/input/radio">radio</a> buttons, if a single radio button in the group has the <code>required</code> attribute, a radio button in that group must be checked, although it doesn't have to be the one on which the attribute is applied. To improve code maintenance, it is recommended to either include the <code>required</code> attribute in every same-named radio button in the group, or else in none.</p> <p>In the case of a same named group of <a href="../element/input/checkbox">checkbox</a> input types, only the checkboxes with the <code>required</code> attribute are required.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required"><code>aria-required="true"</code></a> tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.</p> </div> +</div> +<h3 id="attribute_interactions">Attribute interactions</h3> +<div class="section-content"><p>Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <a href="readonly"><code>readonly</code></a> attribute also specified.</p></div> +<h3 id="usability">Usability</h3> +<div class="section-content"><p>When including the <code>required</code> attribute, provide a visible indication near the control informing the user that the <a href="../element/input"><code><input></code></a>, <a href="../element/select"><code><select></code></a> or <a href="../element/textarea"><code><textarea></code></a> is required. In addition, target required form controls with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control is mandatory based on the required attribute, but adding <code>aria-required="true"</code> doesn't hurt, in case the browser / screen reader combination does not support <code>required</code> yet.</p></div> +<h3 id="constraint_validation">Constraint validation</h3> +<div class="section-content"><p>If the element is required and the element's value is the empty string, then the element is suffering from <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>valueMissing</code></a> and the element will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo class.</p></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.</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="N2q3fmrY+xR1CAiLsVVYSXIWpO+XPUb9O1jt6cE9cfk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Required<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/required/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.attributes.required</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>validityState.valueMissing</code></a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a> +</li> <li><a href="../element/input"><code><input></code></a></li> <li><a href="../element/select"><code><select></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/required" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fsize.html b/devdocs/html/attributes%2Fsize.html new file mode 100644 index 00000000..b559cfb1 --- /dev/null +++ b/devdocs/html/attributes%2Fsize.html @@ -0,0 +1,48 @@ +<header><h1>HTML attribute: size</h1></header><div class="section-content"> +<p>The <code>size</code> attribute defines the width of the <a href="../element/input"><code><input></code></a> and the height of the <a href="../element/select"><code><select></code></a> element. For the <code>input</code>, if the <code>type</code> attribute is <a href="../element/input/text">text</a> or <a href="../element/input/password">password</a> then it's the number of characters. This must be an integer value of 0 or higher. If no <code>size</code> is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.</p> <p>The <code>size</code> attribute has no impact on constraint validation.</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/attribute-size.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>By adding <code>size</code> on some input types, the width of the input can be controlled. Adding size on a select changes the height, defining how many options are visible in the closed state.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="r3ovSDU1oAD4FwwBlp9VvDXcvm1fOpkn9p4iJIPtdLA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fruit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a fruit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<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>fruit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>vegetable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a vegetable<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vegetable<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruits<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>banana<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cherry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>strawberry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>durian<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>blueberry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vegetables<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>carrot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cucumber<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cauliflower<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>celery<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>collard greens<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/size/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.attribute.size</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="maxlength"><code>maxlength</code></a></li> <li><a href="minlength"><code>minlength</code></a></li> <li><a href="pattern"><code>pattern</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/size" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size</a> + </p> +</div> diff --git a/devdocs/html/attributes%2Fstep.html b/devdocs/html/attributes%2Fstep.html new file mode 100644 index 00000000..b5fe57e2 --- /dev/null +++ b/devdocs/html/attributes%2Fstep.html @@ -0,0 +1,82 @@ +<header><h1>HTML attribute: step</h1></header><div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to or the keyword <code>any</code>. It is valid for the numeric input types, including the <a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types.</p> <p>The <code>step</code> sets the <em>stepping interval</em> when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (minute, week, month, day) for the date/time input types. The value can must be a positive number - integer or float — or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <a href="min"><code>min</code></a> and <a href="max"><code>max</code></a>).</p> <p>The default stepping value for <code>number</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second, with 900 being equal to 15 minutes.</p> +</div> +<h2 id="syntax">Syntax</h2> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption>Default values for step</caption> <thead> <tr> <th>Input type</th> <th>Value</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/input/date">date</a></td> <td>1 (day)</td> <td><code><input type="date" min="2019-12-25" step="1"></code></td> </tr> <tr> <td><a href="../element/input/month">month</a></td> <td>1 (month)</td> <td><code><input type="month" min="2019-12" step="12"></code></td> </tr> <tr> <td><a href="../element/input/week">week</a></td> <td>1 (week)</td> <td><code><input type="week" min="2019-W23" step="2"></code></td> </tr> <tr> <td><a href="../element/input/time">time</a></td> <td>60 (seconds)</td> <td><code><input type="time" min="09:00" step="900"></code></td> </tr> <tr> <td><a href="../element/input/datetime-local">datetime-local</a></td> <td>1 (second)</td> <td><code><input type="datetime-local" min="2019-12-25T19:30" +step="7"></code></td> </tr> <tr> <td><a href="../element/input/number">number</a></td> <td>1</td> <td><code><input type="number" min="0" step="0.1" max="10"></code></td> </tr> <tr> <td><a href="../element/input/range">range</a></td> <td>1</td> <td><code><input type="range" min="0" step="2" max="10"></code></td> </tr> </tbody> </table></div></figure> <p>If <code>any</code> is not explicitly set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <a href="min"><code>min</code></a> value and increments of the step value, up to the <a href="max"><code>max</code></a> value, if specified. For example, if we have <code><input type="number" min="10" step="2"></code> any even integer, 10 or greater, is valid. If omitted, <code><input type="number"></code>, any integer is valid, but floats, like 4.2, are not valid, as <code>step</code> defaults to 1. For 4.2 to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <code><input type="number" min="-5.2"></code></p> +</div> +<h3 id="min_impact_on_step">min impact on step</h3> +<div class="section-content"> +<p>The value of <code>min</code> and <code>step</code> define what are valid values, even if the <code>step</code> attribute is not included, as <code>step</code> defaults to <code>0</code>.</p> <p>We add a big red border around invalid inputs:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="6PMEpHs0vkMNWTCDnxCiFvk6vsP7Y36Lf2EE3Y3cOfI=" data-language="css"><span class="token selector">input:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> solid red 3px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5KugUhYrA7ZrK/PgdWnjnBnBnCBmU1NYb+3wzzWuvXc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myNumber<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myNumber<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Valid values include <code>1.2</code>, <code>3.2</code>, <code>5.2</code>, <code>7.2</code>, <code>9.2</code>, <code>11.2</code>, and so on. Integers and even numbers followed by .2 are not valid. As we included an invalid value, supporting browsers will show the value as invalid. The number spinner, if present, will only show valid float values of <code>1.2</code> and greater</p> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="min impact on step sample" id="frame_min_impact_on_step" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/step/runner.html?id=min_impact_on_step" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> pseudoclasses</p> </div> <p>See <a href="../constraint_validation">Client-side validation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> for more information.</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the <code>min</code> attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <a href="../element/label"><code><label></code></a> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a>.</p></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#attr-input-step">HTML Standard <br><small># attr-input-step</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>step</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</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="max"><code>max</code></a></li> <li><a href="min"><code>min</code></a></li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> <li><a href="../element/input"><code><input></code></a></li> <li> +<a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and the <a href="../element/meter"><code><meter></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/step" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step</a> + </p> +</div> diff --git a/devdocs/html/attributes.html b/devdocs/html/attributes.html new file mode 100644 index 00000000..e2dad600 --- /dev/null +++ b/devdocs/html/attributes.html @@ -0,0 +1,67 @@ +<header><h1>HTML attribute reference</h1></header><div class="section-content"><p>Elements in HTML have <strong>attributes</strong>; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</p></div> +<h2 id="attribute_list">Attribute list</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="standard-table"> <thead> <tr> <th>Attribute Name</th> <th>Elements</th> <th>Description</th> </tr> </thead> <tbody> <tr id="accept-attribute"> <td><code><a href="attributes/accept">accept</a></code></td> <td> +<a href="element/form"><code><form></code></a>, <a href="element/input"><code><input></code></a> +</td> <td>List of types the server accepts, typically a file type.</td> </tr> <tr id="accept-charset-attribute"> <td><code><a href="element/form#accept-charset">accept-charset</a></code></td> <td><a href="element/form"><code><form></code></a></td> <td>List of supported charsets.</td> </tr> <tr> <td><code><a href="global_attributes/accesskey">accesskey</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Keyboard shortcut to activate or add focus to the element.</td> </tr> <tr id="action-attribute"> <td><code><a href="element/form#action">action</a></code></td> <td><a href="element/form"><code><form></code></a></td> <td> The URI of a program that processes the information submitted via the form. </td> </tr> <tr id="align-attribute"> <td> +<code>align</code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</td> <td> <a href="element/caption"><code><caption></code></a>, <a href="element/col"><code><col></code></a>, <a href="element/colgroup"><code><colgroup></code></a>, <a href="element/hr"><code><hr></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/table"><code><table></code></a>, <a href="element/tbody"><code><tbody></code></a>, <a href="element/td"><code><td></code></a>, <a href="element/tfoot"><code><tfoot></code></a>, <a href="element/th"><code><th></code></a>, <a href="element/thead"><code><thead></code></a>, <a href="element/tr"><code><tr></code></a> </td> <td>Specifies the horizontal alignment of the element.</td> </tr> <tr id="allow-attribute"> <td><code><a href="element/iframe#allow">allow</a></code></td> <td><a href="element/iframe"><code><iframe></code></a></td> <td>Specifies a feature-policy for the iframe.</td> </tr> <tr id="alt-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/alt" class="page-not-created">alt</a></code></td> <td> <a href="element/area"><code><area></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/input"><code><input></code></a> </td> <td>Alternative text in case an image can't be displayed.</td> </tr> <tr id="async-attribute"> <td><code><a href="element/script#async">async</a></code></td> <td><a href="element/script"><code><script></code></a></td> <td>Executes the script asynchronously.</td> </tr> <tr> <td><code><a href="global_attributes/autocapitalize">autocapitalize</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Sets whether input is automatically capitalized when entered by user</td> </tr> <tr id="autocomplete-attribute"> <td><code><a href="attributes/autocomplete">autocomplete</a></code></td> <td> <a href="element/form"><code><form></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/select"><code><select></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td> Indicates whether controls in this form can by default have their values automatically completed by the browser. </td> </tr> <tr id="autoplay-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autoplay" class="page-not-created">autoplay</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/video"><code><video></code></a> </td> <td>The audio or video should play as soon as possible.</td> </tr> <tr id="background-attribute"> <td><code>background</code></td> <td> <a href="element/body"><code><body></code></a>, <a href="element/table"><code><table></code></a>, <a href="element/td"><code><td></code></a>, <a href="element/th"><code><th></code></a> </td> <td>Specifies the URL of an image file. <div class="note notecard" id="sect1"> <p> <strong>Note:</strong> Although browsers and email clients may still support this attribute, it is obsolete. Use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image"><code>background-image</code></a> instead. </p> </div> </td> </tr> <tr id="bgcolor-attribute"> <td><code>bgcolor</code></td> <td> <a href="element/body"><code><body></code></a>, <a href="element/col"><code><col></code></a>, <a href="element/colgroup"><code><colgroup></code></a>, <a href="element/marquee"><code><marquee></code></a>, <a href="element/table"><code><table></code></a>, <a href="element/tbody"><code><tbody></code></a>, <a href="element/tfoot"><code><tfoot></code></a>, <a href="element/td"><code><td></code></a>, <a href="element/th"><code><th></code></a>, <a href="element/tr"><code><tr></code></a> </td> <td> <p>Background color of the element.</p> <div class="note notecard" id="sect2"> <p> <strong>Note:</strong> This is a legacy attribute. Please use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property instead. </p> </div> </td> </tr> <tr id="border-attribute"> <td><code>border</code></td> <td> <a href="element/img"><code><img></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/table"><code><table></code></a> </td> <td> <p>The border width.</p> <div class="note notecard" id="sect3"> <p> <strong>Note:</strong> This is a legacy attribute. Please use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> property instead. </p> </div> </td> </tr> <tr id="buffered-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/buffered" class="page-not-created">buffered</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/video"><code><video></code></a> </td> <td>Contains the time range of already buffered media.</td> </tr> <tr id="capture-attribute"> <td><code><a href="attributes/capture">capture</a></code></td> <td><a href="element/input"><code><input></code></a></td> <td> From the <a href="https://w3c.github.io/html-media-capture/#the-capture-attribute" target="_blank">Media Capture specification</a>, specifies a new file can be captured. </td> </tr> <tr id="charset-attribute"> <td><code><a href="element/meta#charset">charset</a></code></td> <td><a href="element/meta"><code><meta></code></a></td> <td>Declares the character encoding of the page or script.</td> </tr> <tr id="checked-attribute"> <td><code><a href="element/input#checked">checked</a></code></td> <td><a href="element/input"><code><input></code></a></td> <td>Indicates whether the element should be checked on page load.</td> </tr> <tr id="cite-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/cite" class="page-not-created">cite</a></code></td> <td> <a href="element/blockquote"><code><blockquote></code></a>, <a href="element/del"><code><del></code></a>, <a href="element/ins"><code><ins></code></a>, <a href="element/q"><code><q></code></a> </td> <td>Contains a URI which points to the source of the quote or change.</td> </tr> <tr> <td><code><a href="global_attributes/class">class</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Often used with CSS to style elements with common properties.</td> </tr> <tr id="color-attribute"> <td><code>color</code></td> <td> +<a href="element/font"><code><font></code></a>, <a href="element/hr"><code><hr></code></a> +</td> <td> <p> This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. </p> <div class="note notecard" id="sect4"> <p> <strong>Note:</strong> This is a legacy attribute. Please use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property instead. </p> </div> </td> </tr> <tr id="cols-attribute"> <td><code><a href="element/textarea#cols">cols</a></code></td> <td><a href="element/textarea"><code><textarea></code></a></td> <td>Defines the number of columns in a textarea.</td> </tr> <tr id="colspan-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/colspan" class="page-not-created">colspan</a></code></td> <td> +<a href="element/td"><code><td></code></a>, <a href="element/th"><code><th></code></a> +</td> <td>The colspan attribute defines the number of columns a cell should span.</td> </tr> <tr id="content-attribute"> <td><code><a href="element/meta#content">content</a></code></td> <td><a href="element/meta"><code><meta></code></a></td> <td> A value associated with <code>http-equiv</code> or <code>name</code> depending on the context. </td> </tr> <tr> <td><code><a href="global_attributes/contenteditable">contenteditable</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Indicates whether the element's content is editable.</td> </tr> <tr> <td> +<code><a href="global_attributes/contextmenu">contextmenu</a></code> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</td> <td><a href="global_attributes">Global attribute</a></td> <td> Defines the ID of a <a href="element/menu"><code><menu></code></a> element which will serve as the element's context menu. </td> </tr> <tr id="controls-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/controls" class="page-not-created">controls</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/video"><code><video></code></a> </td> <td>Indicates whether the browser should show playback controls to the user.</td> </tr> <tr id="coords-attribute"> <td><code><a href="element/area#coords">coords</a></code></td> <td><a href="element/area"><code><area></code></a></td> <td>A set of values specifying the coordinates of the hot-spot region.</td> </tr> <tr id="crossorigin-attribute"> <td><code><a href="attributes/crossorigin">crossorigin</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/link"><code><link></code></a>, <a href="element/script"><code><script></code></a>, <a href="element/video"><code><video></code></a> </td> <td>How the element handles cross-origin requests</td> </tr> <tr id="csp-attribute"> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/csp">csp</a></code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> </td> <td><a href="element/iframe"><code><iframe></code></a></td> <td> Specifies the Content Security Policy that an embedded document must agree to enforce upon itself. </td> </tr> <tr id="data-attribute"> <td><code><a href="element/object#data">data</a></code></td> <td><a href="element/object"><code><object></code></a></td> <td>Specifies the URL of the resource.</td> </tr> <tr> <td><code><a href="global_attributes/data-*">data-*</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Lets you attach custom attributes to an HTML element.</td> </tr> <tr id="datetime-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/datetime" class="page-not-created">datetime</a></code></td> <td> <a href="element/del"><code><del></code></a>, <a href="element/ins"><code><ins></code></a>, <a href="element/time"><code><time></code></a> </td> <td>Indicates the date and time associated with the element.</td> </tr> <tr id="decoding-attribute"> <td><code><a href="element/img#decoding">decoding</a></code></td> <td><a href="element/img"><code><img></code></a></td> <td>Indicates the preferred method to decode the image.</td> </tr> <tr id="default-attribute"> <td><code><a href="element/track#default">default</a></code></td> <td><a href="element/track"><code><track></code></a></td> <td> Indicates that the track should be enabled unless the user's preferences indicate something different. </td> </tr> <tr id="defer-attribute"> <td><code><a href="element/script#defer">defer</a></code></td> <td><a href="element/script"><code><script></code></a></td> <td> Indicates that the script should be executed after the page has been parsed. </td> </tr> <tr> <td><code><a href="global_attributes/dir">dir</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td> Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) </td> </tr> <tr id="dirname-attribute"> <td><code><a href="attributes/dirname">dirname</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td></td> </tr> <tr id="disabled-attribute"> <td><code><a href="attributes/disabled">disabled</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/fieldset"><code><fieldset></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/optgroup"><code><optgroup></code></a>, <a href="element/option"><code><option></code></a>, <a href="element/select"><code><select></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Indicates whether the user can interact with the element.</td> </tr> <tr id="download-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/download" class="page-not-created">download</a></code></td> <td> +<a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a> +</td> <td>Indicates that the hyperlink is to be used for downloading a resource.</td> </tr> <tr> <td><code><a href="global_attributes/draggable">draggable</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Defines whether the element can be dragged.</td> </tr> <tr id="enctype-attribute"> <td><code><a href="element/form#enctype">enctype</a></code></td> <td><a href="element/form"><code><form></code></a></td> <td> Defines the content type of the form data when the <code>method</code> is POST. </td> </tr> <tr id="enterkeyhint-attribute"> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/enterkeyhint" class="page-not-created">enterkeyhint</a></code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> </td> <td> <a href="element/textarea"><code><textarea></code></a>, <a href="global_attributes/contenteditable"><code>contenteditable</code></a> </td> <td> The <a href="https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank"><code>enterkeyhint</code></a> specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute). </td> </tr> <tr id="for-attribute"> <td><code><a href="attributes/for">for</a></code></td> <td> <a href="element/label"><code><label></code></a>, <a href="element/output"><code><output></code></a> </td> <td>Describes elements which belongs to this one.</td> </tr> <tr id="form-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/form" class="page-not-created">form</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/fieldset"><code><fieldset></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/label"><code><label></code></a>, <a href="element/meter"><code><meter></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/progress"><code><progress></code></a>, <a href="element/select"><code><select></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Indicates the form that is the owner of the element.</td> </tr> <tr id="formaction-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formaction" class="page-not-created">formaction</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/button"><code><button></code></a> </td> <td> Indicates the action of the element, overriding the action defined in the <a href="element/form"><code><form></code></a>. </td> </tr> <tr id="formenctype-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formenctype" class="page-not-created">formenctype</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a> </td> <td> If the button/input is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Submit_button">submit button</a> (e.g. <code>type="submit"</code>), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the <code>enctype</code> attribute of the button's <a href="element/form">form</a> owner. </td> </tr> <tr id="formmethod-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formmethod" class="page-not-created">formmethod</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a> </td> <td> If the button/input is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Submit_button">submit button</a> (e.g. <code>type="submit"</code>), this attribute sets the submission method to use during form submission (<code>GET</code>, <code>POST</code>, etc.). If this attribute is specified, it overrides the <code>method</code> attribute of the button's <a href="element/form">form</a> owner. </td> </tr> <tr id="formnovalidate-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formnovalidate" class="page-not-created">formnovalidate</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a> </td> <td> If the button/input is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Submit_button">submit button</a> (e.g. <code>type="submit"</code>), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the <code>novalidate</code> attribute of the button's <a href="element/form">form</a> owner. </td> </tr> <tr id="formtarget-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formtarget" class="page-not-created">formtarget</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a> </td> <td> If the button/input is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Submit_button">submit button</a> (e.g. <code>type="submit"</code>), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the <code>target</code> attribute of the button's <a href="element/form">form</a> owner. </td> </tr> <tr id="headers-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/headers" class="page-not-created">headers</a></code></td> <td> +<a href="element/td"><code><td></code></a>, <a href="element/th"><code><th></code></a> +</td> <td> IDs of the <code><th></code> elements which applies to this element. </td> </tr> <tr id="height-attribute"> <td><code>height</code></td> <td> <a href="element/canvas"><code><canvas></code></a>, <a href="element/embed"><code><embed></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/video"><code><video></code></a> </td> <td> <p> Specifies the height of elements listed here. For all other elements, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"><code>height</code></a> property. </p> <div class="note notecard" id="sect5"> <p> <strong>Note:</strong> In some instances, such as <a href="element/div"><code><div></code></a>, this is a legacy attribute, in which case the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"><code>height</code></a> property should be used instead. </p> </div> </td> </tr> <tr> <td><code><a href="global_attributes/hidden">hidden</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td> Prevents rendering of given element, while keeping child elements, e.g. script elements, active. </td> </tr> <tr id="high-attribute"> <td><code><a href="element/meter#high">high</a></code></td> <td><a href="element/meter"><code><meter></code></a></td> <td>Indicates the lower bound of the upper range.</td> </tr> <tr id="href-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/href" class="page-not-created">href</a></code></td> <td> <a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a>, <a href="element/base"><code><base></code></a>, <a href="element/link"><code><link></code></a> </td> <td>The URL of a linked resource.</td> </tr> <tr id="hreflang-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/hreflang" class="page-not-created">hreflang</a></code></td> <td> +<a href="element/a"><code><a></code></a>, <a href="element/link"><code><link></code></a> +</td> <td>Specifies the language of the linked resource.</td> </tr> <tr id="http-equiv-attribute"> <td><code><a href="element/meta#http-equiv">http-equiv</a></code></td> <td><a href="element/meta"><code><meta></code></a></td> <td>Defines a pragma directive.</td> </tr> <tr> <td><code><a href="global_attributes/id">id</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td> Often used with CSS to style a specific element. The value of this attribute must be unique. </td> </tr> <tr id="integrity-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">integrity</a></code></td> <td> +<a href="element/link"><code><link></code></a>, <a href="element/script"><code><script></code></a> +</td> <td> <p> Specifies a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> value that allows browsers to verify what they fetch. </p> </td> </tr> <tr id="intrinsicsize-attribute"> <td> <a href="element/img#intrinsicsize"><code>intrinsicsize</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> </td> <td><a href="element/img"><code><img></code></a></td> <td> This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. </td> </tr> <tr id="inputmode-attribute"> <td><a href="global_attributes/inputmode"><code>inputmode</code></a></td> <td> <a href="element/textarea"><code><textarea></code></a>, <a href="global_attributes/contenteditable"><code>contenteditable</code></a> </td> <td> Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute). </td> </tr> <tr id="ismap-attribute"> <td><code><a href="element/img#ismap">ismap</a></code></td> <td><a href="element/img"><code><img></code></a></td> <td>Indicates that the image is part of a server-side image map.</td> </tr> <tr> <td><code><a href="global_attributes/itemprop">itemprop</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td></td> </tr> <tr id="kind-attribute"> <td><code><a href="element/track#kind">kind</a></code></td> <td><a href="element/track"><code><track></code></a></td> <td>Specifies the kind of text track.</td> </tr> <tr id="label-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/label" class="page-not-created">label</a></code></td> <td> <a href="element/optgroup"><code><optgroup></code></a>, <a href="element/option"><code><option></code></a>, <a href="element/track"><code><track></code></a> </td> <td>Specifies a user-readable title of the element.</td> </tr> <tr> <td><code><a href="global_attributes/lang">lang</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Defines the language used in the element.</td> </tr> <tr id="language-attribute"> <td> <code><a href="element/script#language">language</a></code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> </td> <td><a href="element/script"><code><script></code></a></td> <td>Defines the script language used in the element.</td> </tr> <tr id="loading-attribute"> <td> +<code>loading</code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</td> <td> +<a href="element/img"><code><img></code></a>, <a href="element/iframe"><code><iframe></code></a> +</td> <td> Indicates if the element should be loaded lazily (<code>loading="lazy"</code>) or loaded immediately (<code>loading="eager"</code>). </td> </tr> <tr id="list-attribute"> <td><code><a href="element/input#list">list</a></code></td> <td><a href="element/input"><code><input></code></a></td> <td>Identifies a list of pre-defined options to suggest to the user.</td> </tr> <tr id="loop-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/loop" class="page-not-created">loop</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/marquee"><code><marquee></code></a>, <a href="element/video"><code><video></code></a> </td> <td> Indicates whether the media should start playing from the start when it's finished. </td> </tr> <tr id="low-attribute"> <td><code><a href="element/meter#low">low</a></code></td> <td><a href="element/meter"><code><meter></code></a></td> <td>Indicates the upper bound of the lower range.</td> </tr> <tr id="manifest-attribute"> <td> <code><a href="element/html#manifest">manifest</a></code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> </td> <td><a href="element/html"><code><html></code></a></td> <td>Specifies the URL of the document's cache manifest. <div class="note notecard" id="sect6"> <p> <strong>Note:</strong> This attribute is obsolete, use <a href="https://developer.mozilla.org/en-US/docs/Web/Manifest"><code><link rel="manifest"></code></a> instead. </p> </div> </td> </tr> <tr id="max-attribute"> <td><code><a href="attributes/max">max</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/meter"><code><meter></code></a>, <a href="element/progress"><code><progress></code></a> </td> <td>Indicates the maximum value allowed.</td> </tr> <tr id="maxlength-attribute"> <td><code><a href="attributes/maxlength">maxlength</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Defines the maximum number of characters allowed in the element.</td> </tr> <tr id="minlength-attribute"> <td><code><a href="attributes/minlength">minlength</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Defines the minimum number of characters allowed in the element.</td> </tr> <tr id="media-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/media" class="page-not-created">media</a></code></td> <td> <a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a>, <a href="element/link"><code><link></code></a>, <a href="element/source"><code><source></code></a>, <a href="element/style"><code><style></code></a> </td> <td> Specifies a hint of the media for which the linked resource was designed. </td> </tr> <tr id="method-attribute"> <td><code><a href="element/form#method">method</a></code></td> <td><a href="element/form"><code><form></code></a></td> <td> Defines which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> method to use when submitting the form. Can be <code>GET</code> (default) or <code>POST</code>. </td> </tr> <tr id="min-attribute"> <td><code><a href="attributes/min">min</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/meter"><code><meter></code></a> </td> <td>Indicates the minimum value allowed.</td> </tr> <tr id="multiple-attribute"> <td><code><a href="attributes/multiple">multiple</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/select"><code><select></code></a> </td> <td> Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>. </td> </tr> <tr id="muted-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/muted" class="page-not-created">muted</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/video"><code><video></code></a> </td> <td>Indicates whether the audio will be initially silenced on page load.</td> </tr> <tr id="name-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name" class="page-not-created">name</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/form"><code><form></code></a>, <a href="element/fieldset"><code><fieldset></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/select"><code><select></code></a>, <a href="element/textarea"><code><textarea></code></a>, <a href="element/map"><code><map></code></a>, <a href="element/meta"><code><meta></code></a>, <a href="element/param"><code><param></code></a> </td> <td> Name of the element. For example used by the server to identify the fields in form submits. </td> </tr> <tr id="novalidate-attribute"> <td><code><a href="element/form#novalidate">novalidate</a></code></td> <td><a href="element/form"><code><form></code></a></td> <td> This attribute indicates that the form shouldn't be validated when submitted. </td> </tr> <tr id="open-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/open" class="page-not-created">open</a></code></td> <td> <a href="element/details"><code><details></code></a>, <a href="element/dialog"><code><dialog></code></a> </td> <td> Indicates whether the contents are currently visible (in the case of a <code><details></code> element) or whether the dialog is active and can be interacted with (in the case of a <code><dialog></code> element). </td> </tr> <tr id="optimum-attribute"> <td><code><a href="element/meter#optimum">optimum</a></code></td> <td><a href="element/meter"><code><meter></code></a></td> <td>Indicates the optimal numeric value.</td> </tr> <tr id="pattern-attribute"> <td><code><a href="attributes/pattern">pattern</a></code></td> <td><a href="element/input"><code><input></code></a></td> <td> Defines a regular expression which the element's value will be validated against. </td> </tr> <tr id="ping-attribute"> <td><code><a href="element/a#ping">ping</a></code></td> <td> +<a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a> +</td> <td> The <code>ping</code> attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink. </td> </tr> <tr id="placeholder-attribute"> <td><code><a href="attributes/placeholder">placeholder</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Provides a hint to the user of what can be entered in the field.</td> </tr> <tr id="playsinline-attribute"> <td><code><a href="element/video#playsinline">playsinline</a></code></td> <td><a href="element/video"><code><video></code></a></td> <td>A Boolean attribute indicating that the video is to be played "inline"; that is, within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.</td> </tr> <tr id="poster-attribute"> <td><code><a href="element/video#poster">poster</a></code></td> <td><a href="element/video"><code><video></code></a></td> <td>A URL indicating a poster frame to show until the user plays or seeks.</td> </tr> <tr id="preload-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/preload" class="page-not-created">preload</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/video"><code><video></code></a> </td> <td> Indicates whether the whole resource, parts of it or nothing should be preloaded. </td> </tr> <tr id="readonly-attribute"> <td><code><a href="attributes/readonly">readonly</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Indicates whether the element can be edited.</td> </tr> <tr id="referrerpolicy-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/referralpolicy" class="page-not-created">referrerpolicy</a></code></td> <td> <a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/link"><code><link></code></a>, <a href="element/script"><code><script></code></a> </td> <td>Specifies which referrer is sent when fetching the resource.</td> </tr> <tr id="rel-attribute"> <td><code><a href="attributes/rel">rel</a></code></td> <td> <a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a>, <a href="element/link"><code><link></code></a> </td> <td>Specifies the relationship of the target object to the link object.</td> </tr> <tr id="required-attribute"> <td><code><a href="attributes/required">required</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/select"><code><select></code></a>, <a href="element/textarea"><code><textarea></code></a> </td> <td>Indicates whether this element is required to fill out or not.</td> </tr> <tr id="reversed-attribute"> <td><code><a href="element/ol#reversed">reversed</a></code></td> <td><a href="element/ol"><code><ol></code></a></td> <td> Indicates whether the list should be displayed in a descending order instead of an ascending order. </td> </tr> <tr> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">role</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Defines an explicit role for an element for use by assistive technologies.</td> </tr> <tr id="rows-attribute"> <td><code><a href="element/textarea#rows">rows</a></code></td> <td><a href="element/textarea"><code><textarea></code></a></td> <td>Defines the number of rows in a text area.</td> </tr> <tr id="rowspan-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rowspan" class="page-not-created">rowspan</a></code></td> <td> +<a href="element/td"><code><td></code></a>, <a href="element/th"><code><th></code></a> +</td> <td>Defines the number of rows a table cell should span over.</td> </tr> <tr id="sandbox-attribute"> <td><code><a href="element/iframe#sandbox">sandbox</a></code></td> <td><a href="element/iframe"><code><iframe></code></a></td> <td> Stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows). </td> </tr> <tr id="scope-attribute"> <td><code><a href="element/th#scope">scope</a></code></td> <td><a href="element/th"><code><th></code></a></td> <td> Defines the cells that the header test (defined in the <code>th</code> element) relates to. </td> </tr> <tr id="scoped-attribute"> <td> <code><a href="element/style#scoped">scoped</a></code> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> </td> <td><a href="element/style"><code><style></code></a></td> <td></td> </tr> <tr id="selected-attribute"> <td><code><a href="element/option#selected">selected</a></code></td> <td><a href="element/option"><code><option></code></a></td> <td>Defines a value which will be selected on page load.</td> </tr> <tr id="shape-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/shape" class="page-not-created">shape</a></code></td> <td> +<a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a> +</td> <td></td> </tr> <tr id="size-attribute"> <td><code><a href="attributes/size">size</a></code></td> <td> <a href="element/input"><code><input></code></a>, <a href="element/select"><code><select></code></a> </td> <td> Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters. </td> </tr> <tr id="sizes-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/sizes" class="page-not-created">sizes</a></code></td> <td> <a href="element/link"><code><link></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/source"><code><source></code></a> </td> <td></td> </tr> <tr> <td><code><a href="global_attributes/slot">slot</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Assigns a slot in a shadow DOM shadow tree to an element.</td> </tr> <tr id="span-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/span" class="page-not-created">span</a></code></td> <td> <a href="element/col"><code><col></code></a>, <a href="element/colgroup"><code><colgroup></code></a> </td> <td></td> </tr> <tr> <td><code><a href="global_attributes/spellcheck">spellcheck</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Indicates whether spell checking is allowed for the element.</td> </tr> <tr id="src-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/src" class="page-not-created">src</a></code></td> <td> <a href="element/audio"><code><audio></code></a>, <a href="element/embed"><code><embed></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/script"><code><script></code></a>, <a href="element/source"><code><source></code></a>, <a href="element/track"><code><track></code></a>, <a href="element/video"><code><video></code></a> </td> <td>The URL of the embeddable content.</td> </tr> <tr id="srcdoc-attribute"> <td><code><a href="element/iframe#srcdoc">srcdoc</a></code></td> <td><a href="element/iframe"><code><iframe></code></a></td> <td></td> </tr> <tr id="srclang-attribute"> <td><code><a href="element/track#srclang">srclang</a></code></td> <td><a href="element/track"><code><track></code></a></td> <td></td> </tr> <tr id="srcset-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/srcset" class="page-not-created">srcset</a></code></td> <td> +<a href="element/img"><code><img></code></a>, <a href="element/source"><code><source></code></a> +</td> <td>One or more responsive image candidates.</td> </tr> <tr id="start-attribute"> <td><code><a href="element/ol#start">start</a></code></td> <td><a href="element/ol"><code><ol></code></a></td> <td>Defines the first number if other than 1.</td> </tr> <tr id="step-attribute"> <td><code><a href="attributes/step">step</a></code></td> <td><a href="element/input"><code><input></code></a></td> <td></td> </tr> <tr> <td><code><a href="global_attributes/style">style</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Defines CSS styles which will override styles previously set.</td> </tr> <tr id="summary-attribute"> <td> <code><a href="element/table#summary">summary</a></code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> </td> <td><a href="element/table"><code><table></code></a></td> <td></td> </tr> <tr> <td><code><a href="global_attributes/tabindex">tabindex</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td> Overrides the browser's default tab order and follows the one specified instead. </td> </tr> <tr id="target-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/target" class="page-not-created">target</a></code></td> <td> <a href="element/a"><code><a></code></a>, <a href="element/area"><code><area></code></a>, <a href="element/base"><code><base></code></a>, <a href="element/form"><code><form></code></a> </td> <td> Specifies where to open the linked document (in the case of an <code><a></code> element) or where to display the response received (in the case of a <code><form></code> element) </td> </tr> <tr> <td><code><a href="global_attributes/title">title</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td>Text to be displayed in a tooltip when hovering over the element.</td> </tr> <tr> <td><code><a href="global_attributes/translate">translate</a></code></td> <td><a href="global_attributes">Global attribute</a></td> <td> Specify whether an element's attribute values and the values of its <code><a href="https://dom.spec.whatwg.org/#text" target="_blank">Text</a></code> node children are to be translated when the page is localized, or whether to leave them unchanged. </td> </tr> <tr id="type-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type" class="page-not-created">type</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/embed"><code><embed></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/ol"><code><ol></code></a>, <a href="element/script"><code><script></code></a>, <a href="element/source"><code><source></code></a>, <a href="element/style"><code><style></code></a>, <a href="element/menu"><code><menu></code></a>, <a href="element/link"><code><link></code></a> </td> <td>Defines the type of the element.</td> </tr> <tr id="usemap-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/usemap" class="page-not-created">usemap</a></code></td> <td> <a href="element/img"><code><img></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a> </td> <td></td> </tr> <tr id="value-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/value" class="page-not-created">value</a></code></td> <td> <a href="element/button"><code><button></code></a>, <a href="element/data"><code><data></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/li"><code><li></code></a>, <a href="element/meter"><code><meter></code></a>, <a href="element/option"><code><option></code></a>, <a href="element/progress"><code><progress></code></a>, <a href="element/param"><code><param></code></a> </td> <td> Defines a default value which will be displayed in the element on page load. </td> </tr> <tr id="width-attribute"> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/width" class="page-not-created">width</a></code></td> <td> <a href="element/canvas"><code><canvas></code></a>, <a href="element/embed"><code><embed></code></a>, <a href="element/iframe"><code><iframe></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/video"><code><video></code></a> </td> <td> <p>For the elements listed here, this establishes the element's width.</p> <div class="note notecard" id="sect7"> <p> <strong>Note:</strong> For all other instances, such as <a href="element/div"><code><div></code></a>, this is a legacy attribute, in which case the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property should be used instead. </p> </div> </td> </tr> <tr id="wrap-attribute"> <td><code><a href="element/textarea#wrap">wrap</a></code></td> <td><a href="element/textarea"><code><textarea></code></a></td> <td>Indicates whether the text should be wrapped.</td> </tr> </tbody> </table></div></figure></div> +<h2 id="content_versus_idl_attributes">Content versus IDL attributes</h2> +<div class="section-content"> +<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL (Interface Definition Language) attribute</strong>.</p> <p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>element.setAttribute()</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute"><code>element.getAttribute()</code></a>. The content attribute is always a string even when the expected value should be an integer. For example, to set an <a href="element/input"><code><input></code></a> element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> <p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code>element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p> <p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for <a href="element/input"><code><input></code></a> elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> <p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code>, it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p> <p>IDL attributes can <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html" target="_blank">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html" target="_blank">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> +</div> +<h2 id="boolean_attributes">Boolean Attributes</h2> +<div class="section-content"> +<p>Some content attributes (e.g. <code>required</code>, <code>readonly</code>, <code>disabled</code>) are called <a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes" target="_blank">boolean attributes</a>. If a boolean attribute is present, its value is <strong>true</strong>, and if it's absent, its value is <strong>false</strong>.</p> <p>HTML defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace. The following examples are valid ways to mark up a boolean attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="FImXsvfGpKqJeugjzmuddTJbODk1lrVwugy/bosFT2U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span>This is valid HTML but invalid XML.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>itemscope</span><span class="token punctuation">></span></span>This is also valid HTML but invalid XML.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is valid HTML and also valid XML.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemscope<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + This is also valid HTML and XML, but perhaps a bit verbose. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>To be clear, the values "<code>true</code>" and "<code>false</code>" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With <code>checked="false"</code> for example, the element's <code>checked</code> attribute would be interpreted as <strong>true</strong> because the attribute is present.</p> +</div> +<h2 id="event_handler_attributes">Event handler attributes</h2> +<div class="section-content"> +<div class="notecard warning" id="sect8"> <p><strong>Warning:</strong> The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.</p> </div> <p>In addition to the attributes listed in the table above, global <a href="https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties">event handlers</a> — such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>onclick</code></a> — can also be specified as <a href="#content_versus_idl_attributes">content attributes</a> on all elements.</p> <p>All event handler attributes accept a string. The string will be used to synthesize a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript function</a> like <code>function name(/*args*/) {body}</code>, where <code>name</code> is the attribute's name, and <code>body</code> is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one <code>event</code> parameter, while <code>onerror</code> receives five: <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. This means you can, in general, use the <code>event</code> variable within the attribute.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KFAtHH+PHZfVp5Ktp2hjuCvcYbRYlWGQ3+ibriG4fxA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Click me!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token comment"><!-- The synthesized handler has a name; you can reference itself --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>onclick<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Click me!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="element">HTML elements</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes</a> + </p> +</div> diff --git a/devdocs/html/constraint_validation.html b/devdocs/html/constraint_validation.html new file mode 100644 index 00000000..8c4c5c0e --- /dev/null +++ b/devdocs/html/constraint_validation.html @@ -0,0 +1,168 @@ +<header><h1>Constraint validation</h1></header><div class="section-content"> +<p>The creation of web forms has always been a complex task. While marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML5">HTML5</a> introduced new mechanisms for forms: it added new semantic types for the <a href="element/input"><code><input></code></a> element and <em>constraint validation</em> to ease the work of checking the form content on the client side. Basic, usual constraints can be checked, without the need for JavaScript, by setting new attributes; more complex constraints can be tested using the Constraint Validation API.</p> <p>For a basic introduction to these concepts, with examples, see the <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation tutorial</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> HTML Constraint validation doesn't remove the need for validation on the <em>server side</em>. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent such as by bad people trying to trick your web application. Therefore, you need to always also validate input constraints on the server side, in a way that is consistent with what is done on the client side.</p> </div> +</div> +<h2 id="intrinsic_and_basic_constraints">Intrinsic and basic constraints</h2> +<div class="section-content"> +<p>In HTML, basic constraints are declared in two ways:</p> <ul> <li>By choosing the most semantically appropriate value for the <a href="element/input#type"><code>type</code></a> attribute of the <a href="element/input"><code><input></code></a> element, e.g., choosing the <code>email</code> type automatically creates a constraint that checks whether the value is a valid email address.</li> <li>By setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without the need for JavaScript.</li> </ul> +</div> +<h3 id="semantic_input_types">Semantic input types</h3> +<div class="section-content"> +<p>The intrinsic constraints for the <a href="element/input#type"><code>type</code></a> attribute are:</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Input type</th> <th>Constraint description</th> <th>Associated violation</th> </tr> </thead> <tbody> <tr> <td><a href="element/input/url"><code><input type="URL"></code></a></td> <td>The value must be an absolute <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">URL</a>, as defined in the <a href="https://url.spec.whatwg.org/" target="_blank">URL Living Standard</a>.</td> <td> +<strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> constraint violation</td> </tr> <tr> <td><a href="element/input/email"><code><input type="email"></code></a></td> <td>The value must be a syntactically valid email address, which generally has the format <code>username@hostname.tld</code> but can also be local such as <code>username@hostname</code>.</td> <td> +<strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> constraint violation</td> </tr> </tbody> </table></div></figure> <p>For both of these input types, if the <a href="element/input#multiple"><code>multiple</code></a> attribute is set, several values can be set, as a comma-separated list. If any of these do not satisfy the condition described here, the <strong>Type mismatch</strong> constraint violation is triggered.</p> <p>Note that most input types don't have intrinsic constraints, as some are barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default.</p> +</div> +<h3 id="validation-related_attributes">Validation-related attributes</h3> +<div class="section-content"> +<p>In addition to the <code>type</code> attribute described above, the following attributes are used to describe basic constraints:</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Input types supporting the attribute</th> <th scope="col">Possible values</th> <th scope="col">Constraint description</th> <th scope="col">Associated violation</th> </tr> </thead> <tbody> <tr> <td><code><a href="attributes/pattern">pattern</a></code></td> <td> <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> </td> <td> A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">JavaScript regular expression</a> (compiled with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global"><code>global</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase"><code>ignoreCase</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline"><code>multiline</code></a> flags <em>disabled</em>) </td> <td>The value must match the pattern.</td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> constraint violation </td> </tr> <tr> <td rowspan="3"><code><a href="attributes/min">min</a></code></td> <td> +<code>range</code>, <code>number</code> +</td> <td>A valid number</td> <td rowspan="3">The value must be greater than or equal to the value.</td> <td rowspan="3"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow">rangeUnderflow</a></code> constraint violation </td> </tr> <tr> <td> +<code>date</code>, <code>month</code>, <code>week</code> +</td> <td>A valid date</td> </tr> <tr> <td> +<code>datetime-local</code>, <code>time</code> +</td> <td>A valid date and time</td> </tr> <tr> <td rowspan="3"><code><a href="attributes/max">max</a></code></td> <td> +<code>range</code>, <code>number</code> +</td> <td>A valid number</td> <td rowspan="3">The value must be less than or equal to the value</td> <td rowspan="3"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow">rangeOverflow</a></code> constraint violation </td> </tr> <tr> <td> +<code>date</code>, <code>month</code>, <code>week</code> +</td> <td>A valid date</td> </tr> <tr> <td> +<code>datetime-local</code>, <code>time</code> +</td> <td>A valid date and time</td> </tr> <tr> <td><code><a href="attributes/required">required</a></code></td> <td> <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>date</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>number</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>; also on the <a href="element/select"><code><select></code></a> and <a href="element/textarea"><code><textarea></code></a> elements </td> <td> <em>none</em> as it is a Boolean attribute: its presence means <em>true</em>, its absence means <em>false</em> </td> <td>There must be a value (if set).</td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing">valueMissing</a></code> constraint violation </td> </tr> <tr> <td rowspan="5"><code><a href="attributes/step">step</a></code></td> <td><code>date</code></td> <td>An integer number of days</td> <td rowspan="5"> Unless the step is set to the <code>any</code> literal, the value must be <strong>min</strong> + an integral multiple of the step. </td> <td rowspan="5"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch">stepMismatch</a></code> constraint violation </td> </tr> <tr> <td><code>month</code></td> <td>An integer number of months</td> </tr> <tr> <td><code>week</code></td> <td>An integer number of weeks</td> </tr> <tr> <td> +<code>datetime-local</code>, <code>time</code> +</td> <td>An integer number of seconds</td> </tr> <tr> <td> +<code>range</code>, <code>number</code> +</td> <td>An integer</td> </tr> <tr> <td><code><a href="attributes/minlength">minlength</a></code></td> <td> <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; also on the <a href="element/textarea"><code><textarea></code></a> element </td> <td>An integer length</td> <td> The number of characters (code points) must not be less than the value of the attribute, if non-empty. All newlines are normalized to a single character (as opposed to CRLF pairs) for <a href="element/textarea"><code><textarea></code></a>. </td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort">tooShort</a></code> constraint violation </td> </tr> <tr> <td><code><a href="attributes/maxlength">maxlength</a></code></td> <td> <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; also on the <a href="element/textarea"><code><textarea></code></a> element </td> <td>An integer length</td> <td> The number of characters (code points) must not exceed the value of the attribute. </td> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong">tooLong</a></code> constraint violation </td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="constraint_validation_process">Constraint validation process</h2> +<div class="section-content"> +<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the <a href="element/form"><code><form></code></a> element itself. The constraint validation is done in the following ways:</p> <ul> <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method of a form-associated DOM interface, (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a>), which evaluates the constraints only on this element, allowing a script to get this information. The <code>checkValidity()</code> method returns a Boolean indicating whether the element's value passes its constraints. (This is typically done by the user-agent when determining which of the CSS pseudo-classes, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a>, applies.) In contrast, the <code>reportValidity()</code> method reports any constraint failures to the user.</li> <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a> interface.</li> <li>By submitting the form itself.</li> </ul> <p>Calling <code>checkValidity()</code> is called <em>statically</em> validating the constraints, while calling <code>reportValidity()</code> or submitting the form is called <em>interactively</em> validating the constraints.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li>If the <a href="element/form#novalidate"><code>novalidate</code></a> attribute is set on the <a href="element/form"><code><form></code></a> element, interactive validation of the constraints doesn't happen.</li> <li>Calling the <code>submit()</code> method on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if it doesn't satisfy the constraints. Call the <code>click()</code> method on a submit button instead.</li> </ul> </div> +</div> +<h2 id="complex_constraints_using_the_constraint_validation_api">Complex constraints using the Constraint Validation API</h2> +<div class="section-content"> +<p>Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</p> <p>Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code>field.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</p> +</div> +<h3 id="constraint_combining_several_fields_postal_code_validation">Constraint combining several fields: Postal code validation</h3> +<div class="section-content"> +<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F-</code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.</p> </div> <p>As an example, we will add a script checking the constraint validation for this simple form:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1Z3PqJJcwfuiDNIkpe2t3XlWnaJ4l3yHxEy/yJKTzjM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ZIP<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ZIP : <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ZIP<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>Country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Country : <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>Country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>ch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Switzerland<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>fr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>France<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Germany<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>nl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The Netherlands<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Validate<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This displays the following form:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Constraint combining several fields Postal code validation sample" id="frame_constraint_combining_several_fields_postal_code_validation" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Constraint_validation/runner.html?id=constraint_combining_several_fields_postal_code_validation" loading="lazy"></iframe> +</div> <p>First, we write a function checking the constraint itself:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="wX5Y0zKv/vE+7Bbp1bBczlH5zhBjR11IG1nLOWIT37I=" data-language="js"><span class="token keyword">function</span> <span class="token function">checkZIP</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// For each country, defines the pattern that the ZIP has to follow</span> + <span class="token keyword">const</span> constraints <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">ch</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token string">"^(CH-)?\\d{4}$"</span><span class="token punctuation">,</span> + <span class="token string">"Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950"</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">fr</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token string">"^(F-)?\\d{5}$"</span><span class="token punctuation">,</span> + <span class="token string">"France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012"</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">de</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token string">"^(D-)?\\d{5}$"</span><span class="token punctuation">,</span> + <span class="token string">"Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345"</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">nl</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token string">"^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$"</span><span class="token punctuation">,</span> + <span class="token string">"Netherland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS"</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token comment">// Read the country id</span> + <span class="token keyword">const</span> country <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Country"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span> + + <span class="token comment">// Get the NPA field</span> + <span class="token keyword">const</span> ZIPField <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"ZIP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Build the constraint checker</span> + <span class="token keyword">const</span> constraint <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>constraints<span class="token punctuation">[</span>country<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>constraint<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Check it!</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>constraint<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>ZIPField<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// The ZIP follows the constraint, we use the ConstraintAPI to tell it</span> + ZIPField<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// The ZIP doesn't follow the constraint, we use the ConstraintAPI to</span> + <span class="token comment">// give a message about the format required for this country</span> + ZIPField<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span>constraints<span class="token punctuation">[</span>country<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Then we link it to the <strong>onchange</strong> event for the <a href="element/select"><code><select></code></a> and the <strong>oninput</strong> event for the <a href="element/input"><code><input></code></a>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="toTme2fP+9t4AcmiDRcPzkcQkyyTjUK4snHedVlF3pA=" data-language="js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"Country"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>onchange <span class="token operator">=</span> checkZIP<span class="token punctuation">;</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"ZIP"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>oninput <span class="token operator">=</span> checkZIP<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> +<div class="section-content"> +<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the <code>field.setCustomValidity()</code> method, with another JavaScript API, here the File API.</p> <p>Here is the HTML part:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YxAIQxMLdfl/7aP9wniVLc9TRIu7xUlJlp95wOTjWBM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>FS<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select a file smaller than 75 kB : <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>FS<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>This displays:</p> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Limiting the size of a file before its upload sample" id="frame_limiting_the_size_of_a_file_before_its_upload" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Constraint_validation/runner.html?id=limiting_the_size_of_a_file_before_its_upload" loading="lazy"></iframe> +</div> <p>The JavaScript reads the file selected, uses the <code>File.size()</code> method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="IKhUQ8DNEHp4CHAnxSJWx7DFggxaBasEJQF2xSgiLB8=" data-language="js"><span class="token keyword">function</span> <span class="token function">checkFileSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token constant">FS</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"FS"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> files <span class="token operator">=</span> <span class="token constant">FS</span><span class="token punctuation">.</span>files<span class="token punctuation">;</span> + + <span class="token comment">// If there is (at least) one file selected</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>files<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>files<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>size <span class="token operator">></span> <span class="token number">75</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Check the constraint</span> + <span class="token constant">FS</span><span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">"The selected file must not be larger than 75 kB"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token comment">// No custom constraint violation</span> + <span class="token constant">FS</span><span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Finally, we hook the method with the correct event:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="JgpbPlMr+KahKRaWbR5fJq8qlwfToa+ohCNsb/u2x24=" data-language="js">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"FS"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>onchange <span class="token operator">=</span> checkFileSize<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="visual_styling_of_constraint_validation">Visual styling of constraint validation</h2> +<div class="section-content"><p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p></div> +<h3 id="controlling_the_look_of_elements">Controlling the look of elements</h3> +<div class="section-content"> +<p>The look of elements can be controlled via CSS pseudo-classes.</p> <h4 id="required_and_optional_css_pseudo-classes">:required and :optional CSS pseudo-classes</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the <a href="element/input#required"><code>required</code></a> attribute, or that don't have it.</p> <h4 id="placeholder-shown_css_pseudo-class">:placeholder-shown CSS pseudo-class</h4> <p>See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown"><code>:placeholder-shown</code></a>.</p> <h4 id="valid_invalid_css_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> +</div> +<h3 id="controlling_the_text_of_constraint_violation">Controlling the text of constraint violation</h3> +<div class="section-content"> +<p>The following items can help with controlling the text of a constraint violation:</p> <ul> <li>The <code>setCustomValidity(message)</code> method on the following elements: <ul> <li> +<a href="element/fieldset"><code><fieldset></code></a>. Note: Setting a custom validity message on fieldset elements will not prevent form submission in most browsers.</li> <li><a href="element/input"><code><input></code></a></li> <li><a href="element/output"><code><output></code></a></li> <li><a href="element/select"><code><select></code></a></li> <li>Submit buttons (created with either a <a href="element/button"><code><button></code></a> element with the <code>submit</code> type, or an <code>input</code> element with the <a href="element/input/submit">submit</a> type. Other types of buttons do not participate in constraint validation.</li> <li><a href="element/textarea"><code><textarea></code></a></li> </ul> </li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface describes the object returned by the <code>validity</code> property of the element types listed above. It represents various ways that an entered value can be invalid. Together, they help explain why an element's value fails to validate, if it's not valid.</li> </ul> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Constraint_validation" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation</a> + </p> +</div> diff --git a/devdocs/html/content_categories.html b/devdocs/html/content_categories.html new file mode 100644 index 00000000..7a5418f8 --- /dev/null +++ b/devdocs/html/content_categories.html @@ -0,0 +1,85 @@ +<header><h1>Content categories</h1></header><div class="section-content"> +<p>Most <a href="index">HTML</a> elements are a member of one or more <strong>content categories</strong> — these categories group elements that share common characteristics. This is a loose grouping (it doesn't actually create a relationship among elements of these categories), but they help define and describe the categories' shared behavior and their associated rules, especially when you come upon their intricate details. It's also possible for elements to not be a member of <em>any</em> of these categories.</p> <p>There are three types of content categories:</p> <ul> <li>Main content categories, which describe common rules shared by many elements.</li> <li>Form-related content categories, which describe rules common to form-related elements.</li> <li>Specific content categories, which describe rare categories shared only by a few elements, sometimes only in a specific context.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> A more detailed discussion of these content categories and their comparative functionalities is beyond the scope of this article; for that, you may wish to read the <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content" target="_blank">relevant portions of the HTML specification</a>.</p> </div> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories/content_categories_venn.png"><img src="data:image/png;base64,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" alt="A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text." width="747" height="428" loading="lazy"></a></p> +</div> +<h2 id="main_content_categories">Main content categories</h2> + +<h3 id="metadata_content">Metadata content</h3> +<div class="section-content"> +<p>Elements belonging to the <em>metadata content</em> category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other <em>out-of-band</em> information.</p> <p>Elements belonging to this category are <a href="element/base"><code><base></code></a>, <a href="element/link"><code><link></code></a>, <a href="element/meta"><code><meta></code></a>, <a href="element/noscript"><code><noscript></code></a>, <a href="element/script"><code><script></code></a>, <a href="element/style"><code><style></code></a> and <a href="element/title"><code><title></code></a>.</p> +</div> +<h3 id="flow_content">Flow content</h3> +<div class="section-content"> +<p>Flow content is a broad category that encompasses most elements that can go inside the <a href="element/body"><code><body></code></a> element, including heading elements, sectioning elements, phrasing elements, embedding elements, interactive elements, and form-related elements. It also includes text nodes (but not those that only consist of white space characters).</p> <p>The flow elements are:</p> <ul> <li><a href="element/a"><code><a></code></a></li> <li><a href="element/abbr"><code><abbr></code></a></li> <li><a href="element/address"><code><address></code></a></li> <li><a href="element/article"><code><article></code></a></li> <li><a href="element/aside"><code><aside></code></a></li> <li><a href="element/audio"><code><audio></code></a></li> <li><a href="element/b"><code><b></code></a></li> <li><a href="element/bdo"><code><bdo></code></a></li> <li><a href="element/bdi"><code><bdi></code></a></li> <li><a href="element/blockquote"><code><blockquote></code></a></li> <li><a href="element/br"><code><br></code></a></li> <li><a href="element/button"><code><button></code></a></li> <li><a href="element/canvas"><code><canvas></code></a></li> <li><a href="element/cite"><code><cite></code></a></li> <li><a href="element/code"><code><code></code></a></li> <li><a href="element/data"><code><data></code></a></li> <li><a href="element/datalist"><code><datalist></code></a></li> <li><a href="element/del"><code><del></code></a></li> <li><a href="element/details"><code><details></code></a></li> <li><a href="element/dfn"><code><dfn></code></a></li> <li><a href="element/dialog"><code><dialog></code></a></li> <li><a href="element/div"><code><div></code></a></li> <li><a href="element/dl"><code><dl></code></a></li> <li><a href="element/em"><code><em></code></a></li> <li><a href="element/embed"><code><embed></code></a></li> <li><a href="element/fieldset"><code><fieldset></code></a></li> <li><a href="element/figure"><code><figure></code></a></li> <li><a href="element/footer"><code><footer></code></a></li> <li><a href="element/form"><code><form></code></a></li> <li><a href="element/heading_elements">h1</a></li> <li><a href="element/heading_elements">h2</a></li> <li><a href="element/heading_elements">h3</a></li> <li><a href="element/heading_elements">h4</a></li> <li><a href="element/heading_elements">h5</a></li> <li><a href="element/heading_elements">h6</a></li> <li><a href="element/header"><code><header></code></a></li> <li><a href="element/hgroup"><code><hgroup></code></a></li> <li><a href="element/hr"><code><hr></code></a></li> <li><a href="element/i"><code><i></code></a></li> <li><a href="element/iframe"><code><iframe></code></a></li> <li><a href="element/img"><code><img></code></a></li> <li><a href="element/input"><code><input></code></a></li> <li><a href="element/ins"><code><ins></code></a></li> <li><a href="element/kbd"><code><kbd></code></a></li> <li><a href="element/label"><code><label></code></a></li> <li><a href="element/main"><code><main></code></a></li> <li><a href="element/map"><code><map></code></a></li> <li><a href="element/mark"><code><mark></code></a></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code></li> <li><a href="element/menu"><code><menu></code></a></li> <li><a href="element/meter"><code><meter></code></a></li> <li><a href="element/nav"><code><nav></code></a></li> <li><a href="element/noscript"><code><noscript></code></a></li> <li><a href="element/object"><code><object></code></a></li> <li><a href="element/ol"><code><ol></code></a></li> <li><a href="element/output"><code><output></code></a></li> <li><a href="element/p"><code><p></code></a></li> <li><a href="element/picture"><code><picture></code></a></li> <li><a href="element/pre"><code><pre></code></a></li> <li><a href="element/progress"><code><progress></code></a></li> <li><a href="element/q"><code><q></code></a></li> <li><a href="element/ruby"><code><ruby></code></a></li> <li><a href="element/s"><code><s></code></a></li> <li><a href="element/samp"><code><samp></code></a></li> <li><a href="element/search"><code><search></code></a></li> <li><a href="element/script"><code><script></code></a></li> <li><a href="element/section"><code><section></code></a></li> <li><a href="element/select"><code><select></code></a></li> <li><a href="element/slot"><code><slot></code></a></li> <li><a href="element/small"><code><small></code></a></li> <li><a href="element/span"><code><span></code></a></li> <li><a href="element/strong"><code><strong></code></a></li> <li><a href="element/sub"><code><sub></code></a></li> <li><a href="element/sup"><code><sup></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a></li> <li><a href="element/table"><code><table></code></a></li> <li><a href="element/template"><code><template></code></a></li> <li><a href="element/textarea"><code><textarea></code></a></li> <li><a href="element/time"><code><time></code></a></li> <li><a href="element/u"><code><u></code></a></li> <li><a href="element/ul"><code><ul></code></a></li> <li><a href="element/var"><code><var></code></a></li> <li><a href="element/video"><code><video></code></a></li> <li><a href="element/wbr"><code><wbr></code></a></li> <li>Plain text</li> </ul> <p>A few other elements belong to this category, but only if a specific condition is fulfilled:</p> <ul> <li> +<a href="element/area"><code><area></code></a>, if it is a descendant of a <a href="element/map"><code><map></code></a> element</li> <li> +<a href="element/link"><code><link></code></a>, if the <a href="global_attributes/itemprop">itemprop</a> attribute is present</li> <li> +<a href="element/meta"><code><meta></code></a>, if the <a href="global_attributes/itemprop">itemprop</a> attribute is present</li> <li> +<a href="element/style"><code><style></code></a>, if the <code>scoped</code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> attribute is present</li> </ul> +</div> +<h3 id="sectioning_content">Sectioning content</h3> +<div class="section-content"> +<p>Sectioning content is a subset of flow content, and can be used everywhere flow content is expected. Elements belonging to the sectioning content model create a <a href="element/heading_elements">section in the current outline</a> that defines the scope of <a href="element/header"><code><header></code></a> elements, <a href="element/footer"><code><footer></code></a> elements, and <a href="#heading_content">heading content</a>.</p> <p>Elements belonging to this category are <a href="element/article"><code><article></code></a>, <a href="element/aside"><code><aside></code></a>, <a href="element/nav"><code><nav></code></a>, and <a href="element/section"><code><section></code></a>.</p> +</div> +<h3 id="heading_content">Heading content</h3> +<div class="section-content"> +<p>Heading content is a subset of flow content, which defines the title of a section, whether marked by an explicit <a href="#sectioning_content">sectioning content</a> element, or implicitly defined by the heading content itself. Heading content can be used everywhere flow content is expected.</p> <p>Elements belonging to this category are <a href="element/heading_elements">h1</a>, <a href="element/heading_elements">h2</a>, <a href="element/heading_elements">h3</a>, <a href="element/heading_elements">h4</a>, <a href="element/heading_elements">h5</a>, <a href="element/heading_elements">h6</a> and <a href="element/hgroup"><code><hgroup></code></a>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Though likely to contain heading content, the <a href="element/header"><code><header></code></a> is not heading content itself.</p> </div> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> The <a href="element/hgroup"><code><hgroup></code></a> element is not recommended as it does not work properly with assistive technologies. It was removed from the W3C HTML specification prior to HTML 5 being finalized, but is still part of the WHATWG specification and is at least partially supported by most browsers.</p> </div> +</div> +<h3 id="phrasing_content">Phrasing content</h3> +<div class="section-content"> +<p>Phrasing content is a subset of flow content that defines the text and the markup it contains, and can be used everywhere flow content is expected. Runs of phrasing content make up paragraphs.</p> <p>Elements belonging to this category are:</p> <ul> <li><a href="element/abbr"><code><abbr></code></a></li> <li><a href="element/audio"><code><audio></code></a></li> <li><a href="element/b"><code><b></code></a></li> <li><a href="element/bdi"><code><bdi></code></a></li> <li><a href="element/bdo"><code><bdo></code></a></li> <li><a href="element/br"><code><br></code></a></li> <li><a href="element/button"><code><button></code></a></li> <li><a href="element/canvas"><code><canvas></code></a></li> <li><a href="element/cite"><code><cite></code></a></li> <li><a href="element/code"><code><code></code></a></li> <li><a href="element/data"><code><data></code></a></li> <li><a href="element/datalist"><code><datalist></code></a></li> <li><a href="element/dfn"><code><dfn></code></a></li> <li><a href="element/em"><code><em></code></a></li> <li><a href="element/embed"><code><embed></code></a></li> <li><a href="element/i"><code><i></code></a></li> <li><a href="element/iframe"><code><iframe></code></a></li> <li><a href="element/img"><code><img></code></a></li> <li><a href="element/input"><code><input></code></a></li> <li><a href="element/kbd"><code><kbd></code></a></li> <li><a href="element/label"><code><label></code></a></li> <li><a href="element/mark"><code><mark></code></a></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code></li> <li><a href="element/meter"><code><meter></code></a></li> <li><a href="element/noscript"><code><noscript></code></a></li> <li><a href="element/object"><code><object></code></a></li> <li><a href="element/output"><code><output></code></a></li> <li><a href="element/picture"><code><picture></code></a></li> <li><a href="element/progress"><code><progress></code></a></li> <li><a href="element/q"><code><q></code></a></li> <li><a href="element/ruby"><code><ruby></code></a></li> <li><a href="element/s"><code><s></code></a></li> <li><a href="element/samp"><code><samp></code></a></li> <li><a href="element/script"><code><script></code></a></li> <li><a href="element/select"><code><select></code></a></li> <li><a href="element/slot"><code><slot></code></a></li> <li><a href="element/small"><code><small></code></a></li> <li><a href="element/span"><code><span></code></a></li> <li><a href="element/strong"><code><strong></code></a></li> <li><a href="element/sub"><code><sub></code></a></li> <li><a href="element/sup"><code><sup></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a></li> <li><a href="element/template"><code><template></code></a></li> <li><a href="element/textarea"><code><textarea></code></a></li> <li><a href="element/time"><code><time></code></a></li> <li><a href="element/u"><code><u></code></a></li> <li><a href="element/var"><code><var></code></a></li> <li><a href="element/video"><code><video></code></a></li> <li> +<a href="element/wbr"><code><wbr></code></a> and plain text (not only consisting of white spaces characters).</li> </ul> <p>A few other elements belong to this category, but only if a specific condition is fulfilled:</p> <ul> <li> +<a href="element/a"><code><a></code></a>, if it contains only phrasing content</li> <li> +<a href="element/area"><code><area></code></a>, if it is a descendant of a <a href="element/map"><code><map></code></a> element</li> <li> +<a href="element/del"><code><del></code></a>, if it contains only phrasing content</li> <li> +<a href="element/ins"><code><ins></code></a>, if it contains only phrasing content</li> <li> +<a href="element/link"><code><link></code></a>, if the <a href="global_attributes/itemprop">itemprop</a> attribute is present</li> <li> +<a href="element/map"><code><map></code></a>, if it contains only phrasing content</li> <li> +<a href="element/meta"><code><meta></code></a>, if the <a href="global_attributes/itemprop">itemprop</a> attribute is present</li> </ul> +</div> +<h3 id="embedded_content">Embedded content</h3> +<div class="section-content"> +<p>Embedded content is a subset of flow content that imports another resource or inserts content from another markup language or namespace into the document, and can be used everywhere flow content is expected. Elements that belong to this category include:</p> <ul> <li><a href="element/audio"><code><audio></code></a></li> <li><a href="element/canvas"><code><canvas></code></a></li> <li><a href="element/embed"><code><embed></code></a></li> <li><a href="element/iframe"><code><iframe></code></a></li> <li><a href="element/img"><code><img></code></a></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code></li> <li><a href="element/object"><code><object></code></a></li> <li><a href="element/picture"><code><picture></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a></li> <li> +<a href="element/video"><code><video></code></a>.</li> </ul> +</div> +<h3 id="interactive_content">Interactive content</h3> +<div class="section-content"> +<p>Interactive content is a subset of flow content that includes elements that are specifically designed for user interaction, and can be used everywhere flow content is expected. Elements that belong to this category include:</p> <ul> <li><a href="element/button"><code><button></code></a></li> <li><a href="element/details"><code><details></code></a></li> <li><a href="element/embed"><code><embed></code></a></li> <li><a href="element/iframe"><code><iframe></code></a></li> <li><a href="element/label"><code><label></code></a></li> <li> +<a href="element/select"><code><select></code></a>, and <a href="element/textarea"><code><textarea></code></a>.</li> </ul> <p>Some elements belong to this category only under specific conditions:</p> <ul> <li> +<a href="element/a"><code><a></code></a>, if the <a href="element/a#href"><code>href</code></a> attribute is present</li> <li> +<a href="element/audio"><code><audio></code></a>, if the <a href="element/audio#controls"><code>controls</code></a> attribute is present</li> <li> +<a href="element/img"><code><img></code></a>, if the <a href="element/img#usemap"><code>usemap</code></a> attribute is present</li> <li> +<a href="element/input"><code><input></code></a>, if the <a href="element/input#type">type</a> attribute is not in the hidden state</li> <li> +<a href="element/object"><code><object></code></a>, if the <a href="element/object#usemap"><code>usemap</code></a> attribute is present</li> <li> +<a href="element/video"><code><video></code></a>, if the <a href="element/video#controls"><code>controls</code></a> attribute is present</li> </ul> +</div> +<h3 id="palpable_content">Palpable content</h3> +<div class="section-content"><p>Content is palpable when it's neither empty nor hidden; it is content that is rendered and is substantive. Elements whose model is flow content should have at least one node which is palpable.</p></div> +<h3 id="form-associated_content">Form-associated content</h3> +<div class="section-content"> +<p>Form-associated content is a subset of flow content comprising elements that have a form owner, exposed by a <strong>form</strong> attribute, and can be used everywhere flow content is expected. A form owner is either the containing <a href="element/form"><code><form></code></a> element or the element whose id is specified in the <strong>form</strong> attribute.</p> <ul> <li><a href="element/button"><code><button></code></a></li> <li><a href="element/fieldset"><code><fieldset></code></a></li> <li><a href="element/input"><code><input></code></a></li> <li><a href="element/label"><code><label></code></a></li> <li><a href="element/meter"><code><meter></code></a></li> <li><a href="element/object"><code><object></code></a></li> <li><a href="element/output"><code><output></code></a></li> <li><a href="element/progress"><code><progress></code></a></li> <li><a href="element/select"><code><select></code></a></li> <li><a href="element/textarea"><code><textarea></code></a></li> </ul> <p>This category contains several sub-categories:</p> <dl> <dt id="listed"><a href="#listed">listed</a></dt> <dd> <p>Elements that are listed in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>form.elements</code></a> and <code>fieldset.elements</code> collections. Contains <a href="element/button"><code><button></code></a>, <a href="element/fieldset"><code><fieldset></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/select"><code><select></code></a>, and <a href="element/textarea"><code><textarea></code></a>.</p> </dd> <dt id="labelable"><a href="#labelable">labelable</a></dt> <dd> <p>Elements that can be associated with <a href="element/label"><code><label></code></a> elements. Contains <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/meter"><code><meter></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/progress"><code><progress></code></a>, <a href="element/select"><code><select></code></a>, and <a href="element/textarea"><code><textarea></code></a>.</p> </dd> <dt id="submittable"><a href="#submittable">submittable</a></dt> <dd> <p>Elements that can be used for constructing the form data set when the form is submitted. Contains <a href="element/button"><code><button></code></a>, <a href="element/input"><code><input></code></a>, <a href="element/object"><code><object></code></a>, <a href="element/select"><code><select></code></a>, and <a href="element/textarea"><code><textarea></code></a>.</p> </dd> <dt id="resettable"><a href="#resettable">resettable</a></dt> <dd> <p>Elements that can be affected when a form is reset. Contains <a href="element/input"><code><input></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/select"><code><select></code></a>, and <a href="element/textarea"><code><textarea></code></a>.</p> </dd> </dl> +</div> +<h2 id="secondary_categories">Secondary categories</h2> +<div class="section-content"><p>There are some secondary classifications of elements that can be useful to be aware of as well.</p></div> +<h3 id="script-supporting_elements">Script-supporting elements</h3> +<div class="section-content"> +<p><strong>Script-supporting elements</strong> are elements which don't directly contribute to the rendered output of a document. Instead, they serve to support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts.</p> <p>The script-supporting elements are:</p> <ul> <li><a href="element/script"><code><script></code></a></li> <li><a href="element/template"><code><template></code></a></li> </ul> +</div> +<h2 id="transparent_content_model">Transparent content model</h2> +<div class="section-content"> +<p>If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.</p> <p>For example, the <a href="element/del"><code><del></code></a> and <a href="element/ins"><code><ins></code></a> elements are transparent:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="snKDDiqWi8/b8mcoXa+kDfTiJ2ol82ByCY65FIkCP1M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + We hold these truths to be <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>sacred <span class="token entity named-entity">&amp;</span> undeniable<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>self-evident<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If those elements were removed, this fragment would still be valid HTML (if not correct English).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Hd8b/wvuV8Ci+dpTLqpiq/wAg1rfxmmR0fba9NBu0jw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>We hold these truths to be <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>sacred <span class="token entity named-entity">&amp;</span> undeniable<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> self-evident.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Content_categories" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories</a> + </p> +</div> diff --git a/devdocs/html/cors_enabled_image.html b/devdocs/html/cors_enabled_image.html new file mode 100644 index 00000000..da89c8b1 --- /dev/null +++ b/devdocs/html/cors_enabled_image.html @@ -0,0 +1,69 @@ +<header><h1>Allowing cross-origin use of images and canvas</h1></header><div class="section-content"> +<p>HTML provides a <a href="element/img#crossorigin"><code>crossorigin</code></a> attribute for images that, in combination with an appropriate <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> header, allows images defined by the <a href="element/img"><code><img></code></a> element that are loaded from foreign origins to be used in a <a href="element/canvas"><code><canvas></code></a> as if they had been loaded from the current origin.</p> <p>See <a href="attributes/crossorigin">CORS settings attributes</a> for details on how the <code>crossorigin</code> attribute is used.</p> +</div> +<h2 id="security_and_tainted_canvases">Security and tainted canvases</h2> +<div class="section-content"> +<p>Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.</p> <p>As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes <strong>tainted</strong>. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.</p> <p>If the source of the foreign content is an HTML <a href="element/img"><code><img></code></a> or SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a> element, attempting to retrieve the contents of the canvas isn't allowed.</p> <p>If the foreign content comes from an image obtained from either as <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap"><code>ImageBitMap</code></a>, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.</p> <p>Calling any of the following on a tainted canvas will result in an error:</p> <ul> <li>Calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData"><code>getImageData()</code></a> on the canvas's context</li> <li>Calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob"><code>toBlob()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream"><code>captureStream()</code></a> on the <a href="element/canvas"><code><canvas></code></a> element itself</li> </ul> <p>Attempting any of these when the canvas is tainted will cause a <code>SecurityError</code> to be thrown. This protects users from having private data exposed by using images to pull information from remote websites without permission.</p> +</div> +<h2 id="storing_an_image_from_a_foreign_origin">Storing an image from a foreign origin</h2> +<div class="section-content"><p>In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the website itself.</p></div> +<h3 id="web_server_configuration">Web server configuration</h3> +<div class="section-content"> +<p>The first thing we need is a server that's configured to host images with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> header configured to permit cross-origin access to image files.</p> <p>Let's assume we're serving our site using <a href="https://httpd.apache.org/" target="_blank">Apache</a>. Consider the HTML5 Boilerplate <a href="https://github.com/h5bp/server-configs-apache/blob/main/h5bp/cross-origin/images.conf" target="_blank">Apache server configuration file for CORS images</a>, shown below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">xml</span></p> +<pre data-signature="KtljV8NlonBpWlni1/DGLAm1J9TsYGMd6vGgrW6na5U=" data-language="xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>IfModule</span> <span class="token attr-name">mod_setenvif.c</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>IfModule</span> <span class="token attr-name">mod_headers.c</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>FilesMatch</span> <span class="token attr-name">"\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$"</span><span class="token punctuation">></span></span> + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>FilesMatch</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>IfModule</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>IfModule</span><span class="token punctuation">></span></span> +</pre> +</div> <p>In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.</p> +</div> +<h3 id="implementing_the_save_feature">Implementing the save feature</h3> +<div class="section-content"> +<p>Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">local storage</a>, just as if they were being served from the same domain the code is running on.</p> <p>The key is to use the <a href="element/image#crossorigin"><code>crossorigin</code></a> attribute by setting <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin"><code>crossOrigin</code></a> on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> into which the image will be loaded. This tells the browser to request cross-origin access when downloading the image data.</p> <h4 id="starting_the_download">Starting the download</h4> <p>The code that starts the download (say, when the user clicks a "Download" button), looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="8ZWVlQdjM6pUzGpr9gtGZfci22u22gUZKr2lJscagDY=" data-language="js"><span class="token keyword">function</span> <span class="token function">startDownload</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> imageURL <span class="token operator">=</span> + <span class="token string">"https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189"</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> imageDescription <span class="token operator">=</span> <span class="token string">"The Mozilla logo"</span><span class="token punctuation">;</span> + + downloadedImg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + downloadedImg<span class="token punctuation">.</span>crossOrigin <span class="token operator">=</span> <span class="token string">"anonymous"</span><span class="token punctuation">;</span> + downloadedImg<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> imageReceived<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + downloadedImg<span class="token punctuation">.</span>alt <span class="token operator">=</span> imageDescription<span class="token punctuation">;</span> + downloadedImg<span class="token punctuation">.</span>src <span class="token operator">=</span> imageURL<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>We're using a hard-coded URL (<code>imageURL</code>) and associated descriptive text (<code>imageDescription</code>) here, but that could easily come from anywhere. To begin downloading the image, we create a new <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> object by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image"><code>Image()</code></a> constructor. The image is then configured to allow cross-origin downloading by setting its <code>crossOrigin</code> attribute to <code>"Anonymous"</code> (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event"><code>load</code></a> event being fired on the image element, which means the image data has been received. Alternative text is added to the image; while <code><canvas></code> does not support the <code>alt</code> attribute, the value can be used to set an <code>aria-label</code> or the canvas's inner content.</p> <p>Finally, the image's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src"><code>src</code></a> attribute is set to the URL of the image to download; this triggers the download to begin.</p> <h4 id="receiving_and_saving_the_image">Receiving and saving the image</h4> <p>The code that handles the newly-downloaded image is found in the <code>imageReceived()</code> method:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="/oVzaUfYCcVv86f2dn5CLZYfWQ2sYAfpnGWQHOJ5Sc8=" data-language="js"><span class="token keyword">function</span> <span class="token function">imageReceived</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"canvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> context <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> downloadedImg<span class="token punctuation">.</span>width<span class="token punctuation">;</span> + canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> downloadedImg<span class="token punctuation">.</span>height<span class="token punctuation">;</span> + canvas<span class="token punctuation">.</span>innerText <span class="token operator">=</span> downloadedImg<span class="token punctuation">.</span>alt<span class="token punctuation">;</span> + + context<span class="token punctuation">.</span><span class="token function">drawImage</span><span class="token punctuation">(</span>downloadedImg<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + imageBox<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">try</span> <span class="token punctuation">{</span> + localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"saved-image-example"</span><span class="token punctuation">,</span> canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token string">"image/png"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Error: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>err<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p><code>imageReceived()</code> is called to handle the <code>"load"</code> event on the <code>HTMLImageElement</code> that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new <a href="element/canvas"><code><canvas></code></a> element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context (<a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a>) in the variable <code>context</code>.</p> <p>The canvas's size is adjusted to match the received image, the inner text is set to the image description, then the image is drawn into the canvas using <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage()</code></a>. The canvas is then inserted into the document so the image is visible.</p> <p>Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"><code>localStorage</code></a> global. The canvas method <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem"><code>setItem()</code></a>.</p> +</div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html" target="_blank">Using Cross-domain images in WebGL and Chrome 13</a></li> <li><a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin" target="_blank">HTML Specification - the <code>crossorigin</code> attribute</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/CORS_enabled_image" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image</a> + </p> +</div> diff --git a/devdocs/html/date_and_time_formats.html b/devdocs/html/date_and_time_formats.html new file mode 100644 index 00000000..bd41b035 --- /dev/null +++ b/devdocs/html/date_and_time_formats.html @@ -0,0 +1,81 @@ +<header><h1>Date and time formats used in HTML</h1></header><div class="section-content"> +<p>Certain HTML elements use date and/or time values. The formats of the strings that specify these values are described in this article.</p> <p>Elements that use such formats include certain forms of the <a href="element/input"><code><input></code></a> element that let the user choose or specify a date, time, or both, as well as the <a href="element/ins"><code><ins></code></a> and <a href="element/del"><code><del></code></a> elements, whose <a href="element/ins#datetime"><code>datetime</code></a> attribute specifies the date or date and time at which the insertion or deletion of content occurred.</p> <p>For <code><input></code>, the values of <a href="element/input#type"><code>type</code></a> that return a <a href="global_attributes#value"><code>value</code></a> which contains a string representing a date and/or time are:</p> <ul> <li><a href="element/input/date"><code>date</code></a></li> <li><a href="element/input/datetime-local"><code>datetime-local</code></a></li> <li><a href="element/input/month"><code>month</code></a></li> <li><a href="element/input/time"><code>time</code></a></li> <li><a href="element/input/week"><code>week</code></a></li> </ul> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>Before getting into the intricacies of how date and time strings are written and parsed in HTML, here are some examples that should give you a good idea what the more commonly-used date and time string formats look like.</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <caption>Example HTML date and time strings</caption> <thead> <tr> <th scope="col">String</th> <th colspan="2" scope="col">Date and/or time</th> </tr> </thead> <tbody> <tr> <td><code>2005-06-07</code></td> <td>June 7, 2005</td> <td><a href="date_and_time_formats#date_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>08:45</code></td> <td>8:45 AM</td> <td><a href="date_and_time_formats#time_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>08:45:25</code></td> <td>8:45 AM and 25 seconds</td> <td><a href="date_and_time_formats#time_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>0033-08-04T03:40</code></td> <td>3:40 AM on August 4, 33</td> <td><a href="date_and_time_formats#local_date_and_time_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>1977-04-01T14:00:30</code></td> <td>30 seconds after 2:00 PM on April 1, 1977</td> <td><a href="date_and_time_formats#local_date_and_time_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>1901-01-01T00:00Z</code></td> <td>Midnight UTC on January 1, 1901</td> <td><a href="date_and_time_formats#global_date_and_time_strings" aria-current="page">[details]</a></td> </tr> <tr> <td><code>1901-01-01T00:00:01-04:00</code></td> <td>1 second past midnight Eastern Standard Time (EST) on January 1, 1901</td> <td><a href="date_and_time_formats#global_date_and_time_strings" aria-current="page">[details]</a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="basics">Basics</h2> +<div class="section-content"><p>Before looking at the various formats of date and time related strings used by HTML elements, it is helpful to understand a few fundamental facts about the way they're defined. HTML uses a variation of the <a href="https://en.wikipedia.org/wiki/ISO_8601" target="_blank">ISO 8601</a> standard for its date and time strings. It's worth reviewing the descriptions of the formats you're using in order to ensure that your strings are in fact compatible with HTML, as the HTML specification includes algorithms for parsing these strings that is actually more precise than ISO 8601, so there can be subtle differences in how date and time strings are expected to look.</p></div> +<h3 id="character_set">Character set</h3> +<div class="section-content"><p>Dates and times in HTML are always strings which use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> character set.</p></div> +<h3 id="year_numbers">Year numbers</h3> +<div class="section-content"> +<p>In order to simplify the basic format used for date strings in HTML, the specification requires that all years be given using the modern (or <strong>proleptic</strong>) <a href="https://en.wikipedia.org/wiki/Gregorian_calendar" target="_blank">Gregorian calendar</a>. While user interfaces may allow entry of dates using other calendars, the underlying value always uses the Gregorian calendar.</p> <p>While the Gregorian calendar wasn't created until the year 1582 (replacing the similar Julian calendar), for HTML's purposes, the Gregorian calendar is extended back to the year 1 C.E. Make sure any older dates account for this.</p> <p>For the purposes of HTML dates, years are always at least four digits long; years prior to the year 1000 are padded with leading zeroes ("<code>0</code>"), so the year 72 is written as <code>0072</code>. Years prior to the year 1 C.E. are not supported, so HTML doesn't support years 1 B.C.E. (1 B.C.) or earlier.</p> <p>A year is normally 365 days long, except during <strong><a href="#leap_years">leap years</a></strong>.</p> <h4 id="leap_years">Leap years</h4> <p>A <strong>leap year</strong> is any year which is divisible by 400 <em>or</em> the year is divisible by 4 but not by 100. Although the calendar year is normally 365 days long, it actually takes the planet Earth approximately 365.2422 days to complete a single orbit around the sun. Leap years help to adjust the calendar to keep it synchronized with the actual position of the planet in its orbit. Adding a day to the year every four years essentially makes the average year 365.25 days long, which is close to correct.</p> <p>The adjustments to the algorithm (taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). Scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of Earth's rotation.</p> <p>While month <code>02</code>, February, normally has 28 days, it has 29 days in leap years.</p> +</div> +<h3 id="months_of_the_year">Months of the year</h3> +<div class="section-content"><p>There are 12 months in the year, numbered 1 through 12. They are always represented by a two-digit ASCII string whose value ranges from <code>01</code> through <code>12</code>. See the table in the section <a href="#days_of_the_month">Days of the month</a> for the month numbers and their corresponding names (and lengths in days).</p></div> +<h3 id="days_of_the_month">Days of the month</h3> +<div class="section-content"> +<p>Month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. Months 4, 6, 9, and 11 are 30 days long. Month 2, February, is 28 days long most years, but is 29 days long in leap years. This is detailed in the following table.</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <caption>The months of the year and their lengths in days</caption> <thead> <tr> <th scope="row">Month number</th> <th scope="col">Name (English)</th> <th scope="col">Length in days</th> </tr> </thead> <tbody> <tr> <th scope="row">01</th> <td>January</td> <td>31</td> </tr> <tr> <th scope="row">02</th> <td>February</td> <td>28 (29 in leap years)</td> </tr> <tr> <th scope="row">03</th> <td>March</td> <td>31</td> </tr> <tr> <th scope="row">04</th> <td>April</td> <td>30</td> </tr> <tr> <th scope="row">05</th> <td>May</td> <td>31</td> </tr> <tr> <th scope="row">06</th> <td>June</td> <td>30</td> </tr> <tr> <th scope="row">07</th> <td>July</td> <td>31</td> </tr> <tr> <th scope="row">08</th> <td>August</td> <td>31</td> </tr> <tr> <th scope="row">09</th> <td>September</td> <td>30</td> </tr> <tr> <th scope="row">10</th> <td>October</td> <td>31</td> </tr> <tr> <th scope="row">11</th> <td>November</td> <td>30</td> </tr> <tr> <th scope="row">12</th> <td>December</td> <td>31</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="week_strings">Week strings</h2> +<div class="section-content"> +<p>A week string specifies a week within a particular year. A <strong>valid week string</strong> consists of a valid <a href="#year_numbers">year number</a>, followed by a hyphen character ("<code>-</code>", or U+002D), then the capital letter "<code>W</code>" (U+0057), followed by a two-digit week of the year value.</p> <p>The week of the year is a two-digit string between <code>01</code> and <code>53</code>. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that contains the <em>first Thursday of the year</em>. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week <code>1953-W01</code>.</p> <p>A year has 53 weeks if:</p> <ul> <li>The first day of the calendar year (January 1) is a Thursday <strong>or</strong> +</li> <li>The first day of the year (January 1) is a Wednesday and the year is a <a href="#leap_years">leap year</a> +</li> </ul> <p>All other years have 52 weeks.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Week string</th> <th>Week and year (Date range)</th> </tr> </thead> <tbody> <tr> <td><code>2001-W37</code></td> <td>Week 37, 2001 (September 10-16, 2001)</td> </tr> <tr> <td><code>1953-W01</code></td> <td>Week 1, 1953 (December 29, 1952-January 4, 1953)</td> </tr> <tr> <td><code>1948-W53</code></td> <td>Week 53, 1948 (December 27, 1948-January 2, 1949)</td> </tr> <tr> <td><code>1949-W01</code></td> <td>Week 1, 1949 (January 3-9, 1949)</td> </tr> <tr> <td><code>0531-W16</code></td> <td>Week 16, 531 (April 13-19, 531)</td> </tr> <tr> <td><code>0042-W04</code></td> <td>Week 4, 42 (January 21-27, 42)</td> </tr> </tbody> </table></div></figure> <p>Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two.</p> +</div> +<h2 id="month_strings">Month strings</h2> +<div class="section-content"> +<p>A month string represents a specific month in time, rather than a generic month of the year. That is, rather than representing "January," an HTML month string represents a month and year paired, like "January 1972."</p> <p>A <strong>valid month string</strong> consists of a valid <a href="#year_numbers">year number</a> (a string of at least four digits), followed by a hyphen character ("<code>-</code>", or U+002D), followed by a two-digit numeric <a href="#months_of_the_year">month number</a>, where <code>01</code> represents January and <code>12</code> represents December.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Month string</th> <th>Month and year</th> </tr> </thead> <tbody> <tr> <td><code>17310-09</code></td> <td>September, 17310</td> </tr> <tr> <td><code>2019-01</code></td> <td>January, 2019</td> </tr> <tr> <td><code>1993-11</code></td> <td>November, 1993</td> </tr> <tr> <td><code>0571-04</code></td> <td>April, 571</td> </tr> <tr> <td><code>0001-07</code></td> <td>July, 1 C.E.</td> </tr> </tbody> </table></div></figure> <p>Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes.</p> +</div> +<h2 id="date_strings">Date strings</h2> +<div class="section-content"> +<p>A valid date string consists of a <a href="#month_strings">month string</a>, followed by a hyphen character ("<code>-</code>", or U+002D), followed by a two-digit <a href="#days_of_the_month">day of the month</a>.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Date string</th> <th>Full date</th> </tr> </thead> <tbody> <tr> <td><code>1993-11-01</code></td> <td>November 1, 1993</td> </tr> <tr> <td><code>1066-10-14</code></td> <td>October 14, 1066</td> </tr> <tr> <td><code>0571-04-22</code></td> <td>April 22, 571</td> </tr> <tr> <td><code>0062-02-05</code></td> <td>February 5, 62</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="time_strings">Time strings</h2> +<div class="section-content"> +<p>A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A <strong>valid time string</strong> minimally consists of a two-digit hour followed by a colon ("<code>:</code>", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character ("<code>.</code>", U+002E) followed by one, two, or three digits.</p> <p>There are some additional basic rules:</p> <ul> <li>The hour is always specified using the 24-hour clock, with <code>00</code> being midnight and 11 PM being <code>23</code>. No values outside the range <code>00</code> – <code>23</code> are permitted.</li> <li>The minute must be a two-digit number between <code>00</code> and <code>59</code>. No values outside that range are allowed.</li> <li>If the number of seconds is omitted (to specify a time accurate only to the minute), no colon should follow the number of minutes.</li> <li>If specified, the integer portion of the number of seconds must be between <code>00</code> and <code>59</code>. You <em>cannot</em> specify leap seconds by using values like <code>60</code> or <code>61</code>.</li> <li>If the number of seconds is specified and is an integer, it must not be followed by a decimal point.</li> <li>If a fraction of a second is included, it may be from one to three digits long, indicating the number of milliseconds. It follows the decimal point placed after the seconds component of the time string.</li> </ul> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Time string</th> <th>Time</th> </tr> </thead> <tbody> <tr> <td><code>00:00:30.75</code></td> <td>12:00:30.75 AM (30.75 seconds after midnight)</td> </tr> <tr> <td><code>12:15</code></td> <td>12:15 PM</td> </tr> <tr> <td><code>13:44:25</code></td> <td>1:44:25 PM (25 seconds after 1:44 PM)</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="local_date_and_time_strings">Local date and time strings</h2> +<div class="section-content"> +<p>A valid <a href="element/input/datetime-local"><code>datetime-local</code></a> string consists of a <code>date</code> string and a <code>time</code> string concatenated together with either the letter "<code>T</code>" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone.</p> <p>When you set the <a href="element/input#value"><code>value</code></a> of a <code>datetime-local</code> input, the string is <strong>normalized</strong> into a standard form. Normalized <code>datetime</code> strings always use the letter "<code>T</code>" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is <code>:00</code>.</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <caption> Examples of valid <code>datetime-local</code> strings </caption> <thead> <tr> <th scope="col">Date/time string</th> <th scope="col">Normalized date/time string</th> <th scope="col">Actual date and time</th> </tr> </thead> <tbody> <tr> <td><code>1986-01-28T11:38:00.01</code></td> <td><code>1986-01-28T11:38:00.01</code></td> <td>January 28, 1986 at 11:38:00.01 AM</td> </tr> <tr> <td><code>1986-01-28 11:38:00.010</code></td> <td> <p><code>1986-01-28T11:38:00.01</code></p> <p> Note that after normalization, this is the same string as the previous <code>datetime-local</code> string. The space has been replaced with the "<code>T</code>" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible. </p> </td> <td>January 28, 1986 at 11:38:00.01 AM</td> </tr> <tr> <td><code>0170-07-31T22:00:00</code></td> <td> <p><code>0170-07-31T22:00</code></p> <p> Note that the normalized form of this date drops the "<code>:00</code>" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the length of the string. </p> </td> <td>July 31, 170 at 10:00 PM</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="global_date_and_time_strings">Global date and time strings</h2> +<div class="section-content"><p>A global date and time string specifies a date and time as well as the time zone in which it occurs. A <strong>valid global date and time string</strong> is the same format as a <a href="#local_date_and_time_strings">local date and time string</a>, except it has a time zone string appended to the end, following the time.</p></div> +<h3 id="time_zone_offset_string">Time zone offset string</h3> +<div class="section-content"> +<p>A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same:</p> <ul> <li>For dates after the establishment of <a href="https://en.wikipedia.org/wiki/Coordinated_Universal_Time" target="_blank">Coordinated Universal Time</a> (UTC) in the early 1960s, the time base is <code>Z</code> and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the Royal Observatory at Greenwich, England).</li> <li>For dates prior to UTC, the time base is instead expressed in terms of <a href="https://en.wikipedia.org/wiki/UT1" target="_blank">UT1</a>, which is the contemporary Earth solar time at the prime meridian.</li> </ul> <p>The time zone string is appended immediately following the time in the date and time string. You can specify "<code>Z</code>" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows:</p> <ol> <li>A character indicating the sign of the offset: the plus character ("<code>+</code>", or U+002B) for time zones to the east of the prime meridian or the minus character ("<code>-</code>", or U+002D) for time zones to the west of the prime meridian.</li> <li>A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between <code>00</code> and <code>23</code>.</li> <li>An optional colon ("<code>:</code>") character.</li> <li>A two-digit number of minutes past the hour; this value must be between <code>00</code> and <code>59</code>.</li> </ol> <p>While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than <code>00</code>, <code>30</code>, or <code>45</code> minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so.</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <caption>Examples of valid global date and time strings</caption> <thead> <tr> <th scope="col">Global date and time string</th> <th scope="col">Actual global date and time</th> <th scope="col">Date and time at prime meridian</th> </tr> </thead> <tbody> <tr> <td><code>2005-06-07T00:00Z</code></td> <td>June 7, 2005 at midnight UTC</td> <td>June 7, 2005 at midnight</td> </tr> <tr> <td><code>1789-08-22T12:30:00.1-04:00</code></td> <td> August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT) </td> <td>August 22, 1789 at a tenth of a second past 4:30 PM</td> </tr> <tr> <td><code>3755-01-01 00:00+10:00</code></td> <td>January 1, 3755 at midnight Australian Eastern Standard Time (AEST)</td> <td>December 31, 3754 at 2:00 PM</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="date_issues">Date issues</h2> +<div class="section-content"><p>Because of data storage and precision issues, you may want to be aware of a few client-side and server-side issues.</p></div> +<h3 id="the_y2k38_problem_often_server-side">The Y2K38 Problem (often server-side)</h3> +<div class="section-content"> +<p>JavaScript uses double precision floating points to store dates, as with all numbers, meaning that JavaScript code will not suffer from the Y2K38 problem unless integer coercion/bit-hacks are used because all JavaScript bit operators use 32-bit signed 2s-complement integers.</p> <p>The problem is with the server side of things: storage of dates greater than 2^31 - 1. To fix this problem, you must store all dates using either unsigned 32-bit integers, signed 64-bit integers, or double-precision floating points on the server. If your server is written in PHP, the fix may be as simple as upgrading to PHP 8 or 7, and upgrading your hardware to x86_64 or IA64. If you are stuck with other hardware, you can try to emulate 64-bit hardware inside a 32-bit virtual machine, but most VMs don't support this kind of virtualization, since stability may suffer, and performance will definitely suffer greatly.</p> +</div> +<h3 id="the_y10k_problem_often_client-side">The Y10k Problem (often client-side)</h3> +<div class="section-content"> +<p>In many servers, dates are stored as numbers instead of as strings--numbers of a fixed size and agnostic of format (aside from endianness). After the year 10,000, those numbers will just be a bit bigger than before, so many servers will not see issues with forms submitted after the year 10,000.</p> <p>The problem is with the client side of things: parsing of dates with more than 4 digits in the year.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ryheDknskFjwnqbOw5jYezRQapczgBa+2YgJfV+Kyxg=" data-language="html"><span class="token comment"><!--midnight of January 1st, 10000: the exact time of Y10K--></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>datetime-local<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>+010000-01-01T05:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>It's that simple. Just prepare your code for any number of digits. Do not only prepare for 5 digits. Here is JavaScript code for programmatically setting the value:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="8UiuA9TwV4wQLeX//ZpNb+m8Frn+H0BONdLcmGllxoI=" data-language="js"><span class="token keyword">function</span> <span class="token function">setValue</span><span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> date</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> isoString <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + element<span class="token punctuation">.</span>value <span class="token operator">=</span> isoString<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> isoString<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"T"</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Why worry about the Y10K problem if it is going to happen many centuries after your death? Exactly because you will already be dead, so the companies using your software will be stuck using your software without any other coder who knows the system well enough to come in and fix it.</p> +</div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="element/input"><code><input></code></a></li> <li> +<a href="element/ins"><code><ins></code></a> and <a href="element/del"><code><del></code></a>: see the <code>datetime</code> attribute, which specifies either a date or a local date and time at which the content was inserted or deleted</li> <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html" target="_blank">The ISO 8601 specification</a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and Dates</a> in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a> +</li> <li>The JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> object</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat"><code>Intl.DateTimeFormat</code></a> object for formatting dates and times for a given locale</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Date_and_time_formats" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats</a> + </p> +</div> diff --git a/devdocs/html/element%2Fa.html b/devdocs/html/element%2Fa.html new file mode 100644 index 00000000..73eff03d --- /dev/null +++ b/devdocs/html/element%2Fa.html @@ -0,0 +1,585 @@ +<header><h1><a>: The Anchor element</h1></header><div class="section-content"> +<p>The <code><a></code> <a href="../index">HTML</a> element (or <em>anchor</em> element), with <a href="#href">its <code>href</code> attribute</a>, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.</p> <p>Content within each <code><a></code> <em>should</em> indicate the link's destination. If the <code>href</code> attribute is present, pressing the enter key while focused on the <code><a></code> element will activate it.</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/a.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="download"><a href="#download"><code>download</code></a></dt> <dd> <p>Causes the browser to treat the linked URL as a download. Can be used with or without a <code>filename</code> value:</p> <ul> <li>Without a value, the browser will suggest a filename/extension, generated from various sources: <ul> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code></a> HTTP header</li> <li>The final segment in the URL <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname">path</a> +</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">media type</a> (from the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> header, the start of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs"><code>data:</code> URL</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob/type"><code>Blob.type</code></a> for a <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"><code>blob:</code> URL</a>)</li> </ul> </li> <li> +<code>filename</code>: defining a value suggests it as the filename. <code>/</code> and <code>\</code> characters are converted to underscores (<code>_</code>). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong></p> <ul> <li> +<code>download</code> only works for <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>, or the <code>blob:</code> and <code>data:</code> schemes.</li> <li>How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.</li> <li>If the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behavior may differ: <ul> <li>If the header specifies a <code>filename</code>, it takes priority over a filename specified in the <code>download</code> attribute.</li> <li>If the header specifies a disposition of <code>inline</code>, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.</li> </ul> </li> </ul> </div> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p>The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:</p> <ul> <li>Sections of a page with document fragments</li> <li>Specific text portions with <a href="https://developer.mozilla.org/en-US/docs/Web/Text_fragments">text fragments</a> +</li> <li>Pieces of media files with media fragments</li> <li>Telephone numbers with <code>tel:</code> URLs</li> <li>Email addresses with <code>mailto:</code> URLs</li> <li>SMS text messages with <code>sms:</code> URLs</li> <li>While web browsers may not support other URL schemes, websites can with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> +</li> </ul> </dd> <dt id="hreflang"><a href="#hreflang"><code>hreflang</code></a></dt> <dd> <p>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="../global_attributes/lang">the global <code>lang</code> attribute</a>.</p> </dd> <dt id="ping"><a href="#ping"><code>ping</code></a></dt> <dd> <p>A space-separated list of URLs. When the link is followed, the browser will send <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a> requests with the body <code>PING</code> to the URLs. Typically for tracking.</p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>How much of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when following the link.</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p>The relationship of the linked URL as space-separated link types.</p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <a href="iframe"><code><iframe></code></a>). The following keywords have special meanings for where to load the URL:</p> <ul> <li> +<code>_self</code>: the current browsing context. (Default)</li> <li> +<code>_blank</code>: usually a new tab, but users can configure browsers to open a new window instead.</li> <li> +<code>_parent</code>: the parent browsing context of the current one. If no parent, behaves as <code>_self</code>.</li> <li> +<code>_top</code>: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Setting <code>target="_blank"</code> on <code><a></code> elements implicitly provides the same <code>rel</code> behavior as setting <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> which does not set <code>window.opener</code>.</p> </div> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>Hints at the linked URL's format with a <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">MIME type</a>. No built-in functionality.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="charset"> +<a href="#charset"><code>charset</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Hinted at the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding">character encoding</a> of the linked URL.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is deprecated and <strong>should not be used by authors</strong>. Use the HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> header on the linked URL.</p> </div> </dd> <dt id="coords"> +<a href="#coords"><code>coords</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</p> </dd> <dt id="name"> +<a href="#name"><code>name</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Use the global attribute <a href="../global_attributes#id"><code>id</code></a> instead.</p> </div> </dd> <dt id="rev"> +<a href="#rev"><code>rev</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</p> </dd> <dt id="shape"> +<a href="#shape"><code>shape</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The shape of the hyperlink's region in an image map.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Use the <a href="area"><code><area></code></a> element for image maps instead.</p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="linking_to_an_absolute_url">Linking to an absolute URL</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="O9Xh/Og5khrawRE3A+AxB88YjoxeXDlngvDDwEwKepw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.mozilla.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mozilla<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Linking to an absolute URL sample" id="frame_linking_to_an_absolute_url" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_absolute_url" loading="lazy"></iframe> +</div> +</div> +<h3 id="linking_to_relative_urls">Linking to relative URLs</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3OeGwYuyTv/zhlj89WwfcJ+iaiEY3V/wlyHK9bKptfA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Scheme-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/en-US/docs/Web/HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Origin-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./p<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Directory-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Linking to relative URLs sample" id="frame_linking_to_relative_urls" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_relative_urls" loading="lazy"></iframe> +</div> +</div> +<h3 id="linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vjFJ6aoTIjsc4xz/hxRNBu11gJXv8X1tQXAVPfPp1Po=" data-language="html"><span class="token comment"><!-- <a> element links to the section below --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#Section_further_down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jump to the heading below<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Heading to link to --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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>Section_further_down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Section further down<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Linking to an element on the same page sample" id="frame_linking_to_an_element_on_the_same_page" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_element_on_the_same_page" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier" target="_blank">as defined in the HTML specification</a>.</p> </div> +</div> +<h3 id="linking_to_an_email_address">Linking to an email address</h3> +<div class="section-content"> +<p>To create links that open in the user's email program to let them send a new message, use the <code>mailto:</code> scheme:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Jb6UJm3VQOXjlsLsQlMeor/X7uynoJTFyLd/jZEdjg0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:nowhere@mozilla.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send email to nowhere<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Linking to an email address sample" id="frame_linking_to_an_email_address" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_email_address" loading="lazy"></iframe> +</div> <p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#email_links">Email links</a> or <a href="https://datatracker.ietf.org/doc/html/rfc6068" target="_blank">RFC 6068</a>.</p> +</div> +<h3 id="linking_to_telephone_numbers">Linking to telephone numbers</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YeLw9jGA9vg6UYcXkF+BCK9vyMn14M/w7YB18h+ZpeM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+49.157.0156<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>+49 157 0156<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+1(800)555-0123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(800) 555-0123<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Linking to telephone numbers sample" id="frame_linking_to_telephone_numbers" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_telephone_numbers" loading="lazy"></iframe> +</div> <p><code>tel:</code> link behavior varies with device capabilities:</p> <ul> <li>Cellular devices autodial the number.</li> <li>Most operating systems have programs that can make calls, like Skype or FaceTime.</li> <li>Websites can make phone calls with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler</code></a>, such as <code>web.skype.com</code>.</li> <li>Other behaviors include saving the number to contacts, or sending the number to another device.</li> </ul> <p>See <a href="https://datatracker.ietf.org/doc/html/rfc3966" target="_blank">RFC 3966</a> for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p> +</div> +<h3 id="using_the_download_attribute_to_save_a_canvas_as_a_png">Using the download attribute to save a <canvas> as a PNG</h3> +<div class="section-content"> +<p>To save a <a href="canvas"><code><canvas></code></a> element's contents as an image, you can create a link where the <code>href</code> is the canvas data as a <code>data:</code> URL created with JavaScript and the <code>download</code> attribute provides the file name for the downloaded PNG file:</p> <h4 id="example_painting_app_with_save_link">Example painting app with save link</h4> <h5 id="html_3">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ye0L2ExfMb3ZSsS3Y0Yrn6IGMWWc4DAq2ZjTwnJVyNo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Paint by holding down the mouse button and moving it. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my_painting.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download my painting<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="css">CSS</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="WWvZzlFHKimd1W7wsW+bc4hqRbQxnQZk+02xMwVYt+8=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">canvas</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px dashed<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">a</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #69c<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="javascript">JavaScript</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="qGGr/ZrMV4ggc0OtYRenghLaTrw2TGY8wUZ2+6CfU0o=" data-language="js"><span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"canvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> c <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +c<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"hotpink"</span><span class="token punctuation">;</span> +<span class="token keyword">let</span> isDrawing<span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">draw</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>isDrawing<span class="token punctuation">)</span> <span class="token punctuation">{</span> + c<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">closePath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mousemove"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> + <span class="token function">draw</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>offsetX<span class="token punctuation">,</span> event<span class="token punctuation">.</span>offsetY<span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mousedown"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isDrawing <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mouseup"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isDrawing <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +document + <span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"click"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>href <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h5 id="result_6">Result</h5> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Example painting app with save link sample" id="frame_example_painting_app_with_save_link" width="100%" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=example_painting_app_with_save_link" loading="lazy"></iframe> +</div> +</div> +<h2 id="security_and_privacy">Security and privacy</h2> +<div class="section-content"> +<p><code><a></code> elements can have consequences for users' security and privacy. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p> <p>Using <code>target="_blank"</code> without <a href="../attributes/rel/noreferrer"><code>rel="noreferrer"</code></a> and <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> makes the website vulnerable to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a> API exploitation attacks, although note that, in newer browser versions setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>. See <a href="#browser_compatibility">browser compatibility</a> for details.</p> +</div> +<h2 id="accessibility">Accessibility</h2> + +<h3 id="strong_link_text">Strong link text</h3> +<div class="section-content"> +<p><strong>The content inside a link should indicate where the link goes</strong>, even out of context.</p> <h4 id="inaccessible_weak_link_text">Inaccessible, weak link text</h4> <p>A sadly common mistake is to only link the words "click here" or "here":</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PHRPy4Os+xCmHs++LjAUqXt0evtsOO9gsK7cLZOUzA4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Learn more about our products <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/products<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>here<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_7">Result</h5> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Inaccessible, weak link text sample" id="frame_inaccessible_weak_link_text" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=inaccessible_weak_link_text" loading="lazy"></iframe> +</div> <h4 id="strong_link_text_2">Strong link text</h4> <p>Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+Tc5lxAd7W/DPkjpCyQjqGS4WC9YXWwfOqyPVk9WZKk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Learn more <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/products<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>about our products<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_8">Result</h5> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Strong link text sample" id="frame_strong_link_text" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=strong_link_text" loading="lazy"></iframe> +</div> <p>Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.</p> +</div> +<h3 id="onclick_events">onclick events</h3> +<div class="section-content"> +<p>Anchor elements are often abused as fake buttons by setting their <code>href</code> to <code>#</code> or <code>javascript:void(0)</code> to prevent the page from refreshing, then listening for their <code>click</code> events .</p> <p>These bogus <code>href</code> values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.</p> <p>Use a <a href="button"><code><button></code></a> instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p> +</div> +<h3 id="external_links_and_linking_to_non-html_resources">External links and linking to non-HTML resources</h3> +<div class="section-content"> +<p>Links that open in a new tab/window via <code>target="_blank"</code>, or links that point to a download file should indicate what will happen when the link is followed.</p> <p>People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.</p> <h4 id="link_that_opens_a_new_tabwindow">Link that opens a new tab/window</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="G0kd4SKtECA0PLD2iWeWwI7LzlNjuCloPCk5xglhppY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.wikipedia.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Wikipedia (opens in new tab) +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_9">Result</h5> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Link that opens a new tab/window sample" id="frame_link_that_opens_a_new_tabwindow" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=link_that_opens_a_new_tabwindow" loading="lazy"></iframe> +</div> <h4 id="link_to_a_non-html_resource">Link to a non-HTML resource</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kAJN9/uxrfFR0zROlEu2QGNIZeSlnVVyW7+K+pY04/I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-annual-report.ppt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2017 Annual Report (PowerPoint)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If an icon is used to signify link behavior, make sure it has an <a href="img#alt"><em>alt text</em></a>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KKZ8Fu0KKyYqIaSDzMoSmS9f++1zCQ8+hsZhwDlWy9U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.wikipedia.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Wikipedia + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(opens in new tab)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>newtab.svg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-annual-report.ppt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + 2017 Annual Report + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(PowerPoint file)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ppt-icon.svg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_10">Result</h5> +<div class="code-example" id="sect16"> + +<iframe class="sample-code-frame" title="Link to a non-HTML resource sample" id="frame_link_to_a_non-html_resource" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=link_to_a_non-html_resource" loading="lazy"></iframe> +</div> <ul> <li><a href="https://webaim.org/techniques/hypertext/hypertext_links" target="_blank">WebAIM: Links and Hypertext - Hypertext Links</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_%E2%80%94_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" target="_blank">G200: Opening new windows and tabs from a link only when necessary</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html" target="_blank">G201: Giving users advanced warning when opening a new window</a></li> </ul> +</div> +<h3 id="skip_links">Skip links</h3> +<div class="section-content"> +<p>A <strong>skip link</strong> is a link placed as early as possible in <a href="body"><code><body></code></a> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="uCcEPMWQrwx4WUkNH7CcO5SRVXuFI2PJJYClxIWSaZc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#content<span class="token punctuation">"</span></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>skip-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- The skip link jumps to here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sjFzqzI63Wkszs87H75n6HCdBZSKnnSjJ4gNU1OSYHE=" data-language="css"><span class="token selector">.skip-link</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">top</span><span class="token punctuation">:</span> -3em<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">.skip-link:focus</span> <span class="token punctuation">{</span> + <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_11">Result</h4> +<div class="code-example" id="sect17"> + +<iframe class="sample-code-frame" title="Skip links sample" id="frame_skip_links" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=skip_links" loading="lazy"></iframe> +</div> <p>Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.</p> <p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.</p> <ul> <li><a href="https://webaim.org/techniques/skipnav/" target="_blank">WebAIM: "Skip Navigation" Links</a></li> <li><a href="https://www.a11yproject.com/posts/skip-nav-links/" target="_blank">How-to: Use Skip Navigation links</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" target="_blank">Understanding Success Criterion 2.4.1</a></li> </ul> +</div> +<h3 id="size_and_proximity">Size and proximity</h3> +<div class="section-content"> +<h4 id="size">Size</h4> <p>Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" target="_blank">CSS pixels</a> is recommended.</p> <p>Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">Understanding Success Criterion 2.5.5: Target Size</a></li> <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html" target="_blank">Target Size and 2.5.5</a></li> <li><a href="https://www.a11yproject.com/posts/large-touch-targets/" target="_blank">Quick test: Large touch targets</a></li> </ul> <h4 id="proximity">Proximity</h4> <p>Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.</p> <p>Spacing may be created using CSS properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> <li><a href="https://axesslab.com/hand-tremors/" target="_blank">Hand tremors and the giant-button-problem</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">interactive content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#transparent_content_model">Transparent</a>, except that no descendant may be <a href="../content_categories#interactive_content">interactive content</a> or an <a href="a" aria-current="page">a</a> element, and no descendant may have a specified <a href="../global_attributes/tabindex">tabindex</a> attribute. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>, but not other <code><a></code> elements. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> when <code>href</code> attribute is present, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"><code>generic</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <p>When <code>href</code> attribute is present:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role"><code>treeitem</code></a></li> </ul> <p>When <code>href</code> attribute is not present:</p> <ul> <li>any</li> </ul> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</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/text-level-semantics.html#the-a-element">HTML Standard <br><small># the-a-element</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>a</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>Starting with Firefox 41, <a> without <code>href</code> attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (<a href="https://bugzil.la/1167816">bug 1167816</a>).</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>Starting with Firefox 41, <a> without <code>href</code> attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (<a href="https://bugzil.la/1167816">bug 1167816</a>).</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> +<tr> +<th><code>attributionsrc</code></th> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>charset</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>coords</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>1–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>4–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>download</code></th> +<td class="bc-supports-yes"><details><summary>14</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes"> +<details><summary>18</summary>Starting in Edge 79, cross-origin downloads are not supported on the <code><a></code> element.</details><details><summary>13</summary>["Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (<a href="https://developer.microsoft.com/microsoft-edge/platform/issues/7160092/">bug 7160092</a>).", "Edge 17 or older didn't follow the attributes' value to determine filename (<a href="https://developer.microsoft.com/microsoft-edge/platform/issues/7260192/">bug 7260192</a>)."]</details> +</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>15</summary>Starting in Opera 52, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes"><details><summary>14</summary>Starting in Opera 47, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +</tr> +<tr> +<th><code>href</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>href_sms</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>hreflang</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>implicit_noopener</code></th> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>name</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>ping</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rev</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>shape</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>1–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>4–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>target</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>text_fragments</code></th> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">16.1</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">16.1</td> +<td class="bc-supports-yes">13.0</td> +</tr> +<tr> +<th><code>type</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">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">4</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="link"><code><link></code></a> is similar to <code><a></code>, but for metadata hyperlinks that are invisible to users.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link"><code>:link</code></a> is a CSS pseudo-class that will match <code><a></code> elements with URL in <code>href</code> attribute that was not yet visited by the user.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited"><code>:visited</code></a> is a CSS pseudo-class that will match <code><a></code> elements with URL in <code>href</code> attribute that was visited by the user in the past.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link"><code>:any-link</code></a> is a CSS pseudo-class that will match <code><a></code> elements with <code>href</code> attribute.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Text_fragments">Text fragments</a> are user-agent instructions added to URLs that allow content authors to link to specific text on a page, without IDs being required.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/a" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a</a> + </p> +</div> diff --git a/devdocs/html/element%2Fabbr.html b/devdocs/html/element%2Fabbr.html new file mode 100644 index 00000000..a429eb88 --- /dev/null +++ b/devdocs/html/element%2Fabbr.html @@ -0,0 +1,155 @@ +<header><h1><abbr>: The Abbreviation element</h1></header><div class="section-content"> +<p>The <code><abbr></code> <a href="../index">HTML</a> element represents an abbreviation or acronym.</p> <p>When including an abbreviation or acronym, provide a full expansion of the term in plain text on first use, along with the <code><abbr></code> to mark up the abbreviation. This informs the user what the abbreviation or acronym means.</p> <p>The optional <a href="../global_attributes#title"><code>title</code></a> attribute can provide an expansion for the abbreviation or acronym when a full expansion is not present. This provides a hint to user agents on how to announce/display the content while informing all users what the abbreviation means. If present, <code>title</code> must contain this full description and nothing else.</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/abbr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element only supports the <a href="../global_attributes">global attributes</a>. The <a href="../global_attributes#title"><code>title</code></a> attribute has a specific semantic meaning when used with the <code><abbr></code> element; it <em>must</em> contain a full human-readable description or expansion of the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.</p> <p>Each <code><abbr></code> element you use is independent of all others; providing a <code>title</code> for one does not automatically attach the same expansion text to others with the same content text.</p> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="typical_use_cases">Typical use cases</h3> +<div class="section-content"> +<p>It's certainly not required that all abbreviations be marked up using <code><abbr></code>. There are, though, a few cases where it's helpful to do so:</p> <ul> <li>When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <code><abbr></code> with an appropriate <a href="../global_attributes#title"><code>title</code></a>.</li> <li>To define an abbreviation which may be unfamiliar to the reader, present the term using <code><abbr></code> and inline text providing the definition. Include a <code>title</code> attribute only when the inline expansion or definition is not available.</li> <li>When an abbreviation's presence in the text needs to be semantically noted, the <code><abbr></code> element is useful. This can be used, in turn, for styling or scripting purposes.</li> <li>You can use <code><abbr></code> in concert with <a href="dfn"><code><dfn></code></a> to establish definitions for terms which are abbreviations or acronyms. See the example <a href="#defining_an_abbreviation">Defining an abbreviation</a> below.</li> </ul> +</div> +<h3 id="grammar_considerations">Grammar considerations</h3> +<div class="section-content"><p>In languages with <a href="https://en.wikipedia.org/wiki/Grammatical_number" target="_blank">grammatical number</a> (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.</p></div> +<h2 id="default_styling">Default styling</h2> +<div class="section-content"> +<p>The purpose of this element is purely for the convenience of the author and all browsers display it inline (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a><code>: inline</code>) by default, though its default styling varies from one browser to another:</p> <p>Some browsers add a dotted underline to the content of the element. Others add a dotted underline while converting the contents to small caps. Others may not style it differently than a <a href="span"><code><span></code></a> element. To control this styling, use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a>.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="marking_up_an_abbreviation_semantically">Marking up an abbreviation semantically</h3> +<div class="section-content"> +<p>To mark up an abbreviation without providing an expansion or description, use <code><abbr></code> without any attributes, as seen in this example.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BuRjbvvFo9xCc1rYmeTHk8owTBH+XTb20JibP3th01U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> is fun and easy!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Marking up an abbreviation semantically sample" id="frame_marking_up_an_abbreviation_semantically" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=marking_up_an_abbreviation_semantically" loading="lazy"></iframe> +</div> +</div> +<h3 id="styling_abbreviations">Styling abbreviations</h3> +<div class="section-content"> +<p>You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fOL8fradlYXqM3/G0fmRsKhB98FehxQRao36MN2nuF0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>, you can style your abbreviations!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="+OjG0mJBckdkkJYLL4gazovCHMkytzzVCr9aZk7YLyc=" data-language="css"><span class="token selector">abbr</span> <span class="token punctuation">{</span> + <span class="token property">font-variant</span><span class="token punctuation">:</span> all-small-caps<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Styling abbreviations sample" id="frame_styling_abbreviations" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=styling_abbreviations" loading="lazy"></iframe> +</div> +</div> +<h3 id="providing_an_expansion">Providing an expansion</h3> +<div class="section-content"> +<p>Adding a <a href="../global_attributes#title"><code>title</code></a> attribute lets you provide an expansion or definition for the abbreviation or acronym.</p> <h4 id="html_3">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YCByAVLqtCO50Ol1lLCo9PG3Jg5KVWP2bLsd1G7f7b0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ashok's joke made me <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Laugh Out Loud<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>LOL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> big time.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Providing an expansion sample" id="frame_providing_an_expansion" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=providing_an_expansion" loading="lazy"></iframe> +</div> +</div> +<h3 id="defining_an_abbreviation">Defining an abbreviation</h3> +<div class="section-content"> +<p>You can use <code><abbr></code> in tandem with <a href="dfn"><code><dfn></code></a> to more formally define an abbreviation, as shown here.</p> <h4 id="html_4">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="whhZ8zMjla7A/XZ3kYMZDhYTy87eZ2lcNAJHMYelWiQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</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>html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>HyperText Markup Language<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> is a + markup language used to create the semantics and structure of a web page. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + A <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</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>spec<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Specification<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>spec<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a document that + outlines in detail how a technology or API is intended to function and how it + is accessed. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Defining an abbreviation sample" id="frame_defining_an_abbreviation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=defining_an_abbreviation" loading="lazy"></iframe> +</div> +</div> +<h3 id="accessibility_concerns">Accessibility concerns</h3> +<div class="section-content"> +<p>Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.</p> <p>Only include a <code>title</code> if expanding the abbreviation or acronym in the text is not possible. Having a difference between the announced word or phrase and what is displayed on the screen, especially if it's technical jargon the reader may not be familiar with, can be jarring.</p> <h4 id="html_5">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="OrwO8NkLLWVv8DcE3Y2at7troO6W6bp8nGEeb0hhG28=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + JavaScript Object Notation (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span><span class="token punctuation">></span></span>JSON<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span>) is a lightweight + data-interchange format. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Accessibility concerns sample" id="frame_accessibility_concerns" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/abbr/runner.html?id=accessibility_concerns" loading="lazy"></iframe> +</div> <p>This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#phrasing_content">Phrasing content</a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM Interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-abbr-element">HTML Standard <br><small># the-abbr-element</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>abbr</code></th> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">3.2</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="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations">Using the <code><abbr></code> element</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/abbr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr</a> + </p> +</div> diff --git a/devdocs/html/element%2Facronym.html b/devdocs/html/element%2Facronym.html new file mode 100644 index 00000000..0e58970e --- /dev/null +++ b/devdocs/html/element%2Facronym.html @@ -0,0 +1,79 @@ +<header><h1><acronym></h1></header><div class="section-content"><div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div></div> +<h2 id="summary">Summary</h2> +<div class="section-content"> +<p>The <code><acronym></code> <a href="../index">HTML</a> element allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Don't use this element. Use the <a href="abbr"><code><abbr></code></a> element instead.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only has <a href="../global_attributes">global attributes</a>, which are common to all elements.</p></div> +<h2 id="dom_interface">DOM Interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="FeusKd/jaKVVYmUP298e6ma3d2xtQD4Wj+co0LEGiEw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>acronym</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>World Wide Web<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>WWW<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>acronym</span><span class="token punctuation">></span></span> is only a component of the + Internet. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></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="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/acronym/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="default_styling">Default styling</h2> +<div class="section-content"> +<p>Though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another:</p> <ul> <li>Opera, Firefox, Chrome, and some others add a dotted underline to the content of the element.</li> <li>A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a><code>: none</code> in the CSS takes care of this case.</li> </ul> <p>It is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation.</p> +</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/obsolete.html#acronym">HTML Standard <br><small># acronym</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>acronym</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">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">4</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>The <a href="abbr"><code><abbr></code></a> HTML element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/acronym" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/acronym</a> + </p> +</div> diff --git a/devdocs/html/element%2Faddress.html b/devdocs/html/element%2Faddress.html new file mode 100644 index 00000000..f9c641b6 --- /dev/null +++ b/devdocs/html/element%2Faddress.html @@ -0,0 +1,90 @@ +<header><h1><address>: The Contact Address element</h1></header><div class="section-content"><p>The <code><address></code> <a href="../index">HTML</a> element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.</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/address.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The contact information provided by an <code><address></code> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. The <code><address></code> element should include the name of the person, people, or organization to which the contact information refers.</p> <p><code><address></code> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <code><address></code> element within the <a href="article"><code><article></code></a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>The <code><address></code> element can only be used to represent the contact information for its nearest <a href="article"><code><article></code></a> or <a href="body"><code><body></code></a> element ancestor.</li> <li>This element should not contain more information than the contact information, like a publication date (which belongs in a <a href="time"><code><time></code></a> element).</li> <li>Typically an <code><address></code> element can be placed inside the <a href="footer"><code><footer></code></a> element of the current section, if any.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>This example demonstrates the use of <code><address></code> to demarcate the contact information for an article's author.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="HSgCVynSQQpCbBCnvdL264YbPY4qB5vhI7Yiu8NtBSw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>address</span><span class="token punctuation">></span></span> + You can contact author at + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.somedomain.com/contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>www.somedomain.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + If you see any bugs, please + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:webmaster@somedomain.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>contact webmaster<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + You may also want to visit us:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Mozilla Foundation<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + 331 E Evelyn Ave<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Mountain View, CA 94041<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + USA +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>address</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="300" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/address/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>Although it renders text with the same default styling as the <a href="i"><code><i></code></a> or <a href="em"><code><em></code></a> elements, it is more appropriate to use <code><address></code> when dealing with contact information, as it conveys additional semantic information.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>, but with no nested <code><address></code> element, no heading content (<a href="hgroup"><code><hgroup></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>), no sectioning content (<a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="section"><code><section></code></a>, <a href="nav"><code><nav></code></a>), and no <a href="header"><code><header></code></a> or <a href="footer"><code><footer></code></a> element. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>, but always excluding <code><address></code> elements (according to the logical principle of symmetry, if <code><address></code> tag, as a parent, can not have nested <code><address></code> element, then the same <code><address></code> content can not have <code><address></code> tag as its parent). </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role">group</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Prior to Gecko 2.0 (Firefox 4), Gecko implemented this element using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> interface </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/sections.html#the-address-element">HTML Standard <br><small># the-address-element</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>address</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">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">4</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>Others section-related elements: <a href="body"><code><body></code></a>, <a href="nav"><code><nav></code></a>, <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="footer"><code><footer></code></a>, <a href="section"><code><section></code></a>, <a href="header"><code><header></code></a>;</li> <li> +<a href="heading_elements">Sections and outlines of an HTML document</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/address" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address</a> + </p> +</div> diff --git a/devdocs/html/element%2Farea.html b/devdocs/html/element%2Farea.html new file mode 100644 index 00000000..01bacab7 --- /dev/null +++ b/devdocs/html/element%2Farea.html @@ -0,0 +1,293 @@ +<header><h1><area>: The Image Map Area element</h1></header><div class="section-content"> +<p>The <code><area></code> <a href="../index">HTML</a> element defines an area inside an image map that has predefined clickable areas. An <em>image map</em> allows geometric areas on an image to be associated with <a href="https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink">hypertext links</a>.</p> <p>This element is used only within a <a href="map"><code><map></code></a> element.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/area.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="alt"><a href="#alt"><code>alt</code></a></dt> <dd> <p> A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. This attribute is required only if the <a href="#href"><code>href</code></a> attribute is used. </p> </dd> <dt id="coords"><a href="#coords"><code>coords</code></a></dt> <dd> <p> The <code>coords</code> attribute details the coordinates of the <a href="#shape"><code>shape</code></a> attribute in size, shape, and placement of an <code><area></code>. This attribute must not be used if <code>shape</code> is set to <code>default</code>. </p> <ul> <li> <code>rect</code>: the value is <code>x1,y1,x2,y2</code>. The value specifies the coordinates of the top-left and bottom-right corner of the rectangle. For example, in <code><area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"></code> the coordinates are <code>0,0</code> and <code>253,27</code>, indicating the top-left and bottom-right corners of the rectangle, respectively. </li> <li> <code>circle</code>: the value is <code>x,y,radius</code>. Value specifies the coordinates of the circle center and the radius. For example: <code><area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"></code> </li> <li> <code>poly</code>: the value is <code>x1,y1,x2,y2,..,xn,yn</code>. Value specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon </li> </ul> <p>The values are numbers of CSS pixels.</p> </dd> <dt id="download"><a href="#download"><code>download</code></a></dt> <dd> <p> This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. See <a href="a"><code><a></code></a> for a full description of the <a href="a#download"><code>download</code></a> attribute. </p> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p> The hyperlink target for the area. Its value is a valid URL. This attribute may be omitted; if so, the <code><area></code> element does not represent a hyperlink. </p> </dd> <dt id="ping"><a href="#ping"><code>ping</code></a></dt> <dd> <p> Contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking. </p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>A string indicating which referrer to use when fetching the resource:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> <code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins. </li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p> For anchors containing the <a href="#href"><code>href</code></a> attribute, this attribute specifies the relationship of the target object to the link object. The value is a space-separated list of link types. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <a href="#href"><code>href</code></a> attribute is present. </p> </dd> <dt id="shape"><a href="#shape"><code>shape</code></a></dt> <dd> <p>The shape of the associated hot spot. The specifications for HTML defines the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes.</p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p> A keyword or author-defined name of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a> to display the linked resource. The following keywords have special meanings: </p> <ul> <li> +<code>_self</code> (default): Show the resource in the current browsing context.</li> <li> +<code>_blank</code>: Show the resource in a new, unnamed browsing context.</li> <li> <code>_parent</code>: Show the resource in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as <code>_self</code>. </li> <li> <code>_top</code>: Show the resource in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as <code>_self</code>. </li> </ul> <p>Use this attribute only if the <a href="#href"><code>href</code></a> attribute is present.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting <code>target="_blank"</code> on <code><area></code> elements implicitly provides the same <code>rel</code> behavior as setting <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> which does not set <code>window.opener</code>. See <a href="#browser_compatibility">browser compatibility</a> for support status.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eexpAr/h5d5NM7csPCY0GcBX6WR4gyryBvocboa2zzU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left.html<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to go Left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>275,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right.html<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to go Right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#primary<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://via.placeholder.com/350x150<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350 x 150 pic<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="360" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/area/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. The <code><area></code> element must have an ancestor <a href="map"><code><map></code></a>, but it need not be a direct parent.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> when <a href="area#href" aria-current="page"><code>href</code></a> attribute is present, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"><code>generic</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</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/image-maps.html#the-area-element">HTML Standard <br><small># the-area-element</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>area</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>accesskey</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>alt</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>coords</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>download</code></th> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">6.0</td> +</tr> +<tr> +<th><code>href</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>implicit_noopener</code></th> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>nohref</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>ping</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>shape</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>tabindex</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>target</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">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">4</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><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/area" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area</a> + </p> +</div> diff --git a/devdocs/html/element%2Farticle.html b/devdocs/html/element%2Farticle.html new file mode 100644 index 00000000..ba47dc0a --- /dev/null +++ b/devdocs/html/element%2Farticle.html @@ -0,0 +1,112 @@ +<header><h1><article>: The Article Contents element</h1></header><div class="section-content"><p>The <code><article></code> <a href="../index">HTML</a> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.</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/article.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>A given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <code><article></code> element, possibly with one or more <code><section></code>s within.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#sectioning_content">sectioning content</a>, <a href="../content_categories#palpable_content">palpable content</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. Note that an <code><article></code> element must not be a descendant of an <a href="address"><code><address></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/article_role">article</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role"><code>feed</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role"><code>main</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"><code>region</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Each <code><article></code> should be identified, typically by including a heading (<a href="heading_elements"><code><h1></code> - <code><h6></code></a> element) as a child of the <code><article></code> element.</li> <li>When an <code><article></code> element is nested, the inner element represents an article related to the outer element. For example, the comments of a blog post can be <code><article></code> elements nested in the <code><article></code> representing the blog post.</li> <li>Author information of an <code><article></code> element can be provided through the <a href="address"><code><address></code></a> element, but it doesn't apply to nested <code><article></code> elements.</li> <li>The publication date and time of an <code><article></code> element can be described using the <a href="time#datetime"><code>datetime</code></a> attribute of a <a href="time"><code><time></code></a> element.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vNOmQ8f+S5cgrfrDUuO1OpmTWH1C8HA5WSh/JnlFC4E=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>film_review<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jurassic Park<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>main_review<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Review<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Dinos were great!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>user_reviews<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>User reviews<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>user_review<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Too scary!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Way too scary for me.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Posted on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05-16 19:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 16<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + by Lisa. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>user_review<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Love the dinos!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>I agree, dinos are my favorite.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Posted on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05-17 19:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 17<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + by Tom. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Posted on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05-15 19:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 15<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + by Staff. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="result">Result</h2> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/article/runner.html?id=examples" 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/sections.html#the-article-element">HTML Standard <br><small># the-article-element</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>article</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="nav"><code><nav></code></a>, <a href="section"><code><section></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a> +</li> <li><a href="heading_elements">Using HTML sections and outlines</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/article" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article</a> + </p> +</div> diff --git a/devdocs/html/element%2Faside.html b/devdocs/html/element%2Faside.html new file mode 100644 index 00000000..86b3766a --- /dev/null +++ b/devdocs/html/element%2Faside.html @@ -0,0 +1,85 @@ +<header><h1><aside>: The Aside element</h1></header><div class="section-content"><p>The <code><aside></code> <a href="../index">HTML</a> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.</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/aside.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Do not use the <code><aside></code> element to tag parenthesized text, as this kind of text is considered part of the main flow.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="using_aside">Using <aside></h3> +<div class="section-content"> +<p>This example uses <code><aside></code> to mark up a paragraph in an article. The paragraph is only indirectly related to the main article content:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KbHEtnbf2T50lEVgUliVXQ4c4vqgDccoSNfuXBU5Pcs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The Disney movie <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>The Little Mermaid<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> was first released to + theatres in 1989. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The movie earned $87 million during its initial release.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>More info about the movie…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Using aside sample" id="frame_using_aside" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/aside/runner.html?id=using_aside" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#sectioning_content">sectioning content</a>, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. Note that an <code><aside></code> element must not be a descendant of an <a href="address"><code><address></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role">complementary</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role"><code>feed</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/note_role"><code>note</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"><code>region</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role"><code>search</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/sections.html#the-aside-element">HTML Standard <br><small># the-aside-element</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>aside</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="article"><code><article></code></a>, <a href="section"><code><section></code></a>, <a href="nav"><code><nav></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a>;</li> <li><a href="heading_elements">Using HTML sections and outlines</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role">ARIA: Complementary role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/aside" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside</a> + </p> +</div> diff --git a/devdocs/html/element%2Faudio.html b/devdocs/html/element%2Faudio.html new file mode 100644 index 00000000..d1808376 --- /dev/null +++ b/devdocs/html/element%2Faudio.html @@ -0,0 +1,266 @@ +<header><h1><audio>: The Embed Audio element</h1></header><div class="section-content"><p>The <code><audio></code> <a href="../index">HTML</a> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the <code>src</code> attribute or the <a href="source"><code><source></code></a> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</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/audio.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example shows simple usage of the <code><audio></code> element. In a similar manner to the <a href="img"><code><img></code></a> element, we include a path to the media we want to embed inside the <code>src</code> attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.</p> <p>The content inside the opening and closing <code><audio></audio></code> tags is shown as a fallback in browsers that don't support the element.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autoplay"><a href="#autoplay"><code>autoplay</code></a></dt> <dd> <p>A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a> for additional information about how to properly use autoplay.</p> </div> </dd> <dt id="controls"><a href="#controls"><code>controls</code></a></dt> <dd> <p>If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.</p> </dd> <dt id="controlslist"> +<a href="#controlslist"><code>controlslist</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The <a href="https://wicg.github.io/controls-list/explainer.html" target="_blank"><code>controlslist</code></a> attribute, when specified, helps the browser select what controls to show for the <code>audio</code> element whenever the browser shows its own set of controls (that is, when the <code>controls</code> attribute is specified).</p> <p>The allowed values are <code>nodownload</code>, <code>nofullscreen</code> and <code>noremoteplayback</code>.</p> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates whether to use CORS to fetch the related audio file. <a href="../cors_enabled_image">CORS-enabled resources</a> can be reused in the <a href="canvas"><code><canvas></code></a> element without being <em>tainted</em>. The allowed values are:</p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p>Sends a cross-origin request without a credential. In other words, it sends the <code>Origin:</code> HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the resource will be <em>tainted</em>, and its usage restricted.</p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p>Sends a cross-origin request with a credential. In other words, it sends the <code>Origin:</code> HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the resource will be <em>tainted</em> and its usage restricted.</p> </dd> </dl> <p>When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted use in <a href="canvas"><code><canvas></code></a> elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="../attributes/crossorigin">CORS settings attributes</a> for additional information.</p> </dd> <dt id="disableremoteplayback"> +<a href="#disableremoteplayback"><code>disableremoteplayback</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.). See <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute" target="_blank">this proposed specification</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> In Safari, you can use <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html" target="_blank"><code>x-webkit-airplay="deny"</code></a> as a fallback.</p> </div> </dd> <dt id="loop"><a href="#loop"><code>loop</code></a></dt> <dd> <p>A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.</p> </dd> <dt id="muted"><a href="#muted"><code>muted</code></a></dt> <dd> <p>A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is <code>false</code>.</p> </dd> <dt id="preload"><a href="#preload"><code>preload</code></a></dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:</p> <ul> <li> +<code>none</code>: Indicates that the audio should not be preloaded.</li> <li> +<code>metadata</code>: Indicates that only audio metadata (e.g. length) is fetched.</li> <li> +<code>auto</code>: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.</li> <li> +<em>empty string</em>: A synonym of the <code>auto</code> value.</li> </ul> <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong></p> <ul> <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the audio for playback.</li> <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li> </ul> </div> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the audio to embed. This is subject to <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">HTTP access controls</a>. This is optional; you may instead use the <a href="source"><code><source></code></a> element within the audio block to specify the audio to embed.</p> </dd> </dl> +</div> +<h2 id="events">Events</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="no-markdown"> <thead> <tr> <th scope="col">Event name</th> <th scope="col">Fired when</th> </tr> </thead> <tbody> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event"><code>audioprocess</code></a></td> <td> The input buffer of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode"><code>ScriptProcessorNode</code></a> is ready to be processed. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event"><code>canplay</code></a></td> <td> The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event"><code>canplaythrough</code></a></td> <td> The browser estimates it can play the media up to its end without stopping for content buffering. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event"><code>complete</code></a></td> <td> The rendering of an <a href="https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext"><code>OfflineAudioContext</code></a> is terminated. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event"><code>durationchange</code></a></td> <td>The <code>duration</code> attribute has been updated.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event"><code>emptied</code></a></td> <td> The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load"><code>HTMLMediaElement.load</code></a> method is called to reload it. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event"><code>ended</code></a></td> <td>Playback has stopped because the end of the media was reached.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event"><code>loadeddata</code></a></td> <td>The first frame of the media has finished loading.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event"><code>loadedmetadata</code></a></td> <td>The metadata has been loaded.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event"><code>loadstart</code></a></td> <td>Fired when the browser has started to load the resource.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event"><code>pause</code></a></td> <td>Playback has been paused.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event"><code>play</code></a></td> <td>Playback has begun.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event"><code>playing</code></a></td> <td> Playback is ready to start after having been paused or delayed due to lack of data. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event"><code>ratechange</code></a></td> <td>The playback rate has changed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event"><code>seeked</code></a></td> <td>A <em>seek</em> operation completed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event"><code>seeking</code></a></td> <td>A <em>seek</em> operation began.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event"><code>stalled</code></a></td> <td> The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event"><code>suspend</code></a></td> <td>Media data loading has been suspended.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event"><code>timeupdate</code></a></td> <td> The time indicated by the <code>currentTime</code> attribute has been updated. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event"><code>volumechange</code></a></td> <td>The volume has changed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event"><code>waiting</code></a></td> <td>Playback has stopped because of a temporary lack of data</td> </tr> </tbody> </table></div></figure></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Browsers don't all support the same <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">file types</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs</a>; you can provide multiple sources inside nested <a href="source"><code><source></code></a> elements, and the browser will then use the first one it understands:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0CcgF3IhkgyeJhNAWnl5iF8K48gDwM5JZRmmQqH3pyg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.mp3<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>audio/mpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.ogg<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>audio/ogg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Download <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.mp3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MP3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> or + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OGG<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> audio. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> +</pre> +</div> <p>We offer a substantive and thorough <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">guide to media file types</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs that can be used within them</a>. Also available is <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">a guide to the codecs supported for video</a>.</p> <p>Other usage notes:</p> <ul> <li>If you don't specify the <code>controls</code> attribute, the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> API.</li> <li>To allow precise control over your audio content, <code>HTMLMediaElement</code>s fire many different <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events">events</a>. This also provides a way to monitor the audio's fetching process so you can watch for errors or detect when enough is available to begin to play or manipulate it.</li> <li>You can also use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files.</li> <li> +<code><audio></code> elements can't have subtitles or captions associated with them in the same way that <code><video></code> elements can. See <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio/" target="_blank">WebVTT and Audio</a> by Ian Devlin for some useful information and workarounds.</li> <li>To test the fallback content on browsers that support the element, you can replace <code><audio></code> with a non-existing element like <code><notanaudio></code>.</li> </ul> <p>A good general source of information on using HTML <code><audio></code> is the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> +</div> +<h3 id="styling_with_css">Styling with CSS</h3> +<div class="section-content"> +<p>The <code><audio></code> element has no intrinsic visual output of its own unless the <code>controls</code> attribute is specified, in which case the browser's default controls are shown.</p> <p>The default controls have a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value of <code>inline</code> by default, and it is often a good idea to set the value to <code>block</code> to improve control over positioning and layout, unless you want it to sit within a text block or similar.</p> <p>You can style the default controls with properties that affect the block as a single unit, so for example you can give it a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.</p> <p>To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> API to wire up their functionality.</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques — it is written in the context of <code><video></code>, but much of it is equally applicable to <code><audio></code>.</p> +</div> +<h3 id="detecting_addition_and_removal_of_tracks">Detecting addition and removal of tracks</h3> +<div class="section-content"> +<p>You can detect when tracks are added to and removed from an <code><audio></code> element using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a> events. However, these events aren't sent directly to the <code><audio></code> element itself. Instead, they're sent to the track list object within the <code><audio></code> element's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> that corresponds to the type of track that was added to the element:</p> <dl> <dt id="sect4"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks"><code>HTMLMediaElement.audioTracks</code></a></dt> <dd> <p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a> containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</p> </dd> <dt id="sect5"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks"><code>HTMLMediaElement.videoTracks</code></a></dt> <dd> <p>Add an <code>addtrack</code> listener to this <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a> object to be informed when video tracks are added to the element.</p> </dd> <dt id="sect6"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></dt> <dd> <p>Add an <code>addtrack</code> event listener to this <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> to be notified when new text tracks are added to the element.</p> </dd> </dl> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> Even though it's an <code><audio></code> element, it still has video and text track lists, and can in fact be used to present video, although the user interface implications can be odd.</p> </div> <p>For example, to detect when audio tracks are added to or removed from an <code><audio></code> element, you can use code like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="WWiGUEghTsXZ5HGZpeipRfRlqQb1Vg6xl5KO4RlCap0=" data-language="js"><span class="token keyword">const</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"audio"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +elem<span class="token punctuation">.</span>audioTrackList<span class="token punctuation">.</span><span class="token function-variable function">onaddtrack</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + trackEditor<span class="token punctuation">.</span><span class="token function">addTrack</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>track<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +elem<span class="token punctuation">.</span>audioTrackList<span class="token punctuation">.</span><span class="token function-variable function">onremovetrack</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + trackEditor<span class="token punctuation">.</span><span class="token function">removeTrack</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>track<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> <p>You can also use <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> to listen for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a> events.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_usage">Basic usage</h3> +<div class="section-content"> +<p>The following example shows simple usage of the <code><audio></code> element to play an OGG file. It will autoplay due to the <code>autoplay</code> attribute—if the page has permission to do so—and also includes fallback content.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="J7wAAtooMS4sRzisPIzdU08hJiRPsY7/x2qfTDUp1nk=" data-language="html"><span class="token comment"><!-- Simple audio playback --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>AudioTest.ogg<span class="token punctuation">"</span></span> <span class="token attr-name">autoplay</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>AudioTest.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download OGG audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> +</pre> +</div> <p>For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>.</p> +</div> +<h3 id="audio_element_with_source_element"><audio> element with <source> element</h3> +<div class="section-content"> +<p>This example specifies which audio track to embed using the <code>src</code> attribute on a nested <code><source></code> element rather than directly on the <code><audio></code> element. It is always useful to include the file's MIME type inside the <code>type</code> attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="64ehXs30CHk+gNBjXWiItEOdU+8psnMNVwaqMi0c1uc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.wav<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>audio/wav<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.wav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download WAV audio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="audio_with_multiple_source_elements"><audio> with multiple <source> elements</h3> +<div class="section-content"> +<p>This example includes multiple <code><source></code> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ObJgf9YgTgAfS0z7WJqzaIqVpHQ2SeadTF2BLNuXSX8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.opus<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>audio/ogg; codecs=opus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.ogg<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>audio/ogg; codecs=vorbis<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.mp3<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>audio/mpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a>, allow people who are hearing impaired to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p> <p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p> <p>The <code><audio></code> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a <a href="video"><code><video></code></a> element, which does support WebVTT.</p> <p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.</p> <pre data-language="plain">1 +00:00:00 --> 00:00:45 +[Energetic techno music] + +2 +00:00:46 --> 00:00:51 +Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? + +16 +00:00:52 --> 00:01:02 +[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch? +</pre> <p>Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <code><audio></code> element is not supported:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0CcgF3IhkgyeJhNAWnl5iF8K48gDwM5JZRmmQqH3pyg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>audio</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.mp3<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>audio/mpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.ogg<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>audio/ogg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Download <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.mp3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MP3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> or + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAudio.ogg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>OGG<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> audio. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>audio</span><span class="token punctuation">></span></span> +</pre> +</div> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> <li><a href="https://webaim.org/techniques/captions/" target="_blank">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_%E2%80%94_providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html" target="_blank">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html" target="_blank">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, phrasing content, embedded content. If it has a <a href="audio#controls" aria-current="page"><code>controls</code></a> attribute: interactive content and palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> If the element has a <a href="audio#src" aria-current="page"><code>src</code></a> attribute: zero or more <a href="track"><code><track></code></a> elements followed by transparent content that contains no <a href="audio" aria-current="page"><code><audio></code></a> or <a href="video"><code><video></code></a> media elements.<br>Else: zero or more <a href="source"><code><source></code></a> elements followed by zero or more <a href="track"><code><track></code></a> elements followed by transparent content that contains no <a href="audio" aria-current="page"><code><audio></code></a> or <a href="video"><code><video></code></a> media elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a></td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</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/media.html#the-audio-element">HTML Standard <br><small># the-audio-element</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>audio</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>3.5</summary>For Firefox to play audio, the server must serve the file using the correct MIME type.</details></td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>For Firefox to play audio, the server must serve the file using the correct MIME type.</details></td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autoplay</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>controls</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loop</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>muted</code></th> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>preload</code></th> +<td class="bc-supports-yes"><details><summary>3</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">43.5–4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes"> +<details><summary>15</summary>Defaults to <code>metadata</code> in Opera 51.</details>10.5–15</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes"><details><summary>3</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"> +<details><summary>14</summary>Defaults to <code>metadata</code> in Opera 51.</details>11–14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Defaults to <code>metadata</code> in Samsung Internet 9.0.</details></td> +</tr> +<tr> +<th><code>src</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</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="https://developer.mozilla.org/en-US/docs/Web/Media">Web media technologies</a> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li> </ul> </li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></li> <li><a href="source"><code><source></code></a></li> <li><a href="video"><code><video></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/audio" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio</a> + </p> +</div> diff --git a/devdocs/html/element%2Fb.html b/devdocs/html/element%2Fb.html new file mode 100644 index 00000000..f900c341 --- /dev/null +++ b/devdocs/html/element%2Fb.html @@ -0,0 +1,78 @@ +<header><h1><b>: The Bring Attention To element</h1></header><div class="section-content"><p>The <code><b></code> <a href="../index">HTML</a> element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <code><b></code> for styling text or granting importance. If you wish to create boldface text, you should use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property. If you wish to indicate an element is of special importance, you should use the <a href="strong"><code><strong></code></a> element.</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/b.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Use the <code><b></code> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).</li> <li>Do not confuse the <code><b></code> element with the <a href="strong"><code><strong></code></a>, <a href="em"><code><em></code></a>, or <a href="mark"><code><mark></code></a> elements. The <a href="strong"><code><strong></code></a> element represents text of certain <em>importance</em>, <a href="em"><code><em></code></a> puts some emphasis on the text and the <a href="mark"><code><mark></code></a> element represents text of certain <em>relevance</em>. The <code><b></code> element doesn't convey such special semantic information; use it only when no others fit.</li> <li>Similarly, do not mark titles and headings using the <code><b></code> element. For this purpose, use the <a href="heading_elements">h1</a> to <a href="heading_elements">h6</a> tags. Further, stylesheets can change the default style of these elements, with the result that they are not <em>necessarily</em> displayed in bold.</li> <li>It is a good practice to use the <a href="../global_attributes#class"><code>class</code></a> attribute on the <code><b></code> element in order to convey additional semantic information as needed (for example <code><b class="lead"></code> for the first sentence in a paragraph). This makes it easier to manage multiple use cases of <code><b></code> if your stylistic needs change, without the need to change all of its uses in the HTML.</li> <li>Historically, the <code><b></code> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <code><b></code> element has been changed.</li> <li>If there is no semantic purpose to using the <code><b></code> element, you should use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property with the value <code>"bold"</code> instead in order to make text bold.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yCJGzgyS/vr9uydADE4SK+H5aQvykvC6oY0I4y2uKko=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This article describes several <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</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>keywords<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>text-level<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> elements. It + explains their usage in an <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</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>keywords<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> document. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +Keywords are displayed with the default style of the +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>element, likely in bold.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/b/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-b-element">HTML Standard <br><small># the-b-element</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>b</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</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">4</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>Other elements conveying text-level semantics: <a href="a"><code><a></code></a>, <a href="em"><code><em></code></a>, <a href="strong"><code><strong></code></a>, <a href="small"><code><small></code></a>, <a href="cite"><code><cite></code></a>, <a href="q"><code><q></code></a>, <a href="dfn"><code><dfn></code></a>, <a href="abbr"><code><abbr></code></a>, <a href="time"><code><time></code></a>, <a href="code"><code><code></code></a>, <a href="var"><code><var></code></a>, <a href="samp"><code><samp></code></a>, <a href="kbd"><code><kbd></code></a>, <a href="sub"><code><sub></code></a>, <a href="sup"><code><sup></code></a>, <a href="i"><code><i></code></a>, <a href="mark"><code><mark></code></a>, <a href="ruby"><code><ruby></code></a>, <a href="rp"><code><rp></code></a>, <a href="rt"><code><rt></code></a>, <a href="bdo"><code><bdo></code></a>, <a href="span"><code><span></code></a>, <a href="br"><code><br></code></a>, <a href="wbr"><code><wbr></code></a>.</li> <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags" target="_blank">Using <b> and <i> elements (W3C)</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/b" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbase.html b/devdocs/html/element%2Fbase.html new file mode 100644 index 00000000..dff26f05 --- /dev/null +++ b/devdocs/html/element%2Fbase.html @@ -0,0 +1,117 @@ +<header><h1><base>: The Document Base URL element</h1></header><div class="section-content"> +<p>The <code><base></code> <a href="../index">HTML</a> element specifies the base URL to use for all <em>relative</em> URLs in a document. There can be only one <code><base></code> element in a document.</p> <p>A document's used base URL can be accessed by scripts with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI"><code>Node.baseURI</code></a>. If the document has no <code><base></code> elements, then <code>baseURI</code> defaults to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"><code>location.href</code></a>.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>Metadata content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>There must be no closing tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="head"><code><head></code></a> that doesn't contain another <a href="base" aria-current="page"><code><base></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> If either of the following attributes are specified, this element <strong>must</strong> come before other elements with attribute values of URLs, such as <a href="link"><code><link></code></a>'s <code>href</code> attribute.</p> </div> <dl> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p> The base URL to be used throughout the document for relative URLs. Absolute and relative URLs are allowed. <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs"><code>data:</code></a> and <code>javascript:</code> URLs are not allowed. </p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p>A <strong>keyword</strong> or <strong>author-defined name</strong> of the default <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a> to show the results of navigation from <a href="a"><code><a></code></a>, <a href="area"><code><area></code></a>, or <a href="form"><code><form></code></a> elements without explicit <code>target</code> attributes. The following keywords have special meanings:</p> <ul> <li> +<code>_self</code> (default): Show the result in the current browsing context.</li> <li> +<code>_blank</code>: Show the result in a new, unnamed browsing context.</li> <li> +<code>_parent</code>: Show the result in the parent browsing context of the current one, if the current page is inside a frame. If there is no parent, acts the same as <code>_self</code>.</li> <li> +<code>_top</code>: Show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). If there is no parent, acts the same as <code>_self</code>.</li> </ul> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="multiple_base_elements">Multiple <base> elements</h3> +<div class="section-content"><p>If multiple <code><base></code> elements are used, only the first <code>href</code> and first <code>target</code> are obeyed — all others are ignored.</p></div> +<h3 id="in-page_anchors">In-page anchors</h3> +<div class="section-content"> +<p>Links pointing to a fragment in the document — e.g. <code><a href="#some-id"></code> — are resolved with the <code><base></code>, triggering an HTTP request to the base URL with the fragment attached.</p> <p>For example, given <code><base href="https://example.com/"></code> and this link: <code><a href="#anchor">To anchor</a></code>. The link points to <code>https://example.com/#anchor</code>.</p> +</div> +<h3 id="open_graph">Open Graph</h3> +<div class="section-content"> +<p><a href="https://ogp.me/" target="_blank">Open Graph</a> tags do not acknowledge <code><base></code>, and should always have full absolute URLs. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0iJlOR554RqTmTCNFnWl8zyuzUBLJPI8BW+NuSntxSE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>og:image<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/thumbnail.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="B0MoyV8W9bW4KUhzz0Wuq1E0lI/LfFZ/ZUSqf3CHjZM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.example.com/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>base</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_top<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</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/semantics.html#the-base-element">HTML Standard <br><small># the-base-element</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>base</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"><details><summary>Yes</summary>Before Internet Explorer 7, <code><base></code> can be positioned anywhere in the document and the nearest value of <code><base></code> is used.</details></td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>href</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>target</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/base" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbdi.html b/devdocs/html/element%2Fbdi.html new file mode 100644 index 00000000..f18fe0c5 --- /dev/null +++ b/devdocs/html/element%2Fbdi.html @@ -0,0 +1,113 @@ +<header><h1><bdi>: The Bidirectional Isolate element</h1></header><div class="section-content"><p>The <code><bdi></code> <a href="../index">HTML</a> element tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.</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/bdi.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (LTR) and sequences of characters that are arranged right-to-left (RTL), such as an Arabic quotation embedded in an English string. Browsers implement the <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics" target="_blank">Unicode Bidirectional Algorithm</a> to handle this. In this algorithm, characters are given an implicit directionality: for example, Latin characters are treated as LTR while Arabic characters are treated as RTL. Some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters.</p> <p>Usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. That's where <code><bdi></code> comes in.</p> <p>The <code><bdi></code> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. This works in two ways:</p> <ul> <li>The directionality of text embedded in <code><bdi></code> <em>does not influence</em> the directionality of the surrounding text.</li> <li>The directionality of text embedded in <code><bdi></code> <em>is not influenced by</em> the directionality of the surrounding text.</li> </ul> <p>For example, consider some text like:</p> <pre data-language="plain">EMBEDDED-TEXT - 1st place +</pre> <p>If <code>EMBEDDED-TEXT</code> is LTR, this works fine. But if <code>EMBEDDED-TEXT</code> is RTL, then <code>- 1</code> will be treated as RTL text (because it consists of neutral and weak characters). The result will be garbled:</p> <pre data-language="plain">1 - EMBEDDED-TEXTst place +</pre> <p>If you know the directionality of <code>EMBEDDED-TEXT</code> in advance, you can fix this problem by wrapping <code>EMBEDDED-TEXT</code> in a <a href="span"><code><span></code></a> with the <a href="../global_attributes#dir"><code>dir</code></a> attribute set to the known directionality. But if you don't know the directionality - for example, because <code>EMBEDDED-TEXT</code> is being read from a database or entered by the user - you should use <code><bdi></code> to prevent the directionality of <code>EMBEDDED-TEXT</code> from affecting its surroundings.</p> <p>Though the same visual effect can be achieved using the CSS rule <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a><code>: isolate</code> on a <a href="span"><code><span></code></a> or another text-formatting element, HTML authors should not use this approach because it is not semantic and browsers are allowed to ignore CSS styling.</p> <p>Embedding the characters in <code><span dir="auto"></code> has the same effect as using <code><bdi></code>, but its semantics are less clear.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>, except that the <a href="../global_attributes#dir"><code>dir</code></a> attribute behaves differently than normal: it defaults to <code>auto</code>, meaning its value is never inherited from the parent element. This means that unless you specify a value of either <code>rtl</code> or <code>ltr</code> for <code>dir</code>, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> will determine the correct directionality to use based on the contents of the <code><bdi></code>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="no_bdi_with_only_ltr">No bdi with only LTR</h3> +<div class="section-content"> +<p>This example lists the winners of a competition using <a href="span"><code><span></code></a> elements only. When the names only contain LTR text the results look fine:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="73iNkMK9qFXp3QRjhWvpi4PWkSUN/c2RugYr7PwJyA0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Henrietta Boffin<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - 1st place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jerry Cruncher<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - 2nd place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="bdi-example" title="No bdi with only LTR sample" id="frame_no_bdi_with_only_ltr" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/bdi/runner.html?id=no_bdi_with_only_ltr" loading="lazy"></iframe> +</div> +</div> +<h3 id="no_bdi_with_rtl_text">No bdi with RTL text</h3> +<div class="section-content"> +<p>This example lists the winners of a competition using <a href="span"><code><span></code></a> elements only, and one of the winners has a name consisting of RTL text. In this case the "<code>- 1</code>", which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="tvs5apW5E+dZ2zNiqG18Ie0kgyB71TdJq9HY6i3pBMk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>اَلأَعْشَى<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - 1st place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jerry Cruncher<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - 2nd place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="bdi-example" title="No bdi with RTL text sample" id="frame_no_bdi_with_rtl_text" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/bdi/runner.html?id=no_bdi_with_rtl_text" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_bdi_with_ltr_and_rtl_text">Using bdi with LTR and RTL text</h3> +<div class="section-content"> +<p>This example lists the winners of a competition using <code><bdi></code> elements. These elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="trr15C0NOFwImByQQucSa4FUCesc++rCthXkEKU6rt0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>اَلأَعْشَى<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> - 1st place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jerry Cruncher<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> - 2nd place<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="bdi-example" title="Using bdi with LTR and RTL text sample" id="frame_using_bdi_with_ltr_and_rtl_text" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/bdi/runner.html?id=using_bdi_with_ltr_and_rtl_text" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-bdi-element">HTML Standard <br><small># the-bdi-element</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>bdi</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</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="https://www.w3.org/International/articles/inline-bidi-markup/" target="_blank">Inline markup and bidirectional text in HTML</a></li> <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics" target="_blank">Unicode Bidirectional Algorithm basics</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Localization">Localization</a></li> <li>Related HTML element: <a href="bdo"><code><bdo></code></a> +</li> <li>Related CSS properties: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction"><code>direction</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/bdi" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbdo.html b/devdocs/html/element%2Fbdo.html new file mode 100644 index 00000000..19e79386 --- /dev/null +++ b/devdocs/html/element%2Fbdo.html @@ -0,0 +1,82 @@ +<header><h1><bdo>: The Bidirectional Text Override element</h1></header><div class="section-content"><p>The <code><bdo></code> <a href="../index">HTML</a> element overrides the current directionality of text, so that the text within is rendered in a different direction.</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/bdo.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example).</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="dir"><a href="#dir"><code>dir</code></a></dt> <dd> <p>The direction in which text should be rendered in this element's contents. Possible values are:</p> <ul> <li> +<code>ltr</code>: Indicates that the text should go in a left-to-right direction.</li> <li> +<code>rtl</code>: Indicates that the text should go in a right-to-left direction.</li> </ul> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/xnQBySIM2BD2Bf8PT7qkSAe5IWRqso8mDJ6Hir/kgk=" data-language="html"><span class="token comment"><!-- Switch text direction --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This text will go left to right.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdo</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This text will go right to left.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdo</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/bdo/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="notes">Notes</h2> +<div class="section-content"><p>The HTML 4 specification did not specify events for this element; they were added in XHTML. This is most likely an oversight.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> interface for this element. </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/text-level-semantics.html#the-bdo-element">HTML Standard <br><small># the-bdo-element</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>bdo</code></th> +<td class="bc-supports-yes">≤15</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤15</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">10</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</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>Related HTML element: <a href="bdi"><code><bdi></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/bdo" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbig.html b/devdocs/html/element%2Fbig.html new file mode 100644 index 00000000..180dade9 --- /dev/null +++ b/devdocs/html/element%2Fbig.html @@ -0,0 +1,101 @@ +<header><h1><big>: The Bigger Text element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><big></code> <a href="../index">HTML</a> deprecated element renders the enclosed text at a font size one level larger than the surrounding text (<code>medium</code> becomes <code>large</code>, for example). The size is capped at the browser's maximum permitted font size.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> This element has been removed from the specification and shouldn't be used anymore. Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a> property to adjust the font size.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element has no other attributes than the <a href="../global_attributes">global attributes</a>, common to all elements.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Here we see examples showing the use of <code><big></code> followed by an example showing how to accomplish the same results using modern CSS syntax instead.</p></div> +<h3 id="using_big">Using big</h3> +<div class="section-content"> +<p>This example uses the obsolete <code><big></code> element to increase the size of some text.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8K5imQtM7uDhOWWRqbI0VNNpop1EOtTDE9Au70OI7YY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first sentence. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>big</span><span class="token punctuation">></span></span>This whole sentence is in bigger letters.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>big</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Using big sample" id="frame_using_big" width="640" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/big/runner.html?id=using_big" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_css_font-size">Using CSS <code>font-size</code> +</h3> +<div class="section-content"> +<p>This example uses the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a> property to increase the font size by one level.</p> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="aP+je2ZXlzCNIRp1/+7Ls2cablZZmbM039qNvPWRNsc=" data-language="css"><span class="token selector">.bigger</span> <span class="token punctuation">{</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> larger<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SW6zO1ndls+k3FSEMvy0LoIjA8ZSEnrj2hty2cbi0rQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first sentence. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>bigger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This whole sentence is in bigger letters.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Using CSS font-size sample" id="frame_using_css_font-size" width="640" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/big/runner.html?id=using_css_font-size" loading="lazy"></iframe> +</div> +</div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</p></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/obsolete.html#big">HTML Standard <br><small># big</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>big</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>CSS: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> +</li> <li>HTML: <a href="small"><code><small></code></a>, <a href="font"><code><font></code></a>, <a href="style"><code><style></code></a> +</li> <li>HTML 4.01 Specification: <a href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2" target="_blank">Font Styles</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/big" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big</a> + </p> +</div> diff --git a/devdocs/html/element%2Fblockquote.html b/devdocs/html/element%2Fblockquote.html new file mode 100644 index 00000000..4325d417 --- /dev/null +++ b/devdocs/html/element%2Fblockquote.html @@ -0,0 +1,107 @@ +<header><h1><blockquote>: The Block Quotation element</h1></header><div class="section-content"><p>The <code><blockquote></code> <a href="../index">HTML</a> element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see <a href="#usage_notes">Notes</a> for how to change it). A URL for the source of the quotation may be given using the <code>cite</code> attribute, while a text representation of the source can be given using the <a href="cite"><code><cite></code></a> element.</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/blockquote.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cite"><a href="#cite"><code>cite</code></a></dt> <dd> <p>A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.</p> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>To change the indentation applied to the quoted text, use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> and/or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right"><code>margin-right</code></a> properties, or the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> shorthand property.</p> <p>To include shorter quotes inline rather than in a separate block, use the <a href="q"><code><q></code></a> (Quotation) element.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>This example demonstrates the use of the <code><blockquote></code> element to quote a passage from <a href="https://datatracker.ietf.org/doc/html/rfc1149" target="_blank">RFC 1149</a>, <em>A Standard for the Transmission of IP Datagrams on Avian Carriers</em>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3scoGfNdHTCKFbINp0K+K1Bn0Bybi4uSbcB1pzqmeeA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">cite</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://datatracker.ietf.org/doc/html/rfc1149<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Avian carriers can provide high delay, low throughput, and low altitude + service. The connection topology is limited to a single point-to-point path + for each carrier, used with standard carriers, but many carriers can be used + without significant interference with each other, outside early spring. This + is because of the 3D ether space available to the carriers, in contrast to + the 1D ether used by IEEE802.3. The carriers have an intrinsic collision + avoidance system, which increases availability. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="640" height="180" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/blockquote/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, sectioning root, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">blockquote</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</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/grouping-content.html#the-blockquote-element">HTML Standard <br><small># the-blockquote-element</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>blockquote</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cite</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="q"><code><q></code></a> element for inline quotations.</li> <li>The <a href="cite"><code><cite></code></a> element for source citations.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/blockquote" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbody.html b/devdocs/html/element%2Fbody.html new file mode 100644 index 00000000..6f152e4b --- /dev/null +++ b/devdocs/html/element%2Fbody.html @@ -0,0 +1,255 @@ +<header><h1><body>: The Document Body element</h1></header><div class="section-content"> +<p>The <code><body></code> <a href="../index">HTML</a> element represents the content of an HTML document. There can be only one <code><body></code> element in a document.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag may be omitted if the first thing inside it is not a space character, comment, <a href="script"><code><script></code></a> element or <a href="style"><code><style></code></a> element. The end tag may be omitted if the <code><body></code> element has contents or has a start tag, and is not immediately followed by a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> It must be the second element of an <a href="html"><code><html></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a> <ul> <li> The <code><body></code> element exposes the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a> interface. </li> <li> You can access the <code><body></code> element through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/body"><code>document.body</code></a> property. </li> </ul> </td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="alink"> +<a href="#alink"><code>alink</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> Color of text for hyperlinks when selected. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:active"><code>:active</code></a> pseudo-class instead.</strong> </p> </dd> <dt id="background"> +<a href="#background"><code>background</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> URI of an image to use as a background. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background"><code>background</code></a> property on the element instead.</strong> </p> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> Background color for the document. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property on the element instead.</strong> </p> </dd> <dt id="bottommargin"> +<a href="#bottommargin"><code>bottommargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The margin of the bottom of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a> property on the element instead.</strong> </p> </dd> <dt id="leftmargin"> +<a href="#leftmargin"><code>leftmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The margin of the left of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> property on the element instead.</strong> </p> </dd> <dt id="link"> +<a href="#link"><code>link</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> Color of text for unvisited hypertext links. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link"><code>:link</code></a> pseudo-class instead.</strong> </p> </dd> <dt id="onafterprint"><a href="#onafterprint"><code>onafterprint</code></a></dt> <dd> <p>Function to call after the user has printed the document.</p> </dd> <dt id="onbeforeprint"><a href="#onbeforeprint"><code>onbeforeprint</code></a></dt> <dd> <p>Function to call when the user requests printing of the document.</p> </dd> <dt id="onbeforeunload"><a href="#onbeforeunload"><code>onbeforeunload</code></a></dt> <dd> <p>Function to call when the document is about to be unloaded.</p> </dd> <dt id="onblur"><a href="#onblur"><code>onblur</code></a></dt> <dd> <p>Function to call when the document loses focus.</p> </dd> <dt id="onerror"><a href="#onerror"><code>onerror</code></a></dt> <dd> <p>Function to call when the document fails to load properly.</p> </dd> <dt id="onfocus"><a href="#onfocus"><code>onfocus</code></a></dt> <dd> <p>Function to call when the document receives focus.</p> </dd> <dt id="onhashchange"><a href="#onhashchange"><code>onhashchange</code></a></dt> <dd> <p>Function to call when the fragment identifier part (starting with the hash (<code>'#'</code>) character) of the document's current address has changed.</p> </dd> <dt id="onlanguagechange"><a href="#onlanguagechange"><code>onlanguagechange</code></a></dt> <dd> <p>Function to call when the preferred languages changed.</p> </dd> <dt id="onload"><a href="#onload"><code>onload</code></a></dt> <dd> <p>Function to call when the document has finished loading.</p> </dd> <dt id="onmessage"><a href="#onmessage"><code>onmessage</code></a></dt> <dd> <p>Function to call when the document has received a message.</p> </dd> <dt id="onoffline"><a href="#onoffline"><code>onoffline</code></a></dt> <dd> <p>Function to call when network communication has failed.</p> </dd> <dt id="ononline"><a href="#ononline"><code>ononline</code></a></dt> <dd> <p>Function to call when network communication has been restored.</p> </dd> <dt id="onpopstate"><a href="#onpopstate"><code>onpopstate</code></a></dt> <dd> <p>Function to call when the user has navigated session history.</p> </dd> <dt id="onredo"><a href="#onredo"><code>onredo</code></a></dt> <dd> <p>Function to call when the user has moved forward in undo transaction history.</p> </dd> <dt id="onresize"><a href="#onresize"><code>onresize</code></a></dt> <dd> <p>Function to call when the document has been resized.</p> </dd> <dt id="onstorage"><a href="#onstorage"><code>onstorage</code></a></dt> <dd> <p>Function to call when the storage area has changed.</p> </dd> <dt id="onundo"><a href="#onundo"><code>onundo</code></a></dt> <dd> <p>Function to call when the user has moved backward in undo transaction history.</p> </dd> <dt id="onunload"><a href="#onunload"><code>onunload</code></a></dt> <dd> <p>Function to call when the document is going away.</p> </dd> <dt id="rightmargin"> +<a href="#rightmargin"><code>rightmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The margin of the right of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right"><code>margin-right</code></a> property on the element instead.</strong> </p> </dd> <dt id="text"> +<a href="#text"><code>text</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> Foreground color of text. <strong>Do not use this attribute! Use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property on the element instead.</strong> </p> </dd> <dt id="topmargin"> +<a href="#topmargin"><code>topmargin</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The margin of the top of the body. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top"><code>margin-top</code></a> property on the element instead.</strong> </p> </dd> <dt id="vlink"> +<a href="#vlink"><code>vlink</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> Color of text for visited hypertext links. <strong>Do not use this attribute! Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> property in conjunction with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited"><code>:visited</code></a> pseudo-class instead.</strong> </p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="H10tvIA0tw8h87d9Udg0elNUpZBIwIPLHypfbXy9j1o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>body<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> HTML element represents the content of an + HTML document. There can be only one <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>body<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element in + a document. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/body/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/sections.html#the-body-element">HTML Standard <br><small># the-body-element</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>body</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>alink</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>background</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bottommargin</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>leftmargin</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>link</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rightmargin</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>text</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>topmargin</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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"><details><summary>35</summary>Before Firefox 35, it was supported in Quirks Mode only.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>vlink</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="html"><code><html></code></a></li> <li><a href="head"><code><head></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/body" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbr.html b/devdocs/html/element%2Fbr.html new file mode 100644 index 00000000..c18df512 --- /dev/null +++ b/devdocs/html/element%2Fbr.html @@ -0,0 +1,113 @@ +<header><h1><br>: The Line Break element</h1></header><div class="section-content"><p>The <code><br></code> <a href="../index">HTML</a> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.</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/br.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>As you can see from the above example, a <code><br></code> element is included at each point where we want the text to break. The text after the <code><br></code> begins again at the start of the next line of the text block.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Do not use <code><br></code> to create margins between paragraphs; wrap them in <a href="p"><code><p></code></a> elements and use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property to control their size.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="clear"> +<a href="#clear"><code>clear</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Indicates where to begin the next line after the break.</p> </dd> </dl></div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p>The <code><br></code> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.</p> <p>You can set a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> on <code><br></code> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property that was designed for that purpose.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_br">Simple br</h3> +<div class="section-content"> +<p>In the following example we use <code><br></code> elements to create line breaks between the different lines of a postal address:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1OurpK+QdBD1DLJH1DTGuzsqsxsxAaITfhCr2n3azkA=" data-language="html">Mozilla<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +331 E. Evelyn Avenue<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +Mountain View, CA<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +94041<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +USA<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Simple br sample" id="frame_simple_br" width="640" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/br/runner.html?id=simple_br" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Creating separate paragraphs of text using <code><br></code> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within <code><br></code>s. This can be a confusing and frustrating experience for the person using the screen reader.</p> <p>Use <code><p></code> elements, and use CSS properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> to control their spacing.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> Must have a start tag, and must not have an end tag. In XHTML documents, write this element as <code><br /></code>. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> +</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</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/text-level-semantics.html#the-br-element">HTML Standard <br><small># the-br-element</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>br</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>clear</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="address"><code><address></code></a> element</li> <li> +<a href="p"><code><p></code></a> element</li> <li> +<a href="wbr"><code><wbr></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/br" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br</a> + </p> +</div> diff --git a/devdocs/html/element%2Fbutton.html b/devdocs/html/element%2Fbutton.html new file mode 100644 index 00000000..899e8922 --- /dev/null +++ b/devdocs/html/element%2Fbutton.html @@ -0,0 +1,290 @@ +<header><h1><button>: The Button element</h1></header><div class="section-content"> +<p>The <code><button></code> <a href="../index">HTML</a> element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">form</a> or opening a dialog.</p> <p>By default, HTML buttons are presented in a style resembling the platform the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> runs on, but you can change buttons' appearance with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>.</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/button.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>This Boolean attribute specifies that the button should have input <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">focus</a> when the page loads. <strong>Only one element in a document can have this attribute.</strong></p> </dd> <dt id="autocomplete"> +<a href="#autocomplete"><code>autocomplete</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This attribute on a <a href="button" aria-current="page"><code><button></code></a> is nonstandard and Firefox-specific. Unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">Firefox persists the dynamic disabled state</a> of a <a href="button" aria-current="page"><code><button></code></a> across page loads. Setting <code>autocomplete="off"</code> on the button disables this feature; see <a href="https://bugzil.la/654072" target="_blank">Firefox bug 654072</a>.</p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>This Boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.</p> <p>Firefox, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persists the dynamic disabled state</a> of a <a href="button" aria-current="page"><code><button></code></a> across page loads. To control this feature, use the <a href="#autocomplete"><code>autocomplete</code></a> attribute.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The <a href="form"><code><form></code></a> element to associate the button with (its <em>form owner</em>). The value of this attribute must be the <code>id</code> of a <code><form></code> in the same document. (If this attribute is not set, the <code><button></code> is associated with its ancestor <code><form></code> element, if any.)</p> <p>This attribute lets you associate <code><button></code> elements to <code><form></code>s anywhere in the document, not just inside a <code><form></code>. It can also override an ancestor <code><form></code> element.</p> </dd> <dt id="formaction"><a href="#formaction"><code>formaction</code></a></dt> <dd> <p>The URL that processes the information submitted by the button. Overrides the <a href="form#action"><code>action</code></a> attribute of the button's form owner. Does nothing if there is no form owner.</p> </dd> <dt id="formenctype"><a href="#formenctype"><code>formenctype</code></a></dt> <dd> <p>If the button is a submit button (it's inside/associated with a <code><form></code> and doesn't have <code>type="button"</code>), specifies how to encode the form data that is submitted. Possible values:</p> <ul> <li> +<code>application/x-www-form-urlencoded</code>: The default if the attribute is not used.</li> <li> +<code>multipart/form-data</code>: Used to submit <a href="input"><code><input></code></a> elements with their <a href="input#type"><code>type</code></a> attributes set to <code>file</code>.</li> <li> +<code>text/plain</code>: Specified as a debugging aid; shouldn't be used for real form submission.</li> </ul> <p>If this attribute is specified, it overrides the <a href="form#enctype"><code>enctype</code></a> attribute of the button's form owner.</p> </dd> <dt id="formmethod"><a href="#formmethod"><code>formmethod</code></a></dt> <dd> <p>If the button is a submit button (it's inside/associated with a <code><form></code> and doesn't have <code>type="button"</code>), this attribute specifies the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP method</a> used to submit the form. Possible values:</p> <ul> <li> +<code>post</code>: The data from the form are included in the body of the HTTP request when sent to the server. Use when the form contains information that shouldn't be public, like login credentials.</li> <li> +<code>get</code>: The form data are appended to the form's <code>action</code> URL, with a <code>?</code> as a separator, and the resulting URL is sent to the server. Use this method when the form <a href="https://developer.mozilla.org/en-US/docs/Glossary/Idempotent">has no side effects</a>, like search forms.</li> <li> +<code>dialog</code>: This method is used to indicate that the button closes the <a href="dialog">dialog</a> with which it is associated, and does not transmit the form data at all.</li> </ul> <p>If specified, this attribute overrides the <a href="form#method"><code>method</code></a> attribute of the button's form owner.</p> </dd> <dt id="formnovalidate"><a href="#formnovalidate"><code>formnovalidate</code></a></dt> <dd> <p>If the button is a submit button, this Boolean attribute specifies that the form is not to be <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validated</a> when it is submitted. If this attribute is specified, it overrides the <a href="form#novalidate"><code>novalidate</code></a> attribute of the button's form owner.</p> <p>This attribute is also available on <a href="input/image"><code><input type="image"></code></a> and <a href="input/submit"><code><input type="submit"></code></a> elements.</p> </dd> <dt id="formtarget"><a href="#formtarget"><code>formtarget</code></a></dt> <dd> <p>If the button is a submit button, this attribute is an author-defined name or standardized, underscore-prefixed keyword indicating where to display the response from submitting the form. This is the <code>name</code> of, or keyword for, a <em>browsing context</em> (a tab, window, or <a href="iframe"><code><iframe></code></a>). If this attribute is specified, it overrides the <a href="form#target"><code>target</code></a> attribute of the button's form owner. The following keywords have special meanings:</p> <ul> <li> +<code>_self</code>: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.</li> <li> +<code>_blank</code>: Load the response into a new unnamed browsing context — usually a new tab or window, depending on the user's browser settings.</li> <li> +<code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> <li> +<code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of the button, submitted as a pair with the button's <code>value</code> as part of the form data, when that button is used to submit the form.</p> </dd> <dt id="popovertarget"><a href="#popovertarget"><code>popovertarget</code></a></dt> <dd> <p>Turns a <code><button></code> element into a popover control button; takes the ID of the popover element to control as its value. See the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> landing page for more details.</p> </dd> <dt id="popovertargetaction"><a href="#popovertargetaction"><code>popovertargetaction</code></a></dt> <dd> <p>Specifies the action to be performed on a popover element being controlled by a control <code><button></code>. Possible values are:</p> <dl> <dt id="hide"><a href="#hide"><code>"hide"</code></a></dt> <dd> <p>The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.</p> </dd> <dt id="show"><a href="#show"><code>"show"</code></a></dt> <dd> <p>The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.</p> </dd> <dt id="toggle"><a href="#toggle"><code>"toggle"</code></a></dt> <dd> <p>The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If <code>popovertargetaction</code> is omitted, <code>"toggle"</code> is the default action that will be performed by the control button.</p> </dd> </dl> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The default behavior of the button. Possible values are:</p> <ul> <li> +<code>submit</code>: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a <code><form></code>, or if the attribute is an empty or invalid value.</li> <li> +<code>reset</code>: The button resets all the controls to their initial values, like <a href="input/reset"><input type="reset"></a>. (This behavior tends to annoy users.)</li> <li> +<code>button</code>: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.</li> </ul> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>Defines the value associated with the button's <code>name</code> when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.</p> </dd> </dl> +</div> +<h2 id="notes">Notes</h2> +<div class="section-content"> +<p>A submit button with the attribute <code>formaction</code> set, but without an associated form does nothing. You have to set a form owner, either by wrapping it in a <code><form></code> or set the attribute <code>form</code> to the id of the form.</p> <p><code><button></code> elements are much easier to style than <a href="input"><code><input></code></a> elements. You can add inner HTML content (think <code><i></code>, <code><br></code>, or even <code><img></code>), and use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> pseudo-elements for complex rendering.</p> <p>If your buttons are not for submitting form data to a server, be sure to set their <code>type</code> attribute to <code>button</code>. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.</p> <p>While <code><button type="button"></code> has no default behavior, event handlers can be scripted to trigger behaviors. An activated button can perform programmable actions using <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, such as removing an item from a list.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fxFQJFyFhflmEdSct++i7bs/cbDIRUJu0N2AeDlIUtY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Press me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" width="200" height="64" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/button/runner.html?id=example" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="icon_buttons">Icon buttons</h3> +<div class="section-content"> +<p>Buttons that only show an icon to represent do not have an <em>accessible name</em>. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">an accessibility tree</a>. Assistive technology then uses the accessibility tree to navigate and manipulate page content.</p> <p>To give an icon button an accessible name, put text in the <code><button></code> element that concisely describes the button's functionality.</p> <h4 id="examples_2">Examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zA72NpmjryYAvRYFasQLfMUJz0VwfnORWtrStpYNIJQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favorite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 10 10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span> + Add to favorites +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result">Result</h5> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Icon buttons sample" id="frame_icon_buttons" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/button/runner.html?id=icon_buttons" loading="lazy"></iframe> +</div> <p>If you want to visually hide the button's text, an accessible way to do so is to use <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" target="_blank">a combination of CSS properties</a> to remove it visually from the screen, but keep it parsable by assistive technology.</p> <p>However, it is worth noting that leaving the button text visually apparent can aid people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses.</p> <ul> <li><a href="https://www.tpgi.com/what-is-an-accessible-name/" target="_blank">What is an accessible name? | The Paciello Group</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#guideline_4.1_%E2%80%94_compatible_maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html" target="_blank">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h3 id="size_and_proximity">Size and Proximity</h3> +<div class="section-content"> +<h4 id="size">Size</h4> <p>Interactive elements such as buttons should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" target="_blank">CSS pixels</a> is recommended.</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html" target="_blank">Target Size and 2.5.5 | Adrian Roselli</a></li> <li><a href="https://www.a11yproject.com/posts/large-touch-targets/" target="_blank">Quick test: Large touch targets - The A11Y Project</a></li> </ul> <h4 id="proximity">Proximity</h4> <p>Large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content.</p> <p>Spacing may be created using CSS properties such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> <li><a href="https://axesslab.com/hand-tremors/" target="_blank">Hand tremors and the giant-button-problem - Axess Lab</a></li> </ul> +</div> +<h3 id="aria_state_information">ARIA state information</h3> +<div class="section-content"><p>To describe the state of a button the correct ARIA attribute to use is <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed"><code>aria-pressed</code></a> and not <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked"><code>aria-checked</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected"><code>aria-selected</code></a>. To find out more read the information about the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">ARIA button role</a>.</p></div> +<h3 id="firefox">Firefox</h3> +<div class="section-content"> +<p>Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner"><code>button::-moz-focus-inner { }</code></a>.</p> <p>If overridden, it is important to <strong>ensure that the state change when focus is moved to the button is high enough</strong> that people experiencing low vision conditions will be able to perceive it.</p> <p>Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>bold</code></a> or larger, or 24px or larger.)</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAIM: Color Contrast Checker</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h3 id="clicking_and_focus">Clicking and focus</h3> +<div class="section-content"><p>Whether clicking on a <a href="button" aria-current="page"><code><button></code></a> or <a href="input"><code><input></code></a> button types causes it to (by default) become focused varies by browser and OS. Most browsers do give focus to a button being clicked, but <a href="https://webkit.org/b/22261" target="_blank">Safari does not, by design</a>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">Interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_content">form-associated</a> element, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a> but there must be no <a href="../content_categories#interactive_content">Interactive content</a> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</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/form-elements.html#the-button-element">HTML Standard <br><small># the-button-element</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>button</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">Yes</td> +<td class="bc-supports-yes">≤15</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">≤14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>disabled</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formaction</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formenctype</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">10.6</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formmethod</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formnovalidate</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formtarget</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>value</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/button" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcanvas.html b/devdocs/html/element%2Fcanvas.html new file mode 100644 index 00000000..57d06799 --- /dev/null +++ b/devdocs/html/element%2Fcanvas.html @@ -0,0 +1,163 @@ +<header><h1><canvas>: The Graphics Canvas element</h1></header><div class="section-content"> +<p>Use the <code><canvas></code> with either the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas scripting API</a> or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL API</a> to draw graphics and animations.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#embedded_content">embedded content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Transparent but with no <a href="../content_categories#interactive_content">interactive content</a> descendants except for <a href="a"><code><a></code></a> elements, <a href="button"><code><button></code></a> elements, <a href="input"><code><input></code></a> elements whose <a href="input#type"><code>type</code></a> attribute is <code>checkbox</code>, <code>radio</code>, or <code>button</code>. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The height of the coordinate space in CSS pixels. Defaults to 150.</p> </dd> <dt id="moz-opaque"> +<a href="#moz-opaque"><code>moz-opaque</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Lets the canvas know whether translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported by Mozilla-based browsers; use the standardized <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext"><code>canvas.getContext('2d', { alpha: false })</code></a> instead.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The width of the coordinate space in CSS pixels. Defaults to 300.</p> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="alternative_content">Alternative content</h3> +<div class="section-content"><p>You should provide alternate content inside the <code><canvas></code> block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.</p></div> +<h3 id="closing_canvas_tag">Closing <code></canvas></code> tag</h3> +<div class="section-content"><p>Unlike the <a href="img"><code><img></code></a> element, the <a href="canvas" aria-current="page"><code><canvas></code></a> element <strong>requires</strong> the closing tag (<code></canvas></code>).</p></div> +<h3 id="sizing_the_canvas_using_css_versus_html">Sizing the canvas using CSS versus HTML</h3> +<div class="section-content"> +<p>The displayed size of the canvas can be changed using CSS, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.</p> <p>It is better to specify your canvas dimensions by setting the <code>width</code> and <code>height</code> attributes directly on the <code><canvas></code> elements, either directly in the HTML or by using JavaScript.</p> +</div> +<h3 id="maximum_canvas_size">Maximum canvas size</h3> +<div class="section-content"> +<p>The maximum size of a <code><canvas></code> element is very large, but the exact size depends on the browser. The following is some data we've collected from various tests and other sources (e.g. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element" target="_blank">Stack Overflow</a>):</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Browser</th> <th>Maximum height</th> <th>Maximum width</th> <th>Maximum area</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>32,767 pixels</td> <td>32,767 pixels</td> <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td> </tr> <tr> <td>Firefox</td> <td>32,767 pixels</td> <td>32,767 pixels</td> <td>472,907,776 pixels (i.e., 22,528 x 20,992)</td> </tr> <tr> <td>Safari</td> <td>32,767 pixels</td> <td>32,767 pixels</td> <td>268,435,456 pixels (i.e., 16,384 x 16,384)</td> </tr> <tr> <td>IE</td> <td>8,192 pixels</td> <td>8,192 pixels</td> <td>?</td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.</p> </div> +</div> +<h3 id="using_an_offscreen_canvas">Using an offscreen canvas</h3> +<div class="section-content"><p> A canvas can be rendered using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a> API where the document and canvas are decoupled. The benefit is that a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">worker thread</a> can handle canvas rendering and the main thread of your web application is not blocked by canvas operations. By parallelizing work, other UI elements of your web application will remain responsive even if you are running complex graphics on an offscreen canvas. For more information, see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a> API documentation. </p></div> +<h2 id="examples">Examples</h2> + +<h3 id="html">HTML</h3> +<div class="section-content"> +<p>This code snippet adds a canvas element to your HTML document. A fallback text is provided if a browser is unable to read or render the canvas.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="hfa+vk8wuoyLX4dWeRBAp5cp86fF68Zrkrowp14bfkQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>120<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + An alternative text describing what your canvas displays. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>Then in the JavaScript code, call <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> to get a drawing context and start drawing onto the canvas:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="xE4OlKEN2zzp00MGD/z59mQBMoPMoR02uz/fKLi67as=" data-language="js"><span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"canvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"green"</span><span class="token punctuation">;</span> +<span class="token comment">// Add a rectangle at (10, 10) with size 100x100 pixels</span> +ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/canvas/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="alternative_content_2">Alternative content</h3> +<div class="section-content"> +<p>The <code><canvas></code> element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.</p> <ul> <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases" target="_blank">Canvas accessibility use cases</a></li> <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas" target="_blank">Canvas element accessibility issues</a></li> <li><a href="https://www.tpgi.com/html5-canvas-accessibility-in-firefox-13/" target="_blank">HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices" target="_blank">Best practices for interactive canvas elements</a></li> </ul> +</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/canvas.html#the-canvas-element">HTML Standard <br><small># the-canvas-element</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>canvas</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes"><details><summary>2</summary>Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.</details></td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes"><details><summary>2</summary>Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.</details></td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>moz-opaque</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes"><details><summary>2</summary>Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Before version 2, Safari will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.</details></td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>["Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.", "Before Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.", "Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead."]</details></td> +<td class="bc-supports-yes">10.1</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="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas API</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Demos#canvas">Canvas-related demos</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas">OffscreenCanvas</a></li> <li> +<a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html" target="_blank">Canvas cheat sheet</a> (2009)</li> <li> +<a href="https://websitesetup.org/wp-content/uploads/2015/11/Infopgraphic-CanvasCheatSheet-Final2.pdf" target="_blank">Canvas cheat sheet</a> (pdf) (2015)</li> <li> +<a href="https://www.coding-dude.com/wp/wp-content/uploads/2020/09/HTML5-canvas-cheat-sheet.pdf" target="_blank">Canvas cheat sheet</a> (pdf) (2020)</li> <li> +<a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html" target="_blank">Canvas introduction by Apple</a> (2013)</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/canvas" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcaption.html b/devdocs/html/element%2Fcaption.html new file mode 100644 index 00000000..793768c2 --- /dev/null +++ b/devdocs/html/element%2Fcaption.html @@ -0,0 +1,116 @@ +<header><h1><caption>: The Table Caption element</h1></header><div class="section-content"><p>The <code><caption></code> <a href="../index">HTML</a> element specifies the caption (or title) of a table.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/caption.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:</p> <dl> <dt id="left"><a href="#left"><code>left</code></a></dt> <dd> <p>The caption is displayed to the left of the table.</p> </dd> <dt id="top"><a href="#top"><code>top</code></a></dt> <dd> <p>The caption is displayed above the table.</p> </dd> <dt id="right"><a href="#right"><code>right</code></a></dt> <dd> <p>The caption is displayed to the right of the table.</p> </dd> <dt id="bottom"><a href="#bottom"><code>bottom</code></a></dt> <dd> <p>The caption is displayed below the table.</p> </dd> </dl> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Do not use this attribute, as it has been deprecated. The <a href="caption" aria-current="page"><code><caption></code></a> element should be styled using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> properties <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side"><code>caption-side</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a>.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>If used, the <code><caption></code> element must be the first child of its parent <a href="table"><code><table></code></a> element.</p> <p>When the <code><table></code> element that contains the <code><caption></code> is the only descendant of a <a href="figure"><code><figure></code></a> element, you should use the <a href="figcaption"><code><figcaption></code></a> element instead of <code><caption></code>.</p> <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> on the table will not include the caption. Add a <code>background-color</code> to the <code><caption></code> element as well if you want the same color to be behind both.</p> +</div> +<h2 id="example">Example</h2> +<div class="section-content"> +<p>This simple example presents a table that includes a caption.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Qj/fk8WT+LS0IFQz7N0dFGfEQTpB9teHn1jyllNTA0c=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span> + Example Caption + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Login<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>user1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>user1@sample.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>user2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>user2@sample.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/caption/runner.html?id=example" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag can be omitted if the element is not immediately followed by ASCII whitespace or a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="table"><code><table></code></a> element, as its first descendant.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">caption</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</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/tables.html#the-caption-element">HTML Standard <br><small># the-caption-element</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>caption</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>CSS properties that may be specially useful to style the <a href="caption" aria-current="page"><code><caption></code></a> element: <ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side"><code>caption-side</code></a>.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/caption" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcenter.html b/devdocs/html/element%2Fcenter.html new file mode 100644 index 00000000..e308f3b3 --- /dev/null +++ b/devdocs/html/element%2Fcenter.html @@ -0,0 +1,86 @@ +<header><h1><center>: The Centered Text element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><center></code> <a href="../index">HTML</a> element is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level element</a> that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn't required to be, <a href="body"><code><body></code></a>.</p> <p>This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property, which can be applied to the <a href="div"><code><div></code></a> element or to an individual <a href="p"><code><p></code></a>. For centering blocks, use other CSS properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right"><code>margin-right</code></a> and set them to <code>auto</code> (or set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> to <code>0 auto</code>).</p> +</div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</p></div> +<h2 id="example_1">Example 1</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QAG/nhz6mxlS1q3vUQ32llBMluqIZzN5U7gV2Rrv84Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>center</span><span class="token punctuation">></span></span> + This text will be centered. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>So will this paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>center</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="example_2_css_alternative">Example 2 (CSS alternative)</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WHeCT8qPcYLDMCTLEy0OCLfDbANlWHiT+nCTYZN/T90=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span>center</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + This text will be centered. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>So will this paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="example_3_css_alternative">Example 3 (CSS alternative)</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eVp61MLwR9WBeo9MPkSeLKyLE/DTSamLHKv1cgh8dLY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span>center</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + This line will be centered.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + And so will this line. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="note">Note</h2> +<div class="section-content"><p>Applying <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a><code>:center</code> to a <a href="div"><code><div></code></a> or <a href="p"><code><p></code></a> element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p></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/obsolete.html#center">HTML Standard <br><small># center</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>center</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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"><details><summary>4</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</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="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/center" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcite.html b/devdocs/html/element%2Fcite.html new file mode 100644 index 00000000..040adf98 --- /dev/null +++ b/devdocs/html/element%2Fcite.html @@ -0,0 +1,75 @@ +<header><h1><cite>: The Citation element</h1></header><div class="section-content"><p>The <code><cite></code> <a href="../index">HTML</a> element is used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.</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/cite.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>In the context of the <code><cite></code> element, a creative work that might be cited could be, for example, one of the following:</p> <ul> <li>A book</li> <li>A research paper</li> <li>An essay</li> <li>A poem</li> <li>A musical score</li> <li>A song</li> <li>A play or film script</li> <li>A film</li> <li>A television show</li> <li>A game</li> <li>A sculpture</li> <li>A painting</li> <li>A theatrical production</li> <li>A play</li> <li>An opera</li> <li>A musical</li> <li>An exhibition</li> <li>A legal case report</li> <li>A computer program</li> <li>A website</li> <li>A web page</li> <li>A blog post or comment</li> <li>A forum post or comment</li> <li>A tweet</li> <li>A Facebook post</li> <li>A written or oral statement</li> <li>And so forth.</li> </ul> <p>To include a reference to the source of quoted material which is contained within a <a href="blockquote"><code><blockquote></code></a> or <a href="q"><code><q></code></a> element, use the <a href="blockquote#cite"><code>cite</code></a> attribute on the element.</p> <p>Typically, browsers style the contents of a <code><cite></code> element in italics by default. To avoid this, apply the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style"><code>font-style</code></a> property to the <code><cite></code> element.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sVzvdVHFMhCLClfm9x+0sMmNKhAojkzC1IELrdzleHk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>More information can be found in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>[ISO-0000]<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" width="640" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/cite/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> interface for this element. </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/text-level-semantics.html#the-cite-element">HTML Standard <br><small># the-cite-element</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>cite</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The element <a href="blockquote"><code><blockquote></code></a> for long quotations.</li> <li>The element <a href="q"><code><q></code></a> for inline quotations and the <a href="q#cite"><code>cite</code></a> attribute.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/cite" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcode.html b/devdocs/html/element%2Fcode.html new file mode 100644 index 00000000..aa9e7192 --- /dev/null +++ b/devdocs/html/element%2Fcode.html @@ -0,0 +1,80 @@ +<header><h1><code>: The Inline Code element</h1></header><div class="section-content"><p>The <code><code></code> <a href="../index">HTML</a> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> default monospace font.</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/code.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>A paragraph of text that includes <code><code></code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t8JtxQnLEAQs0/oTEijEEbFpEF1+TNBRBKUE32DIOQw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The function <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>selectAll()<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> highlights all the text in the input + field so the user can, for example, copy or delete the text. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" width="640" height="70" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/code/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="notes">Notes</h2> +<div class="section-content"> +<p>To represent multiple lines of code, wrap the <code><code></code> element within a <a href="pre"><code><pre></code></a> element. The <code><code></code> element by itself only represents a single phrase of code or line of code.</p> <p>A CSS rule can be defined for the <code>code</code> selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">code</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> interface for this element. </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/text-level-semantics.html#the-code-element">HTML Standard <br><small># the-code-element</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>code</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="samp"><code><samp></code></a></li> <li><a href="kbd"><code><kbd></code></a></li> <li><a href="var"><code><var></code></a></li> <li><a href="pre"><code><pre></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/code" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcol.html b/devdocs/html/element%2Fcol.html new file mode 100644 index 00000000..a5e93c76 --- /dev/null +++ b/devdocs/html/element%2Fcol.html @@ -0,0 +1,195 @@ +<header><h1><col>: The Table Column element</h1></header><div class="section-content"><p>The <code><col></code> <a href="../index">HTML</a> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <a href="colgroup"><code><colgroup></code></a> element.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/col.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p><code><col></code> allows styling columns using CSS, but only a few properties will have an effect on the column (<a href="https://www.w3.org/TR/CSS21/tables.html#columns" target="_blank">see the CSS 2.1 specification</a> for a list).</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="span"><a href="#span"><code>span</code></a></dt> <dd> <p>This attribute contains a positive integer indicating the number of consecutive columns the <code><col></code> element spans. If not present, its default value is <code>1</code>.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:</p> <ul> <li> +<code>left</code>, aligning the content to the left of the cell</li> <li> +<code>center</code>, centering the content in the cell</li> <li> +<code>right</code>, aligning the content to the right of the cell</li> <li> +<code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> </ul> <p>If this attribute is not set, its value is inherited from the <a href="colgroup#align"><code>align</code></a> of the <a href="colgroup"><code><colgroup></code></a> element this <code><col></code> element belongs too. If there are none, the <code>left</code> value is assumed.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, do not try to set the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property on a selector giving a <code><col></code> element. Because <a href="td"><code><td></code></a> elements are not descendant of the <code><col></code> element, they won't inherit it.</p> <p>If the table doesn't use a <a href="td#colspan"><code>colspan</code></a> attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b</code> to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</p> <p>If the table does use a <a href="td#colspan"><code>colspan</code></a> attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The background color of the table. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#named_colors">color keywords</a> can also be used.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute sets the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</p> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li> +<code>middle</code>, which will center the text in the cell;</li> <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not try to set the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property on a selector giving a <code><col></code> element. Because <a href="td"><code><td></code></a> elements are not descendant of the <code><col></code> element, they won't inherit it.</p> <p>If the table doesn't use a <a href="td#colspan"><code>colspan</code></a> attribute, use the <code>td:nth-child(an+b)</code> CSS selector where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</p> <p>If the table does use a <a href="td#colspan"><code>colspan</code></a> attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p> </div> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>5*</code> also can be used.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Please see the <a href="table"><code><table></code></a> page for examples on <code><col></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>It must have start tag, but must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> <a href="colgroup"><code><colgroup></code></a> only, though it can be implicitly defined as its start tag is not mandatory. The <a href="colgroup"><code><colgroup></code></a> must not have a <a href="colgroup#span"><code>span</code></a> attribute. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</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/tables.html#the-col-element">HTML Standard <br><small># the-col-element</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>col</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>span</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>CSS properties and pseudo-classes that may be specially useful to style the <code><col></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property to control the width of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pseudo-class to set the alignment on the cells of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to align all cells content on the same character, like '.'.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/col" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col</a> + </p> +</div> diff --git a/devdocs/html/element%2Fcolgroup.html b/devdocs/html/element%2Fcolgroup.html new file mode 100644 index 00000000..59269436 --- /dev/null +++ b/devdocs/html/element%2Fcolgroup.html @@ -0,0 +1,192 @@ +<header><h1><colgroup>: The Table Column Group element</h1></header><div class="section-content"><p>The <code><colgroup></code> <a href="../index">HTML</a> element defines a group of columns within a table.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/colgroup.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="span"><a href="#span"><code>span</code></a></dt> <dd> <p>This attribute contains a positive integer indicating the number of consecutive columns the <code><colgroup></code> element spans. If not present, its default value is <code>1</code>.</p> <p>The <code>span</code> attribute is not permitted if there are one or more <a href="col"><code><col></code></a> elements within the <code><colgroup></code>.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:</p> <ul> <li> +<code>left</code>, aligning the content to the left of the cell</li> <li> +<code>center</code>, centering the content in the cell</li> <li> +<code>right</code>, aligning the content to the right of the cell</li> <li> +<code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> <li> +<code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the <a href="col#char"><code>char</code></a> and <a href="col#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>If this attribute is not set, the <code>left</code> value is assumed. The descendant <a href="col"><code><col></code></a> elements may override this value using their own <a href="col#align"><code>align</code></a> attribute.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Do not try to set the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property on a selector giving a <a href="colgroup" aria-current="page"><code><colgroup></code></a> element. Because <a href="td"><code><td></code></a> elements are not descendant of the <a href="colgroup" aria-current="page"><code><colgroup></code></a> element, they won't inherit it.</p> <p>If the table doesn't use a <a href="td#colspan"><code>colspan</code></a> attribute, use one <code>td:nth-child(an+b)</code> CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of this column in the table. Only after this selector the <code>text-align</code> property can be used.</p> <p>If the table does use a <a href="td#colspan"><code>colspan</code></a> attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The background color of the table. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keywords</a> can also be used.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the <a href="col#align"><code>align</code></a> of the <a href="col"><code><col></code></a> which are members of this column group.</p> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <code>char</code> attribute.</p> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li> +<code>middle</code>, which will center the text in the cell;</li> <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not try to set the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property on a selector giving a <code><colgroup></code> element. Because <a href="td"><code><td></code></a> elements are not descendant of the <code><colgroup></code> element, they won't inherit it.</p> <p>If the table doesn't use a <a href="td#colspan"><code>colspan</code></a> attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where 'a' is the total number of the columns in the table and 'b' is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</p> <p>If the table does use a <a href="td#colspan"><code>colspan</code></a> attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Please see the <a href="table"><code><table></code></a> page for examples on <code><colgroup></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> If the <a href="colgroup#span" aria-current="page"><code>span</code></a> attribute is present: none.<br>If the attribute is not present: zero or more <a href="col"><code><col></code></a> element </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag may be omitted, if it has a <a href="col"><code><col></code></a> element as its first child and if it is not preceded by a <a href="colgroup" aria-current="page"><code><colgroup></code></a> whose end tag has been omitted.<br>The end tag may be omitted, if it is not followed by a space or a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="table"><code><table></code></a> element. The <a href="colgroup" aria-current="page"><code><colgroup></code></a> must appear after any optional <a href="caption"><code><caption></code></a> element but before any <a href="thead"><code><thead></code></a>, <a href="th"><code><th></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a> and <a href="tr"><code><tr></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</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/tables.html#the-colgroup-element">HTML Standard <br><small># the-colgroup-element</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>colgroup</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>span</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>CSS properties and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code><col></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property to control the width of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pseudo-class to set the alignment on the cells of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to align all cells content on the same character, like '.'.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/colgroup" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdata.html b/devdocs/html/element%2Fdata.html new file mode 100644 index 00000000..c3adf645 --- /dev/null +++ b/devdocs/html/element%2Fdata.html @@ -0,0 +1,80 @@ +<header><h1><data>: The Data element</h1></header><div class="section-content"><p>The <code><data></code> <a href="../index">HTML</a> element links a given piece of content with a machine-readable translation. If the content is time- or date-related, the <a href="time"><code><time></code></a> element must be used.</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/data.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>This attribute specifies the machine-readable translation of the content of the element.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>The following example displays product names but also associates each name with a product number.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="tqOBrvwvMh5EeXhUN/VO38T+nGMGmUk76rDEC4U/r7A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>New Products<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>data</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>398<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mini Ketchup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>data</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>data</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>399<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jumbo Ketchup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>data</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>data</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>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mega Jumbo Ketchup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>data</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/data/runner.html?id=examples" 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/text-level-semantics.html#the-data-element">HTML Standard <br><small># the-data-element</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>data</code></th> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-yes">46</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">8.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The HTML <a href="time"><code><time></code></a> element.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/data" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdatalist.html b/devdocs/html/element%2Fdatalist.html new file mode 100644 index 00000000..fd4fe195 --- /dev/null +++ b/devdocs/html/element%2Fdatalist.html @@ -0,0 +1,159 @@ +<header><h1><datalist>: The HTML Data List element</h1></header><div class="section-content"><p>The <code><datalist></code> <a href="../index">HTML</a> element contains a set of <a href="option"><code><option></code></a> elements that represent the permissible or recommended options available to choose from within other controls.</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/datalist.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p> To bind the <code><datalist></code> element to the control, we give it a unique identifier in the <a href="../global_attributes/id"><code>id</code></a> attribute, and then add the <a href="input#list"><code>list</code></a> attribute to the <a href="input"><code><input></code></a> element with the same identifier as value. Only certain types of <a href="input"><code><input></code></a> support this behavior, and it can also vary from browser to browser. </p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code><option></code> element can store a value as internal content and in the <code>value</code> and <code>label</code> attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the <code>value</code> attribute.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element has no other attributes than the <a href="../global_attributes">global attributes</a>, common to all elements.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="textual_types">Textual types</h3> +<div class="section-content"> +<p> Recommended values in types <a href="input/text">text</a>, <a href="input/search">search</a>, <a href="input/url">url</a>, <a href="input/tel">tel</a>, <a href="input/email">email</a> and <a href="input/number">number</a>, are displayed in a drop-down menu when user clicks or double-clicks on the control. Typically the right side of a control will also have an arrow pointing to the presence of predefined values. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Um7cQkHew3nfb4QcMVeNTewQjzzAl7/c2ZVqRKzCsQU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myBrowser<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a browser from this list:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browsers<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>myBrowser<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myBrowser<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>browsers<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Chrome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Firefox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Safari<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Microsoft Edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Textual types sample" id="frame_textual_types" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/datalist/runner.html?id=textual_types" loading="lazy"></iframe> +</div> +</div> +<h3 id="date_and_time_types">Date and Time types</h3> +<div class="section-content"> +<p> The types <a href="input/month">month</a>, <a href="input/week">week</a>, <a href="input/date">date</a>, <a href="input/time">time</a> and <a href="input/datetime-local">datetime-local</a> can show an interface that allows a convenient selection of a date and time. Predefined values can be shown there, allowing the user to quickly fill the control value. </p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> When type is not supported, <code>text</code> type creating simple text field will be used instead. That field will correctly recognize recommended values and display them to the user in a drop-down menu.</p> </div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Knuamdj8Bh+rScCHR5E47vauZEzYq+EDwdf+jmpNgHI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>time<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popularHours<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>popularHours<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>12:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>13:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>14:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Date and Time types sample" id="frame_date_and_time_types" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/datalist/runner.html?id=date_and_time_types" loading="lazy"></iframe> +</div> +</div> +<h3 id="range_type">Range type</h3> +<div class="section-content"> +<p>The recommended values in the <a href="input/range">range</a> type will be shown as series of hash marks that the user can easily select.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gjtgUcd4bhIjFbgTSgx6WBLsluwSy9aeP2u3LCmzCf8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tip amount:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tickmarks<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<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>tick<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tick<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>tickmarks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Range type sample" id="frame_range_type" width="600" height="70" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/datalist/runner.html?id=range_type" loading="lazy"></iframe> +</div> +</div> +<h3 id="color_type">Color type</h3> +<div class="section-content"> +<p>The <a href="input/color">color</a> type can show predefined colors in a browser-provided interface.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zdB26FW60YEWknF+uFTufMIXImuYL/NmBGuDTDxOEQs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>colors<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pick a color (preferably a red tone):<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>color<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>redColors<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>colors<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>redColors<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>#800000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>#8B0000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>#A52A2A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>#DC143C<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Color type sample" id="frame_color_type" width="600" height="70" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/datalist/runner.html?id=color_type" loading="lazy"></iframe> +</div> +</div> +<h3 id="password_type">Password type</h3> +<div class="section-content"> +<p>The specification allows linking <code><datalist></code> with a <a href="input/password">password</a> type, but no browser supports it for security reasons.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eQQp3Lhw8pewE48TwwaY7cb3MGh5P/co24rJxtlvnPo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Enter a password:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>randomPassword<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">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>randomPassword<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>5Mg[_3DnkgSu@!q#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Password type sample" id="frame_password_type" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/datalist/runner.html?id=password_type" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Either <a href="../content_categories#phrasing_content">phrasing content</a> or zero or more <a href="option"><code><option></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>When deciding to use the <code><datalist></code> element, here are some accessibility issues to be mindful of:</p> <ul> <li>The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.</li> <li>As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.</li> <li>Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.</li> </ul> +</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/form-elements.html#the-datalist-element">HTML Standard <br><small># the-datalist-element</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>datalist</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>4</summary>The <code><datalist></code> element will only create a dropdown for textual types, such as <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code> and <code>number</code>. The <code>date</code>, <code>time</code>, <code>range</code> and <code>color</code> types are not supported.</details></td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">9.5</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">4.4.3</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes"> +<details><summary>79</summary>The dropdown menu containing available options does not appear. See <a href="https://bugzil.la/1535985">bug 1535985</a>.</details>4–79</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">2.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The <a href="input"><code><input></code></a> element, and more specifically its <a href="input#list"><code>list</code></a> attribute;</li> <li>The <a href="option"><code><option></code></a> element.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/datalist" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdd.html b/devdocs/html/element%2Fdd.html new file mode 100644 index 00000000..b17e672f --- /dev/null +++ b/devdocs/html/element%2Fdd.html @@ -0,0 +1,83 @@ +<header><h1><dd>: The Description Details element</h1></header><div class="section-content"><p>The <code><dd></code> <a href="../index">HTML</a> element provides the description, definition, or value for the preceding term (<a href="dt"><code><dt></code></a>) in a description list (<a href="dl"><code><dl></code></a>).</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/dd.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="nowrap"> +<a href="#nowrap"><code>nowrap</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>If the value of this attribute is set to <code>yes</code>, the definition text will not wrap. The default value is <code>no</code>.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>For examples, see the <a href="dl#examples">examples provided for the <code><dl></code> element</a>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is required. The end tag may be omitted if this element is immediately followed by another <code><dd></code> element or a <a href="dt"><code><dt></code></a> element, or if there is no more content in the parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="dl"><code><dl></code></a> or a <a href="div"><code><div></code></a> that is a child of a <a href="dl"><code><dl></code></a>.<br>This element can be used after a <a href="dt"><code><dt></code></a> or another <a href="dd" aria-current="page"><code><dd></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/grouping-content.html#the-dd-element">HTML Standard <br><small># the-dd-element</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>dd</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>Before Firefox 4, this element was implemented using the <code>HTMLSpanElement</code> interface instead of <code>HTMLElement</code>.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>nowrap</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="dl"><code><dl></code></a></li> <li><a href="dt"><code><dt></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dd" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdel.html b/devdocs/html/element%2Fdel.html new file mode 100644 index 00000000..e1fdea35 --- /dev/null +++ b/devdocs/html/element%2Fdel.html @@ -0,0 +1,133 @@ +<header><h1><del>: The Deleted Text element</h1></header><div class="section-content"><p>The <code><del></code> <a href="../index">HTML</a> element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The <a href="ins"><code><ins></code></a> element can be used for the opposite purpose: to indicate text that has been added to the document.</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/del.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>This element is often (but need not be) rendered by applying a strike-through style to the text.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#transparent_content_model">Transparent</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">deletion</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cite"><a href="#cite"><code>cite</code></a></dt> <dd> <p>A URI for a resource that explains the change (for example, meeting minutes).</p> </dd> <dt id="datetime"><a href="#datetime"><code>datetime</code></a></dt> <dd> <p>This attribute indicates the time and date of the change and must be a valid date string with an optional time. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see <a href="../date_and_time_formats#date_strings">Date strings</a>. The format of the string if it includes both date and time is covered in <a href="../date_and_time_formats#local_date_and_time_strings">Local date and time strings</a>.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="G+TZR/OseBOkRke571VojlCMv8p/HEew4Ys3FSjtefo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span>This text has been deleted<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span>, here is the rest of the paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>del</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This paragraph has been deleted.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>del</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/del/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>The presence of the <code>del</code> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a> property, along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> pseudo-elements.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="qGtNqDqqtt1MbQ78KWeowI5a0UodXoXozcv3uLVZfnM=" data-language="css"><span class="token selector">del::before, +del::after</span> <span class="token punctuation">{</span> + <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">del::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [deletion start] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">del::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [deletion end] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding.</p> <ul> <li><a href="https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/" target="_blank">Short note on making your mark (more accessible) | The Paciello Group</a></li> <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html" target="_blank">Tweaking Text Level Styles | Adrian Roselli</a></li> </ul> +</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/edits.html#the-del-element">HTML Standard <br><small># the-del-element</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>del</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cite</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>datetime</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="ins"><code><ins></code></a> element for insertions into a text</li> <li> +<a href="s"><code><s></code></a> element for strikethrough separate from representing deletion of text</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/del" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdetails.html b/devdocs/html/element%2Fdetails.html new file mode 100644 index 00000000..cdb95c37 --- /dev/null +++ b/devdocs/html/element%2Fdetails.html @@ -0,0 +1,249 @@ +<header><h1><details>: The Details disclosure element</h1></header><div class="section-content"> +<p>The <code><details></code> <a href="../index">HTML</a> element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <a href="summary"><code><summary></code></a> element.</p> <p>A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <code><summary></code> element are used as the label for the disclosure widget.</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/details.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>A <code><details></code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code><summary></code> (or a <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>-defined default string if no <code><summary></code>).</p> <p>When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".</p> <p>You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its <a href="#open"><code>open</code></a> attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.</p> <p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p> <p>Fully standards-compliant implementations automatically apply the CSS <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a>: list-item</code> to the <a href="summary"><code><summary></code></a> element. You can use this to customize its appearance further. See <a href="#customizing_the_disclosure_widget">Customizing the disclosure widget</a> for further details.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="open"><a href="#open"><code>open</code></a></dt> <dd> <p>This Boolean attribute indicates whether the details — that is, the contents of the <code><details></code> element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You have to remove this attribute entirely to make the details hidden. <code>open="false"</code> makes the details visible because this attribute is Boolean.</p> </div> </dd> </dl> +</div> +<h2 id="events">Events</h2> +<div class="section-content"> +<p>In addition to the usual events supported by HTML elements, the <code><details></code> element supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event"><code>toggle</code></a> event, which is dispatched to the <code><details></code> element whenever its state changes between open and closed. It is sent <em>after</em> the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.</p> <p>You can use an event listener for the <code>toggle</code> event to detect when the widget changes state:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="uFlpOGna6XagO5ci3kXHaUmvBMME9wNxK9NlxavUmHw=" data-language="js">details<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"toggle"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>details<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">/* the element was toggled open */</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">/* the element was toggled closed */</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="a_simple_disclosure_example">A simple disclosure example</h3> +<div class="section-content"> +<p>This example shows a simple <code><details></code> element with a <code><summary></code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Requires a computer running an operating system. The computer must have some + memory and ideally some kind of long-term storage. An input device as well + as some form of output device is recommended. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="A simple disclosure example sample" id="frame_a_simple_disclosure_example" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=a_simple_disclosure_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="creating_an_open_disclosure_box">Creating an open disclosure box</h3> +<div class="section-content"> +<p>To start the <code><details></code> box in its open state, add the Boolean <code>open</code> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gnBXB28XondnpjuhBrPGz3KCQihbijwV0sBRQCyw1BQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Requires a computer running an operating system. The computer must have some + memory and ideally some kind of long-term storage. An input device as well + as some form of output device is recommended. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Creating an open disclosure box sample" id="frame_creating_an_open_disclosure_box" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=creating_an_open_disclosure_box" loading="lazy"></iframe> +</div> +</div> +<h3 id="customizing_the_appearance">Customizing the appearance</h3> +<div class="section-content"> +<p>Now let's apply some CSS to customize the appearance of the disclosure box.</p> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="UxgN4w/bDU+pIezvMttGx9i4W+PeVMBpygxdZ+MYWx8=" data-language="css"><span class="token selector">details</span> <span class="token punctuation">{</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Calibri<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 620px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">details > summary</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span> + <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">details > p</span> <span class="token punctuation">{</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 0 0 10px 10px<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">details[open] > summary</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ccf<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.</p> <p>The selector <code>details[open]</code> can be used to style the element which is open.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Requires a computer running an operating system. The computer must have some + memory and ideally some kind of long-term storage. An input device as well + as some form of output device is recommended. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Customizing the appearance sample" id="frame_customizing_the_appearance" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=customizing_the_appearance" loading="lazy"></iframe> +</div> +</div> +<h3 id="customizing_the_disclosure_widget">Customizing the disclosure widget</h3> +<div class="section-content"> +<p>The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.</p> <p>The <a href="summary"><code><summary></code></a> element supports the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> shorthand property and its longhand properties, such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>, to change the disclosure triangle to whatever you choose (usually with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image"><code>list-style-image</code></a>). For example, we can remove the disclosure widget icon by setting <code>list-style: none</code>.</p> <h4 id="css_2">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="bMx6onZxL5Wkl+TyHYD3ALYHv8/BO0VQ96UMzGgBwpg=" data-language="css"><span class="token selector">details</span> <span class="token punctuation">{</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Calibri<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 620px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">details > summary</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span> + <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> + <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">details > p</span> <span class="token punctuation">{</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 0 0 10px 10px<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">box-shadow</span><span class="token punctuation">:</span> 3px 3px 4px black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This CSS creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qpItHAkBiYNruaTloJeKVBAtzMB7IFs2eEW8C9MNCk4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>System Requirements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Requires a computer running an operating system. The computer must have some + memory and ideally some kind of long-term storage. An input device as well + as some form of output device is recommended. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Customizing the disclosure widget sample" id="frame_customizing_the_disclosure_widget" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/details/runner.html?id=customizing_the_disclosure_widget" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> One <a href="summary"><code><summary></code></a> element followed by <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</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/interactive-elements.html#the-details-element">HTML Standard <br><small># the-details-element</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>details</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>49</summary>Before Firefox 57, there was a bug meaning that <code><details></code> elements can't be made open by default using the <code>open</code> attribute if they have a CSS <code>animation</code> active on them.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>49</summary>There is a bug meaning that <code><details></code> elements can't be made open by default using the <code>open</code> attribute if they have a CSS <code>animation</code> active on them.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">120</td> +<td class="bc-supports-yes">120</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>open</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</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="summary"><code><summary></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/details" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdfn.html b/devdocs/html/element%2Fdfn.html new file mode 100644 index 00000000..7f74d817 --- /dev/null +++ b/devdocs/html/element%2Fdfn.html @@ -0,0 +1,141 @@ +<header><h1><dfn>: The Definition element</h1></header><div class="section-content"><p>The <code><dfn></code> <a href="../index">HTML</a> element is used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <a href="p"><code><p></code></a> element, the <a href="dt"><code><dt></code></a>/<a href="dd"><code><dd></code></a> pairing, or the nearest <a href="section"><code><section></code></a> ancestor of the <code><dfn></code> element, is considered to be the definition of the term.</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/dfn.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <p>The <a href="../global_attributes#title"><code>title</code></a> attribute has special meaning, as noted below.</p> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><p>There are some not-entirely-obvious aspects to using the <code><dfn></code> element. We examine those here.</p></div> +<h3 id="specifying_the_term_being_defined">Specifying the term being defined</h3> +<div class="section-content"> +<p>The term being defined is identified following these rules:</p> <ol> <li>If the <code><dfn></code> element has a <a href="../global_attributes#title"><code>title</code></a> attribute, the value of the <code>title</code> attribute is considered to be the term being defined. The element must still have text within it, but that text may be an abbreviation (perhaps using <a href="abbr"><code><abbr></code></a>) or another form of the term.</li> <li>If the <code><dfn></code> contains a single child element and does not have any text content of its own, and the child element is an <a href="abbr"><code><abbr></code></a> element with a <code>title</code> attribute itself, then the exact value of the <code><abbr></code> element's <code>title</code> is the term being defined.</li> <li>Otherwise, the text content of the <code><dfn></code> element is the term being defined. This is shown <a href="#basic_identification_of_a_term">in the first example below</a>.</li> </ol> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If the <code><dfn></code> element has a <code>title</code> attribute, it <em>must</em> contain the term being defined and no other text.</p> </div> +</div> +<h3 id="links_to_dfn_elements">Links to <code><dfn></code> elements</h3> +<div class="section-content"> +<p>If you include an <a href="../global_attributes#id"><code>id</code></a> attribute on the <code><dfn></code> element, you can then link to it using <a href="a"><code><a></code></a> elements. Such links should be uses of the term, with the intent being that the reader can quickly navigate to the term's definition if they're not already aware of it, by clicking on the term's link.</p> <p>This is shown in the example under <a href="#links_to_definitions">Links to definitions</a> below.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Let's take a look at some examples of various usage scenarios.</p></div> +<h3 id="basic_identification_of_a_term">Basic identification of a term</h3> +<div class="section-content"> +<p>This example uses a plain <code><dfn></code> element to identify the location of a term within the definition.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="K4NxBjt6e2dzQ1k7aPedW121cwVKhGatkmwT5kJ1k5U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>HTML Definition element (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>dfn<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> is used + to indicate the term being defined within the context of a definition phrase + or sentence. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Since the <code><dfn></code> element has no <code>title</code>, the text contents of the <code><dfn></code> element itself are used as the term being defined.</p> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic identification of a term sample" id="frame_basic_identification_of_a_term" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=basic_identification_of_a_term" loading="lazy"></iframe> +</div> +</div> +<h3 id="links_to_definitions">Links to definitions</h3> +<div class="section-content"> +<p>To add links to the definitions, you create the link the same way you always do, with the <a href="a"><code><a></code></a> element.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jeNTroJjW25Gty0mZNFaezHdnNqxlaNXSuMQGzMU5bk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>HTML Definition element (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</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>definition-dfn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>dfn<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> + is used to indicate the term being defined within the context of a definition + phrase or sentence. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine + voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete. + Scrupulum, inquam, abeunti; +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Because of all of that, we decided to use the + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#definition-dfn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>dfn<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> element for this + project. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here we see the definition — now with an <a href="../global_attributes#id"><code>id</code></a> attribute, <code>"definition-dfn"</code>, which can be used as the target of a link. Later on, a link is created using <code><a></code> with the <a href="a#href"><code>href</code></a> attribute set to <code>"#definition-dfn"</code> to set up the link back to the definition.</p> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Links to definitions sample" id="frame_links_to_definitions" width="650" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=links_to_definitions" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_abbreviations_and_definitions_together">Using abbreviations and definitions together</h3> +<div class="section-content"> +<p>In some cases, you may wish to use an abbreviation for a term when defining it. This can be done by using the <code><dfn></code> and <a href="abbr"><code><abbr></code></a> elements in tandem, like this:</p> <h4 id="html_3">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6wOpykyE3hb3xiwbCslf2EsqSo6hdG/eJXvTCxdElXw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dfn</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hubble Space Telescope<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dfn</span><span class="token punctuation">></span></span> is among the + most productive scientific instruments ever constructed. It has been in orbit + for over 20 years, scanning the sky and returning data and photographs of + unprecedented quality and detail. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Indeed, the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hubble Space Telescope<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HST<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> has arguably done + more to advance science than any device ever built. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Note the <code><abbr></code> element nested inside the <code><dfn></code>. The former establishes that the term is an abbreviation ("HST") and specifies the full term ("Hubble Space Telescope") in its <code>title</code> attribute. The latter indicates that the abbreviated term represents a term being defined.</p> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Using abbreviations and definitions together sample" id="frame_using_abbreviations_and_definitions_together" width="650" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dfn/runner.html?id=using_abbreviations_and_definitions_together" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but no <a href="dfn" aria-current="page"><code><dfn></code></a> element must be a descendant. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/term_role"><code>term</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-dfn-element">HTML Standard <br><small># the-dfn-element</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>dfn</code></th> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</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">14</td> +<td class="bc-supports-yes">6</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>Elements related to definition lists: <a href="dl"><code><dl></code></a>, <a href="dt"><code><dt></code></a>, <a href="dd"><code><dd></code></a> +</li> <li><a href="abbr"><code><abbr></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dfn" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdialog.html b/devdocs/html/element%2Fdialog.html new file mode 100644 index 00000000..9cdc464f --- /dev/null +++ b/devdocs/html/element%2Fdialog.html @@ -0,0 +1,225 @@ +<header><h1><dialog>: The Dialog element</h1></header><div class="section-content"> +<p>The <code><dialog></code> <a href="../index">HTML</a> element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.</p> <p>The HTML <code><dialog></code> element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.</p> <p>JavaScript should be used to display the <code><dialog></code> element. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal"><code>.showModal()</code></a> method to display a modal dialog and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show"><code>.show()</code></a> method to display a non-modal dialog. The dialog box can be closed using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close"><code>.close()</code></a> method or using the <a href="form#method"><code>dialog</code></a> method when submitting a <code><form></code> that is nested within the <code><dialog></code> element. Modal dialogs can also be closed by pressing the <kbd>Esc</kbd> key.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> The <code>tabindex</code> attribute must not be used on the <code><dialog></code> element.</p> </div> <dl> <dt id="open"><a href="#open"><code>open</code></a></dt> <dd> <p> Indicates that the dialog box is active and is available for interaction. If the <code>open</code> attribute is not set, the dialog box will not be visible to the user. It is recommended to use the <code>.show()</code> or <code>.showModal()</code> method to render dialogs, rather than the <code>open</code> attribute. If a <code><dialog></code> is opened using the <code>open</code> attribute, it is non-modal. </p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> While you can toggle between the open and closed states of non-modal dialog boxes by toggling the presence of the <code>open</code> attribute, this approach is not recommended.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>HTML <a href="form"><code><form></code></a> elements can be used to close a dialog box if they have the attribute <code>method="dialog"</code> or if the button used to submit the form has <a href="input#formmethod"><code>formmethod="dialog"</code></a> set. When a <code><form></code> within a <code><dialog></code> is submitted via the <code>dialog</code> method, the dialog box closes, the states of the form controls are saved but not submitted, and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> property gets set to the value of the button that was activated.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> pseudo-element can be used to style the backdrop of a modal dialog, which is displayed behind the <code><dialog></code> element when the dialog is displayed using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a> method. For example, you can use this pseudo-element to obfuscate the inert content behind the modal dialog.</li> <li>The <a href="../global_attributes/autofocus"><code>autofocus</code></a> attribute should be added to the element with which the user is expected to interact immediately on opening a modal dialog. If there is no element involving immediate interaction, the <code>autofocus</code> attribute can be added to the <code><dialog></code> element itself.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="caveats_of_creating_a_dialog_using_only_html">Caveats of creating a dialog using only HTML</h3> +<div class="section-content"> +<p>This example demonstrates the create a non-modal dialog by using only HTML. Because of the boolean <code>open</code> attribute in the <code><dialog></code> element, the dialog appears open when the page loads. The dialog can be closed by clicking the "OK" button because the <code>method</code> attribute in the <code><form></code> element is set to <code>"dialog"</code>. In this case, no JavaScript is needed to close the form.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="pyNIZ2FRkQ0lF2puOc9mOyM0N5EGixmK3+Oo9MoGK7Y=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dialog</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Greetings, one and all!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dialog</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Caveats of creating a dialog using only HTML sample" id="frame_caveats_of_creating_a_dialog_using_only_html" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dialog/runner.html?id=caveats_of_creating_a_dialog_using_only_html" loading="lazy"></iframe> +</div> <p>This dialog is initially open because of the presence of the <code>open</code> attribute. Dialogs that are displayed using the <code>open</code> attribute are non-modal. You may notice that after clicking "OK", the dialog gets dismissed leaving the Result frame empty. When the dialog is dismissed, there is no method provided to reopen it. For this reason, the preferred method to display non-modal dialogs is by using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show"><code>HTMLDialogElement.show()</code></a> method. It is possible to toggle the display of the dialog by adding or removing the boolean <code>open</code> attribute, but it is not the recommended practice.</p> +</div> +<h3 id="creating_a_modal_dialog">Creating a modal dialog</h3> +<div class="section-content"> +<p>This example demonstrates a modal dialog with a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient">gradient</a> backdrop. The <code>.showModal()</code> method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the <kbd>Esc</kbd> key or via the <code>close()</code> method when the "Close" button within the dialog is activated.</p> <p>When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. In this example, the <a href="../global_attributes/autofocus"><code>autofocus</code></a> attribute is applied to the "Close" button, giving it focus when the dialog opens, as this is the element we expect the user will interact with immediately after the dialog opens.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Xv9c7iVVc1F4wwPfrGwHu071HTJUDNf6iLXjLHE1Puo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dialog</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">autofocus</span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This modal dialog has a groovy backdrop!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dialog</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Show the dialog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <p>We can style the backdrop of the dialog by using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> pseudo-element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sqXwO2T9Od4FEjsRw7i0W3dcJPvVkka/x3dV/ZLpWTk=" data-language="css"><span class="token selector">::backdrop</span> <span class="token punctuation">{</span> + <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span> + 45deg<span class="token punctuation">,</span> + magenta<span class="token punctuation">,</span> + rebeccapurple<span class="token punctuation">,</span> + dodgerblue<span class="token punctuation">,</span> + green + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">opacity</span><span class="token punctuation">:</span> 0.75<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <p>The dialog is opened modally using the <code>.showModal()</code> method and closed using the <code>.close()</code> method.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="vmyF0hgKihq9VvJn2x4/cEi1aTThye/GsJnxYTOvRTs=" data-language="js"><span class="token keyword">const</span> dialog <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"dialog"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> showButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"dialog + button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> closeButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"dialog button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// "Show the dialog" button opens the dialog modally</span> +showButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + dialog<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// "Close" button closes the dialog</span> +closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + dialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Creating a modal dialog" id="frame_modal_example" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dialog/runner.html?id=modal_example" loading="lazy"></iframe> +</div> <p>When the modal dialog is displayed, it appears above any other dialogs that might be present. Everything outside the modal dialog is inert and interactions outside the dialog are blocked. Notice that when the dialog is open, with the exception of the dialog itself, interaction with the document is not possible; the "Show the dialog" button is mostly obfuscated by the almost opaque backdrop of the dialog and is inert.</p> +</div> +<h3 id="handling_the_return_value_from_the_dialog">Handling the return value from the dialog</h3> +<div class="section-content"> +<p>This example demonstrates the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> of the <code><dialog></code> element and how to close a modal dialog by using a form. By default, the <code>returnValue</code> is the empty string or the value of the button that submits the form within the <code><dialog></code> element, if there is one.</p> <p>This example opens a modal dialog when the "Show the dialog" button is activated. The dialog contains a form with a <a href="select"><code><select></code></a> and two <a href="button"><code><button></code></a> elements, which default to <code>type="submit"</code>. An eventlistener updates the value of the "Confirm" button when the select option changes. If the "Confirm" button is activated to close the dialog, the current value of the button is the return value. If the dialog is closed by pressing the "Cancel" button, the <code>returnValue</code> is <code>cancel</code>.</p> <p>When the dialog is closed, the return value is displayed under the "Show the dialog" button. If the dialog is closed by pressing the <kbd>Esc</kbd> key, the <code>returnValue</code> is not updated and the <code>close</code> event doesn't occur so the text in the <a href="output"><code><output></code></a> is not updated.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ci7v1IxOdLaATtDpSBzqImRutC478hodwNiENAyBDsA=" data-language="html"><span class="token comment"><!-- A modal dialog containing a form --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dialog</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>favDialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Favorite animal: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Brine shrimp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Red panda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Spider monkey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>cancel<span class="token punctuation">"</span></span> <span class="token attr-name">formmethod</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>confirmBtn<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>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dialog</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>showDialog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Show the dialog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="javascript_2">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="BRvGCaqoGfnwSoPFBO1mMlbIWtQ3mmDiFE2oskAktIk=" data-language="js"><span class="token keyword">const</span> showButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"showDialog"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> favDialog <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"favDialog"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> outputBox <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> selectEl <span class="token operator">=</span> favDialog<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> confirmBtn <span class="token operator">=</span> favDialog<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#confirmBtn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// "Show the dialog" button opens the <dialog> modally</span> +showButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + favDialog<span class="token punctuation">.</span><span class="token function">showModal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// "Favorite animal" input sets the value of the submit button</span> +selectEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + confirmBtn<span class="token punctuation">.</span>value <span class="token operator">=</span> selectEl<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// "Cancel" button closes the dialog without submitting because of [formmethod="dialog"], triggering a close event.</span> +favDialog<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"close"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + outputBox<span class="token punctuation">.</span>value <span class="token operator">=</span> + favDialog<span class="token punctuation">.</span>returnValue <span class="token operator">===</span> <span class="token string">"default"</span> + <span class="token operator">?</span> <span class="token string">"No return value."</span> + <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">ReturnValue: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>favDialog<span class="token punctuation">.</span>returnValue<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token comment">// Have to check for "default" rather than empty string</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// Prevent the "confirm" button from the default behavior of submitting the form, and close the dialog with the `close()` method, which triggers the "close" event.</span> +confirmBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// We don't want to submit this fake form</span> + favDialog<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span>selectEl<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Have to send the select box value here.</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="result_3">Result</h3> +<div class="section-content"> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Handling the return value from the dialog sample" id="frame_handling_the_return_value_from_the_dialog" width="100%" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dialog/runner.html?id=handling_the_return_value_from_the_dialog" loading="lazy"></iframe> +</div> <p>This example demonstrates the following three methods of closing modal dialogs:</p> <ul> <li>By submitting the form within the dialog form using the <code>dialog</code> method (as seen in the <a href="#caveats-of-creating-a-dialog-using-only-html">HTML-only example</a>).</li> <li>By pressing the <kbd>Esc</kbd> key.</li> <li> By calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close"><code>HTMLDialogElement.close()</code></a> method (as seen in the <a href="#creating_a_modal_dialog">modal example</a>. In this example, the "Cancel" button closes the dialog via the <code>dialog</code> form method and the "Confirm" button closes the dialog via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close"><code>HTMLDialogElement.close()</code></a> method. </li> </ul> <p>The "Cancel" button includes the <a href="input/submit#formmethod"><code>formmethod="dialog"</code></a> attribute, which overrides the <a href="form"><code><form></code></a>'s default <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a> method. When a form's method is <a href="#usage_notes"><code>dialog</code></a>, the state of the form is saved but not submitted, and the dialog gets closed.</p> <p>Without an <code>action</code>, submitting the form via the default <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a> method causes a page to reload. We use JavaScript to prevent the submission and close the dialog with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code>event.preventDefault()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close"><code>HTMLDialogElement.close()</code></a> methods, respectively.</p> <p>It is important to provide a closing mechanism within every <code>dialog</code> element. The <kbd>Esc</kbd> key does not close non-modal dialogs by default, nor can one assume that a user will even have access to a physical keyboard (e.g., someone using a touch screen device without access to a keyboard).</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="heading_elements#sectioning_roots">sectioning root</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#flow_content">Flow content</a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role"><code>alertdialog</code></a></td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="accessibility_considerations">Accessibility considerations</h2> +<div class="section-content"> +<p>When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a> to open a <code><dialog></code>, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the <a href="../global_attributes/autofocus"><code>autofocus</code></a> attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the <code><dialog></code> element itself may provide the best initial focus placement.</p> <p>Ensure a mechanism is provided to allow users to close the dialog. The most robust way to ensure that all users can close the dialog is to include an explicit button to do so, such as a confirmation, cancellation, or close button.</p> <p>By default, a dialog invoked by the <code>showModal()</code> method can be dismissed by pressing the <kbd>Esc</kbd> key. A non-modal dialog does not dismiss via the <kbd>Esc</kbd> key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. Keyboard users expect the <kbd>Esc</kbd> key to close modal dialogs; ensure that this behavior is implemented and maintained. If multiple modal dialogs are open, pressing the <kbd>Esc</kbd> key should close only the last shown dialog. When using <code><dialog></code>, this behavior is provided by the browser.</p> <p>While dialogs can be created using other elements, the native <code><dialog></code> element provides usability and accessibility features that must be replicated if you use other elements for a similar purpose. If you're creating a custom dialog implementation, ensure that all expected default behaviors are supported and proper labeling recommendations are followed.</p> <p>The <code><dialog></code> element is exposed by browsers in a manner similar to custom dialogs that use the ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">role="dialog"</a> attribute. <code><dialog></code> elements invoked by the <code>showModal()</code> method implicitly have <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal">aria-modal="true"</a>, whereas <code><dialog></code> elements invoked by the <code>show()</code> method or displayed using the <code>open</code> attribute or by changing the default <code>display</code> of a <code><dialog></code> are exposed as <code>[aria-modal="false"]</code>. When implementing modal dialogs, everything other than the <code><dialog></code> and its contents should be rendered inert using the <a href="../global_attributes/inert"><code>inert</code></a> attribute. When using <code><dialog></code> along with the <code>HTMLDialogElement.showModal()</code> method, this behavior is provided by the browser.</p> +</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/interactive-elements.html#the-dialog-element">HTML Standard <br><small># the-dialog-element</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>dialog</code></th> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">98</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">24</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">98</td> +<td class="bc-supports-yes">24</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">3.0</td> +</tr> +<tr> +<th><code>open</code></th> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">98</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">24</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">98</td> +<td class="bc-supports-yes">24</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">3.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a> interface</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event"><code>close</code></a> event</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event"><code>cancel</code></a> event</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open"><code>open</code></a> property of the <code>HTMLDialogElement</code> interface</li> <li> +<a href="../global_attributes/inert"><code>inert</code></a> global attribute for HTML elements</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> CSS pseudo-element</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">Web forms</a> in the Learn area</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dialog" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdir.html b/devdocs/html/element%2Fdir.html new file mode 100644 index 00000000..f5465486 --- /dev/null +++ b/devdocs/html/element%2Fdir.html @@ -0,0 +1,78 @@ +<header><h1><dir>: The Directory element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><dir></code> <a href="../index">HTML</a> element is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. Do not use this obsolete element; instead, you should use the <a href="ul"><code><ul></code></a> element for lists, including lists of files.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Do not use this element. Though present in early HTML specifications, it has been deprecated in HTML 4, and has since been removed entirely. <strong>No major browsers support this element.</strong></p> </div> +</div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a class="page-not-created"><code>HTMLDirectoryElement</code></a> interface.</p></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="compact"> +<a href="#compact"><code>compact</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.</p> </dd> </dl> +</div> +<h2 id="specifications">Specifications</h2> +<div class="section-content"><p>Not part of any current specifications.</p></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>dir</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> +<tr> +<th><code>compact</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other list-related HTML Elements: <a href="ol"><code><ol></code></a>, <a href="ul"><code><ul></code></a>, <a href="li"><code><li></code></a>, and <a href="menu"><code><menu></code></a>;</li> <li>CSS properties that may be specially useful to style the <code><dir></code> element: <ul> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> property, useful to choose the way the ordinal is displayed.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a>, useful to handle complex nested lists.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property, useful to simulate the deprecated <a href="#compact"><code>compact</code></a> attribute.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property, useful to control the indent of the list.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dir" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dir</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdiv.html b/devdocs/html/element%2Fdiv.html new file mode 100644 index 00000000..ef3188c6 --- /dev/null +++ b/devdocs/html/element%2Fdiv.html @@ -0,0 +1,129 @@ +<header><h1><div>: The Content Division element</h1></header><div class="section-content"><p>The <code><div></code> <a href="../index">HTML</a> element is the generic container for flow content. It has no effect on the content or layout until styled in some way using <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> (e.g. styling is directly applied to it, or some kind of layout model like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout">Flexbox</a> is applied to its parent element).</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/div.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>As a "pure" container, the <code><div></code> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the <a href="../global_attributes#class"><code>class</code></a> or <a href="../global_attributes#id"><code>id</code></a> attributes, marking a section of a document as being written in a different language (using the <a href="../global_attributes#lang"><code>lang</code></a> attribute), and so on.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>align</code> attribute is obsolete; do not use it anymore. Instead, you should use CSS properties or techniques such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout">CSS Grid</a> or <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> to align and position <code><div></code> elements on the page.</p> </div> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>The <code><div></code> element should be used only when no other semantic element (such as <a href="article"><code><article></code></a> or <a href="nav"><code><nav></code></a>) is appropriate.</li> </ul></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>The <code><div></code> element has <a href="https://www.w3.org/TR/wai-aria-1.2/#generic" target="_blank">an implicit role of <code>generic</code></a>, and not none. This may affect certain ARIA combination declarations that expect a direct descendant element with a certain role to function properly.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="a_simple_example">A simple example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="36M3KELsnVnPdTx5sHKAJZGV93N/hy5EaNxr0KbJNYE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Any kind of content here. Such as <span class="token entity named-entity">&lt;</span>p<span class="token entity named-entity">&gt;</span>, <span class="token entity named-entity">&lt;</span>table<span class="token entity named-entity">&gt;</span>. You name it! + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="A simple example sample" id="frame_a_simple_example" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/div/runner.html?id=a_simple_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="a_styled_example">A styled example</h3> +<div class="section-content"> +<p>This example creates a shadowed box by applying a style to the <code><div></code> using CSS. Note the use of the <a href="../global_attributes#class"><code>class</code></a> attribute on the <code><div></code> to apply the style named <code>"shadowbox"</code> to the element.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8Atj2IB2DUFT3/Uh5/nswsCjCj65JEBrczk84bXOqFo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>shadowbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Here's a very interesting note displayed in a lovely shadowed box.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Bm0kShsX2T/fBmMElg2SlJqAm6aGZr/xPRuHaFLt/u4=" data-language="css"><span class="token selector">.shadowbox</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #333<span class="token punctuation">;</span> + <span class="token property">box-shadow</span><span class="token punctuation">:</span> 8px 8px 5px #444<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 8px 12px<span class="token punctuation">;</span> + <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>180deg<span class="token punctuation">,</span> #fff<span class="token punctuation">,</span> #ddd 40%<span class="token punctuation">,</span> #ccc<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="A styled example sample" id="frame_a_styled_example" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/div/runner.html?id=a_styled_example" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#palpable_content">palpable content</a>.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>.<br>Or (in <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): If the parent is a <a href="dl"><code><dl></code></a> element: one or more <a href="dt"><code><dt></code></a> elements followed by one or more <a href="dd"><code><dd></code></a> elements, optionally intermixed with <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>.<br>Or (in <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): <a href="dl"><code><dl></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</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/grouping-content.html#the-div-element">HTML Standard <br><small># the-div-element</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>div</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>Semantic sectioning elements: <a href="section"><code><section></code></a>, <a href="article"><code><article></code></a>, <a href="nav"><code><nav></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a> +</li> <li> +<a href="span"><code><span></code></a> element for styling of phrasing content</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/div" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdl.html b/devdocs/html/element%2Fdl.html new file mode 100644 index 00000000..62b7322b --- /dev/null +++ b/devdocs/html/element%2Fdl.html @@ -0,0 +1,193 @@ +<header><h1><dl>: The Description List element</h1></header><div class="section-content"><p>The <code><dl></code> <a href="../index">HTML</a> element represents a description list. The element encloses a list of groups of terms (specified using the <a href="dt"><code><dt></code></a> element) and descriptions (provided by <a href="dd"><code><dd></code></a> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).</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/dl.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, and if the <code><dl></code> element's children include one name-value group, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <p> Either: Zero or more groups each consisting of one or more <a href="dt"><code><dt></code></a> elements followed by one or more <a href="dd"><code><dd></code></a> elements, optionally intermixed with <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements.<br>Or: (in <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML, <a href="https://developer.mozilla.org/en-US/docs/Glossary/W3C">W3C</a> HTML 5.2 and later) One or more <a href="div"><code><div></code></a> elements, optionally intermixed with <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements. </p> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role">list</a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="single_term_and_description">Single term and description</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="M2KB6BAn11nEoejo3yfJckht/P+TUmFXQBI5qSDOJ30=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Firefox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + A free, open source, cross-platform, graphical web browser developed by the + Mozilla Corporation and hundreds of volunteers. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- Other terms and descriptions --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Single term and description sample" id="frame_single_term_and_description" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dl/runner.html?id=single_term_and_description" loading="lazy"></iframe> +</div> +</div> +<h3 id="multiple_terms_single_description">Multiple terms, single description</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="r70kadJajGwLcDcHd4FV8dfWdIwl2ddLtbWMVHd1L4M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Firefox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Mozilla Firefox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Fx<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + A free, open source, cross-platform, graphical web browser developed by the + Mozilla Corporation and hundreds of volunteers. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- Other terms and descriptions --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Multiple terms single description sample" id="frame_multiple_terms_single_description" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dl/runner.html?id=multiple_terms_single_description" loading="lazy"></iframe> +</div> +</div> +<h3 id="single_term_multiple_descriptions">Single term, multiple descriptions</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2wkvGqjOgJk7dQZOFONstJAg6gD1mzw5/PkNeNkbSPA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Firefox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + A free, open source, cross-platform, graphical web browser developed by the + Mozilla Corporation and hundreds of volunteers. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a + mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long). + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- Other terms and descriptions --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Single term multiple descriptions sample" id="frame_single_term_multiple_descriptions" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dl/runner.html?id=single_term_multiple_descriptions" loading="lazy"></iframe> +</div> +</div> +<h3 id="multiple_terms_and_descriptions">Multiple terms and descriptions</h3> +<div class="section-content"><p>It is also possible to define multiple terms with multiple corresponding descriptions, by combining the examples above.</p></div> +<h3 id="metadata">Metadata</h3> +<div class="section-content"> +<p>Description lists are useful for displaying metadata as a list of key-value pairs.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ggC1gFkDvO6JFAhoN3EqxIwXHU9xb2iS+jCZJURc0aI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Godzilla<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Born<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>1952<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Birthplace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Japan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Color<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Metadata sample" id="frame_metadata" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dl/runner.html?id=metadata" loading="lazy"></iframe> +</div> <p>Tip: It can be handy to define a key-value separator in the CSS, such as:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="+1HiRyGoTWLoL9dc9hWcGgNcU1bY9VCCK8Vw6JPkpBY=" data-language="css"><span class="token selector">dt::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">": "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="wrapping_name-value_groups_in_div_elements">Wrapping name-value groups in <code>div</code> elements</h3> +<div class="section-content"> +<p><a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML allows wrapping each name-value group in a <a href="dl" aria-current="page"><code><dl></code></a> element in a <a href="div"><code><div></code></a> element. This can be useful when using <a href="../microdata">microdata</a>, or when <a href="../global_attributes">global attributes</a> apply to a whole group, or for styling purposes.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QCqvOoQtxNieexVFq+A7+T0VrsJ3whs6tVqRt06AeIQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Godzilla<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Born<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>1952<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Birthplace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Japan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Color<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Wrapping name-value groups in `div` elements sample" id="frame_wrapping_name-value_groups_in_div_elements" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/dl/runner.html?id=wrapping_name-value_groups_in_div_elements" loading="lazy"></iframe> +</div> +</div> +<h2 id="notes">Notes</h2> +<div class="section-content"> +<p>Do not use this element (nor <a href="ul"><code><ul></code></a> elements) to merely create indentation on a page. Although it works, this is a bad practice and obscures the meaning of description lists.</p> <p>To change the indentation of a description term, use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property.</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p> Each screen reader exposes <code><dl></code> content differently, including total count, terms/definitions context, and navigation methods. These differences are not necessarily bugs. As of iOS 14, VoiceOver will announce that <code><dl></code> content is a list when navigating with the virtual cursor (not via the read-all command). VoiceOver does not support list navigation commands with <code><dl></code>. Be careful applying ARIA <code>term</code> and <code>definition</code> roles to <code><dl></code> constructs as VoiceOver (macOS and iOS) will adjust how they are announced. </p> <ul> <li><a href="https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html" target="_blank">VoiceOver on iOS 14 Supports Description Lists</a></li> <li><a href="https://adrianroselli.com/2022/12/brief-note-on-description-list-support.html" target="_blank">Brief Note on Description List Support</a></li> </ul> +</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/grouping-content.html#the-dl-element">HTML Standard <br><small># the-dl-element</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>dl</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="dt"><code><dt></code></a></li> <li><a href="dd"><code><dd></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dl" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl</a> + </p> +</div> diff --git a/devdocs/html/element%2Fdt.html b/devdocs/html/element%2Fdt.html new file mode 100644 index 00000000..b2f864d6 --- /dev/null +++ b/devdocs/html/element%2Fdt.html @@ -0,0 +1,63 @@ +<header><h1><dt>: The Description Term element</h1></header><div class="section-content"> +<p>The <code><dt></code> <a href="../index">HTML</a> element specifies a term in a description or definition list, and as such must be used inside a <a href="dl"><code><dl></code></a> element. It is usually followed by a <a href="dd"><code><dd></code></a> element; however, multiple <code><dt></code> elements in a row indicate several terms that are all defined by the immediate next <a href="dd"><code><dd></code></a> element.</p> <p>The subsequent <a href="dd"><code><dd></code></a> (<strong>Description Details</strong>) element provides the definition or other related text associated with the term specified using <code><dt></code>.</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/dt.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>For examples, see the <a href="dl#examples">examples provided for the <code><dl></code> element</a>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>, but with no <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, sectioning content or heading content descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is required. The end tag may be omitted if this element is immediately followed by another <code><dt></code> element or a <a href="dd"><code><dd></code></a> element, or if there is no more content in the parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="dl"><code><dl></code></a> or (in <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML, <a href="https://developer.mozilla.org/en-US/docs/Glossary/W3C">W3C</a> HTML 5.2 and later) a <a href="div"><code><div></code></a> that is a child of a <a href="dl"><code><dl></code></a>.<br>This element can be used before a <a href="dd"><code><dd></code></a> or another <a href="dt" aria-current="page"><code><dt></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role">listitem</a></code></td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> interface for this element. </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/grouping-content.html#the-dt-element">HTML Standard <br><small># the-dt-element</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>dt</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="dl"><code><dl></code></a></li> <li><a href="dd"><code><dd></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/dt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt</a> + </p> +</div> diff --git a/devdocs/html/element%2Fem.html b/devdocs/html/element%2Fem.html new file mode 100644 index 00000000..c96cbf80 --- /dev/null +++ b/devdocs/html/element%2Fem.html @@ -0,0 +1,84 @@ +<header><h1><em>: The Emphasis element</h1></header><div class="section-content"><p>The <code><em></code> <a href="../index">HTML</a> element marks text that has stress emphasis. The <code><em></code> element can be nested, with each level of nesting indicating a greater degree of emphasis.</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/em.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><em></code> element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself.</p> <p>Typically this element is displayed in italic type. However, it should not be used to apply italic styling; use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style"><code>font-style</code></a> property for that purpose. Use the <a href="cite"><code><cite></code></a> element to mark the title of a work (book, play, song, etc.). Use the <a href="i"><code><i></code></a> element to mark text that is in an alternate tone or mood, which covers many common situations for italics such as scientific names or words in other languages. Use the <a href="strong"><code><strong></code></a> element to mark text that has greater importance than surrounding text.</p> +</div> +<h3 id="i_vs._em"><i> vs. <em></h3> +<div class="section-content"> +<p>Some developers may be confused by how multiple elements seemingly produce similar visual results. <code><em></code> and <code><i></code> are a common example, since they both italicize text. What's the difference? Which should you use?</p> <p>By default, the visual result is the same. However, the semantic meaning is different. The <code><em></code> element represents stress emphasis of its contents, while the <code><i></code> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <code><cite></code>.)</p> <p>This means the right one to use depends on the situation. Neither is for purely decorative purposes, that's what CSS styling is for.</p> <p>An example for <code><em></code> could be: "Just <em>do</em> it already!", or: "We <em>had</em> to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.</p> <p>An example for <code><i></code> could be: "The <em>Queen Mary</em> sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named <em>Queen Mary</em>. Another example for <code><i></code> could be: "The word <em>the</em> is an article".</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, the <code><em></code> element is used to highlight an implicit or explicit contrast between two ingredient lists:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UXf1xt3uyeRdmREApaSKk1UzFYim5tpPfITzH0C3tD4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Ice cream is made with milk, sweetener, and cream. Frozen custard, on the + other hand, is made of milk, cream, sweetener, and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>egg yolks<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/em/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">emphasis</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> interface for this element. </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/text-level-semantics.html#the-em-element">HTML Standard <br><small># the-em-element</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>em</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="i"><code><i></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/em" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em</a> + </p> +</div> diff --git a/devdocs/html/element%2Fembed.html b/devdocs/html/element%2Fembed.html new file mode 100644 index 00000000..f89fc0d6 --- /dev/null +++ b/devdocs/html/element%2Fembed.html @@ -0,0 +1,171 @@ +<header><h1><embed>: The Embed External Content element</h1></header><div class="section-content"><p>The <code><embed></code> <a href="../index">HTML</a> element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.</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/embed.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This topic documents only the element that is defined as part of the <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element" target="_blank">HTML Living Standard</a>. It does not address earlier, non-standardized implementation of the element.</p> </div> <p>Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <code><embed></code> is generally not wise if you want your site to be operable on the average user's browser.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The displayed height of the resource, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the resource being embedded.</p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">MIME type</a> to use to select the plug-in to instantiate.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The displayed width of the resource, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</p> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> property to adjust the positioning of the embedded object within the element's frame, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> property to control how the object's size is adjusted to fit within the frame.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="tYYdqDwXFd6cdGnvO0Hh6rTFsyzUtoUyVX2rrRCgMGQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>embed</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>video/quicktime<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>movie.mov<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>640<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>480<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Title of my video<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>Use the <a href="../global_attributes/title"><code>title</code> attribute</a> on an <code>embed</code> element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the <code>embed</code> element contains interactive content like video or audio.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, embedded content, interactive content, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag, and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>img</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</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/iframe-embed-object.html#the-embed-element">HTML Standard <br><small># the-embed-element</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>embed</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">Yes</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> +<tr> +<th><code>align</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</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> +<tr> +<th><code>height</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> +<tr> +<th><code>name</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> +<tr> +<th><code>src</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> +<tr> +<th><code>type</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</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> +<tr> +<th><code>width</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other elements that are used for embedding content of various types include <a href="audio"><code><audio></code></a>, <a href="canvas"><code><canvas></code></a>, <a href="iframe"><code><iframe></code></a>, <a href="img"><code><img></code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code>, <a href="object"><code><object></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a>, and <a href="video"><code><video></code></a>.</li> <li>Positioning and sizing the embedded content within its frame: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/embed" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed</a> + </p> +</div> diff --git a/devdocs/html/element%2Ffieldset.html b/devdocs/html/element%2Ffieldset.html new file mode 100644 index 00000000..479f0323 --- /dev/null +++ b/devdocs/html/element%2Ffieldset.html @@ -0,0 +1,158 @@ +<header><h1><fieldset>: The Field Set element</h1></header><div class="section-content"><p>The <code><fieldset></code> <a href="../index">HTML</a> element is used to group several controls as well as labels (<a href="label"><code><label></code></a>) within a web form.</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/fieldset.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>As the example above shows, the <code><fieldset></code> element provides a grouping for a part of an HTML form, with a nested <a href="legend"><code><legend></code></a> element providing a caption for the <code><fieldset></code>. It takes few attributes, the most notable of which are <code>form</code>, which can contain the <code>id</code> of a <a href="form"><code><form></code></a> on the same page, allowing you to make the <code><fieldset></code> part of that <code><form></code> even if it is not nested inside it, and <code>disabled</code>, which allows you to disable the <code><fieldset></code> and all its contents in one go.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>If this Boolean attribute is set, all form controls that are descendants of the <code><fieldset></code>, are disabled, meaning they are not editable and won't be submitted along with the <a href="form"><code><form></code></a>. They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the <a href="legend"><code><legend></code></a> element won't be disabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>This attribute takes the value of the <a href="../global_attributes#id"><code>id</code></a> attribute of a <a href="form"><code><form></code></a> element you want the <code><fieldset></code> to be part of, even if it is not inside the form. Please note that usage of this is confusing — if you want the <a href="input"><code><input></code></a> elements inside the <code><fieldset></code> to be associated with the form, you need to use the <code>form</code> attribute directly on those elements. You can check which elements are associated with a form via JavaScript, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a>.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name associated with the group.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The caption for the fieldset is given by the first <a href="legend"><code><legend></code></a> element nested inside it.</p> </div> </dd> </dl> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p>There are several special styling considerations for <code><fieldset></code>.</p> <p>Its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value is <code>block</code> by default, and it establishes a <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>. If the <code><fieldset></code> is styled with an inline-level <code>display</code> value, it will behave as <code>inline-block</code>, otherwise it will behave as <code>block</code>. By default there is a <code>2px</code> <code>groove</code> border surrounding the contents, and a small amount of default padding. The element has <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size"><code>min-inline-size: min-content</code></a> by default.</p> <p>If a <a href="legend"><code><legend></code></a> is present, it is placed over the <code>block-start</code> border. The <code><legend></code> shrink-wraps, and also establishes a formatting context. The <code>display</code> value is blockified. (For example, <code>display: inline</code> behaves as <code>block</code>.)</p> <p>There will be an anonymous box holding the contents of the <code><fieldset></code>, which inherits certain properties from the <code><fieldset></code>. If the <code><fieldset></code> is styled with <code>display: grid</code> or <code>display: inline-grid</code>, then the anonymous box will be a grid formatting context. If the <code><fieldset></code> is styled with <code>display: flex</code> or <code>display: inline-flex</code>, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.</p> <p>You can feel free to style the <code><fieldset></code> and <code><legend></code> in any way you want to suit your page design.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_fieldset">Simple fieldset</h3> +<div class="section-content"> +<p>This example shows a really simple <code><fieldset></code> example, with a <code><legend></code>, and a single control inside it.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="uxxwh/1R8416PsuWyTQliHC7e4bevA/V60DovcMkyms=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Do you agree?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>chbx<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>agree<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>Yes!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>chbx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I agree<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Simple fieldset sample" id="frame_simple_fieldset" width="100%" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/fieldset/runner.html?id=simple_fieldset" loading="lazy"></iframe> +</div> +</div> +<h3 id="disabled_fieldset">Disabled fieldset</h3> +<div class="section-content"> +<p>This example shows a disabled <code><fieldset></code> with two controls inside it. Note how both the controls are disabled due to being inside a disabled <code><fieldset></code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0xXMY4R9KV5WR0S4VO4CuKYRMlG6uUCJPK+louFaS1M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Disabled login fieldset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>Chris<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Archetype: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Wookie<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Disabled fieldset sample" id="frame_disabled_fieldset" width="100%" height="110" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/fieldset/runner.html?id=disabled_fieldset" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="heading_elements#sectioning_root">sectioning root</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form-associated_content">form-associated</a> element, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> An optional <a href="legend"><code><legend></code></a> element, followed by flow content. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</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/form-elements.html#the-fieldset-element">HTML Standard <br><small># the-fieldset-element</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>fieldset</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://developer.microsoft.com/microsoft-edge/platform/issues/4511145/">bug 4511145</a>.</details></td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤15</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Before version 86, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Before version 14.0, this element did not support <code>flexbox</code> and <code>grid</code> layouts within this element. See <a href="https://crbug.com/262679">bug 262679</a>.</details></td> +</tr> +<tr> +<th><code>disabled</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes"><details><summary>12</summary>Does not work with nested fieldsets. For example: <code><fieldset disabled><fieldset><!--Still enabled--></fieldset></fieldset></code></details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Not all form control descendants of a disabled fieldset are properly disabled in IE11; see IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/817488">bug 817488: input[type='file'] not disabled inside disabled fieldset</a> and IE <a href="https://connect.microsoft.com/IE/feedbackdetail/view/962368/can-still-edit-input-type-text-within-fieldset-disabled">bug 962368: Can still edit input[type='text'] within fieldset[disabled]</a>.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>form</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">19</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The <a href="legend"><code><legend></code></a> element</li> <li>The <a href="input"><code><input></code></a> element</li> <li>The <a href="label"><code><label></code></a> element</li> <li>The <a href="form"><code><form></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/fieldset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset</a> + </p> +</div> diff --git a/devdocs/html/element%2Ffigcaption.html b/devdocs/html/element%2Ffigcaption.html new file mode 100644 index 00000000..87703d5e --- /dev/null +++ b/devdocs/html/element%2Ffigcaption.html @@ -0,0 +1,62 @@ +<header><h1><figcaption>: The Figure Caption element</h1></header><div class="section-content"><p>The <code><figcaption></code> <a href="../index">HTML</a> element represents a caption or legend describing the rest of the contents of its parent <a href="figure"><code><figure></code></a> element.</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/figcaption.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Please see the <a href="figure"><code><figure></code></a> page for examples on <code><figcaption></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="figure"><code><figure></code></a> element; the <code><figcaption></code> element must be its first or last child. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/grouping-content.html#the-figcaption-element">HTML Standard <br><small># the-figcaption-element</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>figcaption</code></th> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5.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">11</td> +<td class="bc-supports-yes">5</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>The <a href="figure"><code><figure></code></a> element.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/figcaption" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption</a> + </p> +</div> diff --git a/devdocs/html/element%2Ffigure.html b/devdocs/html/element%2Ffigure.html new file mode 100644 index 00000000..bdfbc04b --- /dev/null +++ b/devdocs/html/element%2Ffigure.html @@ -0,0 +1,148 @@ +<header><h1><figure>: The Figure with Optional Caption element</h1></header><div class="section-content"><p>The <code><figure></code> <a href="../index">HTML</a> element represents self-contained content, potentially with an optional caption, which is specified using the <a href="figcaption"><code><figcaption></code></a> element. The figure, its caption, and its contents are referenced as a single unit.</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/figure.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Usually a <code><figure></code> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.</li> <li>A caption can be associated with the <code><figure></code> element by inserting a <a href="figcaption"><code><figcaption></code></a> inside it (as the first or the last child). The first <code><figcaption></code> element found in the figure is presented as the figure's caption.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="images">Images</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="o1q/E3REDLw306plzB83vO6ZWS5fNRZlDiVu0dSH0g8=" data-language="html"><span class="token comment"><!-- Just an image --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon-192x192.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The beautiful MDN logo.<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Image with a caption --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon-192x192.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The beautiful MDN logo.<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>MDN Logo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Images sample" id="frame_images" width="100%" height="375" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/figure/runner.html?id=images" loading="lazy"></iframe> +</div> +</div> +<h3 id="code_snippets">Code snippets</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="GDuA+a9AAyewocWxcj/sTXAFDnZQfnLnE9FHsWLAjQI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Get browser details using <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>navigator<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName + "; "; + txt+= "Browser Name: " + navigator.appName + "; "; + txt+= "Browser Version: " + navigator.appVersion + "; "; + txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; + txt+= "Platform: " + navigator.platform + "; "; + txt+= "User-agent header: " + navigator.userAgent + "; "; + console.log("NavigatorExample", txt); +} + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Code snippets sample" id="frame_code_snippets" width="100%" height="250" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/figure/runner.html?id=code_snippets" loading="lazy"></iframe> +</div> +</div> +<h3 id="quotations">Quotations</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="OZ8Q0s04Ec8i2OJkcJBQ76Rwn77YWkYDvhFMv+3C+p8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>Edsger Dijkstra:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> + If debugging is the process of removing software bugs, then programming must + be the process of putting them in. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Quotations sample" id="frame_quotations" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/figure/runner.html?id=quotations" loading="lazy"></iframe> +</div> +</div> +<h3 id="poems">Poems</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="uZnRPtdU8Eyp3yfKjlVSlx26f8+8+F+pKKTtqrR+blk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">white-space</span><span class="token punctuation">:</span>pre</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the + green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and + yet no footing seen: Love is a spirit all compact of fire, Not gross to + sink, but light, and will aspire. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>Venus and Adonis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>, by William Shakespeare<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Poems sample" id="frame_poems" width="100%" height="250" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/figure/runner.html?id=poems" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> A <a href="figcaption"><code><figcaption></code></a> element, followed by <a href="../content_categories#flow_content">flow content</a>; or flow content followed by a <a href="figcaption"><code><figcaption></code></a> element; or flow content. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">Flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/figure_role">figure</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> With no <a href="figcaption">figcaption </a>descendant: <a href="https://www.w3.org/TR/html-aria/#dfn-any-role" target="_blank">any</a>, otherwise no permitted roles </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/grouping-content.html#the-figure-element">HTML Standard <br><small># the-figure-element</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>figure</code></th> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5.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">11</td> +<td class="bc-supports-yes">5</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>The <a href="figcaption"><code><figcaption></code></a> element.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/figure" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure</a> + </p> +</div> diff --git a/devdocs/html/element%2Ffont.html b/devdocs/html/element%2Ffont.html new file mode 100644 index 00000000..c1951033 --- /dev/null +++ b/devdocs/html/element%2Ffont.html @@ -0,0 +1,112 @@ +<header><h1><font></h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><font></code> <a href="../index">HTML</a> element defines the font size, color and face for its content.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Do not use this element. Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts">Fonts</a> properties to style text.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="color"> +<a href="#color"><code>color</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</p> </dd> <dt id="face"> +<a href="#face"><code>face</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</p> </dd> <dt id="size"> +<a href="#size"><code>size</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the font size as either a numeric or relative value. Numeric values range from <code>1</code> to <code>7</code> with <code>1</code> being the smallest and <code>3</code> the default. It can be defined using a relative value, like <code>+2</code> or <code>-3</code>, which sets it relative to <code>3</code>, the default value.</p> </dd> </dl> +</div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a> interface.</p></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/obsolete.html#font">HTML Standard <br><small># font</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>font</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>color</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>face</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>size</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/font" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font</a> + </p> +</div> diff --git a/devdocs/html/element%2Ffooter.html b/devdocs/html/element%2Ffooter.html new file mode 100644 index 00000000..53884150 --- /dev/null +++ b/devdocs/html/element%2Ffooter.html @@ -0,0 +1,101 @@ +<header><h1><footer></h1></header><div class="section-content"><p>The <code><footer></code> <a href="../index">HTML</a> element represents a footer for its nearest ancestor <a href="../content_categories#sectioning_content">sectioning content</a> or <a href="heading_elements#sectioning_root">sectioning root</a> element. A <code><footer></code> typically contains information about the author of the section, copyright data or links to related documents.</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/footer.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>, but with no <code><footer></code> or <a href="header"><code><header></code></a> descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. Note that a <code><footer></code> element must not be a descendant of an <a href="address"><code><address></code></a>, <a href="header"><code><header></code></a> or another <code><footer></code> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role">contentinfo</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a> if a descendant of an <a href="article">article</a>, <a href="aside">aside</a>, <a href="main">main</a>, <a href="nav">nav</a> or <a href="section">section</a> element, or an element with <code>role=<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/article_role">article</a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role">complementary</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role">main</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">navigation</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role">region</a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Enclose information about the author in an <a href="address"><code><address></code></a> element that can be included into the <code><footer></code> element.</li> <li>When the nearest ancestor sectioning content or sectioning root element is the body element the footer applies to the whole page.</li> <li>The <code><footer></code> element is not sectioning content and therefore doesn't introduce a new section in the <a href="heading_elements">outline</a>.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XP1GJTeWpWI4jRvXabOj0QBznJRPl5tq2G0tFdw9HeI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>FIFA World Cup top goalscorers<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Miroslav Klose, 16<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ronaldo Nazário, 15<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Gerd Müller, 14<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span> + Copyright © 2023 Football History Archives. All Rights Reserved. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="u1v2fsaNt5NuCyxY6BzrznMfJ79vcEC6rW+QIAkFQPU=" data-language="css"><span class="token selector">footer</span> <span class="token punctuation">{</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #abbaba<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/footer/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Prior to the release of Safari 13, the <code>contentinfo</code> <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks">landmark role</a> was not properly exposed by <a href="https://help.apple.com/voiceover/info/guide/" target="_blank">VoiceOver</a>. If needing to support legacy Safari browsers, add <code>role="contentinfo"</code> to the <code>footer</code> element to ensure the landmark will be properly exposed.</p> <ul> <li>Related: <a href="https://webkit.org/b/146930" target="_blank">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a> +</li> </ul> +</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/sections.html#the-footer-element">HTML Standard <br><small># the-footer-element</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>footer</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="nav"><code><nav></code></a>, <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="section"><code><section></code></a>, <a href="address"><code><address></code></a>;</li> <li><a href="heading_elements">Using HTML sections and outlines</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role">ARIA: Contentinfo role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/footer" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer</a> + </p> +</div> diff --git a/devdocs/html/element%2Fform.html b/devdocs/html/element%2Fform.html new file mode 100644 index 00000000..73813bd6 --- /dev/null +++ b/devdocs/html/element%2Fform.html @@ -0,0 +1,292 @@ +<header><h1><form>: The Form element</h1></header><div class="section-content"><p>The <code><form></code> <a href="../index">HTML</a> element represents a document section containing interactive controls for submitting information.</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/form.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It is possible to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> to style a <code><form></code> element based on whether the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>elements</code></a> inside the form are valid.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="accept"> +<a href="#accept"><code>accept</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Comma-separated <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type">content types</a> the server accepts.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <strong>This attribute has been deprecated and should not be used.</strong> Instead, use the <a href="input#accept"><code>accept</code></a> attribute on <code><input type=file></code> elements.</p> </div> </dd> <dt id="accept-charset"><a href="#accept-charset"><code>accept-charset</code></a></dt> <dd> <p> Space-separated <a href="https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding">character encodings</a> the server accepts. The browser uses them in the order in which they are listed. The default value means <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding">the same encoding as the page</a>. (In previous versions of HTML, character encodings could also be delimited by commas.) </p> </dd> <dt id="autocapitalize"> +<a href="#autocapitalize"><code>autocapitalize</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>A nonstandard attribute used by iOS Safari that controls how textual form elements should be automatically capitalized. <code>autocapitalize</code> attributes on a form elements override it on <code><form></code>. Possible values:</p> <ul> <li> +<code>none</code>: No automatic capitalization.</li> <li> +<code>sentences</code> (default): Capitalize the first letter of each sentence.</li> <li> +<code>words</code>: Capitalize the first letter of each word.</li> <li> +<code>characters</code>: Capitalize all characters — that is, uppercase.</li> </ul> </dd> <dt id="autocomplete"><a href="#autocomplete"><code>autocomplete</code></a></dt> <dd> <p>Indicates whether input elements can by default have their values automatically completed by the browser. <code>autocomplete</code> attributes on form elements override it on <code><form></code>. Possible values:</p> <ul> <li> +<code>off</code>: The browser may not automatically complete entries. (Browsers tend to ignore this for suspected login forms; see <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a>.)</li> <li> +<code>on</code>: The browser may automatically complete entries.</li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of the form. The value must not be the empty string, and must be unique among the <code>form</code> elements in the forms collection that it is in, if any.</p> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p>Controls the annotations and what kinds of links the form creates. Annotations include <a href="../attributes/rel#external"><code>external</code></a>, <a href="../attributes/rel#nofollow"><code>nofollow</code></a>, <a href="../attributes/rel#opener"><code>opener</code></a>, <a href="../attributes/rel#noopener"><code>noopener</code></a>, and <a href="../attributes/rel#noreferrer"><code>noreferrer</code></a>. Link types include <a href="../attributes/rel#help"><code>help</code></a>, <a href="../attributes/rel#prev"><code>prev</code></a>, <a href="../attributes/rel#next"><code>next</code></a>, <a href="../attributes/rel#search"><code>search</code></a>, and <a href="../attributes/rel#license"><code>license</code></a>. The <a href="../attributes/rel"><code>rel</code></a> value is a space-separated list of these enumerated values.</p> </dd> </dl> +</div> +<h3 id="attributes_for_form_submission">Attributes for form submission</h3> +<div class="section-content"> +<p>The following attributes control behavior during form submission.</p> <dl> <dt id="action"><a href="#action"><code>action</code></a></dt> <dd> <p>The URL that processes the form submission. This value can be overridden by a <a href="button#formaction"><code>formaction</code></a> attribute on a <a href="button"><code><button></code></a>, <a href="input/submit"><code><input type="submit"></code></a>, or <a href="input/image"><code><input type="image"></code></a> element. This attribute is ignored when <code>method="dialog"</code> is set.</p> </dd> <dt id="enctype"><a href="#enctype"><code>enctype</code></a></dt> <dd> <p>If the value of the <code>method</code> attribute is <code>post</code>, <code>enctype</code> is the <a href="https://en.wikipedia.org/wiki/Mime_type" target="_blank">MIME type</a> of the form submission. Possible values:</p> <ul> <li> +<code>application/x-www-form-urlencoded</code>: The default value.</li> <li> +<code>multipart/form-data</code>: Use this if the form contains <a href="input"><code><input></code></a> elements with <code>type=file</code>.</li> <li> +<code>text/plain</code>: Useful for debugging purposes.</li> </ul> <p>This value can be overridden by <a href="button#formenctype"><code>formenctype</code></a> attributes on <a href="button"><code><button></code></a>, <a href="input/submit"><code><input type="submit"></code></a>, or <a href="input/image"><code><input type="image"></code></a> elements.</p> </dd> <dt id="method"><a href="#method"><code>method</code></a></dt> <dd> <p> The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> method to submit the form with. The only allowed methods/values are (case insensitive): </p> <ul> <li> +<code>post</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a> method; form data sent as the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request/body">request body</a>.</li> <li> +<code>get</code> (default): The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a>; form data appended to the <code>action</code> URL with a <code>?</code> separator. Use this method when the form <a href="https://developer.mozilla.org/en-US/docs/Glossary/Idempotent">has no side effects</a>.</li> <li> +<code>dialog</code>: When the form is inside a <a href="dialog"><code><dialog></code></a>, closes the dialog and causes a <code>submit</code> event to be fired on submission, without submitting data or clearing the form.</li> </ul> <p>This value is overridden by <a href="button#formmethod"><code>formmethod</code></a> attributes on <a href="button"><code><button></code></a>, <a href="input/submit"><code><input type="submit"></code></a>, or <a href="input/image"><code><input type="image"></code></a> elements.</p> </dd> <dt id="novalidate"><a href="#novalidate"><code>novalidate</code></a></dt> <dd> <p>This Boolean attribute indicates that the form shouldn't be validated when submitted. If this attribute is not set (and therefore the form <strong><em>is</em></strong> validated), it can be overridden by a <a href="button#formnovalidate"><code>formnovalidate</code></a> attribute on a <a href="button"><code><button></code></a>, <a href="input/submit"><code><input type="submit"></code></a>, or <a href="input/image"><code><input type="image"></code></a> element belonging to the form.</p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p>Indicates where to display the response after submitting the form. It is a name/keyword for a <em>browsing context</em> (for example, tab, window, or iframe). The following keywords have special meanings:</p> <ul> <li> +<code>_self</code> (default): Load into the same browsing context as the current one.</li> <li> +<code>_blank</code>: Load into a new unnamed browsing context. This provides the same behavior as setting <a href="#rel"><code>rel="noopener"</code></a> which does not set <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a>.</li> <li> +<code>_parent</code>: Load into the parent browsing context of the current one. If no parent, behaves the same as <code>_self</code>.</li> <li> +<code>_top</code>: Load into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one and has no parent). If no parent, behaves the same as <code>_self</code>.</li> </ul> <p>This value can be overridden by a <a href="button#formtarget"><code>formtarget</code></a> attribute on a <a href="button"><code><button></code></a>, <a href="input/submit"><code><input type="submit"></code></a>, or <a href="input/image"><code><input type="image"></code></a> element.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sgoC2PpCpEoHvF8uA7Pgbk3UfBmveJzLc6BlFK7Dqzo=" data-language="html"><span class="token comment"><!-- Form which will send a GET request to the current URL --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>get<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Name: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submitted-name<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Form which will send a POST request to the current URL --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Name: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submitted-name<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Form with fieldset, legend, and label --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Do you agree to the terms?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>yes<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> Yes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<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>no<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> No<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/form/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#palpable_content">palpable content</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>, but not containing <code><form></code> elements</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role">form</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role">search</a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</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/forms.html#the-form-element">HTML Standard <br><small># the-form-element</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>form</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>accept</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>accept-charset</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>action</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autocapitalize</code></th> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-yes"><details><summary>14</summary>The Google Chrome UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes"><details><summary>15</summary>The Opera UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Opera might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>The Google Chrome UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>The Google Chrome UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>14</summary>The Opera UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Opera might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>The Samsung Internet UI for auto-complete request varies, depending on whether <code>autocomplete</code> is set to <code>off</code> on <code><input></code> elements as well as their form. Specifically, when a form has <code>autocomplete</code> set to <code>off</code> and its <code><input></code> element's <code>autocomplete</code> attribute is not set, then if the user asks for autofill suggestions for the <code><input></code> element, Samsung Internet might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have <code>autocomplete</code> set to <code>off</code>, the browser will not display that message. For this reason, you should set <code>autocomplete</code> to <code>off</code> for each <code><input></code> that has custom auto-completion.</details></td> +</tr> +<tr> +<th><code>enctype</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>method</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>novalidate</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rel</code></th> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">21.0</td> +</tr> +<tr> +<th><code>target</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li>Other elements that are used when creating forms: <a href="button"><code><button></code></a>, <a href="datalist"><code><datalist></code></a>, <a href="fieldset"><code><fieldset></code></a>, <a href="input"><code><input></code></a>, <a href="label"><code><label></code></a>, <a href="legend"><code><legend></code></a>, <a href="meter"><code><meter></code></a>, <a href="optgroup"><code><optgroup></code></a>, <a href="option"><code><option></code></a>, <a href="output"><code><output></code></a>, <a href="progress"><code><progress></code></a>, <a href="select"><code><select></code></a>, <a href="textarea"><code><textarea></code></a>.</li> <li>Getting a list of the elements in the form: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role">ARIA: Form role</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role">ARIA: Search role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/form" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form</a> + </p> +</div> diff --git a/devdocs/html/element%2Fframe.html b/devdocs/html/element%2Fframe.html new file mode 100644 index 00000000..085421d9 --- /dev/null +++ b/devdocs/html/element%2Fframe.html @@ -0,0 +1,199 @@ +<header><h1><frame></h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><frame></code> <a href="../index">HTML</a> element defines a particular area in which another HTML document can be displayed. A frame should be used within a <a href="frameset"><code><frameset></code></a>.</p> <p>Using the <code><frame></code> element is not encouraged because of certain disadvantages such as performance problems and lack of accessibility for users with screen readers. Instead of the <code><frame></code> element, <a href="iframe"><code><iframe></code></a> may be preferred.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="src"> +<a href="#src"><code>src</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the document that will be displayed by the frame.</p> </dd> <dt id="name"> +<a href="#name"><code>name</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used for labeling frames. Without labeling, every link will open in the frame that it's in – the closest parent frame. See the <a href="a#target"><code>target</code></a> attribute for more information.</p> </dd> <dt id="noresize"> +<a href="#noresize"><code>noresize</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute prevents resizing of frames by users.</p> </dd> <dt id="scrolling"> +<a href="#scrolling"><code>scrolling</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the existence of a scrollbar. If this attribute is not used, the browser adds a scrollbar when necessary. There are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it <em>is</em> necessary.</p> </dd> <dt id="marginheight"> +<a href="#marginheight"><code>marginheight</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the height of the margin between frames.</p> </dd> <dt id="marginwidth"> +<a href="#marginwidth"><code>marginwidth</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the width of the margin between frames.</p> </dd> <dt id="frameborder"> +<a href="#frameborder"><code>frameborder</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute allows you to specify a frame's border.</p> </dd> </dl> +</div> +<h2 id="example">Example</h2> + +<h3 id="a_frameset_document">A frameset document</h3> +<div class="section-content"> +<p>A frameset document has a <a href="frameset"><code><frameset></code></a> element instead of a <a href="body"><code><body></code></a> element. The <code><frame></code> elements are placed within the <code><frameset></code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SpLGjzNkq/ocs676fZDnt27RQmBOZFvhW30gXqzO3WI=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Document metadata goes here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400, 500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/iframe<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/frame<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you want to embed another HTML page into the <a href="body"><code><body></code></a> of a document, use an <a href="iframe"><code><iframe></code></a> element.</p> +</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/obsolete.html#frame">HTML Standard <br><small># frame</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>frame</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>frameborder</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginheight</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginwidth</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>noresize</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scrolling</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>src</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="frameset"><code><frameset></code></a></li> <li><a href="iframe"><code><iframe></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/frame" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frame</a> + </p> +</div> diff --git a/devdocs/html/element%2Fframeset.html b/devdocs/html/element%2Fframeset.html new file mode 100644 index 00000000..3ad622ed --- /dev/null +++ b/devdocs/html/element%2Fframeset.html @@ -0,0 +1,114 @@ +<header><h1><frameset></h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><frameset></code> <a href="../index">HTML</a> element is used to contain <a href="frame"><code><frame></code></a> elements.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Because the use of frames is now discouraged in favor of using <a href="iframe"><code><iframe></code></a>, this element is not typically used by modern websites.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cols"> +<a href="#cols"><code>cols</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the number and size of horizontal spaces in a frameset.</p> </dd> <dt id="rows"> +<a href="#rows"><code>rows</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the number and size of vertical spaces in a frameset.</p> </dd> </dl> +</div> +<h2 id="example">Example</h2> + +<h3 id="a_frameset_document">A frameset document</h3> +<div class="section-content"> +<p>A frameset document has a <code><frameset></code> element instead of a <a href="body"><code><body></code></a> element. The <a href="frame"><code><frame></code></a> elements are placed within the <code><frameset></code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="AwmpgcEqEiowID+telj0ACRs1U1I9hau43QcctUtJgg=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Document metadata goes here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50%, 50%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/iframe<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/frame<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you want to embed another HTML page into the <a href="body"><code><body></code></a> of a document, use an <a href="iframe"><code><iframe></code></a> element.</p> +</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/obsolete.html#frameset">HTML Standard <br><small># frameset</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>frameset</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cols</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rows</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="frame"><code><frame></code></a></li> <li><a href="iframe"><code><iframe></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/frameset" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset</a> + </p> +</div> diff --git a/devdocs/html/element%2Fhead.html b/devdocs/html/element%2Fhead.html new file mode 100644 index 00000000..4597cb8d --- /dev/null +++ b/devdocs/html/element%2Fhead.html @@ -0,0 +1,93 @@ +<header><h1><head>: The Document Metadata (Header) element</h1></header><div class="section-content"> +<p>The <code><head></code> <a href="../index">HTML</a> element contains machine-readable information (<a href="https://developer.mozilla.org/en-US/docs/Glossary/Metadata">metadata</a>) about the document, like its <a href="title">title</a>, <a href="script">scripts</a>, and <a href="style">style sheets</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <code><head></code> primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the <a href="header"><code><header></code></a> element.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="profile"> +<a href="#profile"><code>profile</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/URI">URI</a>s of one or more metadata profiles, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/Whitespace">white space</a>.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yXjwe/c/5BBR2/0Xj76DfRIM40/zDF5hKNrUillhYE0=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <p> If the document is an <a href="iframe"><code><iframe></code></a> <a href="iframe#srcdoc"><code>srcdoc</code></a> document, or if title information is available from a higher level protocol (like the subject line in HTML email), zero or more elements of metadata content. </p> <p> Otherwise, one or more elements of metadata content where exactly one is a <a href="title"><code><title></code></a> element. </p> </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag may be omitted if the first thing inside the <code><head></code> element is an element.<br>The end tag may be omitted if the first thing following the <code><head></code> element is not a space character or a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>An <a href="html"><code><html></code></a> element, as its first child.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadElement"><code>HTMLHeadElement</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/semantics.html#the-head-element">HTML Standard <br><small># the-head-element</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>head</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>profile</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">1–16.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">14</td> +<td class="bc-supports-no">1–16.4</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>Elements that can be used inside the <code><head></code>: <ul> <li><a href="title"><code><title></code></a></li> <li><a href="base"><code><base></code></a></li> <li><a href="link"><code><link></code></a></li> <li><a href="style"><code><style></code></a></li> <li><a href="meta"><code><meta></code></a></li> <li><a href="script"><code><script></code></a></li> <li><a href="noscript"><code><noscript></code></a></li> <li><a href="template"><code><template></code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/head" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head</a> + </p> +</div> diff --git a/devdocs/html/element%2Fheader.html b/devdocs/html/element%2Fheader.html new file mode 100644 index 00000000..70bbebce --- /dev/null +++ b/devdocs/html/element%2Fheader.html @@ -0,0 +1,108 @@ +<header><h1><header></h1></header><div class="section-content"><p>The <code><header></code> <a href="../index">HTML</a> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.</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/header.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><header></code> element has an identical meaning to the site-wide <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role"><code>banner</code></a> landmark role, unless nested within sectioning content. Then, the <code><header></code> element is not a landmark.</p> <p>The <code><header></code> element can define a global site header, described as a <code>banner</code> in the accessibility tree. It usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page.</p> <p>Otherwise, it is a <code>section</code> in the accessibility tree, and usually contains the surrounding section's heading (an <code>h1</code> – <code>h6</code> element) and optional subheading, but this is <strong>not</strong> required.</p> +</div> +<h3 id="historical_usage">Historical Usage</h3> +<div class="section-content"><p>The <code><header></code> element originally existed at the very beginning of HTML for headings. It is seen in <a href="http://info.cern.ch/" target="_blank">the very first website</a>. At some point, headings became <a href="heading_elements"><code><h1></code> through <code><h6></code></a>, allowing <code><header></code> to be free to fill a different role.</p></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="page_header">Page Header</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="L7G//UQoT92KxgsueTIW6FV6GliHEvXaRlvwzGdZISw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Main Page Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-sm.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Page Header sample" id="frame_page_header" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/header/runner.html?id=page_header" loading="lazy"></iframe> +</div> +</div> +<h3 id="article_header">Article Header</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8qwCAfsFt1eZe7t6xqKtQ2bLcTo97qCPxkqbd0pjmU4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>The Planet Earth<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Posted on Wednesday, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-10-04<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4 October 2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> by + Jane Smith + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + We live on a planet that's blue and green, with so many things still unseen. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/the-planet-earth/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Continue reading…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Article Header sample" id="frame_article_header" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/header/runner.html?id=article_header" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility">Accessibility</h2> +<div class="section-content"><p>The <code><header></code> element defines a <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role"><code>banner</code></a> landmark when its context is the <a href="body"><code><body></code></a> element. The HTML header element is not considered a banner landmark when it is descendant of an <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="main"><code><main></code></a>, <a href="nav"><code><nav></code></a>, or <a href="section"><code><section></code></a> element.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>, but with no <code><header></code> or <a href="footer"><code><footer></code></a> descendant. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. Note that a <code><header></code> element must not be a descendant of an <a href="address"><code><address></code></a>, <a href="footer"><code><footer></code></a> or another <a href="header" aria-current="page"><code><header></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role">banner</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a> if a descendant of an <code><a href="article">article</a></code>, <code><a href="aside">aside</a></code>, <code><a href="main">main</a></code>, <code><a href="nav">nav</a></code> or <code><a href="section">section</a></code> element, or an element with <code>role=<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/article_role">article</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role">complementary</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role">main</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">navigation</a></code> or <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role">region</a></code> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/sections.html#the-header-element">HTML Standard <br><small># the-header-element</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>header</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="nav"><code><nav></code></a>, <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="footer"><code><footer></code></a>, <a href="section"><code><section></code></a>, <a href="address"><code><address></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/header" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header</a> + </p> +</div> diff --git a/devdocs/html/element%2Fheading_elements.html b/devdocs/html/element%2Fheading_elements.html new file mode 100644 index 00000000..6b3c829d --- /dev/null +++ b/devdocs/html/element%2Fheading_elements.html @@ -0,0 +1,171 @@ +<header><h1><h1>–<h6>: The HTML Section Heading elements</h1></header><div class="section-content"><p>The <code><h1></code> to <code><h6></code> <a href="../index">HTML</a> elements represent six levels of section headings. <code><h1></code> is the highest section level and <code><h6></code> is the lowest. By default, all heading elements create a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level</a> box in the layout, starting on a new line and taking up the full width available in their containing block.</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/h1-h6.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, heading content, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>These elements only include the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Heading information can be used by user agents to construct a table of contents for a document automatically.</li> <li>Do not use heading elements to resize text. Instead, use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size"><code>font-size</code></a> property.</li> <li>Do not skip heading levels: always start from <code><h1></code>, followed by <code><h2></code> and so on.</li> </ul></div> +<h3 id="avoid_using_multiple_h1_elements_on_one_page">Avoid using multiple <code><h1></code> elements on one page</h3> +<div class="section-content"> +<p>While using multiple <code><h1></code> elements on one page is allowed by the HTML standard (as long as they are not <a href="#nesting">nested</a>), this is not considered a best practice. A page should generally have a single <code><h1></code> element that describes the content of the page (similar to the document's <a href="title"><code><title> element</code></a>).</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Nesting multiple <code><h1></code> elements in nested <a href="../element#content_sectioning">sectioning elements</a> was allowed in older versions of the HTML standard. However, this was never considered a best practice and is now non-conforming. Read more in <a href="https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html" target="_blank">There Is No Document Outline Algorithm</a>.</p> </div> <p>Prefer using only one <code><h1></code> per page and <a href="#nesting">nest headings</a> without skipping levels.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="all_headings">All headings</h3> +<div class="section-content"> +<p>The following code shows all the heading levels, in use.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9bKrXasxxQvsi8ieaZehRoRpvBdzCV2RzPxKK3WFBbg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading level 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Heading level 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span><span class="token punctuation">></span></span>Heading level 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span><span class="token punctuation">></span></span>Heading level 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="All headings sample" id="frame_all_headings" width="280" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=all_headings" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_page">Example page</h3> +<div class="section-content"> +<p>The following code shows a few headings with some content under them.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/q/ebtQxmwHf0i0DJSBy/YOxhgozik1/K9oKgUa8csM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading elements<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Summary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Examples<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Example 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Example 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>See also<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some text here…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Example page sample" id="frame_example_page" width="280" height="480" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=example_page" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="navigation">Navigation</h3> +<div class="section-content"> +<p>A common navigation technique for users of screen reading software is to quickly jump from heading to heading in order to determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.</p> <p><strong>Don't do this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1xgyFjhXWCddMjfwMXZ9TLfCbTHjfBtWLxFuOuHWmrc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Heading level 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> +</pre> +</div> <p><strong>Prefer this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vkLI2f26Lj58rZ9ffPjxGfuSGyYKcAC+D+0LzrdqMyQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Heading level 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading level 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Heading level 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="nesting">Nesting</h4> <p>Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:</p> <ol> <li> +<code>h1</code> Beetles <ol> <li> +<code>h2</code> Etymology</li> <li> +<code>h2</code> Distribution and Diversity</li> <li> +<code>h2</code> Evolution <ol> <li> +<code>h3</code> Late Paleozoic</li> <li> +<code>h3</code> Jurassic</li> <li> +<code>h3</code> Cretaceous</li> <li> +<code>h3</code> Cenozoic</li> </ol> </li> <li> +<code>h2</code> External Morphology <ol> <li> +<code>h3</code> Head <ol> <li> +<code>h4</code> Mouthparts</li> </ol> </li> <li> +<code>h3</code> Thorax <ol> <li> +<code>h4</code> Prothorax</li> <li> +<code>h4</code> Pterothorax</li> </ol> </li> <li> +<code>h3</code> Legs</li> <li> +<code>h3</code> Wings</li> <li> +<code>h3</code> Abdomen</li> </ol> </li> </ol> </li> </ol> <p>When headings are nested, heading levels may be "skipped" when closing a subsection.</p> <ul> <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/" target="_blank">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%E2%80%94_create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" target="_blank">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%E2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" target="_blank">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html" target="_blank">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html" target="_blank">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h3 id="labeling_section_content">Labeling section content</h3> +<div class="section-content"> +<p>Another common navigation technique for users of screen reading software is to generate a list of <a href="../element#content_sectioning">sectioning content</a> and use it to determine the page's layout.</p> <p>Sectioning content can be labeled using a combination of the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> and <a href="../global_attributes#id"><code>id</code></a> attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.</p> <h4 id="sectioning_content_examples">Sectioning content examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="h5MhSqZruH8k0uFBY91EUCvMBA2rnP7o9m1biyT+JxM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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>primary-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- navigation items --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- page content --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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>footer-navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- navigation items --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Sectioning content examples sample" id="frame_sectioning_content_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/Heading_Elements/runner.html?id=sectioning_content_examples" loading="lazy"></iframe> +</div> <p>In this example, screen reading technology would announce that there are two <a href="nav"><code><nav></code></a> sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each <code>nav</code> element's contents to determine their purpose.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby">Using the aria-labelledby attribute</a></li> <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby" target="_blank">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> </ul> +</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/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">HTML Standard <br><small># the-h1,-h2,-h3,-h4,-h5,-and-h6-elements</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>Heading_Elements</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="p"><code><p></code></a></li> <li><a href="div"><code><div></code></a></li> <li><a href="section"><code><section></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Heading_Elements" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements</a> + </p> +</div> diff --git a/devdocs/html/element%2Fhgroup.html b/devdocs/html/element%2Fhgroup.html new file mode 100644 index 00000000..2649c60b --- /dev/null +++ b/devdocs/html/element%2Fhgroup.html @@ -0,0 +1,92 @@ +<header><h1><hgroup></h1></header><div class="section-content"><p>The <code><hgroup></code> <a href="../index">HTML</a> element represents a heading and related content. It groups a single <a href="heading_elements"><code><h1>–<h6></code></a> element with one or more <a href="p"><code><p></code></a>.</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/hgroup.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><hgroup></code> element allows the grouping of a heading with any secondary content, such as subheadings, an alternative title, or tagline. Each of these types of content represented as a <code><p></code> element within the <code><hgroup></code>.</p> <p>The <code><hgroup></code> itself has no impact on the document outline of a web page. Rather, the single allowed heading within the <code><hgroup></code> contributes to the document outline.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TbnItoQSXiOZuaG6zdirz0/BUHupCTlfYnzgr+hRcsU=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML Standard<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hgroup</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>document-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>HTML: Living Standard<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Last Updated 12 July 2022<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>hgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some intro to the document.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Table of contents<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>toc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + … + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>First section<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Some intro to the first section.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/hgroup/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"><p>The <code><hgroup></code> presently has no strong accessibility semantics. The content of the element (a heading and optional paragraphs) is what is exposed by browser accessibility APIs.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, heading content, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="p"><code><p></code></a> elements, followed by one <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, or <a href="heading_elements">h6</a> element, followed by zero or more <a href="p"><code><p></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/sections.html#the-hgroup-element">HTML Standard <br><small># the-hgroup-element</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>hgroup</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">2.2</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">4.2</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>Others section-related elements: <a href="body"><code><body></code></a>, <a href="article"><code><article></code></a>, <a href="section"><code><section></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="nav"><code><nav></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a>;</li> <li> +<a href="heading_elements">Sections and outlines of an HTML document</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/hgroup" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup</a> + </p> +</div> diff --git a/devdocs/html/element%2Fhr.html b/devdocs/html/element%2Fhr.html new file mode 100644 index 00000000..e47ef5c9 --- /dev/null +++ b/devdocs/html/element%2Fhr.html @@ -0,0 +1,176 @@ +<header><h1><hr>: The Thematic Break (Horizontal Rule) element</h1></header><div class="section-content"><p>The <code><hr></code> <a href="../index">HTML</a> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.</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/hr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Sets the alignment of the rule on the page. If no value is specified, the default value is <code>left</code>.</p> </dd> <dt id="color"> +<a href="#color"><code>color</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Sets the color of the rule through color name or hexadecimal value.</p> </dd> <dt id="noshade"> +<a href="#noshade"><code>noshade</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Sets the rule to have no shading.</p> </dd> <dt id="size"> +<a href="#size"><code>size</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Sets the height, in pixels, of the rule.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Sets the length of the rule on the page through a pixel or percentage value.</p> </dd> </dl> +</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="QpIg03uP5cuR12WLHhTEftwyT8UeZqdaX/D1T/JfcCY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first paragraph of text. This is the first paragraph of text. This + is the first paragraph of text. This is the first paragraph of text. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the second paragraph of text. This is the second paragraph of text. + This is the second paragraph of text. This is the second paragraph of text. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/hr/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>It must have start tag, but must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role"><code>separator</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> +</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHRElement"><code>HTMLHRElement</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/grouping-content.html#the-hr-element">HTML Standard <br><small># the-hr-element</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>hr</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">3</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> +<tr> +<th><code>align</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> +<tr> +<th><code>color</code></th> +<td class="bc-supports-yes">33</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">20</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">4.4.3</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>noshade</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> +<tr> +<th><code>size</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> +<tr> +<th><code>width</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="p"><code><p></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/hr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr</a> + </p> +</div> diff --git a/devdocs/html/element%2Fhtml.html b/devdocs/html/element%2Fhtml.html new file mode 100644 index 00000000..477b1b45 --- /dev/null +++ b/devdocs/html/element%2Fhtml.html @@ -0,0 +1,131 @@ +<header><h1><html>: The HTML Document / Root element</h1></header><div class="section-content"> +<p>The <code><html></code> <a href="../index">HTML</a> element represents the root (top-level element) of an HTML document, so it is also referred to as the <em>root element</em>. All other elements must be descendants of this element.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> One <a href="head"><code><head></code></a> element, followed by one <a href="body"><code><body></code></a> element. </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag may be omitted if the first thing inside the <code><html></code> element is not a comment.<br>The end tag may be omitted if the <code><html></code> element is not immediately followed by a comment. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>None. This is the root element of a document.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role">document</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHtmlElement"><code>HTMLHtmlElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="manifest"> +<a href="#manifest"><code>manifest</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Specifies the <a href="https://developer.mozilla.org/en-US/docs/Glossary/URI">URI</a> of a resource manifest indicating resources that should be cached locally.</p> </dd> <dt id="version"> +<a href="#version"><code>version</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Specifies the version of the HTML <a href="https://developer.mozilla.org/en-US/docs/Glossary/Doctype">Document Type Definition</a> that governs the current document. This attribute is not needed, because it is redundant with the version information in the document type declaration.</p> </dd> <dt id="xmlns"><a href="#xmlns"><code>xmlns</code></a></dt> <dd> <p>Specifies the <a href="https://developer.mozilla.org/en-US/docs/Glossary/XML">XML</a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Namespace">Namespace</a> of the document. Default value is <code>"http://www.w3.org/1999/xhtml"</code>. This is required in documents parsed with XML <a href="https://developer.mozilla.org/en-US/docs/Glossary/Parser">parsers</a>, and optional in text/html documents.</p> </dd> </dl> +</div> +<h2 id="example">Example</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/YF9YBsPYWRtU0XpypCWjUl+FBKomLdjHhoTDXnXwiM=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- … --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- … --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>While HTML does not require authors to specify <code><html></code> element start and ending tags, it is important for authors to do so as it will allow them to specify the <a href="../global_attributes#lang"><code>lang</code></a> for the webpage. Providing a <code>lang</code> attribute with a valid language tag according to <a href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank">RFC 5646: Tags for Identifying Languages (also known as BCP 47)</a> on the <code><html></code> element will help screen reading technology determine the proper language to announce. The identifying language tag should describe the language used by the majority of the content of the page. Without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations.</p> <p>Including a valid <code>lang</code> declaration on the <code><html></code> element also ensures that important metadata contained in the page's <a href="head"><code><head></code></a>, such as the page's <a href="title"><code><title></code></a>, are also announced properly.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html" target="_blank">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1</a></li> </ul> +</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/semantics.html#the-html-element">HTML Standard <br><small># the-html-element</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>html</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">Yes</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> +<tr> +<th><code>manifest</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">3.5–84<details><summary>3</summary>Before version 3.5, Firefox ignores the <code>NETWORK</code> and <code>FALLBACK</code> sections of the cache manifest file.</details> +</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">10.6</td> +<td class="bc-supports-no">4–16.4</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">4–84</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no">3.2–16.4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>version</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>xmlns</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">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">4</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>MathML top-level element: <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code> +</li> <li>SVG top-level element: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/html" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html</a> + </p> +</div> diff --git a/devdocs/html/element%2Fi.html b/devdocs/html/element%2Fi.html new file mode 100644 index 00000000..7fbed88f --- /dev/null +++ b/devdocs/html/element%2Fi.html @@ -0,0 +1,79 @@ +<header><h1><i>: The Idiomatic Text element</h1></header><div class="section-content"><p>The <code><i></code> <a href="../index">HTML</a> element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <code><i></code> naming of this element.</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/i.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Use the <code><i></code> element for text that is set off from the normal prose for readability reasons. This would be a range of text with different semantic meaning than the surrounding text. Among the use cases for the <code><i></code> element are spans of text representing a different quality or mode of text, such as: <ul> <li>Alternative voice or mood</li> <li>Taxonomic designations (such as the genus and species "<em>Homo sapiens</em>")</li> <li>Idiomatic terms from another language (such as "<em>et cetera</em>"); these should include the <a href="../global_attributes#lang"><code>lang</code></a> attribute to identify the language</li> <li>Technical terms</li> <li>Transliterations</li> <li>Thoughts (such as "She wondered, <em>What is this writer talking about, anyway?</em>")</li> <li>Ship or vessel names in Western writing systems (such as "They searched the docks for the <em>Empress of the Galaxy</em>, the ship to which they were assigned.")</li> </ul> </li> <li>In earlier versions of the HTML specification, the <code><i></code> element was merely a presentational element used to display text in italics, much like the <code><b></code> element was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance. A browser will typically still display the contents of the <code><i></code> element in italic type, but is, by definition, no longer required to do so. To display text in italic type, authors should use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style"><code>font-style</code></a> property.</li> <li>Be sure the text in question is not actually more appropriately marked up with another element. <ul> <li>Use <a href="em"><code><em></code></a> to indicate stress emphasis.</li> <li>Use <a href="strong"><code><strong></code></a> to indicate importance, seriousness, or urgency.</li> <li>Use <a href="mark"><code><mark></code></a> to indicate relevance.</li> <li>Use <a href="cite"><code><cite></code></a> to mark up the name of a work, such as a book, play, or song.</li> <li>Use <a href="dfn"><code><dfn></code></a> to mark up the defining instance of a term.</li> </ul> </li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>This example demonstrates using the <code><i></code> element to mark text that is in another language.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PHmI/0yafArFd8LM2S9O2dl46U8y63Akk5NuGMk8T24=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The Latin phrase <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>la<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Veni, vidi, vici<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> is often mentioned in + music, art, and literature. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/i/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-i-element">HTML Standard <br><small># the-i-element</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>i</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="em"><code><em></code></a></li> <li>Other italicized elements: <a href="var"><code><var></code></a>, <a href="dfn"><code><dfn></code></a>, <a href="cite"><code><cite></code></a>, <a href="address"><code><address></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/i" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i</a> + </p> +</div> diff --git a/devdocs/html/element%2Fiframe.html b/devdocs/html/element%2Fiframe.html new file mode 100644 index 00000000..fd1b435e --- /dev/null +++ b/devdocs/html/element%2Fiframe.html @@ -0,0 +1,435 @@ +<header><h1><iframe>: The Inline Frame element</h1></header><div class="section-content"><p>The <code><iframe></code> <a href="../index">HTML</a> element represents a nested <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a>, embedding another HTML page into the current one.</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/iframe.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Each embedded browsing context has its own <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document">document</a> and allows URL navigations. The navigations of each embedded browsing context are linearized into the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History">session history</a> of the <em>topmost</em> browsing context. The browsing context that embeds the others is called the <em>parent browsing context</em>. The <em>topmost</em> browsing context — the one with no parent — is usually the browser window, represented by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window"><code>Window</code></a> object.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Because each browsing context is a complete document environment, every <code><iframe></code> in a page requires increased memory and other computing resources. While theoretically you can use as many <code><iframe></code>s as you like, check for performance problems.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="allow"><a href="#allow"><code>allow</code></a></dt> <dd> <p>Specifies a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy">Permissions Policy</a> for the <code><iframe></code>. The policy defines what features are available to the <code><iframe></code> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> A Permissions Policy specified by the <code>allow</code> attribute implements a further restriction on top of the policy specified in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy"><code>Permissions-Policy</code></a> header. It doesn't replace it.</p> </div> </dd> <dt id="allowfullscreen"><a href="#allowfullscreen"><code>allowfullscreen</code></a></dt> <dd> <p>Set to <code>true</code> if the <code><iframe></code> can activate fullscreen mode by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen"><code>requestFullscreen()</code></a> method.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is considered a legacy attribute and redefined as <code>allow="fullscreen"</code>.</p> </div> </dd> <dt id="allowpaymentrequest"> +<a href="#allowpaymentrequest"><code>allowpaymentrequest</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Set to <code>true</code> if a cross-origin <code><iframe></code> should be allowed to invoke the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> This attribute is considered a legacy attribute and redefined as <code>allow="payment"</code>.</p> </div> </dd> <dt id="credentialless"> +<a href="#credentialless"><code>credentialless</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Set to <code>true</code> to make the <code><iframe></code> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy"><code>Cross-Origin-Embedder-Policy</code></a> (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/IFrame_credentialless">IFrame credentialless</a> for more details.</p> </dd> <dt id="csp"> +<a href="#csp"><code>csp</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> enforced for the embedded resource. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/csp"><code>HTMLIFrameElement.csp</code></a> for details.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The height of the frame in CSS pixels. Default is <code>150</code>.</p> </dd> <dt id="loading"><a href="#loading"><code>loading</code></a></dt> <dd> <p>Indicates how the browser should load the iframe:</p> <ul> <li> +<code>eager</code>: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).</li> <li> +<code>lazy</code>: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.</li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>A targetable name for the embedded browsing context. This can be used in the <code>target</code> attribute of the <a href="a"><code><a></code></a>, <a href="form"><code><form></code></a>, or <a href="base"><code><base></code></a> elements; the <code>formtarget</code> attribute of the <a href="input"><code><input></code></a> or <a href="button"><code><button></code></a> elements; or the <code>windowName</code> parameter in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open"><code>window.open()</code></a> method.</p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> </dd> <dt id="sandbox"><a href="#sandbox"><code>sandbox</code></a></dt> <dd> <p>Controls the restrictions applied to the content embedded in the <code><iframe></code>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:</p> <ul> <li> +<code>allow-downloads</code>: Allows downloading files through an <a href="a"><code><a></code></a> or <a href="area"><code><area></code></a> element with the <a href="a#download">download</a> attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.</li> <li> +<code>allow-downloads-without-user-activation</code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr>: Allows for downloads to occur without a gesture from the user.</li> <li> +<code>allow-forms</code>: Allows the page to submit forms. If this keyword is not used, form will be displayed as normal, but submitting it will not trigger input validation, sending data to a web server or closing a dialog.</li> <li> +<code>allow-modals</code>: Allows the page to open modal windows by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"><code>Window.alert()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm"><code>Window.confirm()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/print"><code>Window.print()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt"><code>Window.prompt()</code></a>, while opening a <a href="dialog"><code><dialog></code></a> is allowed regardless of this keyword. It also allows the page to receive <a href="https://developer.mozilla.org/en-US/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a> event.</li> <li> +<code>allow-orientation-lock</code>: Lets the resource <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li> <li> +<code>allow-pointer-lock</code>: Allows the page to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>.</li> <li> +<code>allow-popups</code>: Allows popups (like from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open"><code>Window.open()</code></a>, <code>target="_blank"</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog"><code>Window.showModalDialog()</code></a>). If this keyword is not used, that functionality will silently fail.</li> <li> +<code>allow-popups-to-escape-sandbox</code>: Allows a sandboxed document to open new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to.</li> <li> +<code>allow-presentation</code>: Allows embedders to have control over whether an iframe can start a <a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li> <li> +<code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same-origin policy</a> (potentially preventing access to <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#cross-origin_data_storage_access">data storage/cookies</a> and some JavaScript APIs).</li> <li> +<code>allow-scripts</code>: Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.</li> <li> +<code>allow-storage-access-by-user-activation</code> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr>: Allows a document loaded in the <code><iframe></code> to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a> to request access to unpartitioned cookies.</li> <li> +<code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li> <li> +<code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li> <li> +<code>allow-top-navigation-to-custom-protocols</code>: Allows navigations to non-<code>http</code> protocols built into browser or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">registered by a website</a>. This feature is also activated by <code>allow-popups</code> or <code>allow-top-navigation</code> keyword.</li> </ul> <div class="notecard note" id="sect5"> <p><strong>Note:</strong></p> <ul> <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li> <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li> </ul> </div> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#inherited_origins">same-origin policy</a>. Also note that programmatically removing an <code><iframe></code>'s src attribute (e.g. via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a>) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</p> </dd> <dt id="srcdoc"><a href="#srcdoc"><code>srcdoc</code></a></dt> <dd> <p>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The width of the frame in CSS pixels. Default is <code>300</code>.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The alignment of this element with respect to the surrounding context.</p> </dd> <dt id="frameborder"> +<a href="#frameborder"><code>frameborder</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> to control <code><iframe></code> borders.</p> </dd> <dt id="longdesc"> +<a href="#longdesc"><code>longdesc</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</p> </dd> <dt id="marginheight"> +<a href="#marginheight"><code>marginheight</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The amount of space in pixels between the frame's content and its top and bottom borders.</p> </dd> <dt id="marginwidth"> +<a href="#marginwidth"><code>marginwidth</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The amount of space in pixels between the frame's content and its left and right borders.</p> </dd> <dt id="scrolling"> +<a href="#scrolling"><code>scrolling</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Indicates when the browser should provide a scrollbar for the frame:</p> <ul> <li> +<code>auto</code>: Only when the frame's content is larger than its dimensions.</li> <li> +<code>yes</code>: Always show a scrollbar.</li> <li> +<code>no</code>: Never show a scrollbar.</li> </ul> </dd> </dl> +</div> +<h2 id="scripting">Scripting</h2> +<div class="section-content"> +<p>Inline frames, like <a href="frame"><code><frame></code></a> elements, are included in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/frames"><code>window.frames</code></a> pseudo-array.</p> <p>With the DOM <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a> object, scripts can access the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window"><code>window</code></a> object of the framed resource via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow"><code>contentWindow</code></a> property. The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument"><code>contentDocument</code></a> property refers to the <code>document</code> inside the <code><iframe></code>, same as <code>contentWindow.document</code>.</p> <p>From the inside of a frame, a script can get a reference to its parent window with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/parent"><code>window.parent</code></a>.</p> <p>Script access to a frame's content is subject to the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><code>Window.postMessage()</code></a>.</p> +</div> +<h2 id="positioning_and_scaling">Positioning and scaling</h2> +<div class="section-content"><p>As a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a>, the position, alignment, and scaling of the embedded document within the <code><iframe></code> element's box, can be adjusted with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> properties.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="a_simple_iframe">A simple <iframe></h3> +<div class="section-content"> +<p>This example embeds the page at <a href="https://example.org" target="_blank">https://example.org</a> in an iframe.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1dYkOe7fKKNk0GCdsu5n/KZ8saQvnEli3HVS0rCRtJA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.org<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iframe Example 1<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="A simple iframe sample" id="frame_a_simple_iframe" width="640" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/iframe/runner.html?id=a_simple_iframe" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>People navigating with assistive technology such as a screen reader can use the <a href="../global_attributes/title"><code>title</code> attribute</a> on an <code><iframe></code> to label its content. The title's value should concisely describe the embedded content:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ja0X+4t4cPwx3xEKv5yE3Wu1Zl+f5YzxhlrFlNY5bw0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Wikipedia page for Avocados<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://en.wikipedia.org/wiki/Avocado<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Without this title, they have to navigate into the <code><iframe></code> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <code><iframe></code>s and/or if embeds contain interactive content like video or audio.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, embedded content, interactive content, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>img</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</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/iframe-embed-object.html#the-iframe-element">HTML Standard <br><small># the-iframe-element</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>iframe</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>The <code>resize</code> CSS property doesn't have any effect on this element due to <a href="https://bugzil.la/680823">bug 680823</a>.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤15</td> +<td class="bc-supports-yes"><details><summary>≤4</summary>Safari has a <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the <code>iframe</code> element was hidden when added to the page. <code>iframeElement.src = iframeElement.src</code> should cause it to load the iframe.</details></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>The <code>resize</code> CSS property doesn't have any effect on this element due to <a href="https://bugzil.la/680823">bug 680823</a>.</details></td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes"><details><summary>≤3.2</summary>Safari has a <a href="https://www.quirksmode.org/bugreports/archives/2005/02/hidden_iframes.html">bug</a> that prevents iframes from loading if the <code>iframe</code> element was hidden when added to the page. <code>iframeElement.src = iframeElement.src</code> should cause it to load the iframe.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>allow</code></th> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">44</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>allowfullscreen</code></th> +<td class="bc-supports-yes">3817–38</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">189–18</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">2515–25</td> +<td class="bc-supports-yes">10.15.1</td> +<td class="bc-supports-yes">384.4–38</td> +<td class="bc-supports-yes">3818–38</td> +<td class="bc-supports-yes">189–18</td> +<td class="bc-supports-yes">2514–25</td> +<td class="bc-supports-yes"><details><summary>12</summary>Only available on iPad, not on iPhone.</details></td> +<td class="bc-supports-yes">3.01.0–3.0</td> +</tr> +<tr> +<th><code>allowpaymentrequest</code></th> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">56–83</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">56–83</td> +<td class="bc-supports-yes">44</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>credentialless</code></th> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21.0</td> +</tr> +<tr> +<th><code>external_protocol_urls_blocked</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>frameborder</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loading</code></th> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">55</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>longdesc</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginheight</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>marginwidth</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>sandbox</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scrolling</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>src</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>srcdoc</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>width</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">CSP: frame-ancestors</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/iframe" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe</a> + </p> +</div> diff --git a/devdocs/html/element%2Fimage.html b/devdocs/html/element%2Fimage.html new file mode 100644 index 00000000..4fc73b2a --- /dev/null +++ b/devdocs/html/element%2Fimage.html @@ -0,0 +1,55 @@ +<header><h1><image>: The Image element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> +<div class="notecard nonstandard" id="sect2"><p><strong>Non-standard:</strong> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p></div> <p> The <code><image></code> <a href="../index">HTML</a> element is an ancient and poorly supported precursor to the <a href="img"><code><img></code></a> element. <strong>It should not be used</strong>. </p> <p>Some browsers will attempt to automatically convert this into an <a href="img"><code><img></code></a> element, and may succeed if the <a href="img#src"><code>src</code></a> attribute is specified as well.</p> +</div> +<h2 id="specifications">Specifications</h2> +<div class="section-content"><p> This does not appear to have been part of any formal specification. It was mentioned in <a href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_21.html" target="_blank">HTML+ Discussion Document - Dave Raggett, November 8, 1993</a> (Section 5.9 - Images), but was not part of the first revision of <a href="https://datatracker.ietf.org/doc/html/draft-ietf-html-spec-00" target="_blank">HyperText Markup Language Specification - 2.0</a> in 1994. </p></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>image</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>1</summary>Before Firefox 22, creating an <image> element incorrectly resulted in an <code>HTMLSpanElement</code> object, instead of the expected <code>HTMLElement</code>.</details></td> +<td class="bc-supports-no">No</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>Before Firefox 22, creating an <image> element incorrectly resulted in an <code>HTMLSpanElement</code> object, instead of the expected <code>HTMLElement</code>.</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="img"><code><img></code></a>: The correct way to display an image in a document</li> <li> +<a href="picture"><code><picture></code></a>: A more powerful correct way to display an image in a document</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/image" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/image</a> + </p> +</div> diff --git a/devdocs/html/element%2Fimg.html b/devdocs/html/element%2Fimg.html new file mode 100644 index 00000000..4bf14c6b --- /dev/null +++ b/devdocs/html/element%2Fimg.html @@ -0,0 +1,529 @@ +<header><h1><img>: The Image Embed element</h1></header><div class="section-content"><p>The <code><img></code> <a href="../index">HTML</a> element embeds an image into the document.</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/img.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example shows usage of the <code><img></code> element:</p> <ul> <li>The <code>src</code> attribute is <strong>required</strong>, and contains the path to the image you want to embed.</li> <li>The <code>alt</code> attribute holds a textual replacement for the image, which is mandatory and <strong>incredibly useful</strong> for accessibility — screen readers read the attribute value out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.</li> </ul> <p>There are many other attributes to achieve various purposes:</p> <ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/<a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> control for security and privacy: see <a href="#crossorigin"><code>crossorigin</code></a> and <a href="#referrerpolicy"><code>referrerpolicy</code></a>.</li> <li>Use both <a href="#width"><code>width</code></a> and <a href="#height"><code>height</code></a> to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.</li> <li>Responsive image hints with <a href="#sizes"><code>sizes</code></a> and <a href="#srcset"><code>srcset</code></a> (see also the <a href="picture"><code><picture></code></a> element and our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li> </ul> +</div> +<h2 id="supported_image_formats">Supported image formats</h2> +<div class="section-content"> +<p>The HTML standard doesn't list what image formats to support, so <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agents</a> may support different formats.</p> <div class="notecard note" id="sect1"> <p> <strong>Note:</strong> The <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a> provides comprehensive information about image formats and their web browser support. This section is just a summary! </p> </div> <p>The image file formats that are most commonly used on the web are:</p> <ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#apng_animated_portable_network_graphics">APNG (Animated Portable Network Graphics)</a> — Good choice for lossless animation sequences (GIF is less performant)</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif_image">AVIF (AV1 Image File Format)</a> — Good choice for both images and animated images due to high performance.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#gif_graphics_interchange_format">GIF (Graphics Interchange Format)</a> — Good choice for <em>simple</em> images and animations.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#jpeg_joint_photographic_experts_group_image">JPEG (Joint Photographic Expert Group image)</a> — Good choice for lossy compression of still images (currently the most popular).</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#png_portable_network_graphics">PNG (Portable Network Graphics)</a> — Good choice for lossless compression of still images (slightly better quality than JPEG).</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#svg_scalable_vector_graphics">SVG (Scalable Vector Graphics)</a> — Vector image format. Use for images that must be drawn accurately at different sizes.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image">WebP (Web Picture format)</a> — Excellent choice for both images and animated images</li> </ul> <p>Formats like <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image">WebP</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif_image">AVIF</a> are recommended as they perform much better than PNG, JPEG, GIF for both still and animated images. WebP is widely supported while AVIF lacks support in Edge.</p> <p>SVG remains the recommended format for images that must be drawn accurately at different sizes.</p> +</div> +<h2 id="image_loading_errors">Image loading errors</h2> +<div class="section-content"> +<p>If an error occurs while loading or rendering an image, and an <code>onerror</code> event handler has been set for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event"><code>error</code></a> event, that event handler will get called. This can happen in several situations, including:</p> <ul> <li>The <code>src</code> attribute is empty (<code>""</code>) or <code>null</code>.</li> <li>The <code>src</code> <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> is the same as the URL of the page the user is currently on.</li> <li>The image is corrupted in some way that prevents it from being loaded.</li> <li>The image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code><img></code> element's attributes.</li> <li>The image is in a format not supported by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>.</li> </ul> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="sect2"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes"><code>alt</code></a></dt> <dd> <p>Defines text that can replace the image in the page.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Browsers do not always display images. There are a number of situations in which a browser might not display images, such as:</p> <ul> <li>Non-visual browsers (such as those used by people with visual impairments)</li> <li>The user chooses not to display images (saving bandwidth, privacy reasons)</li> <li>The image is invalid or an <a href="#supported_image_formats">unsupported type</a> +</li> </ul> <p>In these cases, the browser may replace the image with the text in the element's <code>alt</code> attribute. For these reasons and others, provide a useful value for <code>alt</code> whenever possible.</p> </div> <p>Setting this attribute to an empty string (<code>alt=""</code>) indicates that this image is <em>not</em> a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from <a href="https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine">rendering</a>. Visual browsers will also hide the broken image icon if the <code>alt</code> attribute is empty and the image failed to display.</p> <p>This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.</p> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p>Indicates if the fetching of the image must be done using a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> request. Image data from a <a href="../cors_enabled_image">CORS-enabled image</a> returned from a CORS request can be reused in the <a href="canvas"><code><canvas></code></a> element without being marked "<a href="../cors_enabled_image#what_is_a_tainted_canvas">tainted</a>".</p> <p>If the <code>crossorigin</code> attribute is <em>not</em> specified, then a non-CORS request is sent (without the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <a href="canvas"><code><canvas></code></a> elements.</p> <p>If the <code>crossorigin</code> attribute <em>is</em> specified, then a CORS request is sent (with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> response header, or by not including the site's origin in any <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> response header it does send), then the browser blocks the image from loading, and logs a CORS error to the devtools console.</p> <p>Allowed values:</p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p>A CORS request is sent with credentials omitted (that is, no <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cookie">cookies</a>, <a href="https://datatracker.ietf.org/doc/html/rfc5280" target="_blank">X.509 certificates</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization"><code>Authorization</code></a> request header).</p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p>The CORS request is sent with any credentials included (that is, cookies, X.509 certificates, and the <code>Authorization</code> request header). If the server does not opt into sharing credentials with the origin site (by sending back the <code>Access-Control-Allow-Credentials: true</code> response header), then the browser marks the image as tainted and restricts access to its image data.</p> </dd> </dl> <p>If the attribute has an invalid value, browsers handle it as if the <code>anonymous</code> value was used. See <a href="../attributes/crossorigin">CORS settings attributes</a> for additional information.</p> </dd> <dt id="decoding"><a href="#decoding"><code>decoding</code></a></dt> <dd> <p>This attribute provides a hint to the browser as to whether it should perform image decoding along with rendering the other DOM content in a single presentation step that looks more "correct" (<code>sync</code>), or render and present the other DOM content first and then decode the image and present it later (<code>async</code>). In practice, <code>async</code> means that the next paint does not wait for the image to decode.</p> <p>It is often difficult to perceive any noticeable effect when using <code>decoding</code> on static <code><img></code> elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the "syncing" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, <em>can</em> be measured — even if it is difficult to observe with the human eye. See <a href="https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/" target="_blank">What does the image decoding attribute actually do?</a> for a more detailed analysis (tunetheweb.com, 2023).</p> <p>Using different <code>decoding</code> types can result in more noticeable differences when dynamically inserting <code><img></code> elements into the DOM via JavaScript — see <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding"><code>HTMLImageElement.decoding</code></a> for more details.</p> <p>Allowed values:</p> <dl> <dt id="sync"><a href="#sync"><code>sync</code></a></dt> <dd> <p>Decode the image synchronously along with rendering the other DOM content, and present everything together.</p> </dd> <dt id="async"><a href="#async"><code>async</code></a></dt> <dd> <p>Decode the image asynchronously, after rendering and presenting the other DOM content.</p> </dd> <dt id="auto"><a href="#auto"><code>auto</code></a></dt> <dd> <p>No preference for the decoding mode; the browser decides what is best for the user. This is the default value.</p> </dd> </dl> </dd> <dt id="elementtiming"><a href="#elementtiming"><code>elementtiming</code></a></dt> <dd> <p>Marks the image for observation by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> API. The value given becomes an identifier for the observed image element. See also the <a href="../attributes/elementtiming"><code>elementtiming</code></a> attribute page.</p> </dd> <dt id="fetchpriority"> +<a href="#fetchpriority"><code>fetchpriority</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Provides a hint of the relative priority to use when fetching the image. Allowed values:</p> <dl> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>Signals a high-priority fetch relative to other images.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>Signals a low-priority fetch relative to other images.</p> </dd> <dt id="auto_2"><a href="#auto_2"><code>auto</code></a></dt> <dd> <p>Default: Signals automatic determination of fetch priority relative to other images.</p> </dd> </dl> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The intrinsic height of the image, in pixels. Must be an integer without a unit.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Including <code>height</code> and <a href="#width"><code>width</code></a> enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen. Reducing layout shift is a major component of good user experience and web performance.</p> </div> </dd> <dt id="ismap"><a href="#ismap"><code>ismap</code></a></dt> <dd> <p>This Boolean attribute indicates that the image is part of a <a href="https://en.wikipedia.org/wiki/Image_map#Server-side" target="_blank">server-side map</a>. If so, the coordinates where the user clicked on the image are sent to the server.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> This attribute is allowed only if the <code><img></code> element is a descendant of an <a href="a"><code><a></code></a> element with a valid <a href="a#href"><code>href</code></a> attribute. This gives users without pointing devices a fallback destination.</p> </div> </dd> <dt id="loading"><a href="#loading"><code>loading</code></a></dt> <dd> <p>Indicates how the browser should load the image:</p> <dl> <dt id="eager"><a href="#eager"><code>eager</code></a></dt> <dd> <p>Loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).</p> </dd> <dt id="lazy"><a href="#lazy"><code>lazy</code></a></dt> <dd> <p>Defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser. The intent is to avoid the network and storage bandwidth needed to handle the image until it's reasonably certain that it will be needed. This generally improves the performance of the content in most typical use cases.</p> </dd> </dl> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.</p> </div> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>A string indicating which referrer to use when fetching the resource:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> </dd> <dt id="sizes"><a href="#sizes"><code>sizes</code></a></dt> <dd> <p>One or more strings separated by commas, indicating a set of source sizes. Each source size consists of:</p> <ol> <li>A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntax">media condition</a>. This must be omitted for the last item in the list.</li> <li>A source size value.</li> </ol> <p>Media Conditions describe properties of the <em>viewport</em>, not of the <em>image</em>. For example, <code>(max-height: 500px) 1000px</code> proposes to use a source of 1000px width, if the <em>viewport</em> is not higher than 500px.</p> <p>Source size values specify the intended display size of the image. <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">User agents</a> use the current source size to select one of the sources supplied by the <code>srcset</code> attribute, when those sources are described using width (<code>w</code>) descriptors. The selected source size affects the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_Size">intrinsic size</a> of the image (the image's display size if no <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> styling is applied). If the <code>srcset</code> attribute is absent, or contains no values with a width descriptor, then the <code>sizes</code> attribute has no effect.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The image <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a>. Mandatory for the <code><img></code> element. On <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browser">browsers</a> supporting <code>srcset</code>, <code>src</code> is treated like a candidate image with a pixel density descriptor <code>1x</code>, unless an image with this pixel density descriptor is already defined in <code>srcset</code>, or unless <code>srcset</code> contains <code>w</code> descriptors.</p> </dd> <dt id="srcset"><a href="#srcset"><code>srcset</code></a></dt> <dd> <p>One or more strings separated by commas, indicating possible image sources for the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> to use. Each string is composed of:</p> <ol> <li>A <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> to an image</li> <li>Optionally, whitespace followed by one of: <ul> <li>A width descriptor (a positive integer directly followed by <code>w</code>). The width descriptor is divided by the source size given in the <code>sizes</code> attribute to calculate the effective pixel density.</li> <li>A pixel density descriptor (a positive floating point number directly followed by <code>x</code>).</li> </ul> </li> </ol> <p>If no descriptor is specified, the source is assigned the default descriptor of <code>1x</code>.</p> <p>It is incorrect to mix width descriptors and pixel density descriptors in the same <code>srcset</code> attribute. Duplicate descriptors (for instance, two sources in the same <code>srcset</code> which are both described with <code>2x</code>) are also invalid.</p> <p>If the <code>srcset</code> attribute uses width descriptors, the <code>sizes</code> attribute must also be present, or the <code>srcset</code> itself will be ignored.</p> <p>The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or <a href="https://developer.mozilla.org/en-US/docs/Glossary/Bandwidth">bandwidth</a> conditions. See our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial for an example.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The intrinsic width of the image in pixels. Must be an integer without a unit.</p> </dd> <dt id="usemap"><a href="#usemap"><code>usemap</code></a></dt> <dd> <p>The partial <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> (starting with <code>#</code>) of an <a href="map">image map</a> associated with the element.</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> You cannot use this attribute if the <code><img></code> element is inside an <a href="a"><code><a></code></a> or <a href="button"><code><button></code></a> element.</p> </div> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Aligns the image with its surrounding context. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float"><code>float</code></a> and/or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> properties instead of this attribute. Allowed values:</p> <dl> <dt id="top"><a href="#top"><code>top</code></a></dt> <dd> <p>Equivalent to <code>vertical-align: top</code> or <code>vertical-align: text-top</code></p> </dd> <dt id="middle"><a href="#middle"><code>middle</code></a></dt> <dd> <p>Equivalent to <code>vertical-align: -moz-middle-with-baseline</code></p> </dd> <dt id="bottom"><a href="#bottom"><code>bottom</code></a></dt> <dd> <p>The default, equivalent to <code>vertical-align: unset</code> or <code>vertical-align: initial</code></p> </dd> <dt id="left"><a href="#left"><code>left</code></a></dt> <dd> <p>Equivalent to <code>float: left</code></p> </dd> <dt id="right"><a href="#right"><code>right</code></a></dt> <dd> <p>Equivalent to <code>float: right</code></p> </dd> </dl> </dd> <dt id="border"> +<a href="#border"><code>border</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The width of a border around the image. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> property instead.</p> </dd> <dt id="hspace"> +<a href="#hspace"><code>hspace</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The number of pixels of white space on the left and right of the image. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> CSS property instead.</p> </dd> <dt id="longdesc"> +<a href="#longdesc"><code>longdesc</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A link to a more detailed description of the image. Possible values are a <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> or an element <a href="../global_attributes#id"><code>id</code></a>.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> This attribute is mentioned in the latest <a href="https://developer.mozilla.org/en-US/docs/Glossary/W3C">W3C</a> version, <a href="https://html.spec.whatwg.org/multipage/obsolete.html#element-attrdef-img-longdesc" target="_blank">HTML 5.2</a>, but has been removed from the <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a>'s <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" target="_blank">HTML Living Standard</a>. It has an uncertain future; authors should use a <a href="https://developer.mozilla.org/en-US/docs/Glossary/WAI">WAI</a>-<a href="https://developer.mozilla.org/en-US/docs/Glossary/ARIA">ARIA</a> alternative such as <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby" target="_blank"><code>aria-describedby</code></a> or <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details" target="_blank"><code>aria-details</code></a>.</p> </div> </dd> <dt id="name"> +<a href="#name"><code>name</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A name for the element. Use the <a href="../global_attributes#id"><code>id</code></a> attribute instead.</p> </dd> <dt id="vspace"> +<a href="#vspace"><code>vspace</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The number of pixels of white space above and below the image. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> CSS property instead.</p> </dd> </dl></div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p><code><img></code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a>; it has a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value of <code>inline</code> by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were <code>inline-block</code>. You can set properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a>/<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding</code></a>/<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"><code>height</code></a>, etc. on an image.</p> <p><code><img></code> has no baseline, so when images are used in an inline formatting context with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a><code>: baseline</code>, the bottom of the image will be placed on the text baseline.</p> <p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> property to position the image within the element's box, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> property to adjust the sizing of the image within the box (for example, whether the image should fit the box or fill it even if clipping is required).</p> <p>Depending on its type, an image may have an intrinsic width and height. For some image types, however, intrinsic dimensions are unnecessary. <a href="https://developer.mozilla.org/en-US/docs/Glossary/SVG">SVG</a> images, for instance, have no intrinsic dimensions if their root <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a> element doesn't have a <code>width</code> or <code>height</code> set on it.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="alternative_text">Alternative text</h3> +<div class="section-content"> +<p>The following example embeds an image into the page and includes alternative text for accessibility.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="owjcNOrN219yg3iKRcKaaPmOYfXnrejrsxOKzbGsZDc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon144.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Alternative text sample" id="frame_alternative_text" width="100%" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/img/runner.html?id=alternative_text" loading="lazy"></iframe> +</div> +</div> +<h3 id="image_link">Image link</h3> +<div class="section-content"> +<p>This example builds upon the previous one, showing how to turn the image into a link. To do so, nest the <code><img></code> tag inside the <a href="a"><code><a></code></a>. You should make the alternative text describe the resource the link is pointing to, as if you were using a text link instead.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7CryCKtQg/khYqUXGCooYLwWrqQlfE0eBB4K7IyHCxA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon144.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Visit the MDN site<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Image link sample" id="frame_image_link" width="100%" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/img/runner.html?id=image_link" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_the_srcset_attribute">Using the srcset attribute</h3> +<div class="section-content"> +<p>In this example we include a <code>srcset</code> attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the <code>src</code> image on high-resolution devices. The image referenced in the <code>src</code> attribute is counted as a <code>1x</code> candidate in <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agents</a> that support <code>srcset</code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YrM9b58B66yBkbVB51Sn8w3ehpEAhU4SRmoKpYVATlU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon72.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon144.png 2x<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Using the srcset attribute sample" id="frame_using_the_srcset_attribute" width="100%" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/img/runner.html?id=using_the_srcset_attribute" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_the_srcset_and_sizes_attributes">Using the srcset and sizes attributes</h3> +<div class="section-content"> +<p>The <code>src</code> attribute is ignored in <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agents</a> that support <code>srcset</code> when <code>w</code> descriptors are included. When the <code>(max-width: 600px)</code> media condition matches, the 200 pixel-wide image will load (it is the one that matches <code>200px</code> most closely), otherwise the other image will load.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="alqbLOcNsLV6IzZONHZ8iUn2JpGmb0xFTz3mJ41ADlo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock-demo-200px.png<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The time is 12:45.<span class="token punctuation">"</span></span> + <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock-demo-200px.png 200w, clock-demo-400px.png 400w<span class="token punctuation">"</span></span> + <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 600px) 200px, 50vw<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Using the srcset and sizes attributes sample" id="frame_using_the_srcset_and_sizes_attributes" width="100%" height="350" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/img/runner.html?id=using_the_srcset_and_sizes_attributes" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect13"> <p><strong>Note:</strong> To see the resizing in action, <a href="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/img/_sample_.Using_the_srcset_and_sizes_attributes.html?id=Using_the_srcset_and_sizes_attributes&amp;url=%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement%2Fimg" target="_blank">view the example on a separate page</a>, so you can actually resize the content area.</p> </div> +</div> +<h2 id="security_and_privacy_concerns">Security and privacy concerns</h2> +<div class="section-content"><p>Although <code><img></code> elements have innocent uses, they can have undesirable consequences for user security and privacy. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer header: privacy and security concerns</a> for more information and mitigations.</p></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="authoring_meaningful_alternate_descriptions">Authoring meaningful alternate descriptions</h3> +<div class="section-content"> +<p>An <code>alt</code> attribute's value should provide a clear and concise text replacement for the image's content. It should not describe the presence of the image itself or the file name of the image. If the <code>alt</code> attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.</p> <h4 id="dont">Don't</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="oQYtLZv6V54aLNmW+iXYmq5sNs2oiWpJjE7JTHr+kts=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>penguin.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <h4 id="do">Do</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yt9ke/ua4qnJKXkKDzyi9acDW4o5pVfRkqbe02GuaUA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A Rockhopper Penguin is standing on a beach.<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>penguin.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>When an <code>alt</code> attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.</p> <ul> <li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> <li><a href="https://axesslab.com/alt-texts/" target="_blank">Alt-texts: The Ultimate Guide — Axess Lab</a></li> <li><a href="https://www.deque.com/blog/great-alt-text-introduction/" target="_blank">How to Design Great Alt Text: An Introduction | Deque</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%E2%80%94_providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" target="_blank">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h3 id="identifying_svg_as_an_image">Identifying SVG as an image</h3> +<div class="section-content"> +<p>Due to a <a href="https://webkit.org/b/216364" target="_blank">VoiceOver bug</a>, VoiceOver does not correctly announce SVG images as images. Include <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>role="img"</code></a> to all <code><img></code> elements with SVG source files to ensure assistive technologies correctly announce the SVG as image content.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="HO1k15q9PuaukCQvSewmT6jm7AqRxgEN6QL23wAB8CM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn.svg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="the_title_attribute">The title attribute</h3> +<div class="section-content"> +<p>The <a href="../global_attributes#title"><code>title</code></a> attribute is not an acceptable substitute for the <code>alt</code> attribute. Additionally, avoid duplicating the <code>alt</code> attribute's value in a <code>title</code> attribute declared on the same image. Doing so may cause some screen readers to announce the same text twice, creating a confusing experience.</p> <p>The <code>title</code> attribute should also not be used as supplemental captioning information to accompany an image's <code>alt</code> description. If an image needs a caption, use the <a href="figure"><code>figure</code></a> and <a href="figcaption"><code>figcaption</code></a> elements.</p> <p>The value of the <code>title</code> attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this <em>can</em> provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using <code>title</code>.</p> <ul> <li><a href="https://www.tpgi.com/using-the-html-title-attribute-updated/" target="_blank">Using the HTML title attribute – updated | The Paciello Group</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#embedded_content">embedded content</a>, <a href="../content_categories#palpable_content">palpable content</a>. If the element has a <code>usemap</code> attribute, it also is a part of the interactive content category. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <ul> <li> with non-empty <code>alt</code> attribute or no <code>alt</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>img</code></a></code> </li> <li> with empty <code>alt</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </li> </ul> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <ul> <li>with non-empty <code>alt</code> attribute: <ul> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"><code>progressbar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role"><code>scrollbar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role"><code>separator</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role"><code>slider</code></a></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role">switch</a></code></li> <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role">tab</a></code></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role"><code>treeitem</code></a></li> </ul> </li> <li> with empty <code>alt</code> attribute, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a> </li> <li>with no <code>alt</code> attribute, no <code>role</code> permitted</li> </ul> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</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/embedded-content.html#the-img-element">HTML Standard <br><small># the-img-element</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>img</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>alt</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>aspect_ratio_computed_from_attributes</code></th> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">71</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">15<details><summary>14–15</summary>Safari doesn't preserve space for images without a valid <code>src</code>, which may disrupt layouts that rely on lazy loading (see <a href="https://webkit.org/b/224197">bug 224197</a>).</details> +</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">15<details><summary>14–15</summary>Safari doesn't preserve space for images without a valid <code>src</code>, which may disrupt layouts that rely on lazy loading (see <a href="https://webkit.org/b/224197">bug 224197</a>).</details> +</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>attributionsrc</code></th> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>border</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>crossorigin</code></th> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>decoding</code></th> +<td class="bc-supports-yes">65</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">65</td> +<td class="bc-supports-yes">65</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>fetchpriority</code></th> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">preview</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +<tr> +<th><code>height</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>hspace</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>ismap</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loading</code></th> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">75</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">55</td> +<td class="bc-supports-yes">15.4</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>longdesc</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>onerror</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>sizes</code></th> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">3.0</td> +</tr> +<tr> +<th><code>src</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>srcset</code></th> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>usemap</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>vspace</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="picture"><code><picture></code></a>, <a href="object"><code><object></code></a>, and <a href="embed"><code><embed></code></a> elements</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation"><code>image-orientation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering"><code>image-rendering</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution"><code>image-resolution</code></a>: Image-related CSS properties.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> interface for this element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/img" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fbutton.html b/devdocs/html/element%2Finput%2Fbutton.html new file mode 100644 index 00000000..b926aa14 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fbutton.html @@ -0,0 +1,290 @@ +<header><h1><input type="button"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>button</code> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event).</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/input-button.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> While <code><input></code> elements of type <code>button</code> are still perfectly valid HTML, the newer <a href="../button"><code><button></code></a> element is now the favored way to create buttons. Given that a <a href="../button"><code><button></code></a>'s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.</p> </div> +</div> +<h2 id="value">Value</h2> + +<h3 id="button_with_a_value">Button with a value</h3> +<div class="section-content"> +<p>An <code><input type="button"></code> elements' <a href="../input#value"><code>value</code></a> attribute contains a string that is used as the button's label.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JqVC4tPMlE5RotIvKU43OjyMFWO8EuqD99h7OrpW+Zw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Click Me<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Button with a value sample" id="frame_button_with_a_value" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=button_with_a_value" loading="lazy"></iframe> +</div> +</div> +<h3 id="button_without_a_value">Button without a value</h3> +<div class="section-content"> +<p>If you don't specify a <code>value</code>, you get an empty button:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mMdnhOsT5+XbTJb8nEC8Q3CWQ34A0vwjTvDpBOB+UaY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Button without a value sample" id="frame_button_without_a_value" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=button_without_a_value" loading="lazy"></iframe> +</div> +</div> +<h2 id="using_buttons">Using buttons</h2> +<div class="section-content"><p><code><input type="button"></code> elements have no default behavior (their cousins, <code><input type="submit"></code> and <a href="reset"><code><input type="reset"></code></a> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.</p></div> +<h3 id="a_simple_button">A simple button</h3> +<div class="section-content"> +<p>We'll begin by creating a simple button with a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event handler that starts our machine (well, it toggles the <code>value</code> of the button and the text content of the following paragraph):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PLjFPG/OxR4+QwFk/mzvDznf06zy3luT81D7/VBDbY8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Start machine<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The machine is stopped.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="f+xxWKdnLr42gCDMy8ZqE2Q8nRTzncoE7P05FUQHha4=" data-language="js"><span class="token keyword">const</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> paragraph <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> updateButton<span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">updateButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>button<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"Start machine"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + button<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Stop machine"</span><span class="token punctuation">;</span> + paragraph<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"The machine has started!"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + button<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Start machine"</span><span class="token punctuation">;</span> + paragraph<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"The machine is stopped."</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The script gets a reference to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> object representing the <code><input></code> in the DOM, saving this reference in the variable <code>button</code>. <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> is then used to establish a function that will be run when <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> events occur on the button.</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="A simple button sample" id="frame_a_simple_button" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=a_simple_button" loading="lazy"></iframe> +</div> +</div> +<h3 id="adding_keyboard_shortcuts_to_buttons">Adding keyboard shortcuts to buttons</h3> +<div class="section-content"> +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <a href="../input"><code><input></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>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="../../global_attributes/accesskey">accesskey</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="2NF/PTOO1F74Yq9VWxzWmZO3eTsPetLDrRYqKnfVJrc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Start machine<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>s<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The machine is stopped.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Adding keyboard shortcuts to buttons sample" id="frame_adding_keyboard_shortcuts_to_buttons" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=adding_keyboard_shortcuts_to_buttons" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have 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 accesskeys are).</p> </div> +</div> +<h3 id="disabling_and_enabling_a_button">Disabling and enabling a button</h3> +<div class="section-content"> +<p>To disable a button, specify the <a href="../../attributes/disabled"><code>disabled</code></a> global attribute on it, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="rDS6mN6lj6mRA+fz2xx7Z1aPGKQtynRevZ9ne8lzyr4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Disable me<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span> +</pre> +</div> <h4 id="setting_the_disabled_attribute">Setting the disabled attribute</h4> <p>You can enable and disable buttons at run time by setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A <a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout"><code>setTimeout()</code></a> function is then used to reset the button back to its enabled state after two seconds.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bryPS5bkVfBZClS3Lc+gFYRjDWAjxWu74gJwXtKZLMA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Enabled<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="B/vdg8GzQ9ZBMKZ+v9aUD+VUEkMuwWPr1T7sFMOtWsk=" data-language="js"><span class="token keyword">const</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> disableButton<span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">disableButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + button<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + button<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Disabled"</span><span class="token punctuation">;</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + button<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + button<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Enabled"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Setting the disabled attribute sample" id="frame_setting_the_disabled_attribute" width="650" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=setting_the_disabled_attribute" loading="lazy"></iframe> +</div> <h4 id="inheriting_the_disabled_state">Inheriting the disabled state</h4> <p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <a href="../fieldset"><code><fieldset></code></a> element, and then setting <code>disabled</code> on the container.</p> <p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code><fieldset></code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JnkRu+XGwp9oqq8oaAbUhr598DUU2f2WnaPIWo3kXko=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Button group<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Button 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Button 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Button 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="P96vgeHqZ1re8w9f+UAlQY6q1jAtvrVX5rMWwhNyKL4=" data-language="js"><span class="token keyword">const</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fieldset <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"fieldset"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> disableButton<span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">disableButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + fieldset<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + fieldset<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Inheriting the disabled state sample" id="frame_inheriting_the_disabled_state" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=inheriting_the_disabled_state" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> Firefox will, unlike other browsers, by default, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persist the dynamic disabled state</a> of a <a href="../button"><code><button></code></a> across page loads. Use the <a href="../button#autocomplete"><code>autocomplete</code></a> attribute to control this feature.</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>The below example shows a very simple drawing app created using a <a href="../canvas"><code><canvas></code></a> element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="GZUVlWpo/6YLdmNkqn42E5TfsF22ieGpf24HkIN26YY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>toolbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>color<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select pen color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<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>30<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select pen size<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>output<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>30<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<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>Clear canvas<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</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>myCanvas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Add suitable fallback here.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="pl16qvUsaGbCDn3Syt8kp4auFvHU+9kpEPisWMjf3uQ=" data-language="js"><span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".myCanvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> width <span class="token operator">=</span> <span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>width <span class="token operator">=</span> window<span class="token punctuation">.</span>innerWidth<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> height <span class="token operator">=</span> <span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>height <span class="token operator">=</span> window<span class="token punctuation">.</span>innerHeight <span class="token operator">-</span> <span class="token number">85</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> ctx <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"rgb(0,0,0)"</span><span class="token punctuation">;</span> +ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> colorPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="color"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> sizePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="range"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> clearBtn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="button"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// covert degrees to radians</span> +<span class="token keyword">function</span> <span class="token function">degToRad</span><span class="token punctuation">(</span><span class="token parameter">degrees</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">(</span>degrees <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">180</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// update sizepicker output value</span> + +sizePicker<span class="token punctuation">.</span><span class="token function-variable function">oninput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + output<span class="token punctuation">.</span>textContent <span class="token operator">=</span> sizePicker<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +<span class="token comment">// store mouse pointer coordinates, and whether the button is pressed</span> +<span class="token keyword">let</span> curX<span class="token punctuation">;</span> +<span class="token keyword">let</span> curY<span class="token punctuation">;</span> +<span class="token keyword">let</span> pressed <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + +<span class="token comment">// update mouse pointer coordinates</span> +document<span class="token punctuation">.</span><span class="token function-variable function">onmousemove</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + curX <span class="token operator">=</span> e<span class="token punctuation">.</span>pageX<span class="token punctuation">;</span> + curY <span class="token operator">=</span> e<span class="token punctuation">.</span>pageY<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +canvas<span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + pressed <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +canvas<span class="token punctuation">.</span><span class="token function-variable function">onmouseup</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + pressed <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +clearBtn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"rgb(0,0,0)"</span><span class="token punctuation">;</span> + ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>pressed<span class="token punctuation">)</span> <span class="token punctuation">{</span> + ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> colorPicker<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + ctx<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + ctx<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span> + curX<span class="token punctuation">,</span> + curY <span class="token operator">-</span> <span class="token number">85</span><span class="token punctuation">,</span> + sizePicker<span class="token punctuation">.</span>value<span class="token punctuation">,</span> + <span class="token function">degToRad</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token function">degToRad</span><span class="token punctuation">(</span><span class="token number">360</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token function">requestAnimationFrame</span><span class="token punctuation">(</span>draw<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="600" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/button/runner.html?id=examples" loading="lazy"></iframe> +</div> +</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#button-state-(type=button)">HTML Standard <br><small># button-state-(type=button)</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>button</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">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">4</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><input></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>The more modern <a href="../button"><code><button></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"> + © 2005–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/button" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fcheckbox.html b/devdocs/html/element%2Finput%2Fcheckbox.html new file mode 100644 index 00000000..39e3a39d --- /dev/null +++ b/devdocs/html/element%2Finput%2Fcheckbox.html @@ -0,0 +1,288 @@ +<header><h1><input type="checkbox"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>checkbox</code> are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to select single values for submission in a form (or not).</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-checkbox.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <a href="radio">Radio buttons</a> are similar to checkboxes, but with an important distinction — <a href="radio#defining_a_radio_group">same-named radio buttons</a> are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. Where multiple same-named controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.</p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the <code>value</code> given to the data submitted with the checkbox's <code>name</code>. Take the following example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="hxMKBon9N3J8fyT7DXYx+9AN8BwuHXRDYGXS38TWjYM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>subscribeNews<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subscribe<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>newsletter<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>subscribeNews<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subscribe to newsletter?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subscribe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>In this example, we've got a name of <code>subscribe</code>, and a value of <code>newsletter</code>. When the form is submitted, the data name/value pair will be <code>subscribe=newsletter</code>.</p> <p>If the <code>value</code> attribute was omitted, the default value for the checkbox is <code>on</code>, so the submitted data in that case would be <code>subscribe=on</code>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> If a checkbox is unchecked when its form is submitted, neither the name nor the value is submitted to the server. There is no HTML-only method of representing a checkbox's unchecked state (e.g. <code>value=unchecked</code>). If you wanted to submit a default value for the checkbox when it is unchecked, you could include JavaScript to create a <a href="hidden"><input type="hidden"></a> within the form with a value indicating an unchecked state.</p> </div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"> +<p>In addition to the common attributes shared by all <a href="../input"><code><input></code></a> elements, "<code>checkbox</code>" inputs support the following attributes.</p> <dl> <dt id="checked"><a href="#checked"><code>checked</code></a></dt> <dd> <p>A <a href="https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML">boolean</a> attribute indicating whether this checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>'s <code>checked</code> IDL attribute is updated.)</p> <div class="notecard note" id="sect3"> <p> <strong>Note:</strong> Unlike other input controls, a checkbox's value is only included in the submitted data if the checkbox is currently <code>checked</code>. If it is, then the value of the checkbox's <code>value</code> attribute is reported as the input's value, or <code>on</code> if no <code>value</code> is set. Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the <a href="../input#autocomplete"><code>autocomplete</code></a> attribute to control this feature. </p> </div> </dd> <dt id="value_2"><a href="#value_2"><code>value</code></a></dt> <dd> <p>The <code>value</code> attribute is one which all <a href="../input"><code><input></code></a>s share; however, it serves a special purpose for inputs of type <code>checkbox</code>: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section <a href="#value">Value</a> above.</p> </dd> </dl> +</div> +<h2 id="using_checkbox_inputs">Using checkbox inputs</h2> +<div class="section-content"><p>We already covered the most basic use of checkboxes above. Let's now look at the other common checkbox-related features and techniques you'll need.</p></div> +<h3 id="handling_multiple_checkboxes">Handling multiple checkboxes</h3> +<div class="section-content"> +<p>The example we saw above only contained one checkbox; in real-world situations you'll be likely to encounter multiple checkboxes. If they are completely unrelated, then you can just deal with them all separately, as shown above. However, if they're all related, things are not quite so simple.</p> <p>For example, in the following demo we include multiple checkboxes to allow the user to select their interests (see the full version in the <a href="#examples">Examples</a> section).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RYlgJxaHJeQATWTIXB9kcLniH2At+uy5Sf4Po5b91Hg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Choose your interests<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>coding<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>coding<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>coding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Coding<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>music<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>music<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>music<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Music<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Handling multiple checkboxes sample" id="frame_handling_multiple_checkboxes" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/checkbox/runner.html?id=handling_multiple_checkboxes" loading="lazy"></iframe> +</div> <p>In this example you will see that we've given each checkbox the same <code>name</code>. If both checkboxes are checked and then the form is submitted, you'll get a string of name/value pairs submitted like this: <code>interest=coding&interest=music</code>. When this string reaches the server, you need to parse it other than as an associative array, so all values, not only the last value, of <code>interest</code> are captured. For one technique used with Python, see <a href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable" target="_blank">Handle Multiple Checkboxes with a Single Serverside Variable</a>, for example.</p> +</div> +<h3 id="checking_boxes_by_default">Checking boxes by default</h3> +<div class="section-content"> +<p>To make a checkbox checked by default, you give it the <code>checked</code> attribute. See the below example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="tx0xR+ubD2wkXkKziZyEazEMFsFjOMvYciqtaeNZU6Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Choose your interests<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>coding<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>coding<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>coding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Coding<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>music<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>music<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>music<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Music<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Checking boxes by default sample" id="frame_checking_boxes_by_default" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/checkbox/runner.html?id=checking_boxes_by_default" loading="lazy"></iframe> +</div> +</div> +<h3 id="providing_a_bigger_hit_area_for_your_checkboxes">Providing a bigger hit area for your checkboxes</h3> +<div class="section-content"> +<p>In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <a href="../label"><code><label></code></a> element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones.</p> <p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> +</div> +<h3 id="indeterminate_state_checkboxes">Indeterminate state checkboxes</h3> +<div class="section-content"> +<p>In addition to the checked and unchecked states, there is a third state a checkbox can be in: <strong>indeterminate</strong>. This is a state in which it's impossible to say whether the item is toggled on or off. This is set using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> object's <code>indeterminate</code> property via JavaScript (it cannot be set using an HTML attribute):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="SKij2w511dy4o0Fae+nEM6zRqUdcgkRb6pXcRcNz/JY=" data-language="js">inputInstance<span class="token punctuation">.</span>indeterminate <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> +</pre> +</div> <p>A checkbox in the indeterminate state has a horizontal line in the box (it looks somewhat like a hyphen or minus sign) instead of a check/tick in most browsers.</p> <p>There are not many use cases for this property. The most common is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.</p> <p>This can be seen in the below example (thanks to <a href="https://css-tricks.com/indeterminate-checkboxes/" target="_blank">CSS Tricks</a> for the inspiration). In this example we keep track of the ingredients we are collecting for a recipe. When you check or uncheck an ingredient's checkbox, a JavaScript function checks the total number of checked ingredients:</p> <ul> <li>If none are checked, the recipe name's checkbox is set to unchecked.</li> <li>If one or two are checked, the recipe name's checkbox is set to <code>indeterminate</code>.</li> <li>If all three are checked, the recipe name's checkbox is set to <code>checked</code>.</li> </ul> <p>So in this case the <code>indeterminate</code> state is used to state that collecting the ingredients has started, but the recipe is not yet complete.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="UqPp9nnatHeUWgKbnxV2iDnwfWn5CTQG+NN+cXHwt5o=" data-language="js"><span class="token keyword">const</span> overall <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#enchantment"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> ingredients <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"ul input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +overall<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> ingredient <span class="token keyword">of</span> ingredients<span class="token punctuation">)</span> <span class="token punctuation">{</span> + ingredient<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> updateDisplay<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">updateDisplay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> checkedCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> ingredient <span class="token keyword">of</span> ingredients<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>ingredient<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> + checkedCount<span class="token operator">++</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>checkedCount <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + overall<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + overall<span class="token punctuation">.</span>indeterminate <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>checkedCount <span class="token operator">===</span> ingredients<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span> + overall<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + overall<span class="token punctuation">.</span>indeterminate <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + overall<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + overall<span class="token punctuation">.</span>indeterminate <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> +<iframe width="100%" height="200" src="https://mdn.github.io/learning-area/html/forms/indeterminate-example/index.html" loading="lazy"></iframe> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> If you submit a form with an indeterminate checkbox, the same thing happens as if the checkbox were unchecked — no data is submitted to represent the checkbox.</p> </div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>Checkboxes do support <a href="../../constraint_validation">validation</a> (offered to all <a href="../input"><code><input></code></a>s). However, most of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a>s will always be <code>false</code>. If the checkbox has the <a href="../input#required"><code>required</code></a> attribute, but is not checked, then <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>ValidityState.valueMissing</code></a> will be <code>true</code>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>The following example is an extended version of the "multiple checkboxes" example we saw above — it has more standard options, plus an "other" checkbox that when checked causes a text field to appear to enter a value for the "other" option. This is achieved with a simple block of JavaScript. The example includes implicit labels, with the <code><input></code> directly inside the <code><label></code>. The text input, without a visible label, includes the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attribute which provides its accessible name. This example also includes some CSS to improve the styling.</p></div> +<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="FMfMKAzRaKlnh2aDzXqJMhuBrf/+1NZ7AlTHYvzlC2A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Choose your interests<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>coding<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>coding<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Coding + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>music<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>music<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Music + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>art<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>art<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Art + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>sports<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>sports<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Sports + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>cooking<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>cooking<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Cooking + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>other<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>interest<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>other<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Other + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otherValue<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>other<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Other interest<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit form<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="css">CSS</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Y/lpVTmPtwV5ts5LtgIXJV9xkM1HPQglEIywvRf/HuE=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">form</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">fieldset</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 5px solid blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">legend</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div></div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="AqNCgGYs9qLiJ1nzyulqij8FV+Fo/VMB54Gh93NpFko=" data-language="js"><span class="token keyword">const</span> otherCheckbox <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#other"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> otherText <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#otherValue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +otherText<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">"hidden"</span><span class="token punctuation">;</span> + +otherCheckbox<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>otherCheckbox<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> + otherText<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">"visible"</span><span class="token punctuation">;</span> + otherText<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + otherText<span class="token punctuation">.</span>style<span class="token punctuation">.</span>visibility <span class="token operator">=</span> <span class="token string">"hidden"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/checkbox/runner.html?id=examples" loading="lazy"></iframe> +</div> +</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 representing the value of the checkbox. </td> </tr> <tr> <td><strong>Events</strong></td> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> +</td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td><code>checked</code></td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code><a href="#checked">checked</a></code>, <code><a href="#indeterminate">indeterminate</a></code> and <code><a href="#value">value</a></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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</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#checkbox-state-(type=checkbox)">HTML Standard <br><small># checkbox-state-(type=checkbox)</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>checkbox</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">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">4</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="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked"><code>:checked</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a>: CSS selectors that let you style checkboxes based on their current state</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a>: HTML DOM API that implements the <code><input></code> element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS property compatibility table for form controls</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/checkbox" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fcolor.html b/devdocs/html/element%2Finput%2Fcolor.html new file mode 100644 index 00000000..14899425 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fcolor.html @@ -0,0 +1,206 @@ +<header><h1><input type="color"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>color</code> provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in <code>#rrggbb</code> hexadecimal format.</p> <p>Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color names, functional notations and a hexadecimal format with an alpha channel.</p> <p>The element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.</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-color.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input#value"><code>value</code></a> of an <a href="../input"><code><input></code></a> element of type <code>color</code> is always a string which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting the value to anything that isn't a valid, fully-opaque, RGB color <em>in hexadecimal notation</em> will result in the value being set to <code>#000000</code>. In particular, you can't use CSS's standardized color names, or any CSS function syntax, to set the value. This makes sense when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. <code>#009900aa</code>) will also result in the color being set to <code>#000000</code>.</p> </div> +</div> +<h2 id="using_color_inputs">Using color inputs</h2> +<div class="section-content"><p>Inputs of type <code>color</code> are simple, due to the limited number of attributes they support.</p></div> +<h3 id="providing_a_default_color">Providing a default color</h3> +<div class="section-content"> +<p>You can update the simple example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vLWzwNogH1X5LtfFeVF6vQV2tfLbAXClZEX1DW3ITTM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>color<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>#ff0000<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Providing a default color sample" id="frame_providing_a_default_color" width="700" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/color/runner.html?id=providing_a_default_color" loading="lazy"></iframe> +</div> <p>If you don't specify a value, the default is <code>#000000</code>, which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: <code>#rrggbb</code>. If you have colors that are in any other format (such as CSS color names or CSS color functions such as <code>rgb()</code> or <code>rgba()</code>), you'll have to convert them to hexadecimal before setting the <code>value</code>.</p> +</div> +<h3 id="tracking_color_changes">Tracking color changes</h3> +<div class="section-content"> +<p>As is the case with other <a href="../input"><code><input></code></a> types, there are two events that can be used to detect changes to the color value: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a>. <code>input</code> is fired on the <code><input></code> element every time the color changes. The <code>change</code> event is fired when the user dismisses the color picker. In both cases, you can determine the new value of the element by looking at its <a href="../input#value"><code>value</code></a>.</p> <p>Here's an example that watches changes over time to the color value:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="6Jq0/iJMQpHmzFQeZ1IKBpVSPQaVMe5xd3EYLcxeoRM=" data-language="js">colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> updateFirst<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> watchColorPicker<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">watchColorPicker</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="selecting_the_value">Selecting the value</h3> +<div class="section-content"> +<p>When a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format. In this case you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> method to select the text currently in the edit field.</p> <p>If the browser instead uses a color picker, <code>select()</code> does nothing. You should be aware of this behavior so your code can respond appropriately in either case.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="TErqbtaiaSCJstUoAAvih2GUVkJnt4L5aVd2ZntIwDo=" data-language="js">colorPicker<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>A color input's value is considered to be invalid if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> is unable to convert the user's input into seven-character lower-case hexadecimal notation. If and when this is the case, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-class is applied to the element.</p></div> +<h2 id="example">Example</h2> +<div class="section-content"><p>Let's create an example which does a little more with the color input by tracking the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> events to take the new color and apply it to every <a href="../p"><code><p></code></a> element in the document.</p></div> +<h3 id="html">HTML</h3> +<div class="section-content"> +<p>The HTML is fairly straightforward — a couple of paragraphs of descriptive material with an <a href="../input"><code><input></code></a> of type <code>color</code> with the ID <code>color-picker</code>, which we'll use to change the color of the paragraphs' text.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mL31VQxT8ARRsMnXoYJkr313RTCyoPc+Thi1Z0FVEjw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + An example demonstrating the use of the + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity">&lt;</span>input type="color"<span class="token entity named-entity">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> control. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>color-picker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Color:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>color<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>#ff0000<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>color-picker<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Watch the paragraph colors change when you adjust the color picker. As you + make changes in the color picker, the first paragraph's color changes, as a + preview (this uses the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>input<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> event). When you close the color + picker, the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>change<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> event fires, and we detect that to change + every paragraph to the selected color. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color picker to when we first load up, and then setting up a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event"><code>load</code></a> handler to do the main startup work once the page is fully loaded.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="vM+bFre3WjQcW09wxDXn6i+Zwzc4EZh617qgJWIoias=" data-language="js"><span class="token keyword">let</span> colorPicker<span class="token punctuation">;</span> +<span class="token keyword">const</span> defaultColor <span class="token operator">=</span> <span class="token string">"#0000ff"</span><span class="token punctuation">;</span> + +window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"load"</span><span class="token punctuation">,</span> startup<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="initialization">Initialization</h4> <p>Once the page is loaded, our <code>load</code> event handler, <code>startup()</code>, is called:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="qw/MDBHoqET7v9kwOpTXd5Jzcr7CQll3Ou1XK1V8ZCw=" data-language="js"><span class="token keyword">function</span> <span class="token function">startup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + colorPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#color-picker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + colorPicker<span class="token punctuation">.</span>value <span class="token operator">=</span> defaultColor<span class="token punctuation">;</span> + colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> updateFirst<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + colorPicker<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> updateAll<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + colorPicker<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This gets a reference to the color <code><input></code> element in a variable called <code>colorPicker</code>, then sets the color input's value to the value in <code>defaultColor</code>. Then the color input's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> event is set up to call our <code>updateFirst()</code> function, and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> event is set to call <code>updateAll()</code>. These are both seen below.</p> <p>Finally, we call <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).</p> <h4 id="reacting_to_color_changes">Reacting to color changes</h4> <p>We provide two functions that deal with color changes. The <code>updateFirst()</code> function is called in response to the <code>input</code> event. It changes the color of the first paragraph element in the document to match the new value of the color input. Since <code>input</code> events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="wisgyGjwniei4NMMrrZvYb+uVgghDy3CcxXGvu+SYDQ=" data-language="js"><span class="token keyword">function</span> <span class="token function">updateFirst</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token punctuation">{</span> + p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>When the color picker is dismissed, indicating that the value will not change again (unless the user re-opens the color picker), a <code>change</code> event is sent to the element. We handle that event using the <code>updateAll()</code> function, using <a href="../input#value"><code>Event.target.value</code></a> to obtain the final selected color:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="48bl7Roq6y6tDvHC/My3JUllc8sOuYIa0HF+faFvvJ0=" data-language="js"><span class="token keyword">function</span> <span class="token function">updateAll</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + p<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This sets the color of every <a href="../p"><code><p></code></a> block so that its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> attribute matches the current value of the color input, which is referred to using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/target"><code>event.target</code></a>.</p> +</div> +<h3 id="result">Result</h3> +<div class="section-content"> +<p>The final result looks like this:</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Example sample" id="frame_example" width="700" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/color/runner.html?id=example" loading="lazy"></iframe> +</div> +</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 7-character string specifying a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><code><color></code></a> in lower-case hexadecimal notation </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a> and <a href="../input#list"><code>list</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code> and <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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#color-state-(type=color)">HTML Standard <br><small># color-state-(type=color)</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>color</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes"><details><summary>27</summary>Firefox for Android doesn't allow the user to choose a custom color, only one of the predefined ones.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>list</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes"><details><summary>110</summary>The <code>list</code> attribute is supported in Firefox for Windows and Linux. See <a href="https://bugzil.la/960984">bug 960984</a>.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">1.5</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <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"> + © 2005–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/color" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fdate.html b/devdocs/html/element%2Finput%2Fdate.html new file mode 100644 index 00000000..8683b8e9 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fdate.html @@ -0,0 +1,390 @@ +<header><h1><input type="date"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of <code>type="date"</code> create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.</p> <p>The resulting value includes the year, month, and day, but <em>not</em> the time. The <a href="time">time</a> and <a href="datetime-local">datetime-local</a> input types support time and date+time input.</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/input-date.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The input UI generally varies from browser to browser; see <a href="#browser_compatibility">Browser compatibility</a> for further details. In unsupported browsers, the control degrades gracefully to <a href="text"><code><input type="text"></code></a>.</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A string representing the date entered in the input. The date is formatted according to <a href="../../date_and_time_formats#date_strings">Date strings format</a>.</p> <p>You can set a default value for the input with a date inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WfmbJO8A0/Bi7arHVg933iDAcElQisLM8fzctfLyObk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>2017-06-01<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=value" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The displayed date format will differ from the actual <code>value</code> — the displayed date is formatted <em>based on the locale of the user's browser</em>, but the parsed <code>value</code> is always formatted <code>yyyy-mm-dd</code>.</p> </div> <p>You can get and set the date value in JavaScript with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> and <code>valueAsNumber</code> properties. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="MrZAhicZzoworJfwiGGbGBZgCmMrkEzpV1DGUy4R3Nw=" data-language="js"><span class="token keyword">const</span> dateControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="date"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +dateControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2017-06-01"</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dateControl<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints "2017-06-01"</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dateControl<span class="token punctuation">.</span>valueAsNumber<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// prints 1496275200000, a JavaScript timestamp (ms)</span> +</pre> +</div> <p>This code finds the first <a href="../input"><code><input></code></a> element whose <code>type</code> is <code>date</code>, and sets its value to <code>2017-06-01</code> (June 1st, 2017). It then reads that value back in string and number formats.</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>The attributes common to all <a href="../input"><code><input></code></a> elements apply to the <code>date</code> inputs as well, but might not influence its presentation. For example <code>size</code> and <code>placeholder</code> might not work. <code>date</code> inputs have the following additional attributes.</p></div> +<h3 id="max">max</h3> +<div class="section-content"> +<p>The latest date to accept. If the <a href="../input#value"><code>value</code></a> entered into the element occurs afterward, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a possible date string in the format <code>yyyy-mm-dd</code>, then the element has no maximum date value.</p> <p>If both the <code>max</code> and <code>min</code> attributes are set, this value must be a date string <strong>later than or equal to</strong> the one in the <code>min</code> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p>The earliest date to accept. If the <a href="../input#value"><code>value</code></a> entered into the element occurs beforehand, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a possible date string in the format <code>yyyy-mm-dd</code>, then the element has no minimum date value.</p> <p>If both the <code>max</code> and <code>min</code> attributes are set, this value must be a date string <strong>earlier than or equal to</strong> the one in the <code>max</code> attribute.</p> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>For <code>date</code> inputs, the value of <code>step</code> is given in days; and is treated as a number of milliseconds equal to 86,400,000 times the <code>step</code> value (the underlying numeric value is in milliseconds). The default value of <code>step</code> is 1, indicating 1 day.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Specifying <code>any</code> as the value for <code>step</code> has the same effect as <code>1</code> for <code>date</code> inputs.</p> </div> +</div> +<h2 id="using_date_inputs">Using date inputs</h2> +<div class="section-content"> +<p>Date inputs provide an easy interface for choosing dates, and they normalize the data format sent to the server regardless of the user's locale.</p> <p>In this section, we'll look at basic and then more complex uses of <code><input type="date"></code>.</p> +</div> +<h3 id="basic_uses_of_date">Basic uses of date</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="date"></code> involves one <code><input></code> combined with its <a href="../label"><code><label></code></a>, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="V/Km4uIkNxFTRYG4UbDDp2jQ0YmZooygZMOLGfbJHpM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Enter your birthday: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Basic uses of date sample" id="frame_basic_uses_of_date" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=basic_uses_of_date" loading="lazy"></iframe> +</div> <p>This HTML submits the entered date under the key <code>bday</code> to <code>https://example.com</code> — resulting in a URL like <code>https://example.com/?bday=1955-06-08</code>.</p> +</div> +<h3 id="setting_maximum_and_minimum_dates">Setting maximum and minimum dates</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the dates that can be chosen by the user. In the following example, we set a minimum date of <code>2017-04-01</code> and a maximum date of <code>2017-04-30</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="m7gSoYvMMBhdKCaQtE7if2nXl1zn+BLukGj814VP4S4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Choose your preferred party date: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-01<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum dates sample" id="frame_setting_maximum_and_minimum_dates" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=setting_maximum_and_minimum_dates" loading="lazy"></iframe> +</div> <p>The result is that only days in April 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside April 2017 can't be selected in the picker widget.</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> You <em>should</em> be able to use the <a href="../input#step"><code>step</code></a> attribute to vary the number of days jumped each time the date is incremented (e.g. to only make Saturdays selectable). However, this does not seem to be in any implementation at the time of writing.</p> </div> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p><code><input type="date"></code> doesn't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. Prefer <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for sizing it.</p></div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>By default, <code><input type="date"></code> doesn't validate the entered value beyond its format. The interfaces generally don't let you enter anything that isn't a date — which is helpful — but you can leave the field empty or enter an invalid date in browsers where the input falls back to type <code>text</code> (like the 32nd of April).</p> <p>If you use <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> to restrict the available dates (see <a href="#setting_maximum_and_minimum_dates">Setting maximum and minimum dates</a>), supporting browsers will display an error if you try to submit a date that is out of bounds. However, you'll need to double-check the submitted results to ensure the value is within these dates, if the date picker isn't fully supported on the user's device.</p> <p>You can also use the <a href="../input#required"><code>required</code></a> attribute to make filling in the date mandatory — an error will be displayed if you try to submit an empty date field. This should work in most browsers, even if they fall back to a text input.</p> <p>Let's look at an example of minimum and maximum dates, and also made a field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NWEjyuRpnbuAqGvLVjiBbfRtGtecKZtT9uIcPGpCR/E=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Choose your preferred party date (required, April 1st to 20th): + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>party<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-01<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-20<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Here's the CSS used in the above example. We make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a> to add an icon next to the input, based on whether the current value is valid. We had to put the icon on a <a href="../span"><code><span></code></a> next to the input, not on the input itself, because in Chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="txgXDu2qdp2pwLPTqbhgKyjHGjWShXlxYrqg0Xhlkg0=" data-language="css"><span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">span::after</span> <span class="token punctuation">{</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard warning" id="sect9"> <p><strong>Warning:</strong> Client-side form validation <em>is no substitute</em> for validating on the server. It's easy for someone to modify the HTML, or bypass your HTML entirely and submit the data directly to your server. If your server fails to validate the received data, disaster could strike with data that is badly-formatted, too large, of the wrong type, etc.</p> </div> +</div> +<h2 id="handling_browser_support">Handling browser support</h2> +<div class="section-content"> +<p>Browsers that don't support this input type gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.</p> <p>The second problem is the more serious one; with date input supported, the value is normalized to the format <code>yyyy-mm-dd</code>. But with a text input, the browser has no recognition of what format the date should be in, and there are many formats in which people write dates. For example:</p> <ul> <li><code>ddmmyyyy</code></li> <li><code>dd/mm/yyyy</code></li> <li><code>mm/dd/yyyy</code></li> <li><code>dd-mm-yyyy</code></li> <li><code>mm-dd-yyyy</code></li> <li><code>Month dd, yyyy</code></li> </ul> <p>One way around this is the <a href="../input#pattern"><code>pattern</code></a> attribute on your date input. Even though the date picker doesn't use it, the text input fallback will. For example, try viewing the following in an unsupporting browser:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8H9i2rjwtXpITcy6a0/FO5atGGApk/x0lNX6zcAIDFQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Enter your birthday: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\d{4}-\d{2}-\d{2}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Handling browser support sample" id="frame_handling_browser_support" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=handling_browser_support" loading="lazy"></iframe> +</div> <p>If you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern <code>####-##-##</code> (where <code>#</code> is a digit from 0 to 9). Of course, this doesn't stop people from entering invalid dates, or incorrect formats. So we still have a problem.</p> <p>At the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a JavaScript library such as <a href="https://jqueryui.com/datepicker/" target="_blank">jQuery date picker</a>.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, we create 2 sets of UI elements for choosing dates: a native <code><input type="date"></code> picker and a set of 3 <a href="../select"><code><select></code></a> elements for older browsers that don't support the native date input.</p> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/date/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h3 id="html">HTML</h3> +<div class="section-content"> +<p>The HTML looks like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kUv/LFii3Oe9Gidt8oxYHDg2LVgn47pVKTtTH3Wb7UI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>nativeDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your birthday:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>fallbackLabel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your birthday:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fallbackDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>day<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Day:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>day<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>day<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Month:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>January<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>February<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>March<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>April<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>May<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>June<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>July<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>September<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>October<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>November<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>December<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Year:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>year<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> +</div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>.</p> <p>We create a new <a href="../input"><code><input></code></a> element, try setting its <code>type</code> to <code>date</code>, then immediately check what its type is — unsupporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> isn't supported, we hide the native picker and show the fallback (<a href="../select"><code><select></code></a>) instead.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="EK8fANrC/d89euWbDxZwymaQ0iynwXLeVLQJiomcSi8=" data-language="js"><span class="token comment">// Obtain UI widgets</span> +<span class="token keyword">const</span> nativePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".nativeDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackLabel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackLabel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> yearSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#year"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> monthSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#month"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> daySelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#day"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// hide fallback initially</span> +fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> +fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + +<span class="token comment">// test whether a new date input falls back to a text input or not</span> +<span class="token keyword">const</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">try</span> <span class="token punctuation">{</span> + test<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"date"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// if it does, run the code inside the if () {} block</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// hide the native picker and show the fallback</span> + nativePicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + <span class="token comment">// populate the days and years dynamically</span> + <span class="token comment">// (the months are always the same, therefore hardcoded)</span> + <span class="token function">populateDays</span><span class="token punctuation">(</span>monthSelect<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateDays</span><span class="token punctuation">(</span><span class="token parameter">month</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// delete the current set of <option> elements out of the</span> + <span class="token comment">// day <select>, ready for the next set to be injected</span> + <span class="token keyword">while</span> <span class="token punctuation">(</span>daySelect<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span> <span class="token punctuation">{</span> + daySelect<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>daySelect<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token comment">// Create variable to hold new number of days to inject</span> + <span class="token keyword">let</span> dayNum<span class="token punctuation">;</span> + + <span class="token comment">// 31 or 30 days?</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span> + <span class="token punctuation">[</span> + <span class="token string">"January"</span><span class="token punctuation">,</span> + <span class="token string">"March"</span><span class="token punctuation">,</span> + <span class="token string">"May"</span><span class="token punctuation">,</span> + <span class="token string">"July"</span><span class="token punctuation">,</span> + <span class="token string">"August"</span><span class="token punctuation">,</span> + <span class="token string">"October"</span><span class="token punctuation">,</span> + <span class="token string">"December"</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>month<span class="token punctuation">)</span> + <span class="token punctuation">)</span> <span class="token punctuation">{</span> + dayNum <span class="token operator">=</span> <span class="token number">31</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"April"</span><span class="token punctuation">,</span> <span class="token string">"June"</span><span class="token punctuation">,</span> <span class="token string">"September"</span><span class="token punctuation">,</span> <span class="token string">"November"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>month<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + dayNum <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// If month is February, calculate whether it is a leap year or not</span> + <span class="token keyword">const</span> year <span class="token operator">=</span> yearSelect<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token keyword">const</span> isLeap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>year<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">;</span> + dayNum <span class="token operator">=</span> isLeap <span class="token operator">?</span> <span class="token number">29</span> <span class="token operator">:</span> <span class="token number">28</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token comment">// inject the right number of new <option> elements into the day <select></span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> dayNum<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> i<span class="token punctuation">;</span> + daySelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token comment">// if previous day has already been set, set daySelect's value</span> + <span class="token comment">// to that day, to avoid the day jumping back to 1 when you</span> + <span class="token comment">// change the year</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>previousDay<span class="token punctuation">)</span> <span class="token punctuation">{</span> + daySelect<span class="token punctuation">.</span>value <span class="token operator">=</span> previousDay<span class="token punctuation">;</span> + + <span class="token comment">// If the previous day was set to a high number, say 31, and then</span> + <span class="token comment">// you chose a month with less total days in it (e.g. February),</span> + <span class="token comment">// this part of the code ensures that the highest day available</span> + <span class="token comment">// is selected, rather than showing a blank daySelect</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>daySelect<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + daySelect<span class="token punctuation">.</span>value <span class="token operator">=</span> previousDay <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>daySelect<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + daySelect<span class="token punctuation">.</span>value <span class="token operator">=</span> previousDay <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>daySelect<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + daySelect<span class="token punctuation">.</span>value <span class="token operator">=</span> previousDay <span class="token operator">-</span> <span class="token number">3</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// get this year as a number</span> + <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> year <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Make this year, and the 100 years before it available in the year <select></span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> year <span class="token operator">-</span> i<span class="token punctuation">;</span> + yearSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +<span class="token comment">// when the month or year <select> values are changed, rerun populateDays()</span> +<span class="token comment">// in case the change affected the number of available days</span> +yearSelect<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">populateDays</span><span class="token punctuation">(</span>monthSelect<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +monthSelect<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">populateDays</span><span class="token punctuation">(</span>monthSelect<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +<span class="token comment">//preserve day selection</span> +<span class="token keyword">let</span> previousDay<span class="token punctuation">;</span> + +<span class="token comment">// update what day has been set to previously</span> +<span class="token comment">// see end of populateDays() for usage</span> +daySelect<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + previousDay <span class="token operator">=</span> daySelect<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <div class="notecard note" id="sect12"> <p><strong>Note:</strong> Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year" target="_blank">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> </div> +</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 representing a date in YYYY-MM-DD format, or empty </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#date-state-(type=date)">HTML Standard <br><small># date-state-(type=date)</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>date</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#date_and_time_pickers">Date and Time picker tutorial</a></li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></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"> + © 2005–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/date" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fdatetime-local.html b/devdocs/html/element%2Finput%2Fdatetime-local.html new file mode 100644 index 00000000..e691315b --- /dev/null +++ b/devdocs/html/element%2Finput%2Fdatetime-local.html @@ -0,0 +1,211 @@ +<header><h1><input type="datetime-local"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>datetime-local</code> create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.</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/input-datetime-local.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The control's UI varies in general from browser to browser. In browsers with no support, these degrade gracefully to simple <a href="text"><code><input type="text"></code></a> controls.</p> <p>The control is intended to represent <em>a local date and time</em>, not necessarily <em>the user's local date and time</em>. In other words, the input allows any valid combination of year, month, day, hour, and minute—even if such a combination is invalid in the user's local time zone (such as the one hour within a daylight saving time spring-forward transition gap).</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A string representing the value of the date entered into the input. The format of the date and time value used by this input type is described in <a href="../../date_and_time_formats#local_date_and_time_strings">Local date and time strings</a>.</p> <p>You can set a default value for the input by including a date and time inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kwZ/uT1FjSSLcKvvuJpJxgun07zIin9Z9Yr5P+dBY48=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<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>datetime-local<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<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>2017-06-01T08:30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=value" loading="lazy"></iframe> +</div> <p>One thing to note is that the displayed date and time formats differ from the actual <code>value</code>; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time <code>value</code> is always formatted <code>YYYY-MM-DDThh:mm</code>. When the above value is submitted to the server, for example, it will look like <code>partydate=2024-06-01T08:30</code>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Also bear in mind that if such data is submitted via HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a>, the colon character will need to be escaped for inclusion in the URL parameters, e.g. <code>partydate=2024-06-01T08%3A30</code>. See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a> for one way to do this.</p> </div> <p>You can also get and set the date value in JavaScript using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="nlVjs+FdRTmymC4zaX6jlC3lsvwYXtcryOjj1GE5yZI=" data-language="js"><span class="token keyword">const</span> dateControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="datetime-local"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +dateControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2017-06-01T08:30"</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes common to all <a href="../input"><code><input></code></a> elements, <code>datetime-local</code> inputs offer the following attributes.</p></div> +<h3 id="max">max</h3> +<div class="section-content"> +<p>The latest date and time to accept. If the <a href="../input#value"><code>value</code></a> entered into the element is later than this timestamp, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid string that follows the format <code>YYYY-MM-DDThh:mm</code>, then the element has no maximum value.</p> <p>This value must specify a date string later than or equal to the one specified by the <code>min</code> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p>The earliest date and time to accept; timestamps earlier than this will cause the element to fail <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a valid string that follows the format <code>YYYY-MM-DDThh:mm</code>, then the element has no minimum value.</p> <p>This value must specify a date string earlier than or equal to the one specified by the <code>max</code> attribute.</p> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>For <code>datetime-local</code> inputs, the value of <code>step</code> is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).</p> <p><em>At this time, it's unclear what a value of <code>any</code> means for <code>step</code> when used with <code>datetime-local</code> inputs. This will be updated as soon as that information is determined.</em></p> +</div> +<h2 id="using_datetime-local_inputs">Using datetime-local inputs</h2> +<div class="section-content"><p>Date/time inputs are convenient for the developer; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, it is important to consider your users. Don't require your users to enter data that is not needed for your app to function.</p></div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p><code><input type="datetime-local"></code> doesn't support form control sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for customizing the sizes of these elements.</p></div> +<h3 id="setting_timezones">Setting timezones</h3> +<div class="section-content"> +<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in the <code>datetime</code> input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.</p> <p>For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a <a href="hidden"><code>hidden</code></a> input type. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ef9KIX+FOM+T+G9HJMBPyM5dyf/HomTirSF24wLA2sA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>hidden<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>timezone<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<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>-08:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>On the other hand, if you were required to allow the user to enter a time zone along with a date/time input, you could have a <a href="../select"><code><select></code></a> element to enable the user to set the right time zone by choosing a particular location from among a set of locations:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="F94VbTaqRpjqkyn9IbEcl2SXN5T/B76nyEZR9WGH2/8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>timezone<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>timezone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Pacific/Kwajalein<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eniwetok, Kwajalein<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Pacific/Midway<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Midway Island, Samoa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Pacific/Honolulu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hawaii<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>Pacific/Marquesas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Taiohae<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- and so on --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div> <p>In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.</p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>By default, <code><input type="datetime-local"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of April).</p> <p>You can use <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> to restrict the available dates (see <a href="#setting_maximum_and_minimum_dates">Setting maximum and minimum dates</a>), and you can use the <a href="../input#required"><code>required</code></a> attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds or an empty date field.</p> <p>Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="corPgpDZ5O2oxNe8+g0Zn5OwnZ4GW3x8jetxP5ThLB4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose your preferred party date and time (required, June 1st 8.30am to + June 30th 4.30pm): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<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>datetime-local<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-06-01T08:30<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-06-30T16:30<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Book party!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We put the icons on a <a href="../span"><code><span></code></a> next to the input.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="2eZkvfBs8/bDWnklRDJmX3FAUPNJelJw8hEyRehs7dc=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard warning" id="sect5"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, problems can arise when improperly-formatted data is submitted (or data that is too large, is of the wrong type, and so forth).</p> </div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> With a <code>datetime-local</code> input, the date value is always normalized to the format <code>YYYY-MM-DDThh:mm</code>.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_uses_of_datetime-local">Basic uses of datetime-local</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="datetime-local"></code> involves a basic <code><input></code> and <a href="../label"><code><label></code></a> element combination, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DZvxt+CVOfipn69TBi+o0Bo8zHJtHGwmd7r1bFnQInk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<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>datetime-local<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Basic uses of datetime-local sample" id="frame_basic_uses_of_datetime-local" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=basic_uses_of_datetime-local" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_maximum_and_minimum_dates_and_times">Setting maximum and minimum dates and times</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the dates/times that can be chosen by the user. In the following example, we are setting a minimum datetime of <code>2024-06-01T08:30</code> and a maximum datetime of <code>2024-06-30T16:30</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QOF6UCB7v76GsCDKdT+yy/bB7vHnqmooQC4q3vpCROk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a date and time for your party booking:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>party<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>datetime-local<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>partydate<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-06-01T08:30<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-06-30T16:30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum dates and times sample" id="frame_setting_maximum_and_minimum_dates_and_times" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/datetime-local/runner.html?id=setting_maximum_and_minimum_dates_and_times" loading="lazy"></iframe> +</div> <p>Only days in June 2024 can be selected. Depending on what browser you are using, times outside the specified values might not be selectable. In other browsers, invalid dates and times are selectable but will match <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> and will fail <a href="#validation">validation</a>.</p> <p>In some browsers (Chrome and Edge), only the "days" part of the date value will be editable, and dates outside June can't be scrolled. In others (Safari), the date picker will appear to allow any date, but the value will be clamped to the valid range when a date is selected.</p> <p>The valid range included all times between the <code>min</code> and <code>max</code> values; the time of day is only constrained on the first and last dates in the range.</p> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> You should be able to use the <a href="../input#step"><code>step</code></a> attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.</p> </div> +</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 representing a date and time (in the local time zone), or empty. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code>, <code>value</code>, <code>valueAsNumber</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#local-date-and-time-state-(type=datetime-local)">HTML Standard <br><small># local-date-and-time-state-(type=datetime-local)</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>datetime-local</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li> +<a href="date"><code><input type="date"></code></a> and <a href="time"><code><input type="time"></code></a> +</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker">Date and Time picker tutorial</a></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"> + © 2005–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/datetime-local" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Femail.html b/devdocs/html/element%2Finput%2Femail.html new file mode 100644 index 00000000..3318f9cd --- /dev/null +++ b/devdocs/html/element%2Finput%2Femail.html @@ -0,0 +1,261 @@ +<header><h1><input type="email"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>email</code> are used to let the user enter and edit an email address, or, if the <a href="../../attributes/multiple"><code>multiple</code></a> attribute is specified, a list of email addresses.</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/input-email.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The input value is automatically validated to ensure that it's either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid email address or not.</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input"><code><input></code></a> element's <a href="../input#value"><code>value</code></a> attribute contains a string which is automatically validated as conforming to email syntax. More specifically, there are three possible value formats that will pass validation:</p> <ol> <li>An empty string ("") indicating that the user did not enter a value or that the value was removed.</li> <li>A single properly-formed email address. This doesn't necessarily mean the email address exists, but it is at least formatted correctly. In simple terms, this means <code>username@domain</code> or <code>username@domain.tld</code>. There's more to it than that, of course; see <a href="#validation">Validation</a> for a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression">regular expression</a> that matches the email address validation algorithm.</li> <li>If and only if the <a href="../input#multiple"><code>multiple</code></a> attribute is specified, the value can be a list of properly-formed comma-separated email addresses. Any trailing and leading whitespace is removed from each address in the list.</li> </ol> <p>See <a href="#validation">Validation</a> for details on how email addresses are validated to ensure that they're formatted properly.</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, <code>email</code> inputs support the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="maxlength">maxlength</h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the <code>email</code> input. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the <code>email</code> input has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text value of the field is greater than <code>maxlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="minlength">minlength</h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the <code>email</code> input. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the <code>email</code> input has no minimum length.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="multiple">multiple</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, indicates that the user can enter a list of multiple email addresses, separated by commas and, optionally, whitespace characters. See <a href="#allowing_multiple_email_addresses">Allowing multiple email addresses</a> for an example, or <a href="../../attributes/multiple">HTML attribute: multiple</a> for more details.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Normally, if you specify the <a href="../input#required"><code>required</code></a> attribute, the user must enter a valid email address for the field to be considered valid. However, if you add the <code>multiple</code> attribute, a list of zero email addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one email address when <code>multiple</code> is specified, regardless of the value of <code>required</code>.</p> </div> +</div> +<h3 id="pattern">pattern</h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>See the section <a href="#pattern_validation">Pattern validation</a> for details and an example.</p> +</div> +<h3 id="placeholder"><code>placeholder</code></h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly"><code>readonly</code></h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size"><code>size</code></h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h2 id="using_email_inputs">Using email inputs</h2> +<div class="section-content"> +<p>Email addresses are among the most frequently-inputted textual data forms on the web; they're used when logging into websites, when requesting information, to allow order confirmation, for webmail, and so forth. As such, the <code>email</code> input type can make your job as a web developer much easier since it can help simplify your work when building the user interface and logic for email addresses. When you create an email input with the proper <code>type</code> value, <code>email</code>, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate email address. This can help avoid cases in which the user mistypes their address, or provides an invalid address.</p> <p>It's important, however, to note that this is not enough to ensure that the specified text is an email address which actually exists, corresponds to the user of the site, or is acceptable in any other way. It ensures that the value of the field is properly formatted to be an email address.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> It's also crucial to remember that a user can tinker with your HTML behind the scenes, so your site <em>must not</em> use this validation for any security purposes. You <em>must</em> verify the email address on the server side of any transaction in which the provided text may have any security implications of any kind.</p> </div> +</div> +<h3 id="a_simple_email_input">A simple email input</h3> +<div class="section-content"> +<p>Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. The specification does, however, allow browsers latitude on this. For example, the element could be integrated with the user's device's built-in address book to allow picking email addresses from that list. In its most basic form, an <code>email</code> input can be implemented like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Al9b1EOyvRpkJSHlloiBnPysLjDDsDzSaqwxanCynpg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<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>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="A simple email input sample" id="frame_a_simple_email_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=a_simple_email_input" loading="lazy"></iframe> +</div> <p>Notice that it's considered valid when empty and when a single validly-formatted email address is entered, but is otherwise not considered valid. By adding the <a href="../input#required"><code>required</code></a> attribute, only validly-formed email addresses are allowed; the input is no longer considered valid when empty.</p> +</div> +<h3 id="allowing_multiple_email_addresses">Allowing multiple email addresses</h3> +<div class="section-content"> +<p>By adding the <a href="../../attributes/multiple"><code>multiple</code></a> Boolean attribute, the input can be configured to accept multiple email addresses.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Hh5OQxz0INBP+DsAt5hy34Cg71iKOLp6z95sYhiOoxA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<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>email<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Allowing multiple email addresses sample" id="frame_allowing_multiple_email_addresses" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=allowing_multiple_email_addresses" loading="lazy"></iframe> +</div> <p>The input is now considered valid when a single email address is entered, or when any number of email addresses separated by commas and, optionally, some number of whitespace characters are present.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> When <code>multiple</code> is used, the value <em>is</em> allowed to be empty.</p> </div> <p>Some examples of valid strings when <code>multiple</code> is specified:</p> <ul> <li><code>""</code></li> <li><code>"me@example"</code></li> <li><code>"me@example.org"</code></li> <li><code>"me@example.org,you@example.org"</code></li> <li><code>"me@example.org, you@example.org"</code></li> <li><code>"me@example.org,you@example.org, us@example.org"</code></li> </ul> <p>Some examples of invalid strings:</p> <ul> <li><code>","</code></li> <li><code>"me"</code></li> <li><code>"me@example.org you@example.org"</code></li> </ul> +</div> +<h3 id="placeholders">Placeholders</h3> +<div class="section-content"> +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <a href="../input"><code><input></code></a>. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> <p>Here, we have an <code>email</code> input with the placeholder <code>sophie@example.com</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fZppfPNBIvlrJzsM8mwpNi8ZdKymiGsjqlHfvqGgtSg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sophie@example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_the_input_size">Controlling the input size</h3> +<div class="section-content"> +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> <h4 id="physical_input_element_size">Physical input element size</h4> <p>The physical size of the input box can be controlled using the <a href="../input#size"><code>size</code></a> attribute. With it, you can specify the number of characters the input box can display at a time. In this example the <code>email</code> edit box is 15 characters wide:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RjUBA7iApOL26b1ZYoehdt4lqvkJtj5rTMEqfnWkLsA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Physical input element size sample" id="frame_physical_input_element_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=physical_input_element_size" loading="lazy"></iframe> +</div> <h4 id="element_value_length">Element value length</h4> <p>The <code>size</code> is separate from the length limitation on the entered email address itself so that you can have fields fit in a small space while still allowing longer email address strings to be entered. You can specify a minimum length, in characters, for the entered email address using the <a href="../input#minlength"><code>minlength</code></a> attribute; similarly, use <a href="../input#maxlength"><code>maxlength</code></a> to set the maximum length of the entered email address.</p> <p>The example below creates a 32 character-wide email address entry box, requiring that the contents be no shorter than 3 characters and no longer than 64 characters.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7nmyLiLQaqq+H/OF8w7lMAEuf7VGtyCiV6W0EQwmJtg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Element value length sample" id="frame_element_value_length" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=element_value_length" loading="lazy"></iframe> +</div> +</div> +<h3 id="providing_default_options">Providing default options</h3> +<div class="section-content"> +<h4 id="providing_a_single_default_using_the_value_attribute">Providing a single default using the value attribute</h4> <p>As always, you can provide a default value for an <code>email</code> input box by setting its <a href="../input#value"><code>value</code></a> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KnGmkt9UMpzBxPwvMqqQMbGvkmridtYGhIsQlfuzsEc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>default@example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Providing a single default using the value attribute sample" id="frame_providing_a_single_default_using_the_value_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=providing_a_single_default_using_the_value_attribute" loading="lazy"></iframe> +</div> <h4 id="offering_suggested_values">Offering suggested values</h4> <p>Taking it a step further, you can provide a list of default options from which the user can select by specifying the <a href="../input#list"><code>list</code></a> attribute. This doesn't limit the user to those options, but does allow them to select commonly-used email addresses more quickly. This also offers hints to <a href="../input#autocomplete"><code>autocomplete</code></a>. The <code>list</code> attribute specifies the ID of a <a href="../datalist"><code><datalist></code></a>, which in turn contains one <a href="../option"><code><option></code></a> element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the email entry box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BJ6VjNrRFCHLEiy6QHSdPpHIXr/84mKlng9CPfHm/g4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultEmails<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultEmails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>jbond007@mi6.defence.gov.uk<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>jbourne@unknown.net<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>nfury@shield.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>tony@starkindustries.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>hulk@grrrrrrrr.arg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=offering_suggested_values" loading="lazy"></iframe> +</div> <p>With the <a href="../datalist"><code><datalist></code></a> element and its <a href="../option"><code><option></code></a>s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>There are two levels of content validation available for <code>email</code> inputs. First, there's the standard level of validation offered to all <a href="../input"><code><input></code></a>s, which automatically ensures that the contents meet the requirements to be a valid email address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> <div class="notecard warning" id="sect14"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format.It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it completely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> </div> +</div> +<h3 id="basic_validation">Basic validation</h3> +<div class="section-content"> +<p>Browsers automatically provide validation to ensure that only text that matches the standard format for Internet email addresses is entered into the input box. Browsers use an algorithm equivalent to the following regular expression:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="GMNgi6tkfmZa7pnP23eey7eUgtkNgju5zaUhdV1rzK0=" data-language="js"><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><span class="token anchor function">^</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span>.!#$%&'*+/=?^_`{|}~-<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">+</span>@<span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token group punctuation">(?:</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span>-<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">{0,61}</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token group punctuation">)</span><span class="token quantifier number">?</span><span class="token group punctuation">(?:</span><span class="token special-escape escape">\.</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token group punctuation">(?:</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span>-<span class="token char-class-punctuation punctuation">]</span></span><span class="token quantifier number">{0,61}</span><span class="token char-class"><span class="token char-class-punctuation punctuation">[</span><span class="token range">a<span class="token range-punctuation operator">-</span>z</span><span class="token range">A<span class="token range-punctuation operator">-</span>Z</span><span class="token range">0<span class="token range-punctuation operator">-</span>9</span><span class="token char-class-punctuation punctuation">]</span></span><span class="token group punctuation">)</span><span class="token quantifier number">?</span><span class="token group punctuation">)</span><span class="token quantifier number">*</span><span class="token anchor function">$</span></span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span> +</pre> +</div> <p>To learn more about how form validation works and how to take advantage of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid, see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form data validation</a>.</p> <div class="notecard note" id="sect15"> <p><strong>Note:</strong> There are known specification issues related to international domain names and the validation of email addresses in HTML. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489" target="_blank">W3C bug 15489</a> for details.</p> </div> +</div> +<h3 id="pattern_validation">Pattern validation</h3> +<div class="section-content"> +<p>If you need the entered email address to be restricted further than just "any string that looks like an email address," you can use the <a href="../input#pattern"><code>pattern</code></a> attribute to specify a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression">regular expression</a> the value must match for it to be valid. If the <a href="../input#multiple"><code>multiple</code></a> attribute is specified, each individual item in the comma-delineated list of values must match the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression">regular expression</a>.</p> <p>For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their email address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid email address, but for security purposes, we require that the address be an internal corporate email address.</p> <p>Since inputs of type <code>email</code> validate against both the standard email address validation <em>and</em> the specified <a href="../input#pattern"><code>pattern</code></a>, you can implement this easily. Let's see how:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mdOuiQfhct7xxxfmERsbf3T1y/bCqwaWISo8r6cjKco=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Your email address<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<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>email<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username@beststartupever.com<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.+@beststartupever\.com<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please provide only a Best Startup Ever corporate email address<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>messageBox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>message<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Request<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</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>message<span class="token punctuation">"</span></span> + <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> + <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>My shoes are too tight, and I have forgotten how to dance.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Send Request<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect16"> + +<iframe class="sample-code-frame" title="Pattern validation sample" id="frame_pattern_validation" width="700" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=pattern_validation" loading="lazy"></iframe> +</div> <p>Our <a href="../form"><code><form></code></a> contains one <a href="../input"><code><input></code></a> of type <code>email</code> for the user's email address, a <a href="../textarea"><code><textarea></code></a> to enter their message for IT into, and an <code><input></code> of type <a href="submit"><code>"submit"</code></a>, which creates a button to submit the form. Each text entry box has a <a href="../label"><code><label></code></a> associated with it to let the user know what's expected of them.</p> <p>Let's take a closer look at the email address entry box. Its <a href="../input#size"><code>size</code></a> and <a href="../input#maxlength"><code>maxlength</code></a> attributes are both set to 64 in order to show room for 64 characters worth of email address, and to limit the number of characters actually entered to a maximum of 64. The <a href="../input#required"><code>required</code></a> attribute is specified, making it mandatory that a valid email address be provided.</p> <p>An appropriate <a href="../input#placeholder"><code>placeholder</code></a> is provided—<code>username@beststartupever.com</code>—to demonstrate what constitutes a valid entry. This string demonstrates both that an email address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type <code>email</code> will validate the text to ensure that it's formatted like an email address. If the text in the input box isn't an email address, you'll get an error message that looks something like this:</p> <p> <img src="data:image/png;base64,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" alt="Invalid email address in error state with a popout from the input reading 'please enter an email address'." width="530" height="125" loading="lazy"> </p> <p>If we left things at that, we would at least be validating on legitimate email addresses. But we want to go one step farther: we want to make sure that the email address is in fact in the form "<a href="mailto:_username_@beststartupever.com">_username_@beststartupever.com</a>". This is where we'll use <a href="../input#pattern"><code>pattern</code></a>. We set <code>pattern</code> to <code>.+@beststartupever.com</code>. This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".</p> <p>Note that this is not even close to an adequate filter for valid email addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard email address filter <em>and</em> our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this resembles a valid email address, and if it is, make sure it's also a beststartupever.com address."</p> <p>It's advisable to use the <a href="../../global_attributes#title"><code>title</code></a> attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "Email address", the result would be the message "The entered text doesn't match the required pattern. Email address", which isn't very good.</p> <p>That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate email address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address."</p> <p> <img src="data:image/png;base64,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" alt="A valid email address, but the input is in error state with a popout from the input reading 'The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address.'" width="536" height="140" loading="lazy"> </p> <div class="notecard note" id="sect17"> <p><strong>Note:</strong> If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>Here we have an email input with the ID <code>emailAddress</code> which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text <code>user@example.gov</code> as a placeholder anytime the field is empty. In addition, by using the <a href="../../attributes/multiple"><code>multiple</code></a> attribute, the box is configured to allow the user to enter zero or more email addresses, separated by commas, as described in <a href="#allowing_multiple_email_addresses">Allowing multiple email addresses</a>. As a final touch, the <a href="../input#list"><code>list</code></a> attribute contains the ID of a <a href="../datalist"><code><datalist></code></a> whose <a href="../option"><code><option></code></a>s specify a set of suggested values the user can choose from.</p> <p>As an added touch, the <a href="../label"><code><label></code></a> element is used to establish a label for the email entry box, with its <a href="../label#for"><code>for</code></a> attribute referencing the <code>emailAddress</code> ID of the <a href="../input"><code><input></code></a> element. By associating the two elements in this way, clicking on the label will focus the input element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="GEcPJmEt70+HN5kqWVMpUGX0NXfbcZP5lD/+mREKCH4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>emailAddress<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>email<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user@example.gov<span class="token punctuation">"</span></span> + <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultEmails<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>256<span class="token punctuation">"</span></span> + <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultEmails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>jbond007@mi6.defence.gov.uk<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>jbourne@unknown.net<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>nfury@shield.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>tony@starkindustries.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>hulk@grrrrrrrr.arg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect18"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/email/runner.html?id=examples" loading="lazy"></iframe> +</div> +</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 representing an email address, or empty </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#multiple"><code>multiple</code></a>, <a href="../input#name"><code>name</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a>, <a href="../input#required"><code>required</code></a>, <a href="../input#size"><code>size</code></a>, and <a href="../input#type"><code>type</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code> and <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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code><br>with <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code> </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#email-state-(type=email)">HTML Standard <br><small># email-state-(type=email)</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>email</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</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">11</td> +<td class="bc-supports-yes"><details><summary>3</summary>["Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.", "The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.", "Automatically applies a default style of <code>opacity: 0.4</code> to disable textual <code><input></code> elements, including those of type 'email'. Other major browsers don't currently share this particular default style."]</details></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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li><a href="../input"><code><input></code></a></li> <li><a href="tel"><code><input type="tel"></code></a></li> <li><a href="url"><code><input type="url"></code></a></li> <li>Attributes: <ul> <li><a href="../input#list"><code>list</code></a></li> <li><a href="../../attributes/minlength"><code>minlength</code></a></li> <li><a href="../../attributes/maxlength"><code>maxlength</code></a></li> <li><a href="../../attributes/multiple"><code>multiple</code></a></li> <li><a href="../../attributes/pattern"><code>pattern</code></a></li> <li><a href="../input#placeholder"><code>placeholder</code></a></li> <li><a href="../../attributes/readonly"><code>readonly</code></a></li> <li><a href="../../attributes/size"><code>size</code></a></li> </ul> </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"> + © 2005–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/email" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Ffile.html b/devdocs/html/element%2Finput%2Ffile.html new file mode 100644 index 00000000..ba32c278 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ffile.html @@ -0,0 +1,271 @@ +<header><h1><input type="file"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements with <code>type="file"</code> let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">form submission</a>, or manipulated using JavaScript code and <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications">the File API</a>.</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/input-file.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A file input's <a href="../input#value"><code>value</code></a> attribute contains a string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (<code>""</code>). When the user selected multiple files, the <code>value</code> represents the first file in the list of files they selected. The other files can be identified using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#getting_information_about_selected_files">input's <code>HTMLInputElement.files</code> property</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The value is <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly" target="_blank">always the file's name prefixed with <code>C:\fakepath\</code></a>, which isn't the real path of the file. This is to prevent malicious software from guessing the user's file structure.</p> </div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the common attributes shared by all <a href="../input"><code><input></code></a> elements, inputs of type <code>file</code> also support the following attributes.</p></div> +<h3 id="accept">accept</h3> +<div class="section-content"> +<p>The <a href="../../attributes/accept"><code>accept</code></a> attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of <strong><a href="#unique_file_type_specifiers">unique file type specifiers</a></strong>. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.</p> <p>For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <code><input></code> like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mL1tFpAX7YTR/WZ4eqlGDMJYXpjVwNEj/UjUMlsrnfw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>docpicker<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="capture">capture</h3> +<div class="section-content"> +<p>The <a href="../../attributes/capture"><code>capture</code></a> attribute value is a string that specifies which camera to use for capture of image or video data, if the <a href="../../attributes/accept"><code>accept</code></a> attribute indicates that the input should be of one of those types. A value of <code>user</code> indicates that the user-facing camera and/or microphone should be used. A value of <code>environment</code> specifies that the outward-facing camera and/or microphone should be used. If this attribute is missing, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> is free to decide on its own what to do. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> <code>capture</code> was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.</p> </div> +</div> +<h3 id="multiple">multiple</h3> +<div class="section-content"><p>When the <a href="../../attributes/multiple"><code>multiple</code></a> Boolean attribute is specified, the file input allows the user to select more than one file.</p></div> +<h2 id="non-standard_attributes">Non-standard attributes</h2> +<div class="section-content"><p>In addition to the attributes listed above, the following non-standard attributes are available on some browsers. You should try to avoid using them when possible, since doing so will limit the ability of your code to function in browsers that don't implement them.</p></div> +<h3 id="webkitdirectory"><code>webkitdirectory</code></h3> +<div class="section-content"> +<p>The Boolean <code>webkitdirectory</code> attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory"><code>HTMLInputElement.webkitdirectory</code></a> for additional details and examples.</p> <p>Though originally implemented only for WebKit-based browsers, <code>webkitdirectory</code> is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.</p> +</div> +<h2 id="unique_file_type_specifiers">Unique file type specifiers</h2> +<div class="section-content"> +<p>A <strong>unique file type specifier</strong> is a string that describes a type of file that may be selected by the user in an <a href="../input"><code><input></code></a> element of type <code>file</code>. Each unique file type specifier may take one of the following forms:</p> <ul> <li>A valid case-insensitive filename extension, starting with a period (".") character. For example: <code>.jpg</code>, <code>.pdf</code>, or <code>.doc</code>.</li> <li>A valid MIME type string, with no extensions.</li> <li>The string <code>audio/*</code> meaning "any audio file".</li> <li>The string <code>video/*</code> meaning "any video file".</li> <li>The string <code>image/*</code> meaning "any image file".</li> </ul> <p>The <code>accept</code> attribute takes a string containing one or more of these unique file type specifiers as its value, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vaXAnYa80YDd/ePiItp1UmN0zsKPqN0izC31G0hsyIg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<span class="token punctuation">"</span></span> <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/*,.pdf<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="using_file_inputs">Using file inputs</h2> + +<h3 id="a_basic_example">A basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="F/T1yJHvhAVwkARDAgYCgjkZ4KzGemRGO90oG0vofHE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose file to upload<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>file<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This produces the following output:</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="A basic example sample" id="frame_a_basic_example" width="650" height="90" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/file/runner.html?id=a_basic_example" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html" target="_blank">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html" target="_blank">see it running live</a>.</p> </div> <p>Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.</p> <p>Including the <a href="#multiple"><code>multiple</code></a> attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd> and then clicking). If you only want the user to choose a single file per <code><input></code>, omit the <code>multiple</code> attribute.</p> +</div> +<h3 id="getting_information_on_selected_files">Getting information on selected files</h3> +<div class="section-content"> +<p>The selected files' are returned by the element's <code>HTMLInputElement.files</code> property, which is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileList"><code>FileList</code></a> object containing a list of <a href="https://developer.mozilla.org/en-US/docs/Web/API/File"><code>File</code></a> objects. The <code>FileList</code> behaves like an array, so you can check its <code>length</code> property to get the number of selected files.</p> <p>Each <code>File</code> object contains the following information:</p> <dl> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The file's name.</p> </dd> <dt id="lastmodified"><a href="#lastmodified"><code>lastModified</code></a></dt> <dd> <p>A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).</p> </dd> <dt id="lastmodifieddate"> +<a href="#lastmodifieddate"><code>lastModifiedDate</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> object representing the date and time at which the file was last modified. <em>This is deprecated and should not be used. Use <code>lastModified</code> instead.</em></p> </dd> <dt id="size"><a href="#size"><code>size</code></a></dt> <dd> <p>The size of the file in bytes.</p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The file's <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</p> </dd> <dt id="webkitrelativepath"> +<a href="#webkitrelativepath"><code>webkitRelativePath</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>A string specifying the file's path relative to the base directory selected in a directory picker (that is, a <code>file</code> picker in which the <a href="#webkitdirectory"><code>webkitdirectory</code></a> attribute is set). <em>This is non-standard and should be used with caution.</em></p> </dd> </dl> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see <a href="https://bugzil.la/1384030" target="_blank">Firefox bug 1384030</a>).</p> </div> +</div> +<h3 id="limiting_accepted_file_types">Limiting accepted file types</h3> +<div class="section-content"> +<p>Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as <a href="https://developer.mozilla.org/en-US/docs/Glossary/JPEG">JPEG</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/PNG">PNG</a>.</p> <p>Acceptable file types can be specified with the <a href="#accept"><code>accept</code></a> attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:</p> <ul> <li> +<code>accept="image/png"</code> or <code>accept=".png"</code> — Accepts PNG files.</li> <li> +<code>accept="image/png, image/jpeg"</code> or <code>accept=".png, .jpg, .jpeg"</code> — Accept PNG or JPEG files.</li> <li> +<code>accept="image/*"</code> — Accept any file with an <code>image/*</code> MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)</li> <li> +<code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accept anything that smells like an MS Word document.</li> </ul> <p>Let's look at a more complete example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sO1n56AipdPykkyYIzuTKOBrH9jWxWeWOgHs6OXK758=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>profile_pic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose file to upload<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>profile_pic<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>profile_pic<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.jpg, .jpeg, .png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This produces a similar-looking output to the previous example:</p> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Limiting accepted file types sample" id="frame_limiting_accepted_file_types" width="650" height="90" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/file/runner.html?id=limiting_accepted_file_types" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-with-accept.html" target="_blank">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html" target="_blank">see it running live</a>.</p> </div> <p>It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the <code>accept</code> value (the exact interface differs across browsers and operating systems).</p> <p>The <code>accept</code> attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.</p> <p>Because of this, you should make sure that the <code>accept</code> attribute is backed up by appropriate server-side validation.</p> +</div> +<h3 id="notes">Notes</h3> +<div class="section-content"><ol> <li>You cannot set the value of a file picker from a script — doing something like the following has no effect: <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="C2IWJtaJFrSKmhNfIt5zmGky5v1XzWtbwUM3dKsnJs4=" data-language="js"><span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input[type=file]"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +input<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"foo"</span><span class="token punctuation">;</span> +</pre> +</div> </li> <li>When a file is chosen using an <code><input type="file"></code>, the real path to the source file is not shown in the input's <code>value</code> attribute for obvious security reasons. Instead, the filename is shown, with <code>C:\fakepath\</code> prepended to it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly" target="_blank">defined in the spec</a>.</li> </ol></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the <code>HTMLInputElement.files</code> property, as well as showing off a few clever tricks.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> You can see the complete source code for this example on GitHub — <a href="https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/file-example.html" target="_blank">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html" target="_blank">see it live also</a>). We won't explain the CSS; the JavaScript is the main focus.</p> </div> <p>First of all, let's look at the HTML:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="oEcisEfXc6ZaS41hRYzjYjlNPxWuyfPFT5wbwqL2Yb0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">enctype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multipart/form-data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>image_uploads<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose images to upload (PNG, JPG)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>file<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>image_uploads<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image_uploads<span class="token punctuation">"</span></span> + <span class="token attr-name">accept</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.jpg, .jpeg, .png<span class="token punctuation">"</span></span> + <span class="token attr-name">multiple</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>preview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>No files currently selected for upload<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This is similar to what we've seen before — nothing special to comment on.</p> <p>Next, let's walk through the JavaScript.</p> <p>In the first lines of script, we get references to the form input itself, and the <a href="../div"><code><div></code></a> element with the class of <code>.preview</code>. Next, we hide the <a href="../input"><code><input></code></a> element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the <code>input</code> element by clicking its <a href="../label"><code><label></code></a>, so it is better to visually hide the <code>input</code> and style the label like a button, so the user will know to interact with it if they want to upload files.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="RBStzvLblkuoj2jexlo5CjpTqNTqsjXonwEujy6eLxk=" data-language="js"><span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> preview <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".preview"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +input<span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> +</pre> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/opacity"><code>opacity</code></a> is used to hide the file input instead of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display: none</code></a>, because assistive technology interprets the latter two styles to mean the file input isn't interactive.</p> </div> <p>Next, we add an <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a> to the input to listen for changes to its selected value (in this case, when files are selected). The event listener invokes our custom <code>updateImageDisplay()</code> function.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="JmnTxpRvekMWTk0cBbW7tjXC1ubwsp0Cj7o7zchAn+A=" data-language="js">input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> updateImageDisplay<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>Whenever the <code>updateImageDisplay()</code> function is invoked, we:</p> <ul> <li>Use a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while"><code>while</code></a> loop to empty the previous contents of the preview <code><div></code>.</li> <li>Grab the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileList"><code>FileList</code></a> object that contains the information on all the selected files, and store it in a variable called <code>curFiles</code>.</li> <li>Check to see if no files were selected, by checking if <code>curFiles.length</code> is equal to 0. If so, print a message into the preview <code><div></code> stating that no files have been selected.</li> <li>If files <em>have</em> been selected, we loop through each one, printing information about it into the preview <code><div></code>. Things to note here:</li> <li>We use the custom <code>validFileType()</code> function to check whether the file is of the correct type (e.g. the image types specified in the <code>accept</code> attribute).</li> <li>If it is, we: <ul> <li>Print out its name and file size into a list item inside the previous <code><div></code> (obtained from <code>file.name</code> and <code>file.size</code>). The custom <code>returnFileSize()</code> function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).</li> <li>Generate a thumbnail preview of the image by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"><code>URL.createObjectURL(curFiles[i])</code></a>. Then, insert the image into the list item too by creating a new <a href="../img"><code><img></code></a> and setting its <a href="../img#src"><code>src</code></a> to the thumbnail.</li> </ul> </li> <li>If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.</li> </ul> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="4x65Bllp3JsG007iyxquHFsqAYgILx3nb0GmzTEFpeY=" data-language="js"><span class="token keyword">function</span> <span class="token function">updateImageDisplay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">while</span> <span class="token punctuation">(</span>preview<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span> <span class="token punctuation">{</span> + preview<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>preview<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">const</span> curFiles <span class="token operator">=</span> input<span class="token punctuation">.</span>files<span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>curFiles<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"No files currently selected for upload"</span><span class="token punctuation">;</span> + preview<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> list <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"ol"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + preview<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> file <span class="token keyword">of</span> curFiles<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> listItem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">validFileType</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">File name </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, file size </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">returnFileSize</span><span class="token punctuation">(</span> + file<span class="token punctuation">.</span>size<span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token keyword">const</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + image<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">;</span> + + listItem<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span> + listItem<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">File name </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>file<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">: Not a valid file type. Update your selection.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + listItem<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + list<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>listItem<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The custom <code>validFileType()</code> function takes a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File"><code>File</code></a> object as a parameter, then uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes"><code>Array.prototype.includes()</code></a> to check if any value in the <code>fileTypes</code> matches the file's <code>type</code> property. If a match is found, the function returns <code>true</code>. If no match is found, it returns <code>false</code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="Zm3sKYd4OUmReiVgNSeQuIvDJBZOl0FjzXkD8flZp9A=" data-language="js"><span class="token comment">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types</span> +<span class="token keyword">const</span> fileTypes <span class="token operator">=</span> <span class="token punctuation">[</span> + <span class="token string">"image/apng"</span><span class="token punctuation">,</span> + <span class="token string">"image/bmp"</span><span class="token punctuation">,</span> + <span class="token string">"image/gif"</span><span class="token punctuation">,</span> + <span class="token string">"image/jpeg"</span><span class="token punctuation">,</span> + <span class="token string">"image/pjpeg"</span><span class="token punctuation">,</span> + <span class="token string">"image/png"</span><span class="token punctuation">,</span> + <span class="token string">"image/svg+xml"</span><span class="token punctuation">,</span> + <span class="token string">"image/tiff"</span><span class="token punctuation">,</span> + <span class="token string">"image/webp"</span><span class="token punctuation">,</span> + <span class="token string">"image/x-icon"</span><span class="token punctuation">,</span> +<span class="token punctuation">]</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">validFileType</span><span class="token punctuation">(</span><span class="token parameter">file</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> fileTypes<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>file<span class="token punctuation">.</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The <code>returnFileSize()</code> function takes a number (of bytes, taken from the current file's <code>size</code> property), and turns it into a nicely formatted size in bytes/KB/MB.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="7MUk5n5cUKa8RRBaIju6wnDAgdMDSdKlbaTVhmuKX2I=" data-language="js"><span class="token keyword">function</span> <span class="token function">returnFileSize</span><span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>number <span class="token operator"><</span> <span class="token number">1024</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>number<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> bytes</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>number <span class="token operator">>=</span> <span class="token number">1024</span> <span class="token operator">&&</span> number <span class="token operator"><</span> <span class="token number">1048576</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>number <span class="token operator">/</span> <span class="token number">1024</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> KB</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>number <span class="token operator">>=</span> <span class="token number">1048576</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span>number <span class="token operator">/</span> <span class="token number">1048576</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> MB</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The example looks like this; have a play:</p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/file/runner.html?id=examples" loading="lazy"></iframe> +</div> +</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 representing the path to the selected file. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td><a href="../input#required"><code>required</code></a></td> </tr> <tr> <td><strong>Additional Attributes</strong></td> <td> <a href="#accept" aria-current="page"><code>accept</code></a>, <a href="#capture" aria-current="page"><code>capture</code></a>, <a href="#multiple" aria-current="page"><code>multiple</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>files</code> and <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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#file-upload-state-(type=file)">HTML Standard <br><small># file-upload-state-(type=file)</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>file</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>You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see <a href="https://bugzil.la/1384030">bug 1384030</a>).</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</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">11</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="https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications">Using files from web applications</a> — contains a number of other useful examples related to <code><input type="file"></code> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File API</a>.</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"> + © 2005–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/file" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fhidden.html b/devdocs/html/element%2Finput%2Fhidden.html new file mode 100644 index 00000000..d6a9ff20 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fhidden.html @@ -0,0 +1,139 @@ +<header><h1><input type="hidden"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>hidden</code> let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> events do not apply to this input type. Hidden inputs cannot be focused even using JavaScript (e.g. <code>hiddenInput.focus()</code>).</p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input"><code><input></code></a> element's <a href="../input#value"><code>value</code></a> attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> While the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's developer tools or "View Source" functionality. Do not rely on <code>hidden</code> inputs as a form of security.</p> </div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes common to all <a href="../input"><code><input></code></a> elements, <code>hidden</code> inputs offer the following attributes.</p></div> +<h3 id="name">name</h3> +<div class="section-content"><p>This is actually one of the common attributes, but it has a special meaning available for hidden inputs. Normally, the <a href="../input#name"><code>name</code></a> attribute functions on hidden inputs just like on any other input. However, when the form is submitted, a hidden input whose <code>name</code> is set to <code>_charset_</code> will automatically be reported with the value set to the character encoding used to submit the form.</p></div> +<h2 id="using_hidden_inputs">Using hidden inputs</h2> +<div class="section-content"><p>As mentioned above, hidden inputs can be used anywhere that you want to include data the user can't see or edit along with the form when it's submitted to the server. Let's look at some examples that illustrate its use.</p></div> +<h3 id="tracking_edited_content">Tracking edited content</h3> +<div class="section-content"> +<p>One of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted. A typical workflow looks like this:</p> <ol> <li>User decides to edit some content they have control over, such as a blog post, or a product entry. They get started by pressing the edit button.</li> <li>The content to be edited is taken from the database and loaded into an HTML form to allow the user to make changes.</li> <li>After editing, the user submits the form, and the updated data is sent back to the server to be updated in the database.</li> </ol> <p>The idea here is that during step 2, the ID of the record being updated is kept in a hidden input. When the form is submitted in step 3, the ID is automatically sent back to the server with the record content. The ID lets the site's server-side component know exactly which record needs to be updated with the submitted data.</p> <p>You can see a full example of what this might look like in the <a href="#examples">Examples</a> section below.</p> +</div> +<h3 id="improving_website_security">Improving website security</h3> +<div class="section-content"> +<p>Hidden inputs are also used to store and submit security tokens or <em>secrets</em>, for the purposes of improving website security. The basic idea is that if a user is filling in a sensitive form, such as a form on their banking website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request.</p> <p>This would stop a malicious user from creating a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. This kind of attack is called a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security#cross-site_request_forgery_(csrf)">Cross Site Request Forgery (CSRF)</a>; pretty much any reputable server-side framework uses hidden secrets to prevent such attacks.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Placing the secret in a hidden input doesn't inherently make it secure. The key's composition and encoding would do that. The value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. You need to use well-designed secrets to actually secure your website.</p> </div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>Hidden inputs 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>Let's look at how we might implement a simple version of the edit form we described earlier (see <a href="#tracking_edited_content">Tracking edited content</a>), using a hidden input to remember the ID of the record being edited.</p> <p>The edit form's HTML might look a bit like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gQoAEM8G1XTAucgftX96joE6E1Kugl6Bm0udmNY0r5A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Post title:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<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>My excellent blog post<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Post content:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</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>content<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>60<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +This is the content of my excellent blog post. I hope you enjoy it! + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Update post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>hidden<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>postId<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>postId<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>34657<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Let's also add some simple CSS:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="yMOignqI5hHA2+ZpcDj2r7DGuULxtIDkBUDZcCwWClc=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">form</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input, +textarea</span> <span class="token punctuation">{</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 7<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 1.1rem<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">textarea</span> <span class="token punctuation">{</span> + <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The server would set the value of the hidden input with the ID "<code>postID</code>" to the ID of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modified information. No scripting is needed in the content to handle this.</p> <p>The output looks like this:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/hidden/runner.html?id=examples" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> You can also find the example on GitHub (see the <a href="https://github.com/mdn/learning-area/blob/main/html/forms/hidden-input-example/index.html" target="_blank">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html" target="_blank">see it running live</a>).</p> </div> <p>When submitted, the form data sent to the server will look something like this:</p> <p><code>title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657</code></p> <p>Even though the hidden input cannot be seen at all, its data is still submitted.</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 representing the value of the hidden data you want to pass back to the server. </td> </tr> <tr> <td><strong>Events</strong></td> <td>None.</td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td><a href="../input#autocomplete"><code>autocomplete</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://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#hidden-state-(type=hidden)">HTML Standard <br><small># hidden-state-(type=hidden)</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>hidden</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">Yes</td> +<td class="bc-supports-yes">2</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">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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li> +<a href="../input"><code><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface it's based upon</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/hidden" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fimage.html b/devdocs/html/element%2Finput%2Fimage.html new file mode 100644 index 00000000..9e821837 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fimage.html @@ -0,0 +1,229 @@ +<header><h1><input type="image"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>image</code> are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.</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-image.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="value">Value</h2> +<div class="section-content"><p><code><input type="image"></code> elements do not accept <code>value</code> attributes. The path to the image to be displayed is specified in the <code>src</code> attribute.</p></div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes shared by all <a href="../input"><code><input></code></a> elements, <code>image</code> button inputs support the following attributes.</p></div> +<h3 id="alt">alt</h3> +<div class="section-content"> +<p>The <code>alt</code> attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> that cannot or is configured not to show images, or if the user is using a screen reading device). If provided, it must be a non-empty string appropriate as a label for the button.</p> <p>For example, if you have a graphical button that shows an image with an icon and/or image text "Login Now", you should also set the <code>alt</code> attribute to something like <code>Login Now</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> While the <code>alt</code> attribute is technically optional, you should always include one to maximize the usability of your content.</p> </div> <p>Functionally, the <code>alt</code> attribute of the <code><input type="image"></code> element works just like the <a href="../img#alt"><code>alt</code></a> attribute on <a href="../img"><code><img></code></a> elements.</p> +</div> +<h3 id="formaction">formaction</h3> +<div class="section-content"> +<p>A string indicating the URL to which to submit the data. This takes precedence over the <a href="../form#action"><code>action</code></a> attribute on the <a href="../form"><code><form></code></a> element that owns the <a href="../input"><code><input></code></a>.</p> <p>This attribute is also available on <a href="submit"><code><input type="submit"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formenctype">formenctype</h3> +<div class="section-content"> +<p>A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:</p> <dl> <dt id="applicationx-www-form-urlencoded"><a href="#applicationx-www-form-urlencoded"><code>application/x-www-form-urlencoded</code></a></dt> <dd> <p>This, the default value, sends the form data as a string after <a href="https://en.wikipedia.org/wiki/URL_encoding" target="_blank">URL encoding</a> the text using an algorithm such as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a>.</p> </dd> <dt id="multipartform-data"><a href="#multipartform-data"><code>multipart/form-data</code></a></dt> <dd> <p>Uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData"><code>FormData</code></a> API to manage the data, allowing for files to be submitted to the server. You <em>must</em> use this encoding type if your form includes any <a href="../input"><code><input></code></a> elements of <a href="../input#type"><code>type</code></a> <code>file</code> (<a href="file"><code><input type="file"></code></a>).</p> </dd> <dt id="textplain"><a href="#textplain"><code>text/plain</code></a></dt> <dd> <p>Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.</p> </dd> </dl> <p>If specified, the value of the <code>formenctype</code> attribute overrides the owning form's <a href="../form#action"><code>action</code></a> attribute.</p> <p>This attribute is also available on <a href="submit"><code><input type="submit"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formmethod">formmethod</h3> +<div class="section-content"> +<p>A string indicating the HTTP method to use when submitting the form's data; this value overrides any <a href="../form#method"><code>method</code></a> attribute given on the owning form. Permitted values are:</p> <dl> <dt id="get"><a href="#get"><code>get</code></a></dt> <dd> <p>A URL is constructed by starting with the URL given by the <code>formaction</code> or <a href="../form#action"><code>action</code></a> attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by <code>formenctype</code> or the form's <a href="../form#enctype"><code>enctype</code></a> attribute. This URL is then sent to the server using an HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>get</code></a> request. This method works well for simple forms that contain only <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> characters and have no side effects. This is the default value.</p> </dd> <dt id="post"><a href="#post"><code>post</code></a></dt> <dd> <p>The form's data is included in the body of the request that is sent to the URL given by the <code>formaction</code> or <a href="../form#action"><code>action</code></a> attribute using an HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>post</code></a> request. This method supports complex data and file attachments.</p> </dd> <dt id="dialog"><a href="#dialog"><code>dialog</code></a></dt> <dd> <p>This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.</p> </dd> </dl> <p>This attribute is also available on <a href="submit"><code><input type="submit"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formnovalidate">formnovalidate</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the <a href="../form#novalidate"><code>novalidate</code></a> attribute on the element's owning form.</p> <p>This attribute is also available on <a href="submit"><code><input type="submit"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formtarget">formtarget</h3> +<div class="section-content"> +<p>A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a <strong>browsing context</strong> (that is, a tab, window, or <a href="../iframe"><code><iframe></code></a>. A value specified here overrides any target given by the <a href="../form#target"><code>target</code></a> attribute on the <a href="../form"><code><form></code></a> that owns this input.</p> <p>In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:</p> <dl> <dt id="_self"><a href="#_self"><code>_self</code></a></dt> <dd> <p>Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.</p> </dd> <dt id="_blank"><a href="#_blank"><code>_blank</code></a></dt> <dd> <p>Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>.</p> </dd> <dt id="_parent"><a href="#_parent"><code>_parent</code></a></dt> <dd> <p>Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as <code>_self</code>.</p> </dd> <dt id="_top"><a href="#_top"><code>_top</code></a></dt> <dd> <p>Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as <code>_self</code>.</p> </dd> </dl> <p>This attribute is also available on <a href="submit"><code><input type="submit"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="height">height</h3> +<div class="section-content"><p>A number specifying the height, in CSS pixels, at which to draw the image specified by the <code>src</code> attribute.</p></div> +<h3 id="src">src</h3> +<div class="section-content"><p>A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.</p></div> +<h3 id="width">width</h3> +<div class="section-content"><p>A number indicating the width at which to draw the image, in CSS pixels.</p></div> +<h2 id="obsolete_attributes">Obsolete attributes</h2> +<div class="section-content"><p>The following attribute was defined by HTML 4 for <code>image</code> inputs, but was not implemented by all browsers and has since been deprecated.</p></div> +<h3 id="usemap">usemap</h3> +<div class="section-content"><p>If <code>usemap</code> is specified, it must be the name of an image map element, <a href="../map"><code><map></code></a>, that defines an image map to use with the image. This usage is obsolete; you should switch to using the <a href="../img"><code><img></code></a> element when you want to use image maps.</p></div> +<h2 id="using_image_inputs">Using image inputs</h2> +<div class="section-content"><p>The <code><input type="image"></code> element is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a> (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular <a href="../img"><code><img></code></a> element, but with the capabilities of a <a href="submit">submit button</a>.</p></div> +<h3 id="essential_image_input_features">Essential image input features</h3> +<div class="section-content"> +<p>Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <code><img></code> element.):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SxidWw9jvREYA39xdvujARf0mFNuP8q+MIE26iwRuaM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>image<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>image<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Login<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Essential image input features sample" id="frame_essential_image_input_features" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/image/runner.html?id=essential_image_input_features" loading="lazy"></iframe> +</div> <ul> <li>The <a href="../input#src"><code>src</code></a> attribute is used to specify the path to the image you want to display in the button.</li> <li>The <a href="../input#alt"><code>alt</code></a> attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. It will also display if the image can't be shown for any reason (for example if the path is misspelled). If possible, use text which matches the label you'd use if you were using a standard submit button.</li> <li>The <a href="../input#width"><code>width</code></a> and <a href="../input#height"><code>height</code></a> attributes are used to specify the width and height the image should be shown at, in pixels. The button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use CSS (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding</code></a>). Also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio.</li> </ul> +</div> +<h3 id="overriding_default_form_behaviors">Overriding default form behaviors</h3> +<div class="section-content"> +<p><code><input type="image"></code> elements — like regular <a href="submit">submit buttons</a> — can accept a number of attributes that override the default form behavior:</p> <dl> <dt id="formaction_2"><a href="#formaction_2"><code>formaction</code></a></dt> <dd> <p>The URI of a program that processes the information submitted by the input element; overrides the <a href="../form#action"><code>action</code></a> attribute of the element's form owner.</p> </dd> <dt id="formenctype_2"><a href="#formenctype_2"><code>formenctype</code></a></dt> <dd> <p>Specifies the type of content that is used to submit the form to the server. Possible values are:</p> <ul> <li> +<code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> <li> +<code>text/plain</code>.</li> </ul> <p>If this attribute is specified, it overrides the <a href="../form#enctype"><code>enctype</code></a> attribute of the element's form owner.</p> </dd> <dt id="formmethod_2"><a href="#formmethod_2"><code>formmethod</code></a></dt> <dd> <p>Specifies the HTTP method that the browser uses to submit the form. Possible values are:</p> <ul> <li> +<code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> <li> +<code>get</code>: The data from the form is appended to the <code>form</code> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side effects and contains only ASCII characters.</li> </ul> <p>If specified, this attribute overrides the <a href="../form#method"><code>method</code></a> attribute of the element's form owner.</p> </dd> <dt id="formnovalidate_2"><a href="#formnovalidate_2"><code>formnovalidate</code></a></dt> <dd> <p>A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the <a href="../form#novalidate"><code>novalidate</code></a> attribute of the element's form owner.</p> </dd> <dt id="formtarget_2"><a href="#formtarget_2"><code>formtarget</code></a></dt> <dd> <p>A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the <a href="../form#target"><code>target</code></a> attribute of the element's form owner. The following keywords have special meanings:</p> <ul> <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> <li> +<code>_blank</code>: Load the response into a new unnamed browsing context.</li> <li> +<code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> <li> +<code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as <code>_self</code>.</li> </ul> </dd> </dl> +</div> +<h3 id="using_the_x_and_y_data_points">Using the x and y data points</h3> +<div class="section-content"> +<p>When you submit a form using a button created with <code><input type="image"></code>, two extra data points are submitted to the server automatically by the browser — <code>x</code> and <code>y</code>. You can see this in action in our <a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html" target="_blank">X Y coordinates example</a>.</p> <p>When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example <code>?x=52&y=55</code>. If the image input has a <a href="../input#name"><code>name</code></a> attribute, then keep in mind that the specified name is prefixed on every attribute, so if the <code>name</code> is <code>position</code>, then the returned coordinates would be formatted in the URL as <code>?position.x=52&position.y=55</code>. This, of course, applies to all other attributes as well.</p> <p>These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image and the default in case submission happens without a click on the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.</p> <p>In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.</p> +</div> +<h3 id="adjusting_the_images_position_and_scaling_algorithm">Adjusting the image's position and scaling algorithm</h3> +<div class="section-content"><p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> property to adjust the positioning of the image within the <code><input></code> element's frame, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the <code>width</code> and <code>height</code> attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="a_login_form">A login form</h3> +<div class="section-content"> +<p>The following example shows the same button as before, but included in the context of a typical login form.</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="A login form sample" id="frame_a_login_form" width="600" height="170" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/image/runner.html?id=a_login_form" loading="lazy"></iframe> +</div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3xh6K1Mdh3TRerA968J6iTo4TsN32ksn2Voy70vjBRM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Login to your account<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>User ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userId<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userId<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">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 attr-name">name</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>image<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>image<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Login<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <p>And now some simple CSS to make the basic elements sit more neatly:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Jzj+JKv32qycLZoApjuW4haHKs/QK4Q/KL/QT1QlBCk=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="adjusting_the_image_position_and_scaling">Adjusting the image position and scaling</h3> +<div class="section-content"> +<p>In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a>.</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Adjusting the image position and scaling sample" id="frame_adjusting_the_image_position_and_scaling" width="600" height="300" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/image/runner.html?id=adjusting_the_image_position_and_scaling" loading="lazy"></iframe> +</div> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1JKZx825P4XqOUfKZOGyjDNN8NEyS5cQrEg+7ql4wfo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Login to your account<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>User ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userId<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>userId<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">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 attr-name">name</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>image<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>image<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Login<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css_2">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sgJrA5uoo4TYDPC7lnvipyZVGqI++mU/O4UuLmO6Ajk=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">#image</span> <span class="token punctuation">{</span> + <span class="token property">object-position</span><span class="token punctuation">:</span> right top<span class="token punctuation">;</span> + <span class="token property">object-fit</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here, <code>object-position</code> is configured to draw the image in the top-right corner of the element, while <code>object-fit</code> is set to <code>contain</code>, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.</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>None — the <code>value</code> attribute should not be specified.</td> </tr> <tr> <td><strong>Events</strong></td> <td>None.</td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#alt"><code>alt</code></a>, <a href="../input#src"><code>src</code></a>, <a href="../input#width"><code>width</code></a>, <a href="../input#height"><code>height</code></a>, <a href="../input#formaction"><code>formaction</code></a>, <a href="../input#formenctype"><code>formenctype</code></a>, <a href="../input#formmethod"><code>formmethod</code></a>, <a href="../input#formmethod"><code>formnovalidate</code></a>, <a href="../input#formtarget"><code>formtarget</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td>None.</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#image-button-state-(type=image)">HTML Standard <br><small># image-button-state-(type=image)</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>image</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">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">4</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><input></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>The HTML <a href="../img"><code><img></code></a> element</li> <li>Positioning and sizing the image within the <code><input></code> element's frame: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> +</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"> + © 2005–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/image" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fmonth.html b/devdocs/html/element%2Finput%2Fmonth.html new file mode 100644 index 00000000..041f2b4a --- /dev/null +++ b/devdocs/html/element%2Finput%2Fmonth.html @@ -0,0 +1,347 @@ +<header><h1><input type="month"></h1></header><div class="section-content"><p> <a href="../input"><code><input></code></a> elements of type <code>month</code> create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format "<code>YYYY-MM</code>", where <code>YYYY</code> is the four-digit year and <code>MM</code> is the month number. </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/input-month.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p> The control's UI varies in general from browser to browser; at the moment support is patchy, with only Chrome/Opera and Edge on desktop — and most modern mobile browser versions — having usable implementations. In browsers that don't support <code>month</code> inputs, the control degrades gracefully to a simple <a href="text"><code><input type="text"></code></a>, although there may be automatic validation of the entered text to ensure it's formatted as expected. </p> <p> For those of you using a browser that doesn't support <code>month</code>, the screenshot below shows what it looks like in Chrome and Opera. Clicking the down arrow on the right-hand side brings up a date picker that lets you select the month and year. </p> <p> <img src="data:image/png;base64,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" alt="Month control on Chrome browser" width="273" height="216" loading="lazy"> </p> <p>The Microsoft Edge <code>month</code> control looks like this:</p> <p> <img src="data:image/png;base64,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" alt="Month control on Edge browser" width="227" height="389" loading="lazy"> </p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p> A string representing the value of the month and year entered into the input, in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), followed by the two-digit month). The format of the month string used by this input type is described in <a href="../../date_and_time_formats#month_strings">Month strings</a>. </p></div> +<h3 id="setting_a_default_value">Setting a default value</h3> +<div class="section-content"> +<p>You can set a default value for the input control by including a month and year inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iCvTj9jtfL9EwBCzYhIU86QvGkrVkbMWSo/hz0x/bZM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<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>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<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>2001-06<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Setting a default value sample" id="frame_setting_a_default_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_a_default_value" loading="lazy"></iframe> +</div> <p>One thing to note is that the displayed date format differs from the actual <code>value</code>; most <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agents</a> display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date <code>value</code> is always formatted <code>yyyy-MM</code>.</p> <p>When the above value is submitted to the server, for example, it will look like <code>bday-month=1978-06</code>.</p> +</div> +<h3 id="setting_the_value_using_javascript">Setting the value using JavaScript</h3> +<div class="section-content"> +<p>You can also get and set the date value in JavaScript using the <a class="page-not-created"><code>HTMLInputElement.value</code></a> property, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fXbh4ERoVcOHEWNfzyAAj9qeBQCHfvbuaXkNXr6+O40=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<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>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="1f19y/H5VfADGcVbB54eIud2vKnIN52bUrWNtni5n0U=" data-language="js"><span class="token keyword">const</span> monthControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="month"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +monthControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2001-06"</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Setting the value using JavaScript sample" id="frame_setting_the_value_using_javascript" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_the_value_using_javascript" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes common to <a href="../input"><code><input></code></a> elements, month inputs offer the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p> The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. </p></div> +<h3 id="max">max</h3> +<div class="section-content"> +<p> The latest year and month, in the string format discussed in the <a href="#value">Value</a> section above, to accept. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid string in "<code>yyyy-MM</code>" format, then the element has no maximum value. </p> <p>This value must specify a year-month pairing later than or equal to the one specified by the <code>min</code> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p> The earliest year and month to accept, in the same "<code>yyyy-MM</code>" format described above. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid year and month string, the input has no minimum value. </p> <p>This value must be a year-month pairing which is earlier than or equal to the one specified by the <code>max</code> attribute.</p> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p> A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed from JavaScript code that directly sets the value of the <a class="page-not-created"><code>HTMLInputElement.value</code></a> property. </p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p> The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid. </p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p> For <code>month</code> inputs, the value of <code>step</code> is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of <code>step</code> is 1 month. </p> +</div> +<h2 id="using_month_inputs">Using month inputs</h2> +<div class="section-content"> +<p> Date-related inputs (including <code>month</code>) sound convenient at first glance; they promise an easy UI for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <code><input type="month"></code> because at this time, many major browsers don't yet support it. </p> <p>We'll look at basic and more complex uses of <code><input type="month"></code>, then offer advice on mitigating the browser support issue in the section <a href="#handling_browser_support">Handling browser support</a>).</p> +</div> +<h3 id="basic_uses_of_month">Basic uses of month</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="month"></code> involves a basic <a href="../input"><code><input></code></a> and <a href="../label"><code><label></code></a> element combination, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3BOnuNHf4TM0/Mwl4iMLDWOcFJAawGhjPXeMkoL0kYI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<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>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Basic uses of month sample" id="frame_basic_uses_of_month" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=basic_uses_of_month" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_maximum_and_minimum_dates">Setting maximum and minimum dates</h3> +<div class="section-content"> +<p> You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the range of dates that the user can choose. In the following example we specify a minimum month of <code>1900-01</code> and a maximum month of <code>2013-12</code>: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="wGkIhlT19ZtvQG9enP+i8K+OD7pqM9aQbzDsBmjstPY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>bday-month<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>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1900-01<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2013-12<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum dates sample" id="frame_setting_maximum_and_minimum_dates" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_maximum_and_minimum_dates" loading="lazy"></iframe> +</div> <p>The result here is that:</p> <ul> <li>Only months between in January 1900 and December 2013 can be selected; months outside that range can't be scrolled to in the control.</li> <li>Depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month picker (e.g. Edge), or invalid (see <a href="#validation">Validation</a>) but still available (e.g. Chrome).</li> </ul> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p> <code><input type="month"></code> doesn't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for sizing needs. </p></div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p> By default, <code><input type="month"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still submit the form with the <code>month</code> input empty, or enter an invalid date (e.g. the 32nd of April). </p> <p> To help avoid this, you can use <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> to restrict the available dates (see <a href="#setting_maximum_and_minimum_dates">Setting maximum and minimum dates</a>), and in addition use the <a href="../input#required"><code>required</code></a> attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field. </p> <p>Let's look at an example; here we've set minimum and maximum dates, and also made the field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t76ejrHw0V4jzr+JS9ugi9HXUCyeNhidCJ9cEMRqHAk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + What month would you like to visit (June to Sept.)? + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<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>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-06<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-09<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p> If you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error. Try playing with the example now: </p> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Here's a screenshot for those of you who aren't using a supporting browser:</p> <p> <img src="data:image/png;base64,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" alt="Month required prompt on Chrome browser" width="477" height="93" loading="lazy"> </p> <p> Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <a href="../span"><code><span></code></a> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard warning" id="sect8"> <p> <strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). </p> </div> +</div> +<h2 id="handling_browser_support">Handling browser support</h2> +<div class="section-content"> +<p> As mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>month</code> picker on Chrome for Android looks like this: </p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAKACAMAAACGxBKVAAAA2FBMVEVmZmZeXl5gYGBjY2NlZWVkZGRiYmIAAAD///9hYWFnZ2dcXFxWVlZYWFhfX19bW1tSUlJaWlpqampERESfn58/Pz9OTk5sbGz8/f1dXV1WV1dTU1N1dXX6+/tRUVEgICAPDw8XFxdDQkBJS0opKSkGBga3t7fh4eHb29s1NTWwsLBkWkdXOQA7OzsvLy/09vZAMxtfQxAKNh/n5+fCwsLNzc3u7u4oRTaVlZXW1tYUnpEDlognppqR0sy4499QuK6n29ZuxLyKioqqqqrj9PJ/f3/M6ugAj4H6klMmAAAgAElEQVR42uya/3OiPhPHERRlBauJxBN6BEgo0hlwRqu2v9rp//8vPRtQwX6x9u5z90xv2GkqSZYgL5b3Loxav7W/YlqLoAXdgm7t90Bz07Aq69rJP3iuYXjeT0p75VMwm2XhJytxKWXy66Aftj8GlW2Xt8fBl0euPpjz/UGbG97EPF2kaIt9Y4xO0xLB+jk4csTPMMvRavhRJIKA8Sj5NdBJsu7IO3WY5T68mx6vcDpYv0R9tnz55pQRS2fw1CAdbp9v0e7XJ17Z3aC2B1rtRsOEBowxPzuBKvuMiaS5eCKVVesn2eGyRPwt6Mldknb6fT0dPOCSNegFHnSxX+6/OecEz6izfqhj2i22nvqEVLqNU61tW7lKGnKFNahB57S0+AA6DJ4XvF9s0ZYbNcY3y2WaI+bn7cNb0LM0SW1/n0ReXz5H92egB4N98t1FO1s/9p7Y4PYo1+mLiis878VtehBvtmyCNo5yQhN+DvplX1l0ENdtuuT9hHMu149q4H5byPShnzykLHoLmiyS1B8NnkRyux2cgd5skfP0cCt935Au1ul2+1jFS/JAFjXoxe0h8G4bnE+3cByUpGvQ4bry+CGrvoxuf1TR7/+U/eld8jJC2E99NhA8/AD0HHfHEF42QKfLLHhJprjwd1dpuR48Hqmvb59q0E/7xWF8euJ8f7qDY8YU6QbotHJZyuPIAXSyucft8gpJzGn75dN2HXwIulziPKJ5+QXS7153FJ+DDh8OnJ/qex5BK9JXgKaD+Oiy2YT956UjHxbJO6DXzDssEZ5p9OYeU8Oef3uRXmzXR+nYzJqgX045i1cQt0X/DLQi/Tnou83pemF27D8/9fvWgL8D+mmzOVzQu+3+LBkup/K7F9H5dm88iToZrk+gX9aNJxlXJcSffv8VaEZrn49AZ4NOVXgnqgrBJLmM+i8/o7eg+/nj9LGy6Sl+1ao/7rNv/7BSlnfbTV3e0Wx9LO/O0nz3dTaqQCPpC6DLuL1fK5fpXX8/2DxOp5yvN/vl9K1GrwvJj9b4gungu9cbjQeWTdR8YJkStOf1eeGa7AfP55JTPZ4EJ9LHquOnPD3BPOJc+Fgmsdm+fzudPiPofjF9eAnfgM7Wy5NtG6SZ98+89tCbnPv9x3SNlr5+FEv25286kqi0UGanTLdVO27Ti1nr9YNH/QgeyZPxf/GV0nUvlS6hq991VPaL7zpa+2uvSVtrQf8DoN3W/opp3db+imlWa3/FWtAt6BZ0a78BWh+1Vpv+x0DrI9No7WjWHyB9AD3StdZq00d/CvTcaunWBnqnBd2CbkG3oFvQLegWdAv6/wPaPLMW9J8CbQ4nDRteJm1+BTSgtaBP6ET9Uwz1q1FxgbQ5sjvmtaChK1Y7v0kayHVf8dDeXLb3vQ/DBD70frUnaJ9c/18Kj9ervo3ogmcN48WFR/QRTs/Na0HvVmK38uqjg7cz4XQmH5+NblTt1YmIrPuetz0EhAxGdn5NRV53/U5zqqdrY/8iyl96l6BrDrsIWi+kXiu0LuXHj+iGjSHPjOtAg7nyCNntGqD9lV72DKEDeB+drBmPwML2apjk/D3QXZ4Tgw7Biig59z4uAAZ3G1MwFkDFRdCUfTmkoRP3gvgz0AqtaZSROroE2pwXXE6ujGjQV0MMrF0duQjaJCgfMKouAW4B9uGk5qUr+BTKpn5rdXTAfzMEXfaO0NQ0zs0tYkVipprqltO4W87VfOU5NNV4dSStS50K9CGDHA8NUP5THdM4bdYbh82zHeo0BEyQgB5WuQi6wzLbUKCLCy+dzBs2uVKjwVutVjvVTKhBB7udAH+32qGo4EwgxG6H4tLFjwDgJlAxS23QqEfGuZBSjDKZdQD0XOYZ1+Z5UEi3exAHnM49cANbRpKaUYw+OnEyCyCmCJpKGZSH7uVjgAku5ChAN3FPgYZeQIWSFFtQvwvzwKYjz7apmIPmOzAMHEEddJ8I4QTzkqmJe9wA2HYgul1fbWsaeo176hjxEEE7Agd9Gy6ANnLOfeOTiEY307iy6gAFuTSvAVqptj9E0L7AbaMiPqzUXBCbYijNY0M1QkMZFxHPYi5BkzzOIg52yN08jMugZWEWy1AAz+d5VDCTR7kbZYRFcwBZzPJyd3XOYEQxueGSyghJg2CgQHcptUVsAXN93w2Il1NmsVz4FA9PGbFz6ot8DjdqKPfKZSj1mDtH9afjroht5nbAd8e2i7cHOLQLY7WPa00ml0BbNj2AvhTRVixd/TrQs3dBo2SsdjMlHTOUDgQMxFjtAMdmAr9vVwFEENgIjSzS5QWZicj0Q5+QjIMXshmRsgQtC0ImkQKN0sFQOtwZqgucQPMeAZ6RUqPjGd4O2C0IZoCOAk1sF+fpGPw5Ufe841pABNWIjnQVaOxrsU9U7FuuB71e1xp3CcRj9AJy41pEzdkTolbCy4c3TYD3Ss91yGXp6LHPI9pUyTAwvhjRPjSTISDgIcJHjUYfTJVqAOtAYVbai/cgqIagDdAwjWGM6jHvlenNw5gkmVTxpZIfjCrQnUgoncZT51oNGouRjEMFmqCXRlzeA5viIRE0c5lgGIzgCRFT8EpaKLKme1OCjlEQ6FiL8Z4wXMePYwEGKh0GP0YEBi9jDHcDFAt1D+gxnllA1de34XIyNNjnEW1OsOS2zd+IaKw6atBlK2kTb3e4IODRsmkH0PlHoHUEC51XoOOPQIMqPHAaZcGuQIs4QHMANeBGfAbaMzody4yFM4kr0IGr9rYxiO0b5hqqktG+CvqSRptjNzCt/yqiQUkHoG4YO3NGym1k4INq56BZNCRN0KqAQFkgp4hW0lGBDiLUggo04KdyVdKBegOkkKQTY4GuQI9jUEUNRitKR/wB6EBtoo+HnuiipKMCje6qpumiuBDPNTTqfB30RY3uaV3reo2Oyr+3Ea2vdiME62mYATEzet3VbuihVGPVoWN+GmE7Az3vcWmLSGm0U+JyshGJI2oXIas0OpsrKcGx3jzKnDjMMBnmjhsyQl2VDGfjyHXiiBFWFnaorpYrRkOsK2I6t913QGNfQ6p2bo9YXpYrw9zvsDxQ0ow8aWeO8UDp3Ind3lBdFlB1dM/9DLRp56py+ySiWSaurTq8Q0g3yjv1ZAhVElRhvdJ3qgDEABmqYk9H/ewG2KtgiP+xdybMjptIHNfNqm35QLG9tjIGHUyVap60SSWbTb7/F9tudPh4t99h17z+pyozEgjjH03TIMNUITgtxdTVTCaVquoWltUcI+Ra7hWO7Bgn1WjRLfrqIq/9CgdReiZVqm1Xm7StFboMsv+wwkJLHF7QzaL3pwEXY0k3LYp1CJO0SPdpME8R9B6L8NMtrDP0vYiuRGgLzLXadQE+/rXc08NIscQLH2b49CKNSprhwLRE0GUCz8wM/cC3M8OnfDR+X2v3L5qw2JmxPF5XCgIb4aMDjvBrBRG558i30X8U0f3AWWNwup7A/YUE72T5AwvyYgyq8s4vQXyYsUPo9VOJmIp2+umkDDzs+e46OBTph2D/cJ6YB/qYGjfz7lPCcPwy2CKHp8P1DJ5fVELQyZGejDp2aBYL/x2WSbuKdz76ZB3n0VWQezPyVBWpqoL7qUcwHvjMV86skyKbFmnwkq/z7DJpTWt243+qfmqVNG0L7/3Wo2X5v8uXUUOc+TXRRy/DBrsy3fsXrebdWyZNmuPVu2YXvcvM8GWVeQsn65g+fln50jX1Bxb+T3/KdMErFn7Dwu8MGTSDZtAMmkEzaAb9U4LeAmuUM/kw0LMkmbMGJcmH/eLfc5cJa9Dc/bA9LLHHOhbvM+QNnSwGzaC/FOgp61PEFv1ZFs1isVgsFovFYrFYLNbXeN969feQXwNz8OPa+hqgg9/vri3b3jcFhbY3v9piD3uaj++Of9ne/VZcWeS9Mr+rqrwJ4k1dr4JXct63dX3vIIAwG/ci/LgrgiufDunIiVKhA2FZt6tEXnvEwv8VSuhX/k4fstaIRp77ZaUmcgTtR9eVk2kVASS5qSptVle1aUhoq5GcmNeCdmDTitW5lYCvdLd/7yZAG+OCE+RmKuVEGxceM7TzQ1qcs3snyfBMAafhzngQTU5WCVsCfZz5ocLOEmV9H7QDbt9kBDq69hsWUUvsekJhNWWVh9DvLgHrse0eOBnFtB8u9ALZDTx4y15Ix/N7vy4hjrvjNugkjmDc8GYvHS+k8z3iaNjGJf2ZP34KJdiLTSaKjbSgA9i6fetIJwqOBg/8IM85VC2gogfQYIsb6n6E/zZA75HY2oKGGbZ/m6sqgKXKld3OqupYGaN2UGuTF3ToAqbMGrqQZW50a01Glkpru8MbU+clpi66YzKqXGWUrYYdFWNPaZC7SmtdLQF8TC4zTK4meNFokSvlEuiMMu+pSnGd57qNx21xKX6QrtEeMvwkd6Wx6KBHusnyXGGnmGGKsnsz5V7kg0Vf+7dYjpkhvbkxa9kdwLJrBRqUv87R1GHbCE2nZYi8zYvaiFI6fqkFHcFhRE2nbIiWukIq1H6fi1SGC0X3c2HPi3CCTAmlVist2rzFUS4P8EOmRpdJavQSuuQaE5QDXp0L1bYzAq3qEquxRZ+m9H5S2w+xJtoItZjWlD3u6oGtQ/7G2m60EgKbLFhrUYQW8MwYu932FkBru4u0FabxbIeTcwSN/bixPsXRot5IiYFAIDcriw/HndyhC7HfbLCFPIAInbuUU4FlbVJhyl9T3R9tRJfLzWYhRINeIRdo6KDEegObkgpDk8NSZKAFhmKbmlwHIGj6c1OJQqJPqzcQ6rqPHnCcDCVgUipp/NO+xKJ1OLgOWaFd44VSff5QC9svEPS1j3x38q5GFf0741uq1NIQaNmBxppO6UwHsimY2o4oW5syte0BudiBLIXC1gDKi8aNuMNwGKQKckrYEgK9hrSA5obI2MYB9Fm2SEoYPCqCpl4mV9SlcPDAwWAZjKXZDmQ9XV8PX5st9M9SApAdj4dh5dQJbwR0HxGUClFjrc5B26/RUP+EZABdjBcIGuFih16XJfZlOuCkc/fOiKY60KAnOxj2yQX0g0NX5AE0xQoWKgS5yNNoGAwxn41LErJiaSM6quEExmEvx64hCzP4dCB31oGeuddVZ9F25osO0+zgEtC1MNqKjvnp3fOxDZ6ALi1b60Hkc6DRWVD7FwNocid0iJXREfT1OAGN3aBFRzfW4JZAE9XuIDSJ3x2N6CLQtQxJgfPOoLGrrRF176PJB/eg/QdBg2dM7OLAPiwm6dF1XB80HSw3qWimYiENoOtXgC46uDCU8RTo3tNTL9/B8xYdB9gaNOL2QYc90soW8RBoupmmdnTswks7xFjQ7va6ckxiQZIR4HfD8cc1BmcWGGgQ6MBOFs9Bp8eg0dskFg3A7D7odADtQv8kkqGIkgIIijrug8b5XDj46GmOeTHK6E/d6LPbNjiA3h5AYxsoOlAsWFvAWLHIuRHQdrxPaXCXcU7UkV3jOAVGqRuQMyOmkkC3G7BjEJ12hKFaf0GZsYnwVhVDRIdOYVioDsucYC9xMqLFrosTNrYwKbtxDaO/HGwLNDahoonkWtjGx3iFPH66kaHGyL4rz/qbWJuprQeGfjYuwk9Q1BltDmMyes7i71sdQa+2k+vKsTFAUAnd4nyN7BrWRtA0Twi1xJmH0A05YaFcmQiRr/foMk3VX0gEjbM+iBQNhxhVeZXBrMORrzjBpMtMImjdEFxToadqTV7lpkWPSrmxlD5hroWqslYbm7kwJl9i21dtrvdDFLFVRlX0QWDrobYEWhc4+cTctleW1q0UQiQ2ZM9uBrQdyHFG27R1f34dJE1bxM66TL19ilHbHujwyTKCqCzT5Zxu9Rf4XRZluSbvvMdnJjRvRKXD0bXgUeZ0i5O1ko7xS/AqxJEXP6xBm+xzJ2PCHO/PkuluN50DxLtdhh+T1m3hHbpIUOI1xvvQ1SOGYF+W2SzDZzJy5LC0Xi5q0t4VOrcCGmq7OHq88N+9r+jOce3uQvfWY7w1XBwWcIbHpTx+Q9JlhqPM8uSFiDwt396H0wNbz19IDNcn9Ti8AJVNN+nGJFiZGob16NXkynsXaZ5VRT/NO1o5N8NYDFE1hHm3AdqRPw1mcPbaLA+vCsd5C4KeL6+rn+ldt6TV2/0Dr+MY9Dsb9LTcBQ++Ivpx11x7C/bP9TuZR7wggWaL/owG+HFXL66srwF6e/fbtfVFfhL24/dr68v8nPTq/9I9i8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVgsFovFYrFYLBaLxeoUsD7h/HOG9Cmsmc/noB6yhKy36FnUTPm9WT/BucvnkyLWa2W5HaN+mjMzfhvsY6t+jnPsuawL5MXxAfWDpI84Y6vEbvQr6wJFiNp6kJH0Q6B770yc5T/fWBfoH/kM6VPOXvLLv1gX6ZfEI9K9+3gKNHH2dgz6UtC7mfXTj5E+4oygZwz6YtBTd3Y0Ip6DHg264+xOGfRbQB+cxyOgreNg0G8DvR1J9yb9iOdAD+0y6MtBZxOMpg/O48ykzwx6mzHoy0EPJv0MaA9BTxj0G0BPjn3HU6DdLYN+A+j5waQZ9AeCXszv+Y5HQM8Y9JtAL18Auo+it3MGfTHo/XI+eQFoOxYy6DeDnr0I9IRBvxG0y6BvDPSCQTNoBs1i0F8U9F9/fGPQz4D+6/vff3//z9vq8u+k+pNBPw36e6NRxX+Pbn37/n/27rY5TSUMA3Dapp1tatqk2mSTSIDoAWQm8oGFkTcBUfP//9F5FjA17fE95pjkvqcJWJTuXq4Pi42k8NduhmPbDuMdHdDLoa2u3jaMY/3XHK3T04P1i0ZXdQG9GrqlXUjae62ghWkIl+i8nmqYlaLlOEKuB4bHyxrhGUI+JY7l06pF9xDdrnAltGsIB9BLoJuSx7MtxkddTeu22EBTVf2i3DrQr+40vV+0dU09ovuZ57qm3xtUcPSbD/R3IzaRd/7COurPrqZ3TEAvgjb7eqdwK1WtNxh1VS8Y9NWJXUOr7da1rtKGPo1550w7bbXVrkfQ+g2tqZY36nZHBuvo3dHgXpsAeuHB0OtoWv+SjoV+T/XkCG8zfq9arLY/oeeiq1IBntAGW5fDf6JdEvQdrXV0m/n9blmjqfQU2hmgF0/vnOJrV1NbzFP7raIYUdFw7tVgBt0unwGrWp1oI/pLod/J0kFr3zSbuf2uWR8MRV1wAL0o5oSKgNBVXddVtakshL7U5E4CtacYuhy8P55CG4BeCM1HR+UM+lZrefq9F1Cs9UY0oDcb0Z//+UnzNqepFX5flmJGc7SF0PM1eg7aBfRqaK+rnw4GN3rPJMruqHWiDZjS1I9bym/o/gx6btah3dLmc4Kms5vLggF69azjVNU09ZYKiCLn0eolzfVaqvZrDrrXraFpHq3O5tEN2vyBZh1soNJk41a+GoSKWceyg6EljKB6780VRjWvs4ygPjMkdm5aSr3KeDA7M5S3XEue7AT0IFOuORZOWJbOOvgOb9vh/Wi88Q9oQCOABjSgAQ1oQCOABjSgAQ1oQCOABjSgAQ1oQCOABjSgAQ1oQCOABvTyuA6g9xjr8QN1wgL0/sKD2efhOKD3Gk8w+TOP9AXofUMLqh70ZQD6haADQO8T2gD0/pFdEn6EtgG9rxi277YC5hW0APQe4xhFIbhcGFQ3MOvYJ3X1oZjynJDjFBwBNKABDWhAAxoBNKABDWhAAxoBNKABDWhAAxoBNKABDWhAAxoBNKAB/T9Au+Z24Yt3ybfcpfumoSfHJ9ukveRX6vjtrXZ5PHnL0FzYW2XZL41yjO32Kd70iOaHU0z5m4bGwRDQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhA/xWz+rWTz7a7UbuQv+hv0LY5k/8vYDFmjAYU851Dj7Tn/M8O8649+DVhTuPD4G7EnFFTNRizR6NRWw3eN7TTabRpEfjVl7DdYJcrsg0atI+eInoOLRx/5DWNWuD4nZcO4yK4d5lyZzDll8Emvc+N7i5Dz3Vpl03euqDVHlUNVkM7d+KdQ38ZsEaLKeSh3AmLkL3ujq9xv9lirZsamtfQxS1/39Bmz/MHZ6UHQRsd6bMbtPLlkv0FrXSKdz7raKmdTpPG8F0JbT8DdPuKanzRkc+h+Qht/HLeN7TSafm+/3HCmgXze8LqWyzYrXSMTiWp1zeZfe88QjcG73weLfryh5CMnjPoXd6ogk3uLy92ghb6zc+Tr4K3m+2e7AS/k9Ci575zaLe8+qsjaDLWCjyfcVGIcrKw9Q6FMAzDpR21yl1zTz6Tpoczw1nKSYHStoP2mbL7juZ+Eom/aDdeyXsdivh82zbZK87reVOJMwZoBNCABjSgAQ1oBNCABjSgAQ1oBNCAnouwja2y9JOzW+WNf3J28uloQU6Olnxue/lnwY+32OXJpzf9WXBmWtuFL94l33KXJmo0ajQCaEADGtCABjQCaEADGtCABjQCaEADGtCABjQCaEADGtCABjQCaEAD+iCgHd8B9AvEK4pCcEDvO2bL5X4hr2dQfwKcA3ovseSVYUyL+cIWPgs8WiiA3keFtg2TarRieI5nyGuEubYH6H1E8Qw7YK7t+2bheIRsGYDeT7hrW6YtKCW0a3BAP38CeRz0vFq3HNECI3oPcQ3Ldw2TC883PeYZri8vJgro568bvieESQdFj6hpRHsi4IDeszmVjoC98ryS9zoCQL/QrNoBNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAMa0IAGNAJoQAN6c+hhko0Zmw55eSOjDBnj40xeY2NKt6b8ILrLx0kyrRpM7WPKUN4oWz0tN4xly7PxWHZmRYZJMq76Rg8ov2fTvUMraRSH4ZSloYRV4igMw5TW0oes/B6GUTo+BOgsCuMop5VxFFKDxqH8nkdOtSFhQ2pqGGbDh+GqZyyXPR6WfQvjjDpIfc73Dp08ZHwcx4/QqUKR/YhK7thRsofkAJzHYerwRComUZTJ2w8pmYXKOEoVnj9Mh1EmWz6MVkDzKfXHKXs8pgdwRclphe8dOo3laylXHqFr/zCJxtVWJcoPYUA/0KvbyUkxTtOUE3RM3nnIk0jWjXxaC6+EZtOHnB4+rIcWJQ+d/dfoSpbLf62CDtM4nTIepw69HKkxw2G+sukvUaHL5710ioYZ2Y7DPA0dgs7rDcOInoF8DWhZOvKy7FBXM3n75aDlyK6h4zynVkxptKQxZ2lEFewQKgebecrxR8gSehzlT6DTPE/WgKa7plTMqW/U1eFLjWgWl6Uj4U9KB9W8OA4jeYgcZ7IiHsKxUJaOZMrjKKY/ikPYCR3V6tKR1KWDr1E66A50VKIez0b4i0An1DCl/GfnoJ0wzZKEulKO6vAQrk9Aw5fTkXs4jPIkoWqmUOs4TRyUqTyEJA/r1+jyiJqG/GVrNHNSOULkZCeOqTDL8RKnZVvoteXIxtDB4xCGdCLbmVclTqEpCK3zaURG9Qaa3lHTs2qxbFo8LnucVD2Ox7JmvwQ0U7JczvdpEp8kmZKVi2F1tpKMhxkdJ7ODqB1sKisqz6pxSy2dVks5Z5KldixbnkyrxdKZP/VYPqDsceLIMxeOU/DFc4fyQpz8eXaF9zrwphKgAQ1oQCOABjSgAQ1oQCOABjSgAQ1oQCOAfnXQNwOQbZfBZtCnR4HCyyj1ElmeikkJPjc2gL76dn7947J9iWyc88bpZtCn1zc3Z7e3txfIuiGts5vG6abQp9eNRuOmyhmyIjVUo3Etoa/Wh/7xVBpZKwRGzuffNoSG9ObO5YAm6O8f14L+8O23NLJByHldaJIm6NmQhvTmzmtBf5qDrqRhvbbytXSWA3pd6LJI19I1NrI6lVY1oGfQn1dBP5FG1s75eT2gadJRQx8vhKbaQUO6kj4H9kbK5z9K5z8qx9/Q9dGwHNJSmnKOrJ0fkrl0Xgo9Vztm0sjGufrtvAp6Jk3UV9DeDFkyV86zAf3HsXAGPavSH2WdRrbJ95nzfw7oP4a0lCbq79DeGFkyzzkvhK6ka2pkq3xd5vynNFHDektlyUzOq6BJuqKW1sjGqewWOz+VrqmRrfKpZi6d/xu6ki6pwb01cs28wLmWrqkfrZGNUwsudP5DGtktx4udZ9Kgfi7mRc6/qaG9O/JS53lpZMccrcq/7dlRb5pAAMDxZU1GlrYvk9Z0MxNXEEti70G42FeM3/8rzZnOsuftDJ2/3xM8Af+c5x1IdJbMYp+rMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/IUvnMWHCWfxIeMshBZaaIQWWmgJhBYaoYUWmvcbej1PeMdVOZk8F0JnWZnHNlmI6mq5CSF2+0WyJOWnzydXk9GGLmZ1rOtUQ3rehE3T7/NV6H4kukTRhoHN3UhDf29D+5inCr1oQ/58DL6P9V2ia6yW9yd9uB1l6DIP9azItqlC56GvXg+vY7dIFDp/O/kWbkYY+jBrhLw8HKQKvY7L6nTSh1mi0Lu3k9sxhr4/zBr3x6NUofvhY8/rtrrE0Ie1xq9Z47gySBW6XQ1niybNVcYeugm703MnCl103XAMb+PTBYautqG7qbKkI7rquuH6PI/Plziii+kqNOukIzrbbcpB9j8nkgv6M5xvY+znKefoadi/nUxifqGrjsPyqwkv0yLdiF681E9vG7g4udjQWfXQHTaG6TYsD6F7LT3fhW2qneHgl/J1pKEPt7mvY75M9q5jFut+vViU0y7silShV81vu3a0oY8L6pAsdHXdhbhabUK9T/WCsOpfBpbz0YbOssemr7JUFh/ztt3NyiydYuCfPci7/MJSvcN79ilLaKERWmihJekYZsgAAAAQSURBVBBaaIQWWmiE/p/8BELsK7b7TKaQAAAAAElFTkSuQmCC" alt="Month picker on Chrome for Android" width="360" height="640" loading="lazy"> </p> <p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> <p> The second problem is the more serious of the two. As mentioned earlier, with a <code>month</code> input the actual value is always normalized to the format <code>yyyy-mm</code>. On the other hand, in its default configuration, a <code>text</code> input has no idea what format the date should be in, and this is an issue because of the number of different ways in which people write dates. For example: </p> <ul> <li> +<code>mmyyyy</code> (072022)</li> <li> +<code>mm/yyyy</code> (07/2022)</li> <li> +<code>mm-yyyy</code> (07-2022)</li> <li> +<code>yyyy-mm</code> (2022-07)</li> <li> +<code>Month yyyy</code> (July 2022)</li> <li>and so forth…</li> </ul> <p> One way around this is to put a <a href="../input#pattern"><code>pattern</code></a> attribute on your <code>month</code> input. Even though the <code>month</code> input doesn't use it, if the browser falls back to treating it like a <code>text</code> input, the pattern will be used. For example, try viewing the following demo in a browser that doesn't support <code>month</code> inputs: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t6qxVInkQAe/bvfPN82xIaffZUJuvKobwzEjNI/TZxY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + What month would you like to visit (June to Sept.)? + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<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>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-06<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-09<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{4}-[0-9]{2}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Handling browser support sample" id="frame_handling_browser_support" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=handling_browser_support" loading="lazy"></iframe> +</div> <p> If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates (such as <code>0000-42</code>), or incorrectly formatted dates that follow the pattern. </p> <p> There's also the problem that the user won't necessarily know which of the many date formats is expected. We have work left to do. </p> <p>The best way to deal with dates in forms in a cross-browser way (until all major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<a href="../select"><code><select></code></a> elements being popular; see below for an implementation), or use JavaScript libraries such as the <a href="https://jqueryui.com/datepicker/" target="_blank">jQuery date picker</a> plugin.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p> In this example, we create two sets of UI elements, each designed to let the user select a month and year. The first is a native <code>month</code> input, and the other is a pair of <a href="../select"><code><select></code></a> elements that allow choosing a month and year independently, for compatibility with browsers that don't yet support <code><input type="month"></code>. </p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h3 id="html">HTML</h3> +<div class="section-content"> +<p>The form that requests the month and year looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WO5cOnh6ME3GHXgtvPFaZu61nuEGVnqCbJaj/A6Ox5I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>nativeDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month-visit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month would you like to visit us?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<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>month-visit<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month-visit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>fallbackLabel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month would you like to visit us?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fallbackDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Month:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>January<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>February<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>March<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>April<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>May<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>June<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>July<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>September<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>October<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>November<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>December<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Year:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>year<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p> The <a href="../div"><code><div></code></a> with the ID <code>nativeDatePicker</code> uses the <code>month</code> input type to request the month and year, while the <code><div></code> with the ID <code>fallbackDatePicker</code> instead uses a pair of <code><select></code> elements. The first requests the month, and the second the year. </p> <p> The <code><select></code> for choosing the month is hardcoded with the names of the months, as they don't change (leaving localization out of things). The list of available year values is dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work). </p> +</div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>The JavaScript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <code><select></code> follows.</p> <p> The part of the example that may be of most interest is the feature detection code. In order to detect whether the browser supports <code><input type="month"></code>, we create a new <a href="../input"><code><input></code></a> element, try setting its <code>type</code> to <code>month</code>, then immediately check what its type is set to. Browsers that don't support type <code>month</code> will return <code>text</code>, since that's What month falls back to when not supported. If <code><input type="month"></code> is not supported, we hide the native picker and show the fallback picker UI instead. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="ea2tuD8Af5HhRjix9zmvOVm4ByV6h/+D2mddnKEiXNw=" data-language="js"><span class="token comment">// Get UI elements</span> +<span class="token keyword">const</span> nativePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".nativeDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackLabel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackLabel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> yearSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#year"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> monthSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#month"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// Hide fallback initially</span> +fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> +fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + +<span class="token comment">// Test whether a new date input falls back to a text input or not</span> +<span class="token keyword">const</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">try</span> <span class="token punctuation">{</span> + test<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"month"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>description<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// If it does, run the code inside the if () {} block</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Hide the native picker and show the fallback</span> + nativePicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + <span class="token comment">// Populate the years dynamically</span> + <span class="token comment">// (the months are always the same, therefore hardcoded)</span> + <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Get the current year as a number</span> + <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> year <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Make this year, and the 100 years before it available in the year <select></span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> year <span class="token operator">-</span> i<span class="token punctuation">;</span> + yearSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard note" id="sect11"> <p> <strong>Note:</strong> Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year" target="_blank">Weeks per year</a>)! You'll need to take this into consideration when developing production apps. </p> </div> +</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 representing a month and year, or empty. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#month-state-(type=month)">HTML Standard <br><small># month-state-(type=month)</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>month</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no"><details><summary>No</summary>The input type is recognized, but there is no month-specific control. See <a href="https://webkit.org/b/200416">bug 200416</a>.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker">Date and Time picker tutorial</a></li> <li> +<a href="datetime-local"><code><input type="datetime-local"></code></a>, <a href="date"><code><input type="date"></code></a>, <a href="time"><code><input type="time"></code></a>, and <a href="week"><code><input type="week"></code></a> +</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"> + © 2005–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/month" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fnumber.html b/devdocs/html/element%2Finput%2Fnumber.html new file mode 100644 index 00000000..616338b8 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fnumber.html @@ -0,0 +1,374 @@ +<header><h1><input type="number"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>number</code> are used to let the user enter a number. They include built-in validation to reject non-numerical entries.</p> <p>The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip.</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/input-number.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>On browsers that don't support inputs of type <code>number</code>, a <code>number</code> input falls back to type <code>text</code>.</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Gp7y1n8uyAPaUwY1jPIp5t9RSthNMNcMHIoukgMxdWA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<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>number<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>42<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=value" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes commonly supported by all <a href="../input"><code><input></code></a> types, inputs of type <code>number</code> support these attributes.</p></div> +<h3 id="list"><code>list</code></h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="max"><code>max</code></h3> +<div class="section-content"> +<p>The maximum value to accept for this input. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> <p>This value must be greater than or equal to the value of the <code>min</code> attribute.</p> +</div> +<h3 id="min"><code>min</code></h3> +<div class="section-content"> +<p>The minimum value to accept for this input. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p> <p>This value must be less than or equal to the value of the <code>max</code> attribute.</p> +</div> +<h3 id="placeholder"><code>placeholder</code></h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly"><code>readonly</code></h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step"><code>step</code></h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>The default stepping value for <code>number</code> inputs is <code>1</code>, allowing only integers to be entered—<em>unless</em> the stepping base is not an integer.</p> +</div> +<h2 id="using_number_inputs">Using number inputs</h2> +<div class="section-content"> +<p>The <code>number</code> input type should only be used for incremental numbers, especially when spinbutton incrementing and decrementing are helpful to user experience. The <code>number</code> input type is not appropriate for values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers. For non-numeric inputs, consider using a different input type, such as <a href="tel"><code><input type="tel"></code></a> or other <a href="../input"><code><input></code></a> type with the <a href="../../global_attributes#inputmode"><code>inputmode</code></a> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bje0sQ90AE9aeNccYCCywKd14bWjZD2rNAO1+VU9SN8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\d*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p><code><input type="number"></code> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper <code>type</code> value, <code>number</code>, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.</p> <div class="notecard warning" id="sect5"> <p><strong>Warning:</strong> Logically, you should not be able to enter characters inside a number input other than numbers. Some browsers allow invalid characters, others do not; see <a href="https://bugzil.la/1398528" target="_blank">Firefox bug 1398528</a>.</p> </div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> A user can tinker with your HTML behind the scenes, so your site <em>must not</em> use simple client-side validation for any security purposes. You <em>must</em> verify on the server side any transaction in which the provided value may have security implications of any kind.</p> </div> <p>Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value.</p> +</div> +<h3 id="a_simple_number_input">A simple number input</h3> +<div class="section-content"> +<p>In its most basic form, a number input can be implemented like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gKDAN71TT7oPRweFyAToYfrrnLS+AtlxVE0uC8j94cY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ticketNum<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Number of tickets you would like to buy:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ticketNum<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<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>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="A simple number input sample" id="frame_a_simple_number_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=a_simple_number_input" loading="lazy"></iframe> +</div> <p>A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the <a href="../input#required"><code>required</code></a> attribute is used, the input is no longer considered valid when empty.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> Any number is an acceptable value, as long as it is a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number" target="_blank">valid floating point number</a> (that is, not <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p> </div> +</div> +<h3 id="placeholders">Placeholders</h3> +<div class="section-content"> +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <a href="../input"><code><input></code></a>. This is where <strong>placeholders</strong> come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take <code>value</code>. It is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> <p>Here, we have an <code>number</code> input with the placeholder "<code>Multiple of 10</code>". Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eabq6DotvkQduwhQIha5bt7f5o2BeCFhvGuDJ1JqUsI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Multiple of 10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_step_size">Controlling step size</h3> +<div class="section-content"> +<p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a <a href="../input#step"><code>step</code></a> attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of <code>10</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UBU0eCPAFKJZNIu+aA1D9Wm3sLcNz+37TV7HoNUKCjM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple of 10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Controlling step size sample" id="frame_controlling_step_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=controlling_step_size" loading="lazy"></iframe> +</div> <p>In this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.</p> +</div> +<h3 id="specifying_minimum_and_maximum_values">Specifying minimum and maximum values</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of <code>0</code>, and a maximum of <code>100</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YCAIMsOhJJ1evr4e2rh+QXqj9IrjHlNNJjOCtcYjkTM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple of 10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Specifying minimum and maximum values sample" id="frame_specifying_minimum_and_maximum_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=specifying_minimum_and_maximum_values" loading="lazy"></iframe> +</div> <p>In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.</p> +</div> +<h3 id="allowing_decimal_values">Allowing decimal values</h3> +<div class="section-content"> +<p>One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="v229qTHqohL4pVcpPoCLnyy6Vdh+NWWy9gB1fE3UIeE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.0<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.01<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Allowing decimal values sample" id="frame_allowing_decimal_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=allowing_decimal_values" loading="lazy"></iframe> +</div> <p>See that this example allows any value between <code>0.0</code> and <code>10.0</code>, with decimals to two places. For example, "9.52" is valid, but "9.521" is not.</p> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>number</code> don't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> to change the size of these controls.</p> <p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an <a href="../../global_attributes#id"><code>id</code></a> and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="cMNAXrlNKOIHZLDoNpVZ6z8clMSI++TgJXTrYtcC414=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x10<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<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>number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Then we add some CSS to narrow the width of the element with the <code>id</code> selector <code>#number</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="vI6AwzZ1XVZMbEZpkhTM9VN/kpIG03y/stlUnRwh9Xo=" data-language="css"><span class="token selector">#number</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The result looks like this:</p> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Controlling input size sample" id="frame_controlling_input_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=controlling_input_size" loading="lazy"></iframe> +</div> +</div> +<h3 id="offering_suggested_values">Offering suggested values</h3> +<div class="section-content"> +<p>You can provide a list of default options from which the user can select by specifying the <a href="../input#list"><code>list</code></a> attribute, which contains as its value the <a href="../../global_attributes#id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a>, which in turn contains one <a href="../option"><code><option></code></a> element per suggested value. Each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="30oznTa5G9R0K9IIZGDLQs/aecHMstvtv3txcUSGFUo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ticketNum<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultNumbers<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultNumbers<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>10045678<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>103421<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>11111111<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>12345678<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>12999922<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=offering_suggested_values" loading="lazy"></iframe> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>We have already mentioned a number of validation features of <code>number</code> inputs, but let's review them now:</p> <ul> <li> +<code><input type="number"></code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li> <li>You can use the <a href="../input#required"><code>required</code></a> attribute to make an empty entry invalid. (In other words, the input <em>must</em> be filled in.)</li> <li>You can use the <a href="../input#step"><code>step</code></a> attribute to constrain valid values to a certain set of steps (e.g., multiples of 10).</li> <li>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to constrain valid values to lower and upper bounds.</li> </ul> <p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons, depending on the <code>input</code>'s value:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SAf09c5EN0GKHX0CycHVzN29eQ0ly7XL2lOT93SRrJ8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>balloons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Number of balloons to order (multiples of 10):<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>balloons<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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>balloons<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="110" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p> <p>The CSS applied to this example is as follows:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="jsaVZXcXsdxbCjENOH2aBgajbbll043HBxvjJj1aLLY=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here we use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <a href="../span"><code><span></code></a> element, as a visual indicator of validity.</p> <p>We put it on a separate <code><span></code> element for added flexibility. Some browsers don't display generated content very effectively on some types of form inputs. (Read, for example, the section on <a href="date#validation"><code><input type="date"></code> validation</a>.)</p> <div class="notecard warning" id="sect16"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for server-side scripts that ensure that the entered data is in the proper format!</p> <p>It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server.</p> <p>If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> </div> +</div> +<h3 id="pattern_validation">Pattern validation</h3> +<div class="section-content"> +<p><code><input type="number"></code> elements do not support use of the <a href="../input#pattern"><code>pattern</code></a> attribute for making entered values conform to a specific regex pattern.</p> <p>The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes (as explained above).</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>We've already covered the fact that by default, the increment is <code>1</code>, and you can use the <a href="../input#step"><code>step</code></a> attribute to allow decimal inputs. Let's take a closer look.</p> <p>In the following example is a form for entering the user's height. It defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p> +<div class="code-example" id="sect17"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>The HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ldNOy0DLMwvMtW0csbRmxkwKlk3TiCHOgoIvZF4NLcc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>metersInputGroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>meters<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your height — meters:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>meters<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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meters<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.01<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>e.g. 1.78<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>feetInputGroup<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Enter your height — <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>feet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>feet:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>feet<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feet<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>inches<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>inches:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>inches<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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inches<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>button<span class="token punctuation">"</span></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>meters<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>Enter height in feet and inches<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like <em>1.78</em> are not seen as invalid. We've also provided a placeholder for that input.</p> <p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code>, so that meters is the default entry type.</p> <p>Now, onto the CSS. This looks very similar to the validation styling we saw before; nothing remarkable here.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>And finally, the JavaScript:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="zT/zJFwRezh9sWPMvboHVwppeJ6+FXXKQeoZeJcbrcM=" data-language="js"><span class="token keyword">const</span> metersInputGroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".metersInputGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> feetInputGroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".feetInputGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> metersInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#meters"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> feetInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#feet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> inchesInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#inches"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> switchBtn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="button"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +switchBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>switchBtn<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">"meters"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + switchBtn<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">,</span> <span class="token string">"feet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + switchBtn<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Enter height in meters"</span><span class="token punctuation">;</span> + + metersInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + feetInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + metersInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + metersInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + switchBtn<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">,</span> <span class="token string">"meters"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + switchBtn<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Enter height in feet and inches"</span><span class="token punctuation">;</span> + + metersInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + feetInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + metersInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>After declaring a few variables, an event listener is added to the <code>button</code> to control the switching mechanism. This is pretty simple, mostly involving changing over the button's <code>class</code> and <a href="../label"><code><label></code></a>, and updating the display values of the two sets of inputs when the button is pressed.</p> <p>(Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.)</p> <div class="notecard note" id="sect18"> <p><strong>Note:</strong> When the user clicks the button, the <code>required</code> attribute(s) are removed from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so the form can be submitted if both input sets aren't filled in. It also ensures that the form won't submit data that the user didn't mean to.</p> <p>If you didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p> </div> +</div> +<h2 id="accessibility">Accessibility</h2> +<div class="section-content"> +<p>The implicit <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">role</a> for the <code><input type="number"></code> element is <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role"><code>spinbutton</code></a>. If spinbutton is not an important feature for your form control, consider <em>not</em> using <code>type="number"</code>. Instead, use <a href="../../global_attributes/inputmode"><code>inputmode="numeric"</code></a> along with a <a href="../../attributes/pattern"><code>pattern</code></a> attribute that limits the characters to numbers and associated characters. With <code><input type="number"></code>, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong.</p> <p>Also consider using the <a href="../../attributes/autocomplete"><code>autocomplete</code></a> attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, set <code>autocomplete="postal-code"</code>.</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 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> representing a number, or empty</td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code>, <code>value</code>, <code>valueAsNumber</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role">spinbutton</a></code></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#number-state-(type=number)">HTML Standard <br><small># number-state-(type=number)</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>number</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li><a href="../input"><code><input></code></a></li> <li><a href="tel"><code><input type="tel"></code></a></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> <li><a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/" target="_blank">Article: Why Gov.UK changed the input type for numbers</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/number" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fpassword.html b/devdocs/html/element%2Finput%2Fpassword.html new file mode 100644 index 00000000..f304486e --- /dev/null +++ b/devdocs/html/element%2Finput%2Fpassword.html @@ -0,0 +1,255 @@ +<header><h1><input type="password"></h1></header><div class="section-content"> +<p><code><input></code> elements of type <code>password</code> provide a way for the user to securely enter a password.</p> <p> The element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). This character will vary depending on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> and operating system. </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-password.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p> The precise behavior of the entry process may vary from browser to browser. Some browsers display the typed character for a moment before obscuring it, while others allow the user to toggle the display of plain-text on and off. Both approaches help a user check that they entered the intended password, which can be particularly difficult on mobile devices. </p> <div class="notecard note" id="sect1"> <p> <strong>Note:</strong> Any forms involving sensitive information like passwords (such as login forms) should be served over HTTPS. Many browsers now implement mechanisms to warn against insecure login forms; see <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>. </p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input#value"><code>value</code></a> attribute contains a string whose value is the current contents of the text editing control being used to enter the password. If the user hasn't entered anything yet, this value is an empty string (<code>""</code>). If the <a href="../input#required"><code>required</code></a> property is specified, then the password edit box must contain a value other than an empty string to be valid.</p> <p>If the <a href="../input#pattern"><code>pattern</code></a> attribute is specified, the content of a <code>password</code> control is only considered valid if the value passes validation; see <a href="#validation">Validation</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The line feed (U+000A) and carriage return (U+000D) characters are not permitted in a <code>password</code> value. When setting the value of a password control, line feed and carriage return characters are stripped out of the value.</p> </div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, password field inputs support the following attributes.</p></div> +<h3 id="maxlength">maxlength</h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the password field. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the password field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p> +</div> +<h3 id="minlength">minlength</h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the password entry field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the password input has no minimum length.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p> +</div> +<h3 id="pattern">pattern</h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>Use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. With a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. See the section <a href="#validation">Validation</a> for details and an example.</p> +</div> +<h3 id="placeholder">placeholder</h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed from JavaScript code that directly sets the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement.value</code></a> property.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size">size</h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h2 id="using_password_inputs">Using password inputs</h2> +<div class="section-content"><p>Password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.</p></div> +<h3 id="a_simple_password_input">A simple password input</h3> +<div class="section-content"> +<p>Here we see the most basic password input, with a label established using the <a href="../label"><code><label></code></a> element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UtVuuEQJu5FPFmKwZk1RvpW7OrPgl20LxQTslyeC73c=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<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>password<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="A simple password input sample" id="frame_a_simple_password_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=a_simple_password_input" loading="lazy"></iframe> +</div> +</div> +<h3 id="allowing_autocomplete">Allowing autocomplete</h3> +<div class="section-content"> +<p>To allow the user's password manager to automatically enter the password, specify the <a href="../input#autocomplete"><code>autocomplete</code></a> attribute. For passwords, this should typically be one of the following:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Allow the browser or a password manager to automatically fill out the password field. This isn't as informative as using either <code>current-password</code> or <code>new-password</code>.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Don't allow the browser or password manager to automatically fill out the password field. Note that some software ignores this value, since it's typically harmful to users' ability to maintain safe password practices.</p> </dd> <dt id="current-password"><a href="#current-password"><code>current-password</code></a></dt> <dd> <p>Allow the browser or password manager to enter the current password for the site. This provides more information than <code>on</code> does, since it lets the browser or password manager automatically enter currently-known password for the site in the field, but not to suggest a new one.</p> </dd> <dt id="new-password"><a href="#new-password"><code>new-password</code></a></dt> <dd> <p>Allow the browser or password manager to automatically enter a new password for the site; this is used on "change your password" and "new user" forms, on the field asking the user for a new password. The new password may be generated in a variety of ways, depending on the password manager in use. It may fill in a new suggested password, or it might show the user an interface for creating one.</p> </dd> </dl> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="I63R43lm9WybFOt1EFz3VXpTKrigXxoe2cG0o2ndPgY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<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>password<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>current-password<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Allowing autocomplete sample" id="frame_allowing_autocomplete" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=allowing_autocomplete" loading="lazy"></iframe> +</div> +</div> +<h3 id="making_the_password_mandatory">Making the password mandatory</h3> +<div class="section-content"> +<p>To tell the user's browser that the password field must have a valid value before the form can be submitted, specify the Boolean <a href="../input#required"><code>required</code></a> attribute.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Mnsvira++3eqGOjCsLRtdkBG57uMnpy6s8pXIf7g7QY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<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>password<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Making the password mandatory sample" id="frame_making_the_password_mandatory" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=making_the_password_mandatory" loading="lazy"></iframe> +</div> +</div> +<h3 id="specifying_an_input_mode">Specifying an input mode</h3> +<div class="section-content"> +<p>If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the <a href="../input#inputmode"><code>inputmode</code></a> attribute to request a specific one. The most obvious use case for this is if the password is required to be numeric (such as a PIN). Mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier. If the PIN is for one-time use, set the <a href="../input#autocomplete"><code>autocomplete</code></a> attribute to either <code>off</code> or <code>one-time-code</code> to suggest that it's not saved.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="axKIev2KAbIQtfaUZ2pDaWc1fwY3JKy4fnVqJs2MwUs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>pin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>PIN: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>pin<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>password<span class="token punctuation">"</span></span> <span class="token attr-name">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Specifying an input mode sample" id="frame_specifying_an_input_mode" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=specifying_an_input_mode" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_length_requirements">Setting length requirements</h3> +<div class="section-content"> +<p>As usual, you can use the <a href="../input#minlength"><code>minlength</code></a> and <a href="../input#maxlength"><code>maxlength</code></a> attributes to establish minimum and maximum acceptable lengths for the password. This example expands on the previous one by specifying that the user's PIN must be at least four and no more than eight digits. The <a href="../input#size"><code>size</code></a> attribute is used to ensure that the password entry control is eight characters wide.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qtZGNfEtqy9Lj6N9D5Vfu/iigGSfEiM1Ea7PqCk/o0A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>pin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>PIN:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>pin<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>password<span class="token punctuation">"</span></span> + <span class="token attr-name">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Setting length requirements sample" id="frame_setting_length_requirements" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=setting_length_requirements" loading="lazy"></iframe> +</div> +</div> +<h3 id="selecting_text">Selecting text</h3> +<div class="section-content"> +<p>As with other textual entry controls, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a> method to select all the text in the password field.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="C7Yt0yMmxoMvXWEDK0qcm5DTMOCyYDEOjmB1zTAGepc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>userPassword<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>password<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>selectAll<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Select All<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="1AA8Y0mj1clBZbfypyMuwHX4f81uEOittoGqg00BvSk=" data-language="js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"selectAll"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"userPassword"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Selecting text sample" id="frame_selecting_text" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=selecting_text" loading="lazy"></iframe> +</div> <p>You can also use <a class="page-not-created"><code>selectionStart</code></a> and <a class="page-not-created"><code>selectionEnd</code></a> to get (or set) what range of characters in the control are currently selected, and <a class="page-not-created"><code>selectionDirection</code></a> to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation). However, given that the text is obscured, the usefulness of these is somewhat limited.</p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>If your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the <a href="../input#pattern"><code>pattern</code></a> attribute to establish a regular expression to be used to automatically ensure that your passwords meet those requirements.</p> <p>In this example, only values consisting of at least four and no more than eight hexadecimal digits are valid.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+dVAF9G/0JiXQH50L298CrPISwpo38vL9TGB5lBv7p8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>hexId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hex ID: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>hexId<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>password<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9a-fA-F]{4,8}<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter an ID consisting of 4-8 hexadecimal digits<span class="token punctuation">"</span></span> + <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-password<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=validation" loading="lazy"></iframe> +</div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="requesting_a_social_security_number">Requesting a Social Security number</h3> +<div class="section-content"> +<p>This example only accepts input which matches the format for a <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure" target="_blank">valid United States Social Security Number</a>. These numbers, used for tax and identification purposes in the US, are in the form "123-45-6789". Assorted rules for what values are permitted in each group exist as well.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="xE6KluO1VGhQvE/NMi1+ulFpt4QuR/zHjHXVLSYu7H8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ssn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>SSN:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ssn<span class="token punctuation">"</span></span> + <span class="token attr-name">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>ssn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Value:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>current<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This uses a <a href="../input#pattern"><code>pattern</code></a> which limits the entered value to strings representing legal Social Security numbers. Obviously, this regexp doesn't guarantee a valid SSN (since we don't have access to the Social Security Administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. In addition, it allows the three groups of digits to be separated by a space, a dash ("-"), or nothing.</p> <p>The <a href="../input#inputmode"><code>inputmode</code></a> is set to <code>numeric</code> to encourage devices with virtual keyboards to switch to a numeric keypad layout for easier entry. The <a href="../input#minlength"><code>minlength</code></a> and <a href="../input#maxlength"><code>maxlength</code></a> attributes are set to 9 and 12, respectively, to require that the value be at least nine and no more than 12 characters (the former without separating characters between the groups of digits and the latter with them). The <a href="../input#required"><code>required</code></a> attribute is used to indicate that this control must have a value. Finally, <a href="../input#autocomplete"><code>autocomplete</code></a> is set to <code>off</code> to avoid password managers and session restore features trying to set its value, since this isn't a password at all.</p> <h4 id="javascript_2">JavaScript</h4> <p>This is just some simple code to display the entered SSN onscreen so you can see it. Obviously this defeats the purpose of a password field, but it's helpful for experimenting with the <code>pattern</code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="cmNEXm/sRsbN4EpEDruhGZ97x11r/C2Haz3q3Yz0498=" data-language="js"><span class="token keyword">const</span> ssn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"ssn"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> current <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"current"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +ssn<span class="token punctuation">.</span><span class="token function-variable function">oninput</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + current<span class="token punctuation">.</span>textContent <span class="token operator">=</span> ssn<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Requesting a Social Security number sample" id="frame_requesting_a_social_security_number" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/password/runner.html?id=requesting_a_social_security_number" loading="lazy"></iframe> +</div> +</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 representing a password, or empty</td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#inputmode"><code>inputmode</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a>, <a href="../input#required"><code>required</code></a>, and <a href="../input#size"><code>size</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#password-state-(type=password)">HTML Standard <br><small># password-state-(type=password)</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>password</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">2</td> +<td class="bc-supports-yes">2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>insecure_login_handling</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <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"> + © 2005–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/password" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fradio.html b/devdocs/html/element%2Finput%2Fradio.html new file mode 100644 index 00000000..255886b5 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fradio.html @@ -0,0 +1,282 @@ +<header><h1><input type="radio"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>radio</code> are generally used in <strong>radio groups</strong>—collections of radio buttons describing a set of related options.</p> <p>Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.</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-radio.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.</p> <p> <img src="data:image/jpeg;base64,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" alt="Shows what radio buttons looked like in the olden days." width="600" height="400" loading="lazy"> </p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <a href="checkbox">Checkboxes</a> are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.</p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p>The <code>value</code> attribute is a string containing the radio button's value. The value is never shown to the user by their <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. Instead, it's used to identify which radio button in a group is selected.</p></div> +<h3 id="defining_a_radio_group">Defining a radio group</h3> +<div class="section-content"> +<p>A radio group is defined by giving each of radio buttons in the group the same <a href="../input#name"><code>name</code></a>. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.</p> <p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p> <p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the value <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p> <p>The resulting HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="LGzCxnDUtgphRbcPTjcIeQ9q0Yukso+D5yV7Ek4RFIo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> that uniquely identifies that individual radio button within the group. They each also have a unique <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a>, which is used by the <a href="../label"><code><label></code></a> element's <a href="../label#for"><code>for</code></a> attribute to associate the labels with the radio buttons.</p> <p>You can try out this example here:</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Defining a radio group sample" id="frame_defining_a_radio_group" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=defining_a_radio_group" loading="lazy"></iframe> +</div> +</div> +<h3 id="data_representation_of_a_radio_group">Data representation of a radio group</h3> +<div class="section-content"> +<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=value</code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p> <p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.</p> </div> <p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See <a href="#selecting_a_radio_button_by_default">Selecting a radio button by default</a> below.</p> <p>Let's add a bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a <a href="../pre"><code><pre></code></a> block to output the form data into:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="16T0vcaSioU9q/RFcmdQxv7MTZcqYxRsJ0G1Fkmly+U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</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>log<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Then we add some <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event"><code>submit</code></a> event, which is sent when the user clicks the "Submit" button:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="z/n7qd6LpjTHePcFqJVL+5oKKwv37foo1tKgwTLtuzA=" data-language="js"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> log <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#log"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +form<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"submit"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> output <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> entry <span class="token keyword">of</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> + output <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>output<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>entry<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>entry<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\r</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + log<span class="token punctuation">.</span>innerText <span class="token operator">=</span> output<span class="token punctuation">;</span> + event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Data representation of a radio group sample" id="frame_data_representation_of_a_radio_group" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=data_representation_of_a_radio_group" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"> +<p>In addition to the common attributes shared by all <a href="../input"><code><input></code></a> elements, <code>radio</code> inputs support the following attributes.</p> <dl> <dt id="checked"><a href="#checked"><code>checked</code></a></dt> <dd> <p>A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.</p> <p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the <a href="../input#autocomplete"><code>autocomplete</code></a> attribute to control this feature.</p> </dd> <dt id="value_2"><a href="#value_2"><code>value</code></a></dt> <dd> <p>The <code>value</code> attribute is one which all <a href="../input"><code><input></code></a>s share; however, it serves a special purpose for inputs of type <code>radio</code>: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section <a href="#value">Value</a> above.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>The <code>required</code> attribute is one which most <a href="../input"><code><input></code></a>s share. If any radio button in a same-named group of radio buttons has the <code>required</code> attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.</p> </dd> </dl> +</div> +<h2 id="using_radio_inputs">Using radio inputs</h2> +<div class="section-content"><p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p></div> +<h3 id="selecting_a_radio_button_by_default">Selecting a radio button by default</h3> +<div class="section-content"> +<p>To make a radio button selected by default, you include <code>checked</code> attribute, as shown in this revised version of the previous example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jaQuJ+Ny38OzHtwk4A9yOdkNPoIubDM4gk1D36i7wKY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice1<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>email<span class="token punctuation">"</span></span> + <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Selecting a radio button by default sample" id="frame_selecting_a_radio_button_by_default" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=selecting_a_radio_button_by_default" loading="lazy"></iframe> +</div> <p>In this case, the first radio button is now selected by default.</p> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p> </div> +</div> +<h3 id="providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> +<div class="section-content"> +<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated <a href="../label"><code><label></code></a> element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p> <p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p></div> +<h2 id="styling_radio_inputs">Styling radio inputs</h2> +<div class="section-content"> +<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jaQuJ+Ny38OzHtwk4A9yOdkNPoIubDM4gk1D36i7wKY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice1<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>email<span class="token punctuation">"</span></span> + <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>radio<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>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<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>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The CSS involved in this example is a bit more significant:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="ELcyRJ4KGMVQNhXb7NPG8I1kM9ORuH0EZhA/38+LUMY=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div:first-of-type</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">margin-right</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + + <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> + + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999<span class="token punctuation">;</span> + <span class="token property">transition</span><span class="token punctuation">:</span> 0.2s all linear<span class="token punctuation">;</span> + <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">top</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:checked</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 6px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button, +legend</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button:hover, +button:focus</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button:active</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> + <span class="token property">outline</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Most notable here is the use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> along with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition"><code>transition</code></a> to create a nice animating radio selection. Notice also how the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked"><code>:checked</code></a> pseudo-class is used to specify the styles for the radio button's appearance when selected.</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> If you wish to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p> </div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Styling radio inputs sample" id="frame_styling_radio_inputs" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=styling_radio_inputs" loading="lazy"></iframe> +</div> <p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</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 representing the value of the radio button. </td> </tr> <tr> <td><strong>Events</strong></td> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> +</td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <code><a href="#checked">checked</a></code>, <code><a href="#value">value</a></code> and <code><a href="../../attributes/required">required</a></code> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>checked</code> and <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><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role">radio</a></code></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#radio-button-state-(type=radio)">HTML Standard <br><small># radio-button-state-(type=radio)</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>radio</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">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">4</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><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface that implements it.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a>: the interface that describes a list of radio buttons</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"> + © 2005–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/radio" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Frange.html b/devdocs/html/element%2Finput%2Frange.html new file mode 100644 index 00000000..26c17cab --- /dev/null +++ b/devdocs/html/element%2Finput%2Frange.html @@ -0,0 +1,340 @@ +<header><h1><input type="range"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>range</code> let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the <a href="number">number</a> input type.</p> <p>Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important.</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-range.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If the user's browser doesn't support type <code>range</code>, it will fall back and treat it as a <code><a href="text">text</a></code> input.</p> +</div> +<h3 id="validation">Validation</h3> +<div class="section-content"> +<p>There is no pattern validation available; however, the following forms of automatic validation are performed:</p> <ul> <li>If the <a href="../input#value"><code>value</code></a> is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.</li> <li>The value won't be less than <a href="../input#min"><code>min</code></a>. The default is 0.</li> <li>The value won't be greater than <a href="../input#max"><code>max</code></a>. The default is 100.</li> <li>The value will be a multiple of <a href="../input#step"><code>step</code></a>. The default is 1.</li> </ul> +</div> +<h3 id="value">Value</h3> +<div class="section-content"> +<p>The <a href="../input#value"><code>value</code></a> attribute contains a string which contains a string representation of the selected number. The value is never an empty string (<code>""</code>). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the <code>min</code> attribute. The algorithm for determining the default value is:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="s0YJHxSrqtIfl3E7CsMpoqjj0V6S+Q868hUb2UVV41M=" data-language="js">defaultValue <span class="token operator">=</span> + rangeElem<span class="token punctuation">.</span>max <span class="token operator"><</span> rangeElem<span class="token punctuation">.</span>min + <span class="token operator">?</span> rangeElem<span class="token punctuation">.</span>min + <span class="token operator">:</span> rangeElem<span class="token punctuation">.</span>min <span class="token operator">+</span> <span class="token punctuation">(</span>rangeElem<span class="token punctuation">.</span>max <span class="token operator">-</span> rangeElem<span class="token punctuation">.</span>min<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span> +</pre> +</div> <p>If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes shared by all <a href="../input"><code><input></code></a> elements, range inputs offer the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"> +<p>The value of the <code>list</code> attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p> <p>See the <a href="#adding_tick_marks">adding tick marks</a> below for an example of how the options on a range are denoted in supported browsers.</p> +</div> +<h3 id="max">max</h3> +<div class="section-content"> +<p>The greatest value in the range of permitted values. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <a href="../../attributes/max"><code>max</code></a> attribute isn't a number, then the element has no maximum value.</p> <p>This value must be greater than or equal to the value of the <a href="../../attributes/min"><code>min</code></a> attribute. See the HTML <a href="../../attributes/max"><code>max</code></a> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p>The lowest value in the range of permitted values. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p> <p>This value must be less than or equal to the value of the <a href="../../attributes/max"><code>max</code></a> attribute. See the HTML <a href="../../attributes/min"><code>min</code></a> attribute.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If the <code>min</code> and <code>max</code> values are equal or the <code>max</code> value is lower than the <code>min</code> value the user will not be able to interact with the range.</p> </div> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, or an appropriate default value if neither of those is provided) are valid.</p> <p>The <code>step</code> attribute can also be set to the <code>any</code> string value. This <code>step</code> value means that no stepping interval is implied and any value is allowed in the specified range (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>). See the <a href="#setting_step_to_the_any_value">Setting step to the <code>any</code> value</a> example for how this works in supported browsers.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> When the value entered by a user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round off the value to the nearest valid value, preferring to round numbers up when there are two equally close options.</p> </div> <p>The default stepping value for <code>range</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer; for example, if you set <code>min</code> to -10 and <code>value</code> to 1.5, then a <code>step</code> of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the <a href="../../attributes/step">HTML <code>step</code> attribute</a>.</p> +</div> +<h2 id="non-standard_attributes">Non-standard Attributes</h2> + +<h3 id="orient">orient</h3> +<div class="section-content"> +<p>Similar to the -moz-orient non-standard CSS property impacting the <a href="../progress"><code><progress></code></a> and <a href="../meter"><code><meter></code></a> elements, the <code>orient</code> attribute defines the orientation of the range slider. Values include <code>horizontal</code>, meaning the range is rendered horizontally, and <code>vertical</code>, where the range is rendered vertically.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> The following input attributes do not apply to the input range: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, and <code>src</code>. Any of these attributes, if included, will be ignored.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>While the <code>number</code> type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The <code>range</code> input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.</p> <p>A few examples of situations in which range inputs are commonly used:</p> <ul> <li>Audio controls such as volume and balance, or filter controls.</li> <li>Color configuration controls such as color channels, transparency, brightness, etc.</li> <li>Game configuration controls such as difficulty, visibility distance, world size, and so forth.</li> <li>Password length for a password manager's generated passwords.</li> </ul> <p>As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".</p> +</div> +<h3 id="specifying_the_minimum_and_maximum">Specifying the minimum and maximum</h3> +<div class="section-content"> +<p>By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the <a href="../input#min"><code>min</code></a> and/or <a href="../input#max"><code>max</code></a> attributes. These can be any floating-point value.</p> <p>For example, to ask the user for a value between -10 and 10, you can use:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="61WSkGGyXk8u/sQdktXVjpFi3iZwLrFpdM4kKoHikL4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-10<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Specifying the minimum and maximum sample" id="frame_specifying_the_minimum_and_maximum" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=specifying_the_minimum_and_maximum" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_the_values_granularity">Setting the value's granularity</h3> +<div class="section-content"> +<p>By default, the granularity is 1, meaning the value is always an integer. To control the granularity, you can change the <a href="../input#step"><code>step</code></a> attribute. For example, If you need a value to be halfway between 5 and 10, you should set the value of <code>step</code> to 0.5:</p> <h4 id="setting_the_step_attribute">Setting the step attribute</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RCETPs5lHxENwLew/431FgB7OdLvdmP5IUb+uLW1s5o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Setting the step attribute sample" id="frame_setting_the_step_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=setting_the_step_attribute" loading="lazy"></iframe> +</div> <h4 id="setting_step_to_any">Setting step to "any"</h4> <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the <a href="../input#step"><code>step</code></a> attribute:</p> <h5 id="html">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="r+ZJhIMO14e+VyMp2xGpbY0SXGIRlBJ6eJpKGHXO7uA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>pi_input<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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3.14<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>any<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Value: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</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>value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="javascript">JavaScript</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="cQHNeG2dtOemQmBYUM3Aj2Ws6K76Cq1Za9GIXIIt810=" data-language="js"><span class="token keyword">const</span> value <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#pi_input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +value<span class="token punctuation">.</span>textContent <span class="token operator">=</span> input<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + value<span class="token punctuation">.</span>textContent <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting step to any sample" id="frame_setting_step_to_any" width="600" height="75" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=setting_step_to_any" loading="lazy"></iframe> +</div> <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. JavaScript is used to show how the value changes as the user interacts with the range.</p> +</div> +<h3 id="adding_tick_marks">Adding tick marks</h3> +<div class="section-content"> +<p>To add tick marks to a range control, include the <code>list</code> attribute, giving it the <code>id</code> of a <a href="../datalist"><code><datalist></code></a> element which defines a series of tick marks on the control. Each point is represented using an <a href="../option"><code><option></code></a> element with its <a href="../option#value"><code>value</code></a> set to the range's value at which a mark should be drawn.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="MruCcANpMskjStC9xQAVNxzQ1EFSqQDDrTDn+HYcdsY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>temp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a comfortable temperature:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>temp<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>markers<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>markers<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Adding tick marks sample" id="frame_adding_tick_marks" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=adding_tick_marks" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_the_same_datalist_for_multiple_range_controls">Using the same datalist for multiple range controls</h3> +<div class="section-content"> +<p>To help you from repeating code you can reuse that same <a href="../datalist"><code><datalist></code></a> for multiple <code><input type="range"></code> elements, and other <a href="../input"><code><input></code></a> types.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> If you also want to <a href="#adding_labels">show the labels</a> as in the example below then you would need a <code>datalist</code> for each range input.</p> </div> <h4 id="html_3">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EfTIISSTx0DO++c8Qzmr2pGJUk6zze1FdEt8NCE6dwg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>temp1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Temperature for room 1:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>temp1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp1<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>temp2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Temperature for room 2:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>temp2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp2<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>temp3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Temperature for room 3:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>temp3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp3<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>0<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>25<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>75<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>100<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Using the same datalist for multiple range controls sample" id="frame_using_the_same_datalist_for_multiple_range_controls" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_same_datalist_for_multiple_range_controls" loading="lazy"></iframe> +</div> +</div> +<h3 id="adding_labels">Adding labels</h3> +<div class="section-content"> +<p>You can label tick marks by giving the <code><option></code> elements <code>label</code> attributes. However, the label content will not be displayed by default. You can use CSS to show the labels and to position them correctly. Here's one way you could do this.</p> <h4 id="html_4">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="r//H/j3KZ8Q137NLCpekHOAWBCqMxHrtrKaqIKdKfBs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tempB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a comfortable temperature:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>tempB<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>0<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>very cold!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>25<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cool<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>75<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getting warm!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>100<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hot!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="4YiKFCF1vnbAmSqlnYxHLlwg2qZL6+e/h3001DS/OUg=" data-language="css"><span class="token selector">datalist</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span> + <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> + <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">option</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Adding labels sample" id="frame_adding_labels" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=adding_labels" loading="lazy"></iframe> +</div> +</div> +<h3 id="creating_vertical_range_controls">Creating vertical range controls</h3> +<div class="section-content"> +<p>By default, browsers render range inputs as sliders with the knob sliding left and right.</p> <p>To create a vertical range, wherein the knob slides up and down, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property to <code>slider-vertical</code> and include the non-standard <code>orient</code> attribute for Firefox.</p> <h4 id="horizontal_range_control">Horizontal range control</h4> <p>Consider this range control:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PZmCPbB1GsVAASr2aRI0j1y/EPHrOJFK5+C6t8t6vxs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<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>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Horizontal range control sample" id="frame_horizontal_range_control" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=horizontal_range_control" loading="lazy"></iframe> +</div> <p>This control is horizontal (at least on most if not all major browsers; others might vary).</p> <h4 id="using_the_appearance_property">Using the appearance property</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property has a non-standard value of <code>slider-vertical</code> that, well, makes sliders vertical.</p> <p>We use the same HTML as in the previous examples:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RahzzulggSYi1Ost/ooaNF6DCMPtuVUjJ2Fd3DEpD/w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<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>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>We target just the inputs with a type of range:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="TFcTUtS3OJ5oP8mZkRuL7LxeM2YjSv8gSi/N0Iphmbg=" data-language="css"><span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> slider-vertical<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Using the appearance property sample" id="frame_using_the_appearance_property" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_appearance_property" loading="lazy"></iframe> +</div> <h4 id="using_the_orient_attribute">Using the orient attribute</h4> <p>In Firefox only, there is a non-standard <code>orient</code> property.</p> <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Dln5U7nm8y1vVFMTpVJFoc87O4j/ydMQrAX4BlpttQ8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<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>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">orient</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Using the orient attribute sample" id="frame_using_the_orient_attribute" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_orient_attribute" loading="lazy"></iframe> +</div> <h4 id="writing-mode_bt-lr">writing-mode: bt-lr</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode"><code>writing-mode</code></a> property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.</p> <p>We use the same HTML as in the previous examples:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RahzzulggSYi1Ost/ooaNF6DCMPtuVUjJ2Fd3DEpD/w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<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>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sBW+AMa57Jt1O9yXtadvV8QWXxJVW3pTtdxz2mRn1A0=" data-language="css"><span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span> + <span class="token property">writing-mode</span><span class="token punctuation">:</span> bt-lr<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="writing-mode bt-lr sample" id="frame_writing-mode_bt-lr" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=writing-mode_bt-lr" loading="lazy"></iframe> +</div> <h4 id="putting_it_all_together">Putting it all together</h4> <p>As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:</p> <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Dln5U7nm8y1vVFMTpVJFoc87O4j/ydMQrAX4BlpttQ8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<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>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">orient</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>We target just the <code>input</code>s with a <code>type</code> of <code>range</code> and <code>orient</code> set to <code>vertical</code>, changing the <code>writing-mode</code> from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for pre-Blink versions of Edge, and add <code>appearance: slider-vertical</code> which is supported in Blink and Webkit browsers:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="uqTcM2RazaWjFY4wqrabir4SdK2PHCYdl5ICo+++lMc=" data-language="css"><span class="token selector">input[type="range"][orient="vertical"]</span> <span class="token punctuation">{</span> + <span class="token property">writing-mode</span><span class="token punctuation">:</span> bt-lr<span class="token punctuation">;</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> slider-vertical<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Putting it all together sample" id="frame_putting_it_all_together" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=putting_it_all_together" loading="lazy"></iframe> +</div> +</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 containing the string representation of the selected numeric value; use <a class="page-not-created"><code>valueAsNumber</code></a> to get the value as a number. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#max"><code>max</code></a>, <a href="../input#min"><code>min</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code>, <code>value</code>, and <code>valueAsNumber</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role">slider</a></code></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#range-state-(type=range)">HTML Standard <br><small># range-state-(type=range)</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>range</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">4.4<details><summary>2–4.4</summary>Pre-Chromium Android WebView recognizes the <code>range</code> type, but doesn't implement a range-specific control.</details> +</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">7.0</td> +</tr> +<tr> +<th><code>tick_marks</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">109</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">109</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>vertical_orientation</code></th> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>The slider can be oriented vertically by setting the <code>writing-mode: bt-lr</code> style on the <code>input</code> element.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>10</summary>The slider can be oriented vertically by setting the <code>writing-mode: bt-lr</code> style on the <code>input</code> element.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML Forms</a></li> <li> +<a href="../input"><code><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface it's based upon</li> <li><a href="number"><code><input type="number"></code></a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input/" target="_blank">Styling the range element</a></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"> + © 2005–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/range" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range</a> + </p> +</div> 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><input type="reset"></h1></header><div class="section-content"><p><a href="../input"><code><input></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><input type="reset"></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"><</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">/></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"><</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">/></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><input type="reset"></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><input type="button"></code></a>, or better still, a <a href="../button"><code><button></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"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Type in some sample text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></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><input></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"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Type in some sample text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></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"><</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">/></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><input type="button"></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><button></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><button></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><input></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><button></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"> + © 2005–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> diff --git a/devdocs/html/element%2Finput%2Fsearch.html b/devdocs/html/element%2Finput%2Fsearch.html new file mode 100644 index 00000000..e72af5b5 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fsearch.html @@ -0,0 +1,307 @@ +<header><h1><input type="search"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>search</code> are text fields designed for the user to enter search queries into. These are functionally identical to <a href="text"><code>text</code></a> inputs, but may be styled differently by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>.</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-search.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input#value"><code>value</code></a> attribute contains a string representing the value contained in the search field. You can retrieve this using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value"><code>HTMLInputElement.value</code></a> property in JavaScript.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="qxctvJ13g/WMY4Gp2AY41+L06WjBxLoJsh2Kc+rwbuM=" data-language="js">searchTerms <span class="token operator">=</span> mySearch<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +</pre> +</div> <p>If no validation constraints are in place for the input (see <a href="#validation">Validation</a> for more details), the value can be any text string or an empty string (<code>""</code>).</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, search field inputs support the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="maxlength">maxlength</h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p> +</div> +<h3 id="minlength">minlength</h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the search input has no minimum length.</p> <p>The search field will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p> +</div> +<h3 id="pattern">pattern</h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>See the section <a href="#specifying_a_pattern">Specifying a pattern</a> for details and an example.</p> +</div> +<h3 id="placeholder">placeholder</h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size">size</h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h3 id="spellcheck">spellcheck</h3> +<div class="section-content"> +<p><code>spellcheck</code> is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of <code>spellcheck</code> on <a href="../input"><code><input></code></a> elements. The permitted values for <code>spellcheck</code> are:</p> <dl> <dt id="false"><a href="#false"><code>false</code></a></dt> <dd> <p>Disable spell checking for this element.</p> </dd> <dt id="true"><a href="#true"><code>true</code></a></dt> <dd> <p>Enable spell checking for this element.</p> </dd> <dt id="_empty_string_or_no_value"><a href="#_empty_string_or_no_value">"" (empty string) or no value</a></dt> <dd> <p>Follow the element's default behavior for spell checking. This may be based upon a parent's <code>spellcheck</code> setting or other factors.</p> </dd> </dl> <p>An input field can have spell checking enabled if it doesn't have the <a href="#readonly">readonly</a> attribute set and is not disabled.</p> <p>The value returned by reading <code>spellcheck</code> may not reflect the actual state of spell checking within a control, if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> preferences override the setting.</p> +</div> +<h2 id="non-standard_attributes">Non-standard attributes</h2> +<div class="section-content"><p>The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.</p></div> +<h3 id="autocorrect">autocorrect</h3> +<div class="section-content"> +<p>A Safari extension, the <code>autocorrect</code> attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic correction of typos, as well as processing of text substitutions if any are configured.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic correction and text substitutions.</p> </dd> </dl> +</div> +<h3 id="incremental">incremental</h3> +<div class="section-content"> +<p>The Boolean attribute <code>incremental</code> is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> to process the input as a live search. As the user edits the value of the field, the user agent sends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event"><code>search</code></a> events to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> object representing the search box. This allows your code to update the search results in real time as the user edits the search.</p> <p>If <code>incremental</code> is not specified, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event"><code>search</code></a> event is only sent when the user explicitly initiates a search (such as by pressing the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field).</p> <p>The <code>search</code> event is rate-limited so that it is not sent more frequently than an implementation-defined interval.</p> +</div> +<h3 id="mozactionhint_deprecated">mozactionhint <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</h3> +<div class="section-content"> +<p>A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field.</p> <p><strong>Deprecated: Use <a href="../../global_attributes#enterkeyhint"><code>enterkeyhint</code></a> instead.</strong></p> +</div> +<h3 id="results">results</h3> +<div class="section-content"> +<p>The <code>results</code> attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <a href="../input"><code><input></code></a> element's natively-provided drop-down menu of previous search queries.</p> <p>The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.</p> +</div> +<h2 id="using_search_inputs">Using search inputs</h2> +<div class="section-content"><p><code><input></code> elements of type <code>search</code> are very similar to those of type <code>text</code>, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NAQqmdLIV0CJzTz0A4Ir4GCprLf2Ef2o6X11v7wDVjo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=basic_example" loading="lazy"></iframe> +</div> <p><code>q</code> is the most common <code>name</code> given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be <code>q=searchterm</code>.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> You must remember to set a <a href="../input#name"><code>name</code></a> for your input, otherwise nothing will be submitted.</p> </div> +</div> +<h3 id="differences_between_search_and_text_types">Differences between search and text types</h3> +<div class="section-content"> +<p>The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired, in Chrome this action is also triggered when pressing escape. The following screenshot comes from Chrome:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAAfCAMAAAA/frSHAAAA1VBMVEX///8AAAC93v7N5f5wrurIyMjd3d273f7n8v+Dwf2u0PLd7f7y+P/29vbNzc3o8/+Pxv1xr+t/vfl1s+/7/v+53P3t6+39//Px8fHs7OyPuOHWmUb416n/+/7J7v/958C/iEXao1T/9e8ACVIAUaAAAzHV9v8rm9YslNRJnta42vsAe72mXQDm+/8BEncyAgAAhMa2dQDf1dKRMwDPhgD/+OOmj5RPBQDXsoQAab201+8ANHu84/fv7/eKy+/HopSlknsAhM7/9s57i6VkTYR7eXODpr21XoQkAAABWUlEQVRYw+2XR3ODMBCFV2ABAtOxcaHYMdhJ3Gt6nP7/f1IowcmBTE5E8ozfQbO6fbP7JD0BnHSUqusSben1bxxH4TmRtjhecQoghTMIfRmcUsyLN4hlmzWaMm2LGPzX1HSOWB25QXVgDbljEU7PgSSR2DJ1U8s2EaUDkNmQKJ9z6dL8CVQT6QCpgoY1Qc0gagwAtXGu9t9Anvwf/cGF1HKgsyYU62aRVg/VAgkYtwQstDAWSoG6CA146CVr0EcocpJqNqwSSEtJmimXVgbkDQLoPW93Q9iMoHsOL/MA9vdVAuX2yYxUBtQfZ7tw9351kQK56/iVh8o71P61Q/2bpPZD9LFaZh0CWD2hR4oeCuNbf7nwZtPtOunQGMK3oTsZ0Txl1wjdBe4ExcnIvHnkJqaOplTvIT8LJP4hJvkOtZuaubeMrdeeuTzEXGJkLlOz9+tg7l920lHpE8PzSXV8Ppl+AAAAAElFTkSuQmCC" alt="Focused search input, with focus ring, with the text 'cats'. There is an x icon in the input abutting the right side." width="144" height="31" loading="lazy"> </p> <p>In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This helps users who tend to do searches on the same or similar search queries over time. This screenshot is from Firefox:</p> <p> <img src="data:image/png;base64,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" alt="An input in error state with a red focus ring. The user has entered the letter 'h'. A pop-up selection list is open directly under the input box with two options: hello and hermansje." width="171" height="83" loading="lazy">At this point, let's look at some useful techniques you can apply to your search forms. </p> +</div> +<h3 id="setting_placeholders">Setting placeholders</h3> +<div class="section-content"> +<p>You can provide a useful placeholder inside your search input that could give a hint on what to do using the <a href="../input#placeholder"><code>placeholder</code></a> attribute. Look at the following example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="E4kIkFAXgyJyTEg2+c5DZGZhsOYLadNJbePvlgYbwYs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search the site…<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>You can see how the placeholder is rendered below:</p> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting placeholders sample" id="frame_setting_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=setting_placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="search_form_labels_and_accessibility">Search form labels and accessibility</h3> +<div class="section-content"> +<p>One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/" target="_blank">this example shows a typical pattern</a>).</p> <p>This could, however, cause confusion for screen reader users, since they will not have any verbal indication of what the search input is. One way around this that won't impact on your visual design is to use <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> features:</p> <ul> <li>A <code>role</code> attribute of value <code>search</code> on the <code><form></code> element will cause screen readers to announce that the form is a search form.</li> <li>If that isn't enough, you can use an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attribute on the <a href="../input"><code><input></code></a> itself. This should be a descriptive text label that will be read out by the screen reader; it's used as a non-visual equivalent to <code><label></code>.</li> </ul> <p>Let's have a look at an example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="z+WPM2cqyaueYg00nAB0Wo4IwM6GjIQ2kRoP0WnJyRw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search the site…<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search through site content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>You can see how this is rendered below:</p> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Search form labels and accessibility sample" id="frame_search_form_labels_and_accessibility" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=search_form_labels_and_accessibility" loading="lazy"></iframe> +</div> <p>There is no visual difference from the previous example, but screen reader users have way more information available to them.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> See <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks">Signposts/Landmarks</a> for more information about such accessibility features.</p> </div> +</div> +<h3 id="physical_input_element_size">Physical input element size</h3> +<div class="section-content"> +<p>The physical size of the input box can be controlled using the <a href="../input#size"><code>size</code></a> attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iw6lObmkzq4stssnZKn6gv3ei3pvRs3pw6D0FUSXFHE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search the site…<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The result is this wider input box:</p> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Physical input element size sample" id="frame_physical_input_element_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=physical_input_element_size" loading="lazy"></iframe> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p><code><input></code> elements of type <code>search</code> have the same validation features available to them as regular <code>text</code> inputs. It is less likely that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format.</p> <div class="notecard note" id="sect10"> <p><strong>Note:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> </div> +</div> +<h3 id="a_note_on_styling">A note on styling</h3> +<div class="section-content"> +<p>There are useful pseudo-classes available for styling valid/invalid form elements: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a>. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="CKRTwu8HzX0yTXvAMib+eMKbf76PT5ZKisJwHlwijwc=" data-language="css"><span class="token selector">input:invalid ~ span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid ~ span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The technique also requires a <a href="../span"><code><span></code></a> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.</p> +</div> +<h3 id="making_input_required">Making input required</h3> +<div class="section-content"> +<p>You can use the <a href="../input#required"><code>required</code></a> attribute as an easy way of making entering a value required before form submission is allowed:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iNjkpirg8ZCYqbUHWf7YcqdVMUJWOAZ9fb0pTa4CMqw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search the site…<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Making input required sample" id="frame_making_input_required" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=making_input_required" loading="lazy"></iframe> +</div> <p>In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The following example is from Firefox:</p> <p> <img src="data:image/png;base64,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" alt="form field with attached message that says Please fill out this field" width="209" height="114" loading="lazy"> </p> <p>Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.</p> +</div> +<h3 id="input_value_length">Input value length</h3> +<div class="section-content"> +<p>You can specify a minimum length, in characters, for the entered value using the <a href="../input#minlength"><code>minlength</code></a> attribute; similarly, use <a href="../input#maxlength"><code>maxlength</code></a> to set the maximum length of the entered value.</p> <p>The example below requires that the entered value be 4–8 characters in length.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ZyMITUb28g7lxUjiFVL9MvpP+txnUKKeGuIwpaozwfY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>mySearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search for user<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User IDs are 4–8 characters in length<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Input value length sample" id="frame_input_value_length" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=input_value_length" loading="lazy"></iframe> +</div> <p>If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.</p> +</div> +<h3 id="specifying_a_pattern">Specifying a pattern</h3> +<div class="section-content"> +<p>You can use the <a href="../input#pattern"><code>pattern</code></a> attribute to specify a regular expression that the inputted value must follow to be considered valid (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course).</p> <p>Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers. The following example covers it:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RV6Kk6CwFhuerNj8b2cbJRsYyK6EpKsqPLPz+O9TvCU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>mySearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search for product by ID:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>mySearch<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two letters followed by four numbers<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[A-z]{2}[0-9]{4}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Specifying a pattern sample" id="frame_specifying_a_pattern" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/search/runner.html?id=specifying_a_pattern" loading="lazy"></iframe> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>You can see a good example of a search form used in context at our <a href="https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-aria-roles" target="_blank">website-aria-roles</a> example (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/" target="_blank">see it live</a>).</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 representing the value contained in the search field. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#required"><code>required</code></a>, <a href="../input#size"><code>size</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td>with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role">searchbox</a></code> +</td> <td>with <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code> +</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#text-(type=text)-state-and-search-state-(type=search)">HTML Standard <br><small># text-(type=text)-state-and-search-state-(type=search)</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>search</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">10.6</td> +<td class="bc-supports-yes">5</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">14</td> +<td class="bc-supports-yes">4.2</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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML Forms</a></li> <li> +<a href="../input"><code><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface it's based upon</li> <li><a href="text"><code><input type="text"></code></a></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"> + © 2005–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/search" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fsubmit.html b/devdocs/html/element%2Finput%2Fsubmit.html new file mode 100644 index 00000000..b1779a3a --- /dev/null +++ b/devdocs/html/element%2Finput%2Fsubmit.html @@ -0,0 +1,160 @@ +<header><h1><input type="submit"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>submit</code> are rendered as buttons. When the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event occurs (typically because the user clicked the button), the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> attempts to submit the form to the server.</p></div> +<h2 id="value">Value</h2> +<div class="section-content"><p>An <code><input type="submit"></code> element's <a href="../input#value"><code>value</code></a> attribute contains a string which is displayed as the button's label. Buttons do not have a true 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="Iad9SdiITwbaZsfhVkuq1ca4xsTOhxrbOjWaRKzcUoI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Send Request<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<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/submit/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>, the button will have a default label, chosen by the user agent. This label is likely to be something along the lines of "Submit" or "Submit Query." Here's an example of a submit button with a default label in your browser:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9XziiCTJpPvXKPOMD9NMZYz10+nHFyT/JAi6vrgJtAs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<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/submit/runner.html?id=omitting_the_value_attribute" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes shared by all <a href="../input"><code><input></code></a> elements, <code>submit</code> button inputs support the following attributes.</p></div> +<h3 id="formaction">formaction</h3> +<div class="section-content"> +<p>A string indicating the URL to which to submit the data. This takes precedence over the <a href="../form#action"><code>action</code></a> attribute on the <a href="../form"><code><form></code></a> element that owns the <a href="../input"><code><input></code></a>.</p> <p>This attribute is also available on <a href="image"><code><input type="image"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formenctype">formenctype</h3> +<div class="section-content"> +<p>A string that identifies the encoding method to use when submitting the form data to the server. There are three permitted values:</p> <dl> <dt id="applicationx-www-form-urlencoded"><a href="#applicationx-www-form-urlencoded"><code>application/x-www-form-urlencoded</code></a></dt> <dd> <p>This, the default value, sends the form data as a string after <a href="https://en.wikipedia.org/wiki/URL_encoding" target="_blank">URL encoding</a> the text using an algorithm such as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a>.</p> </dd> <dt id="multipartform-data"><a href="#multipartform-data"><code>multipart/form-data</code></a></dt> <dd> <p>Uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData"><code>FormData</code></a> API to manage the data, allowing for files to be submitted to the server. You <em>must</em> use this encoding type if your form includes any <a href="../input"><code><input></code></a> elements of <a href="../input#type"><code>type</code></a> <code>file</code> (<a href="file"><code><input type="file"></code></a>).</p> </dd> <dt id="textplain"><a href="#textplain"><code>text/plain</code></a></dt> <dd> <p>Plain text; mostly useful only for debugging, so you can easily see the data that's to be submitted.</p> </dd> </dl> <p>If specified, the value of the <code>formenctype</code> attribute overrides the owning form's <a href="../form#action"><code>action</code></a> attribute.</p> <p>This attribute is also available on <a href="image"><code><input type="image"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formmethod">formmethod</h3> +<div class="section-content"> +<p>A string indicating the HTTP method to use when submitting the form's data; this value overrides any <a href="../form#method"><code>method</code></a> attribute given on the owning form. Permitted values are:</p> <dl> <dt id="get"><a href="#get"><code>get</code></a></dt> <dd> <p>A URL is constructed by starting with the URL given by the <code>formaction</code> or <a href="../form#action"><code>action</code></a> attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by <code>formenctype</code> or the form's <a href="../form#enctype"><code>enctype</code></a> attribute. This URL is then sent to the server using an HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>get</code></a> request. This method works well for simple forms that contain only <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> characters and have no side effects. This is the default value.</p> </dd> <dt id="post"><a href="#post"><code>post</code></a></dt> <dd> <p>The form's data is included in the body of the request that is sent to the URL given by the <code>formaction</code> or <a href="../form#action"><code>action</code></a> attribute using an HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>post</code></a> method. This method supports complex data and file attachments.</p> </dd> <dt id="dialog"><a href="#dialog"><code>dialog</code></a></dt> <dd> <p>This method is used to indicate that the button closes the dialog with which the input is associated, and does not transmit the form data at all.</p> </dd> </dl> <p>This attribute is also available on <a href="image"><code><input type="image"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formnovalidate">formnovalidate</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the <a href="../form#novalidate"><code>novalidate</code></a> attribute on the element's owning form.</p> <p>This attribute is also available on <a href="image"><code><input type="image"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h3 id="formtarget">formtarget</h3> +<div class="section-content"> +<p>A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a <strong>browsing context</strong> (that is, a tab, window, or <a href="../iframe"><code><iframe></code></a>). A value specified here overrides any target given by the <a href="../form#target"><code>target</code></a> attribute on the <a href="../form"><code><form></code></a> that owns this input.</p> <p>In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:</p> <dl> <dt id="_self"><a href="#_self"><code>_self</code></a></dt> <dd> <p>Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.</p> </dd> <dt id="_blank"><a href="#_blank"><code>_blank</code></a></dt> <dd> <p>Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>.</p> </dd> <dt id="_parent"><a href="#_parent"><code>_parent</code></a></dt> <dd> <p>Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as <code>_self</code>.</p> </dd> <dt id="_top"><a href="#_top"><code>_top</code></a></dt> <dd> <p>Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as <code>_self</code>.</p> </dd> </dl> <p>This attribute is also available on <a href="image"><code><input type="image"></code></a> and <a href="../button"><code><button></code></a> elements.</p> +</div> +<h2 id="using_submit_buttons">Using submit buttons</h2> +<div class="section-content"> +<p><code><input type="submit"></code> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <a href="button"><code><input type="button"></code></a>, or better still, a <a href="../button"><code><button></code></a> element.</p> <p>If you choose to use <code><button></code> elements to create the buttons in your form, keep this in mind: If the <code><button></code> is inside a <a href="../form"><code><form></code></a>, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.</p> +</div> +<h3 id="a_simple_submit_button">A simple submit button</h3> +<div class="section-content"> +<p>We'll begin by creating a form with a simple submit button:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iaL7MHRcae7FuABNcbmaI9FKC0pgQgoeaY2jBRyTd6o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Let's submit some text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 attr-name">name</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Send<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="A simple submit button sample" id="frame_a_simple_submit_button" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/submit/runner.html?id=a_simple_submit_button" loading="lazy"></iframe> +</div> <p>Try entering some text into the text field, and then submitting the form.</p> <p>Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be <code>text=usertext</code>, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <code><form></code>; see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a> for more details.</p> +</div> +<h3 id="adding_a_keyboard_shortcut_to_a_submit_button">Adding a keyboard shortcut to a submit button</h3> +<div class="section-content"> +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any <a href="../input"><code><input></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>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination). In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See <a href="../../global_attributes/accesskey"><code>accesskey</code></a> for further details.</p> <p>Here's the previous example with the <kbd>s</kbd> access key added:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aUkdr6Tr6+e7VvXKC4XfqnnkhmlVGqB2Eq4qhnHOtj8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Let's submit some text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 attr-name">name</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">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Send<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>s<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>For example, in Firefox for Mac, pressing <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> triggers the Send button, while Chrome on Windows uses <kbd>Alt</kbd>+<kbd>S</kbd>.</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Adding a keyboard shortcut to a submit button sample" id="frame_adding_a_keyboard_shortcut_to_a_submit_button" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/submit/runner.html?id=adding_a_keyboard_shortcut_to_a_submit_button" loading="lazy"></iframe> +</div> <p>The problem with the above example is that the user will not 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_submit_button">Disabling and enabling a submit button</h3> +<div class="section-content"> +<p>To disable a submit button, specify the <a href="../../attributes/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="kPAtfE9Bey+Jqe3PqeX+PqPgh4ROMvbixxEqEYHQomQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Send<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></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="sect5"> <p><strong>Note:</strong> See the <a href="button#disabling_and_enabling_a_button"><code><input type="button"></code></a> page for more ideas about enabling and disabling buttons.</p> </div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>Submit 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 submit buttons. There's a reason this kind of control is sometimes called a "simple button."</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#submit-button-state-(type=submit)">HTML Standard <br><small># submit-button-state-(type=submit)</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>submit</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><button></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><button></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><input></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><button></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"> + © 2005–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/submit" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Ftel.html b/devdocs/html/element%2Finput%2Ftel.html new file mode 100644 index 00000000..eaf764c9 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftel.html @@ -0,0 +1,379 @@ +<header><h1><input type="tel"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>tel</code> are used to let the user enter and edit a telephone number. Unlike <a href="email"><code><input type="email"></code></a> and <a href="url"><code><input type="url"></code></a>, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.</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-tel.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Despite the fact that inputs of type <code>tel</code> are functionally identical to standard <code>text</code> inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. Using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Browsers that don't support type <code>tel</code> fall back to being a standard <a href="text">text</a> input.</p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p>The <a href="../input"><code><input></code></a> element's <a href="../input#value"><code>value</code></a> attribute contains a string that either represents a telephone number or is an empty string (<code>""</code>).</p></div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, telephone number inputs support the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="maxlength">maxlength</h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the telephone number field. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p> +</div> +<h3 id="minlength">minlength</h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the telephone number field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the telephone number input has no minimum length.</p> <p>The telephone number field will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p> +</div> +<h3 id="pattern">pattern</h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>See <a href="#pattern_validation">Pattern validation</a> below for details and an example.</p> +</div> +<h3 id="placeholder">placeholder</h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size">size</h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h2 id="non-standard_attributes">Non-standard attributes</h2> +<div class="section-content"><p>The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.</p></div> +<h3 id="autocorrect">autocorrect</h3> +<div class="section-content"> +<p>A Safari extension, the <code>autocorrect</code> attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic correction of typos, as well as processing of text substitutions if any are configured.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic correction and text substitutions.</p> </dd> </dl> +</div> +<h3 id="mozactionhint_deprecated">mozactionhint <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</h3> +<div class="section-content"> +<p>A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field.</p> <p><strong>Deprecated: Use <a href="../../global_attributes#enterkeyhint"><code>enterkeyhint</code></a> instead.</strong></p> +</div> +<h2 id="using_tel_inputs">Using tel inputs</h2> +<div class="section-content"> +<p>Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.</p> <p>Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See <a href="#validation">Validation</a>, below, for details.</p> +</div> +<h3 id="custom_keyboards">Custom keyboards</h3> +<div class="section-content"> +<p>One of the main advantages of <code><input type="tel"></code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Firefox for Android</th> <th>WebKit iOS (Safari/Chrome/Firefox)</th> </tr> </thead> <tbody> <tr> <td> <img src="data:image/png;base64,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" alt="Firefox for Android screen shot" width="360" height="640" loading="lazy"> </td> <td> <img src="data:image/png;base64,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" alt="Firefox for iOS screenshot" width="621" height="1104" loading="lazy"> </td> </tr> </tbody> </table></div></figure> +</div> +<h3 id="a_simple_tel_input">A simple tel input</h3> +<div class="section-content"> +<p>In its most basic form, a tel input can be implemented like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KKrnBb2MQQWSabmJ61PYPzxLw8G10eD4xDdZdSLVMU8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone number:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="A simple tel input sample" id="frame_a_simple_tel_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=a_simple_tel_input" loading="lazy"></iframe> +</div> <p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p> +</div> +<h3 id="placeholders">Placeholders</h3> +<div class="section-content"> +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <a href="../input"><code><input></code></a>. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> <p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="1DHcANFgER1jHPruEpzI+2US7NUZhY15rUDvAak0aX4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>123-4567-8901<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_the_input_size">Controlling the input size</h3> +<div class="section-content"> +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> <h4 id="physical_input_element_size">Physical input element size</h4> <p>The physical size of the input box can be controlled using the <a href="../input#size"><code>size</code></a> attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="94q+riRpLhoswD2cRyK/iejsSRDUoqQcG9pCdF4+DlU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Physical input element size sample" id="frame_physical_input_element_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=physical_input_element_size" loading="lazy"></iframe> +</div> <h4 id="element_value_length">Element value length</h4> <p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the <a href="../input#minlength"><code>minlength</code></a> attribute; similarly, use <a href="../input#maxlength"><code>maxlength</code></a> to set the maximum length of the entered telephone number.</p> <p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="daqls2tMr3RGKMZQ+Z7hEuTQSlJUnNVDY8hqL7pVtIg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>14<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Element value length sample" id="frame_element_value_length" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=element_value_length" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> The above attributes do affect <a href="#validation">Validation</a> — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p> </div> +</div> +<h3 id="providing_default_options">Providing default options</h3> +<div class="section-content"> +<h4 id="providing_a_single_default_using_the_value_attribute">Providing a single default using the value attribute</h4> <p>As always, you can provide a default value for an <code>tel</code> input box by setting its <a href="../input#value"><code>value</code></a> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EFK/j1a83YzJbhiU0S/mcj3Qq498+X+K+Xm628N1wv8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<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>333-4444-4444<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Providing a single default using the value attribute sample" id="frame_providing_a_single_default_using_the_value_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=providing_a_single_default_using_the_value_attribute" loading="lazy"></iframe> +</div> <h4 id="offering_suggested_values">Offering suggested values</h4> <p>Taking it a step further, you can provide a list of default phone number values from which the user can select. To do this, use the <a href="../input#list"><code>list</code></a> attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to <a href="../input#autocomplete"><code>autocomplete</code></a>. The <code>list</code> attribute specifies the ID of a <a href="../datalist"><code><datalist></code></a> element, which in turn contains one <a href="../option"><code><option></code></a> element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Kh0mnxfi6O458SPYZMqm0JphIsOMrRaTr1FZtiI8fy4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone number: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultTels<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultTels<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>111-1111-1111<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>122-2222-2222<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>333-3333-3333<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>344-4444-4444<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=offering_suggested_values" loading="lazy"></iframe> +</div> <p>With the <a href="../datalist"><code><datalist></code></a> element and its <a href="../option"><code><option></code></a>s in place, the browser will offer the specified values as potential values for the phone number; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested phone numbers. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> <p>Here's a screenshot of what that might look like:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqwAAACWCAMAAAAsYirgAAACbVBMVEX///8/h6b6+vr+/v84eJT8/P39/f3+//9Ah6b//v45eZQAAAD4+Pfz8/Pu7u/h4eHp6emDsuOx1v3v7/DOzs66urqwsLCVtNXExMTZ2NiQkJB1dXWenp7IycjX19enp6epqan5//////r///LZ9/9geZXl5eX/+tc4eJreqpry///I8v+n1fH42rXS9f//+M/19vbu9//x8fD/8c7r6uvg3d4AAE+JzO6gzv7t/v///ueRLgDm//+WzfBDAEH558r9+/X62aZmm8IAAEPS0tFdptYAAIwALpbwyo3b29o0b4jMy8k3eKBCAADhtXXZpFJdlLCmVQB/fJTTlT///t5PAADN6/gxaoP747vj9/5kptX13L+s2/ZzrNc4eJc4grUAAC47eqouAAC8paPS09VModb68u+43/ihzukAS6CkgJT41Zft8vm2trhIl867gjFKeJStytVveJTJmpSmeEhqAADkvIZ/qLa95f241eytqqzU3+aQUQBQha2hQwAui8s1co3Tva26kJIAXar/7MEAAGD68N3+9+o/gJ2GhZZcAADewJc2e7aVg5QAQZfY//+/wcCDw+moZQCluc8ATIy0rLWFu99GlMCPkaEAAHa+09zq2LPxzq3Ll1Rym7CSrL+joqOf1/fqyKd7NQqlsL7NpHCqzOa8dAABAADa7/mVQBXZ1cRnLgDRpZjVsYnc8/DAt7GYvt7ktKHg6vK3iVW4nnCMsNallZkXNDEwiLwAXI7lvaf31bQuT4B/f38ALooAc7a+upFaPncAf8KBAACt0fPn180uAE0ALmd5vel5a47o6tKiZi7u8sg/+v+gBMPgAAAUDklEQVR42uydi1MURx7HO+zCujQgCph4V1juLGB8LctrlYcHC5xAKSAiRgN4yIloBJQqUAREje+QCCqlUvFRakgwcrlwnjmTC+UlPmKpf9R19/QsOwN6gENcbr+fKmvm9+vucWf50POb2ZmFEAAAAAAAAAAAJmIDIIDRyfoeZx4AAcl7E2XFAQYEJpAVQFYAICuArJAVQFYAICuArJAVQFYAICuArABAVgAgK4CsAEBWACArgKwAQFYAICuArAAEt6wpCxcEMgtTYAtk9cm6dsHCwGXBWsgKWXWyBuz7BFnnkKx2AV+J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" alt="An input box has focus with a blue focus ring. The input has a drop-down menu showing four phone numbers the user can select." width="684" height="150" loading="lazy"> </p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p> <div class="notecard warning" id="sect12"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> </div> +</div> +<h3 id="making_telephone_numbers_required">Making telephone numbers required</h3> +<div class="section-content"> +<p>You can make it so that an empty input is invalid and won't be submitted to the server using the <a href="../input#required"><code>required</code></a> attribute. For example, let's use this HTML:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="CQocqB1ClQZqwEM1n8JrCAOEovZ+MPrQVRTFUgYZu/g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a telephone number (required): <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="dqfYeUrGU0J6LWUaiBs4B0G4gvXB1TvTQOk3IjNvI5k=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #8b0000<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #009000<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The output looks like this:</p> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Making telephone numbers required sample" id="frame_making_telephone_numbers_required" width="700" height="70" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=making_telephone_numbers_required" loading="lazy"></iframe> +</div> +</div> +<h3 id="pattern_validation">Pattern validation</h3> +<div class="section-content"> +<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the <a href="../input#pattern"><code>pattern</code></a> attribute, which takes as its value a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression">regular expression</a> that entered values have to match.</p> <p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="lPwpLZ4zCFiYYPlu0XtTJoXrTUwySvNpXq1uOPRmYXM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Enter a telephone number (in the form xxx-xxx-xxxx): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>telNo<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>telNo<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{3}-[0-9]{3}-[0-9]{4}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Pattern validation sample" id="frame_pattern_validation" width="700" height="70" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=pattern_validation" loading="lazy"></iframe> +</div> <p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, we present a simple interface with a <a href="../select"><code><select></code></a> element that lets the user choose which country they're in, and a set of <code><input type="tel"></code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p> <p>Each input has a <a href="../input#placeholder"><code>placeholder</code></a> attribute to show a hint to sighted users about what to enter into it, a <a href="../input#pattern"><code>pattern</code></a> to enforce a specific number of characters for the desired section, and an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attribute to contain a hint to be read out to screen reader users about what to enter into it.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="saG2YysKPR4zvTLGH3RBJgrddMF8R4Kt814yBSG9JHQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose your country:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>country<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>country<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>UK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>US<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Germany<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Enter your telephone number:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>areaDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>areaNo<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>areaNo<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Area code<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{3}<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Area code<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>number1Div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number1<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number1<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>First part<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{3}<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>First part of number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>number2Div<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number2<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number2<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>tel<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Second part<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{4}<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Second part of number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The JavaScript is relatively simple — it contains an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>onchange</code></a> event handler that, when the <code><select></code> value is changed, updates the <code><input></code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="hkRnWFeGmtAIIyMQFqS0ryOg7dZ+2KiW8eHgqY7SQTY=" data-language="js"><span class="token keyword">const</span> selectElem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> inputElems <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +selectElem<span class="token punctuation">.</span><span class="token function-variable function">onchange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> inputElems<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + inputElems<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>selectElem<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"US"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"inline"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Area code"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{3}"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"First part"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{3}"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"aria-label"</span><span class="token punctuation">,</span> <span class="token string">"First part of number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Second part"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{4}"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"aria-label"</span><span class="token punctuation">,</span> <span class="token string">"Second part of number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>selectElem<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"UK"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Area code"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{3,6}"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Local number"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{4,8}"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"aria-label"</span><span class="token punctuation">,</span> <span class="token string">"Local number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>selectElem<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"Germany"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"inline"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Area code"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{3,5}"</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"First part"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{2,4}"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"aria-label"</span><span class="token punctuation">,</span> <span class="token string">"First part of number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>placeholder <span class="token operator">=</span> <span class="token string">"Second part"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>pattern <span class="token operator">=</span> <span class="token string">"[0-9]{4}"</span><span class="token punctuation">;</span> + inputElems<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"aria-label"</span><span class="token punctuation">,</span> <span class="token string">"Second part of number"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <p>The example looks like this:</p> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/tel/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p> <p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</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 representing a telephone number, or empty </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#size"><code>size</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </td> <td>with <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code> +</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#telephone-state-(type=tel)">HTML Standard <br><small># telephone-state-(type=tel)</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>tel</code></th> +<td class="bc-supports-yes"><details><summary>3</summary>The field type doesn't demonstrate any special behavior.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>4</summary>The field type doesn't demonstrate any special behavior.</details></td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li> +<a href="../input"><code><input></code></a> <ul> <li><a href="text"><code><input type="text"></code></a></li> <li><a href="email"><code><input type="email"></code></a></li> </ul> </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"> + © 2005–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/tel" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Ftext.html b/devdocs/html/element%2Finput%2Ftext.html new file mode 100644 index 00000000..bb10853e --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftext.html @@ -0,0 +1,297 @@ +<header><h1><input type="text"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>text</code> create basic single-line text fields.</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/input-text.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input#value"><code>value</code></a> attribute is a string that contains the current value of the text entered into the text field. You can retrieve this using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property in JavaScript.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="ciqYD73jKCiYcivNNXrD0P6XGtokku4U/WyEAzlzXWk=" data-language="js"><span class="token keyword">let</span> theText <span class="token operator">=</span> myTextInput<span class="token punctuation">.</span>value<span class="token punctuation">;</span> +</pre> +</div> <p>If no validation constraints are in place for the input (see <a href="#validation">Validation</a> for more details), the value may be an empty string (<code>""</code>).</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, text inputs support the following attributes.</p></div> +<h3 id="list"><code>list</code></h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="maxlength"><code>maxlength</code></h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the <code>text</code> input. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the <code>text</code> input has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text value of the field is greater than <code>maxlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="minlength"><code>minlength</code></h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the <code>text</code> input. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the <code>text</code> input has no minimum length.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="pattern"><code>pattern</code></h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>See <a href="#specifying_a_pattern">Specifying a pattern</a> for further details and an example.</p> +</div> +<h3 id="placeholder"><code>placeholder</code></h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#accessibility_concerns"><code><input></code> accessibility concerns</a> for more information.</p> </div> +</div> +<h3 id="readonly"><code>readonly</code></h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size"><code>size</code></h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h3 id="spellcheck"><code>spellcheck</code></h3> +<div class="section-content"> +<p><code>spellcheck</code> is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of <code>spellcheck</code> on <a href="../input"><code><input></code></a> elements. The permitted values for <code>spellcheck</code> are:</p> <dl> <dt id="false"><a href="#false"><code>false</code></a></dt> <dd> <p>Disable spell checking for this element.</p> </dd> <dt id="true"><a href="#true"><code>true</code></a></dt> <dd> <p>Enable spell checking for this element.</p> </dd> <dt id="sect4"> +<a href="#sect4"><code>""</code></a> (empty string) or no value</dt> <dd> <p>Follow the element's default behavior for spell checking. This may be based upon a parent's <code>spellcheck</code> setting or other factors.</p> </dd> </dl> <p>An input field can have spell checking enabled if it doesn't have the <a href="#readonly">readonly</a> attribute set and is not disabled.</p> <p>The value returned by reading <code>spellcheck</code> may not reflect the actual state of spell checking within a control, if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> preferences override the setting.</p> +</div> +<h2 id="non-standard_attributes">Non-standard attributes</h2> +<div class="section-content"><p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p></div> +<h3 id="autocorrect"><code>autocorrect</code></h3> +<div class="section-content"> +<p>A Safari extension, the <code>autocorrect</code> attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic correction of typos, as well as processing of text substitutions if any are configured.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic correction and text substitutions.</p> </dd> </dl> +</div> +<h3 id="mozactionhint_deprecated"> +<code>mozactionhint</code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</h3> +<div class="section-content"> +<p>A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field.</p> <p><strong>Deprecated: Use <a href="../../global_attributes#enterkeyhint"><code>enterkeyhint</code></a> instead.</strong></p> +</div> +<h2 id="using_text_inputs">Using text inputs</h2> +<div class="section-content"><p><code><input></code> elements of type <code>text</code> create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a <a href="datetime-local">date</a>, <a href="url">URL</a>, <a href="email">email</a>, or <a href="search">search term</a>, you've got better options available).</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2mZtMk9LkXhKuqt6EKqNkwldq5HVLGZCb2FyAXrE4kg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=basic_example" loading="lazy"></iframe> +</div> <p>When submitted, the data name/value pair sent to the server will be <code>name=Chris</code> (if "Chris" was entered as the input value before submission). You must remember to include <a href="../input#name"><code>name</code></a> attribute on the <a href="../input"><code><input></code></a> element, otherwise the text field's value won't be included with the submitted data.</p> +</div> +<h3 id="setting_placeholders">Setting placeholders</h3> +<div class="section-content"> +<p>You can provide a useful placeholder inside your text input that can provide a hint as to what to enter by including using the <a href="../input#placeholder"><code>placeholder</code></a> attribute. Look at the following example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="S/EmtmL79parGRMKmXC0hVBIZERD2CwLpuZ7t6NYz7Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Lower case, all one word<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>You can see how the placeholder is rendered below:</p> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting placeholders sample" id="frame_setting_placeholders" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=setting_placeholders" loading="lazy"></iframe> +</div> <p>The placeholder is typically rendered in a lighter color than the element's foreground color, and automatically vanishes when the user begins to enter text into the field (or whenever the field has a value set programmatically by setting its <code>value</code> attribute).</p> +</div> +<h3 id="physical_input_element_size">Physical input element size</h3> +<div class="section-content"> +<p>The physical size of the input box can be controlled using the <a href="../input#size"><code>size</code></a> attribute. With it, you can specify the number of characters the text input can display at a time. This affects the width of the element, letting you specify the width in terms of characters rather than pixels. In this example, for instance, the input is 30 characters wide:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yTxH/vBGby2kUnckQuqFQoqNwLkOu9V1F8tApy+0WCU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Lower case, all one word<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Physical input element size sample" id="frame_physical_input_element_size" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=physical_input_element_size" loading="lazy"></iframe> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p><code><input></code> elements of type <code>text</code> have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> HTML form validation is <em>not</em> a substitute for server-scripts that ensure the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> </div> +</div> +<h3 id="a_note_on_styling">A note on styling</h3> +<div class="section-content"> +<p>There are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. These are <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a>. In this section, we'll use the following CSS, which will place a check (tick) mark next to inputs containing valid values, and a cross (X) next to inputs containing invalid values.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="uCANFVtNFhqGK3c0avL/HKgAZEQ0bMn5S7/Ox57sQp4=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The technique also requires a <a href="../span"><code><span></code></a> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.</p> +</div> +<h3 id="making_input_required">Making input required</h3> +<div class="section-content"> +<p>You can use the <a href="../input#required"><code>required</code></a> attribute as an easy way of making entering a value required before form submission is allowed:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+S2Y9Oiwz+5cHZkwtWQrQ93IT4gaY1d38vYQOaKu64w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Making input required sample" id="frame_making_input_required" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=making_input_required" loading="lazy"></iframe> +</div> <p>If you try to submit the form with no search term entered into it, the browser will show an error message.</p> +</div> +<h3 id="input_value_length">Input value length</h3> +<div class="section-content"> +<p>You can specify a minimum length (in characters) for the entered value using the <a href="../input#minlength"><code>minlength</code></a> attribute; similarly, use <a href="../input#maxlength"><code>maxlength</code></a> to set the maximum length of the entered value, in characters.</p> <p>The example below requires that the entered value be 4–8 characters in length.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="FiOzCvAMSBGpKiMP6qVQKJMdnwJG7TUvH148AhXpq1w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Username<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Input value length sample" id="frame_input_value_length" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=input_value_length" loading="lazy"></iframe> +</div> <p>If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to enter more than 8 characters, the browser won't let you.</p> <div class="notecard note" id="sect11"> <p><strong>Note:</strong> If you specify a <code>minlength</code> but do not specify <code>required</code>, the input is considered valid, since the user is not required to specify a value.</p> </div> +</div> +<h3 id="specifying_a_pattern">Specifying a pattern</h3> +<div class="section-content"> +<p>You can use the <a href="../input#pattern"><code>pattern</code></a> attribute to specify a regular expression that the inputted value must match in order to be considered valid (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course on using regular expressions to validate inputs).</p> <p>The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QEV1+Nw6ATDQfdA5yWG5lQ2afw/l3/BUZaEzidb2CSE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>uname<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose a username: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uname<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45<span class="token punctuation">"</span></span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[a-z]{4,8}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Usernames must be lowercase and 4-8 characters in length.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This renders like so:</p> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Specifying a pattern sample" id="frame_specifying_a_pattern" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/text/runner.html?id=specifying_a_pattern" loading="lazy"></iframe> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>You can see good examples of text inputs used in context in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Your first HTML form</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure an HTML form</a> articles.</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 representing the text contained in the text field. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a>, <a href="../input#required"><code>required</code></a> and <a href="../input#size"><code>size</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<a href="../input#list"><code>list</code></a>, <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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </td> <td>with <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code> +</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#text-(type=text)-state-and-search-state-(type=search)">HTML Standard <br><small># text-(type=text)-state-and-search-state-(type=search)</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>text</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">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">4</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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML Forms</a></li> <li> +<a href="../input"><code><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface it's based upon.</li> <li><a href="search"><code><input type="search"></code></a></li> <li> +<a href="../textarea"><code><textarea></code></a>: Multi-line text input</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"> + © 2005–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/text" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Ftime.html b/devdocs/html/element%2Finput%2Ftime.html new file mode 100644 index 00000000..9a0c10a6 --- /dev/null +++ b/devdocs/html/element%2Finput%2Ftime.html @@ -0,0 +1,409 @@ +<header><h1><input type="time"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>time</code> create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).</p> <p>The control's user interface varies from browser to browser; see <a href="#browser_compatibility">Browser compatibility</a> for further details. In unsupported browsers, the control degrades gracefully to <a href="text"><code><input type="text"></code></a>.</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-time.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="appearance">Appearance</h2> + +<h3 id="chrome_and_opera">Chrome and Opera</h3> +<div class="section-content"> +<p>In Chrome/Opera the <code>time</code> control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. In some versions, an "X" button is provided to clear the control's value.</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAA+CAMAAAC802HEAAABgFBMVEX////n//+DAAAvLy+/v7+Ex/8AVaV2dnYAAADnplL//8ZfX1//x4QAAFHPz8/v7+8/Pz9PT09vb29TAADw//////cAABil4/8aAADM/////+H/46UAACH/5K0AAIQbGxtjJAC/eRBSpud/f3/e///n+/85AAClVAD//86t6f9psO0YSIyh3P80jsz/87kHMooSYKv5wHvy06sYLESJy/3/+uddir3//++HTRjD6f8AabX/6rtoAAC4iVL669T/36X/2pnMhyAAHE8hVZwhYa3W///f399jqt4pQWP/z5C9jmOEqs5jfKFrNAAAADkAGIRzptbC4fdCGADWpnO1aQBapt4AAFqlXRgAAGujo5KpdT3eplrO8f/WpFKMz//ztm8NgsZ7GE6MMACEGEuEYTmAgICUcZw5gsZ7vvfv371KGBj/796l07UAOGvevoQpGAA5JAAAJDnGgjn3x4RKLBiEGADGlkJKABh7eVJCcaVaGAClllIYADlKmt7e/8aEw8Z+lsbAAAACwElEQVRo3u2Z6VfaQBTFpyToY5EtgEEURBARZHO3rtjVtlrX1l3pvu/75r/emSREChmPoLbY8+4HMsA7ye/cvLkzOSEEhUKhUCgU6rTU3FA6Bm+D2YfACIzACIzAf08O0XGOgEU3MLnF8wHstAEInqhHALA56wIeWfkAb4e72bD/gey/ftNrUDx0Y7npQunLlgzmqgoLc23g1hghbT1+9ndeDhnxCuBSrRVdIDjrAPa9U25QLkaI1aQM01WlzydfA+jA09/CPGCA2T56mvA+PW8EjIBtYDMcHx/4fTy1RMZH/UlCEo+WqMvztwOVpQV4+cJUAm67m/1uCEx/m5qUc16rqTkbIJniFwNgEVzKpFM+iQvEmoF9kZZWeghKF0udEMlqwB2dl2PqaG6426oDb/0YtPCASeJeKGA1HdzfJfncznr1Rd0qoggavrtm4MRHRjq1KYdUTN+rZ2s6QvugXq0DT0s/yVHA2UCHZC6kfZFkvqX6oiCQMmAiQM3AmYl9MjQpA9zpZdMFYCFZKujovHSlCritpynGB57apDMgKJnzqV/FXns1sAM8fwB7wFErcFBKryzD7OIn1hkMGNqvGVWXgHforOIAK0ptM+BMcSPnNQAWIaod1XyIHjbx8R2miDTUCsxh1hL98wu7fOCZz2uED0wzkcbjTNzsi4STxO7nOnw1HN6o02Gryf91m4bxqp4NM/EuPrDmI1WXYQ8z2Vv6yB69YXbg9jBxRsHlqKuHR1bXmbXjE3pKTEsnBm5Vj8BNCWay21NXSpA9OTXGcviJto48HaUGVcRaeUoQbktUAs/FuTmsqZ4cpuuAYthjL7MEyifdYazZNVdLzEcDWzTgoHQmKx3dJryBgUWvxqXsBipj7RSBT76X+De7tYcn2K3hfvi/e+LAh1AERmAEPhvgc/fKAIVCoVAoFArVYPoNWXtXWgBRaWIAAAAASUVORK5CYII=" alt="12-hour Chrome time input" width="176" height="62" loading="lazy"> 12-hour </p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAfCAMAAABDNGobAAABTVBMVEX////29vbr6+v+/v7d3d3T09PNzc3MzMzIyMgAAADx8fHs7Oz9/fzy8PD19PXLy8vj4+Pm5ubX19dYWFj5+fn///fV+v/q6uuGhoba2tr3////6r0AB0p0CwD/+tz/+//3+//428ZSUlJxcXHh4eGW0/eSEQDN7//r/f+Gv+fwxogBDWP//+9LBABxq9pYpdb/8NLstnoAl9L39//38+/d+//V7fvv5+cANoz4zpD/+ecATqXn7feVSgD/9s7N9/8AAzGj2/syC1L/8Mb40pSEcnus0O/Xmknouozn2N4yAgC+iTD/8+/ormKKz/eHh4cBF4yOEjHXrnu87/++ikm/v7/v8P/41q0ACVLO0Of349Zxu+8CGZSuZgDW5/f34q3/8+fWyNbO1Ofv6+dIi70tg73fpnMAdL0BEXN8DQAAaLUAOaXnzqUAMUr26/6az/v7AAABpElEQVRIx+2V11PCQBDGl5DEHAQCCISuKFiwFzoCCvbee+/t/3/1SkR0Ai9mHGbke7jN3s785rvbuwtAWy2vDmP0DWmMsf+FtDn8DtsvkSZelETepGWq0y7bnWoD5BotyOmDb4TbAg3pgpZbJSYr8+g049HstOki9xDKDMD4CEKDX5XhGYTuASLP72iMeZQ+RX06LODudYPFoYf0bO96+jYgdwzZs0Ct4rkOFMslqL5CJeQlE7wkWXiJt0gST1KXDL4eH8guXZd2GO6Lk49EniCj8wusGJzzQjUPlTmKFAlLJWSRpAIonfZOBUf99qxvDWBf5+iUJItokk4+oEeAXLispWTJHHAkMCRTA+ROqJ/Gw6EkCcvdrDgenoVsJvX2lKy55OpcNkOuDvVHU3ByAZdHZIlLaBSPVzcQwciJFyiGSjp72RQZXEEIxSGBtI5P0BYH8QG4wx3HjR/V6zjbS7HhXlJ12bQFd7EwPVUffp5LgXR8E2TBuNvDc/Rccrxxd9yKDya+cS6rgc+GX1BlVfAb+RLJMWVficl/8l4a/+9pq0X1AbcKLBSuBK8aAAAAAElFTkSuQmCC" alt="24-hour Chrome time input" width="82" height="31" loading="lazy"> 24-hour </p> +</div> +<h3 id="firefox">Firefox</h3> +<div class="section-content"> +<p>Firefox's <code>time</code> control is very similar to Chrome's, except that it doesn't have the up and down arrows. It also uses a 12- or 24-hour format for inputting times, based on system locale. An "X" button is provided to clear the control's value.</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAAAdCAMAAAB12AncAAABSlBMVEX////R0dH//tecnJyzs7PO9/+bm5vMzMyFhYUAAAD/9s/3///W/v9zCgApmNfYnkb39/dICkcABkn///f//t9gBwD/7sIwCUzOjy6NMgD//ucAY7Lou4vJycnv7+dtqNcBEG/su3f39/9cqNcAnNP39+///+9IBy+y0Ov37/cAkM8AT6dMBADr6r+YeHfn7/cAAy/41peRz++Lj5NLrNv/7s/a8++25/Nlk6v/9/dDoNfYly7437/n2N9tsN+IcHf/7+/W9//Ypl7/9+fP1+egSQDXyNeewOdEkL8qiL/gp2//9tel3/egSk/Ih0YwBS/Anm/e/v+pUk/v5+el3/8Acr/4zpfnzqcAL0eQSAAANY8AOKf/9seHh4e4cC4uT19fYG8BDF+YYV/37teet8+gd0e+2Pfox6dPTadObl93eIdPSoeojl9QN5fO65EeAAABiElEQVRIx+2VZ2+DQAyGTQL0DKGh2aMj3dlJm9m999577/X/v/bIai9VSfMhkSrxCmGwz3qwzzoADP0vtTRWDKqxhRio+sSZCTFzNVGhwn1E/pHfmSiYvUQtkEpBmsyqLqodbTMADi+OVuUPLCCuAJiUY0wzAV88dZEKwtPrI2TiS5pHJCWZdVHTMbcAYO/0tFah7IuylBRg6AxcNgvzDduYf8DhjNMPHhymjg5COJ4QnqNWt4GmNkEz1jJqfCpYDrncFhiKwLmbQdEMC3jCPsWW9d5YikXxwNPrq6y/oazYV3paxQPaLiVZcZQzBnN33rT09v6Sv9VytdbxoJEIqQsFE5UBWVP24fA0exTYYVHRq+t7WXqOYW63LpQ0WECNhStzMlmwc/PgUNah2w+STWBQ0pb2Ln3IIfuGwDZQ1EPNImIXmJyIgeKOdGNvcaOiiMt0Nk+0OFMUXUuXXKIfNjEi1zEWv6u/57vRUWXYxYafFmqJJarNOJgoTOSMk71BqOb98A0ZYvQJ5jEplHbUN44AAAAASUVORK5CYII=" alt="12-hour Firefox time input" width="106" height="29" loading="lazy"> 12-hour </p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAdCAMAAAAKCRstAAAAe1BMVEX//////9P39/f//6vT///v7+/n5+er///f39//04PX19fPz8/Hx8eD0/+/v7//q1m4uLiwsLCoqKigoKBZq/+Xl5fTg1nTgy2Pj4+Dg9OHh4dZg9N/f396enotg9ODWYOrWQBZWasAWatZLYODLQAtLYMALYMAAFkAAABIF80iAAAA+0lEQVR42u2V3Y6CMBCFR8SuPyx0Qbfu7FlX8Y/3f0KHgk6aEL3phYl+CZnkkH7hpAXoTRT+onEVUiReQ5hktszn8YRTRks1GRS6ZuNn0TSnlEI0lVlTzxw96yFhUc9+vVfWFRsK0HR2TMkt+76MlQU4A+xgZRF23ISjw/mDBE2/P4nGO/IsgIosG8PgO0KxdOVUqGkn3He3v9AaJ4YBPHhCF1TWNBRaAGwox2Ph6D/cFU3dUivnrc+UZO8Lt7LE1WFlTcc/dNsUA1jDqBK5BoSuEU6pSPwIhZpu9dhQCTBaeBrnYCcreHgR7dXL1gBX5ok/Dm9h9J/US3IBtgQr+KGwNa0AAAAASUVORK5CYII=" alt="24-hour Firefox time input" width="80" height="29" loading="lazy"> 24-hour </p> +</div> +<h3 id="edge">Edge</h3> +<div class="section-content"> +<p>The Edge <code>time</code> control is somewhat more elaborate, opening up an hour and minute picker with sliding reels. It, like Chrome, uses a 12- or 24-hour format for inputting times, based on system locale:</p> <p> <img src="data:image/png;base64,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" alt="12-hour Edge time input" width="545" height="482" loading="lazy"> 12-hour </p> <p> <img src="data:image/png;base64,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" alt="24-hour Edge time input" width="269" height="491" loading="lazy"> 24-hour </p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p>A string containing the value of the time entered into the input.</p></div> +<h3 id="setting_the_value_attribute">Setting the value attribute</h3> +<div class="section-content"> +<p>You can set a default value for the input by including a valid time in the <a href="../input#value"><code>value</code></a> attribute when creating the <code><input></code> element, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jjTPW3xjAisobTy0UG3xpbTNlxVv2yFswk8Q95/zVyU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose an appointment time: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<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>13:30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Setting the value attribute sample" id="frame_setting_the_value_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=setting_the_value_attribute" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_the_value_using_javascript">Setting the value using JavaScript</h3> +<div class="section-content"> +<p>You can also get and set the time value in JavaScript using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="JYL/V0gy2L5GQlRwJZrD+jzTdXi7p4L1QHMIybNxwzI=" data-language="js"><span class="token keyword">const</span> timeControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="time"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +timeControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"15:30"</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="time_value_format">Time value format</h3> +<div class="section-content"> +<p>The <code>value</code> of the <code>time</code> input is always in 24-hour format that includes leading zeros: <code>hh:mm</code>, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds (see <a href="#using_the_step_attribute">Using the step attribute</a>), the format is always <code>hh:mm:ss</code>. You can learn more about the format of the time value used by this input type in <a href="../../date_and_time_formats#time_strings">Time strings</a>.</p> <p>In this example, you can see the time input's value by entering a time and seeing how it changes afterward.</p> <p>First, a look at the HTML. This is simple enough, with the label and input as we've seen before, but with the addition of a <a href="../p"><code><p></code></a> element with a <a href="../span"><code><span></code></a> to display the value of the <code>time</code> input:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="dKEIgRn9Z8aPFsTRY7pl9I1FhkHjQKPTGjwLkL3Osxo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>startTime<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Start time: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>time<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>startTime<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Value of the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>time<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> input: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span> "<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The JavaScript code adds code to the time input to watch for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> event, which is triggered every time the contents of an input element change. When this happens, the contents of the <code><span></code> are replaced with the new value of the input element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="7zBNoigXKZFEChMaZE6x07qsSD8eI+iTEX3QR/HH6Hs=" data-language="js"><span class="token keyword">const</span> startTime <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"startTime"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> valueSpan <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +startTime<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"input"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + valueSpan<span class="token punctuation">.</span>innerText <span class="token operator">=</span> startTime<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Time value format sample" id="frame_time_value_format" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=time_value_format" loading="lazy"></iframe> +</div> <p>When a form including a <code>time</code> input is submitted, the value is encoded before being included in the form's data. The form's data entry for a time input will always be in the form <code>name=hh%3Amm</code>, or <code>name=hh%3Amm%3Ass</code> if seconds are included (see <a href="#using_the_step_attribute">Using the step attribute</a>).</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"> +<p>In addition to the attributes common to all <a href="../input"><code><input></code></a> elements, <code>time</code> inputs offer the following attributes.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Unlike many data types, time values have a <strong>periodic domain</strong>, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a <code>min</code> of <code>14:00</code> and a <code>max</code> of <code>2:00</code> means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM. See more in the <a href="#making_min_and_max_cross_midnight">making min and max cross midnight</a> section of this article.</p> </div> +</div> +<h3 id="list">list</h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="max">max</h3> +<div class="section-content"><p>A string indicating the latest time to accept, specified in the same <a href="#time_value_format">time value format</a> as described above. If the specified string isn't a valid time, no maximum value is set.</p></div> +<h3 id="min">min</h3> +<div class="section-content"><p>A string specifying the earliest time to accept, given in the <a href="#time_value_format">time value format</a> described previously. If the value specified isn't a valid time string, no minimum value is set.</p></div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>For <code>time</code> inputs, the value of <code>step</code> is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).</p> <p><em>At this time, it's unclear what a value of <code>any</code> means for <code>step</code> when used with <code>time</code> inputs. This will be updated as soon as that information is determined.</em></p> +</div> +<h2 id="using_time_inputs">Using time inputs</h2> + +<h3 id="basic_uses_of_time">Basic uses of time</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="time"></code> involves a basic <code><input></code> and <a href="../label"><code><label></code></a> element combination, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ndwTC92u8pQcJ2m8l3IuxX3iwiy6mpSoi1sve9VJ8uM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose an appointment time: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Basic uses of time sample" id="frame_basic_uses_of_time" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=basic_uses_of_time" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p><code><input type="time"></code> doesn't support form sizing attributes such as <a href="../input#size"><code>size</code></a>, since times are always about the same number of characters long. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p></div> +<h3 id="using_the_step_attribute">Using the step attribute</h3> +<div class="section-content"> +<p>You can use the <a href="../input#step"><code>step</code></a> attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the little arrow widgets).</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> This property has some strange effects across browsers, so is not completely reliable.</p> </div> <p>It takes an integer value that equates to the number of seconds you want to increment by; the default value is 60 seconds, or one minute. If you specify a value of less than 60 seconds (1 minute), the <code>time</code> input will show a seconds input area alongside the hours and minutes:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="uwsx4lHny9FgBu5O4OL2Gkkf+rBxLmo01CeFaFl+bsI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Choose an appointment time: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Using the step attribute sample" id="frame_using_the_step_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=using_the_step_attribute" loading="lazy"></iframe> +</div> <p>In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).</p> <p>In Firefox, there are no arrows, so the <code>step</code> value isn't used. However, providing it <em>does</em> add the seconds input area adjacent to the minutes section.</p> <p>The steps value seems to have no effect in Edge.</p> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> Using <code>step</code> seems to cause validation to not work properly (as seen in the next section).</p> </div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>By default, <code><input type="time"></code> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the <code>time</code> input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (<code>""</code>), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as <code>25:05</code>.</p></div> +<h3 id="setting_maximum_and_minimum_times">Setting maximum and minimum times</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the valid times that can be chosen by the user. In the following example we are setting a minimum time of <code>12:00</code> and a maximum time of <code>18:00</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Oh7PFv4CluGiAI7b5ZVaD3JY+AhsMZITQxbjjsMRb2g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose an appointment time (opening hours 12:00 to 18:00): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12:00<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>18:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum times sample" id="frame_setting_maximum_and_minimum_times" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=setting_maximum_and_minimum_times" loading="lazy"></iframe> +</div> <p>Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <a href="../span"><code><span></code></a> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The result here is that:</p> <ul> <li>Only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid.</li> <li>Depending on what browser you're using, you might find that times outside the specified range might not even be selectable in the time picker (e.g. Edge).</li> </ul> <h4 id="making_min_and_max_cross_midnight">Making min and max cross midnight</h4> <p>By setting a <a href="../input#min"><code>min</code></a> attribute greater than the <a href="../input#max"><code>max</code></a> attribute, the valid time range will wrap around midnight to produce a valid time range which crosses midnight. This functionality is not supported by any other input types. While this feature is <a href="https://html.spec.whatwg.org/multipage/input.html#has-a-reversed-range" target="_blank">in the HTML spec</a>, it is not yet universally supported. Chrome-based browsers support it starting in version 82 and Firefox added it in version 76. Safari as of version 14.1 does not support this. Be prepared for this situation to arise:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="Zz03niDGRNh7gSQrxDfIkp0ClBvkCB/g9iNd7Zf696Q=" data-language="js"><span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +input<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"time"</span><span class="token punctuation">;</span> +input<span class="token punctuation">.</span>min <span class="token operator">=</span> <span class="token string">"23:00"</span><span class="token punctuation">;</span> +input<span class="token punctuation">.</span>max <span class="token operator">=</span> <span class="token string">"01:00"</span><span class="token punctuation">;</span> +input<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"23:59"</span><span class="token punctuation">;</span> + +<span class="token keyword">if</span> <span class="token punctuation">(</span>input<span class="token punctuation">.</span>validity<span class="token punctuation">.</span>valid <span class="token operator">&&</span> input<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"time"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// <input type=time> reversed range supported</span> +<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// <input type=time> reversed range unsupported</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="making_times_required">Making times required</h3> +<div class="section-content"> +<p>In addition, you can use the <a href="../input#required"><code>required</code></a> attribute to make filling in the time mandatory. As a result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.</p> <p>Let's look at an example; here we've set minimum and maximum times, and also made the field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="d8ESQymAnF2FZcFTXy4Cfh8VoAiS+YbQFPCAcecBdxA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose an appointment time (opening hours 12:00 to 18:00): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12:00<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>18:00<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you try to submit the form with an incomplete time (or with a time outside the set bounds), the browser displays an error. Try playing with the example now:</p> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Making times required sample" id="frame_making_times_required" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=making_times_required" loading="lazy"></iframe> +</div> <div class="notecard warning" id="sect12"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> </div> +</div> +<h2 id="handling_browser_support">Handling browser support</h2> +<div class="section-content"> +<p>As mentioned, older versions of Safari and a few other, less common, browsers don't support time inputs natively. In general, otherwise, support is good — especially on mobile platforms, which tend to have very nice user interfaces for specifying a time value. For example, the <code>time</code> picker on Chrome for Android looks like this:</p> <p> <img src="data:image/png;base64,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" alt="Phone screen showing modal dialog with 10:21 as a header. The 10 is fully opaque. The 21 is not. The main area has a circle with the numbers 1 - 12 in a ring, and the number 13 -24 on an inner ring. The number 10 is highlighted with a blue circle. The buttons at the bottom are clear, cancel, and set." width="360" height="640" loading="lazy"> </p> <p>Browsers that don't support time inputs gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> <p>The second problem is the more serious; as mentioned previously, <code>time</code> inputs' values are always normalized to the format <code>hh:mm</code> or <code>hh:mm:ss</code>. With a text input, on the other hand, by default the browser has no idea of what format the time should be in, and there are multiple ways in which people write times, such as:</p> <ul> <li><code>3.00 pm</code></li> <li><code>3:00pm</code></li> <li><code>15:00</code></li> <li><code>3 o'clock in the afternoon</code></li> <li>etc.</li> </ul> <p>One way around this is to put a <a href="../input#pattern"><code>pattern</code></a> attribute on your <code>time</code> input. Even though the <code>time</code> input doesn't use it, the <code>text</code> input fallback will. For example, try viewing the following demo in a browser that doesn't support time inputs:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="D5pkciWK32158WALru/4o3mygRwlUsaSnkcblHoS0pY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose an appointment time (opening hours 12:00 to 18:00): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12:00<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>18:00<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{2}:[0-9]{2}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Handling browser support sample" id="frame_handling_browser_support" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=handling_browser_support" loading="lazy"></iframe> +</div> <p>If you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern <code>nn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern.</p> <p>Then there's the problem of the user having no idea exactly what format the time is expected to be in.</p> <p>The best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<a href="../select"><code><select></code></a> elements are popular; see below for an example), or use JavaScript libraries such as the <a href="https://timepicker.co/" target="_blank">jQuery timepicker plugin</a>.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, we create two sets of interface elements for choosing times: a native picker created with <code><input type="time"></code>, and a set of two <a href="../select"><code><select></code></a> elements for choosing hours/minutes in older browsers that don't support the native input.</p> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/time/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>The HTML looks like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="R54Lv/wBD40mRWH9q5Y9Idk76Clf0TivZ0TElii6+Dk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>nativeTimePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose an appointment time (opening hours 12:00 to 18:00): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>appt-time<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>time<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>appt-time<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12:00<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>18:00<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>fallbackLabel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Choose an appointment time (opening hours 12:00 to 18:00): + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fallbackTimePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>hour<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hour:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>hour<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hour<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>minute<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Minute:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>minute<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>minute<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The hour and minutes values for their <code><select></code> elements are dynamically generated.</p> <p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="time"></code>, we create a new <a href="../input"><code><input></code></a> element, try setting its <code>type</code> to <code>time</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>time</code> type falls back to type <code>text</code>. If <code><input type="time"></code> is not supported, we hide the native picker and show the fallback picker UI (<a href="../select"><code><select></code></a>s) instead.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="YX7OTAXkJt7Ct1FcB4+0stHhU6p++isUuE0HM4bw8vM=" data-language="js"><span class="token comment">// Define variables</span> +<span class="token keyword">const</span> nativePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".nativeTimePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackTimePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackLabel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackLabel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> hourSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#hour"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> minuteSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#minute"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// Hide fallback initially</span> +fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> +fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + +<span class="token comment">// Test whether a new time input falls back to a text input or not</span> +<span class="token keyword">const</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">try</span> <span class="token punctuation">{</span> + test<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"time"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>description<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// If it does, run the code inside the if () {} block</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Hide the native picker and show the fallback</span> + nativePicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + <span class="token comment">// Populate the hours and minutes dynamically</span> + <span class="token function">populateHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">populateMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Populate the hours <select> with the 6 open hours of the day</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">18</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> i<span class="token punctuation">;</span> + hourSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// populate the minutes <select> with the 60 hours of each minute</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">59</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> i <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> i<span class="token punctuation">;</span> + minuteSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +<span class="token comment">// make it so that if the hour is 18, the minutes value is set to 00</span> +<span class="token comment">// — you can't select times past 18:00</span> +<span class="token keyword">function</span> <span class="token function">setMinutesToZero</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>hourSelect<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">"18"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + minuteSelect<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"00"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +hourSelect<span class="token punctuation">.</span>onchange <span class="token operator">=</span> setMinutesToZero<span class="token punctuation">;</span> +minuteSelect<span class="token punctuation">.</span>onchange <span class="token operator">=</span> setMinutesToZero<span class="token punctuation">;</span> +</pre> +</div> +</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 representing a time, or empty.</td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, and <code>list</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#time-state-(type=time)">HTML Standard <br><small># time-state-(type=time)</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>time</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker">Date and Time picker tutorial</a></li> <li> +<a href="datetime-local"><code><input type="datetime-local"></code></a>, <a href="date"><code><input type="date"></code></a>, <a href="week"><code><input type="week"></code></a>, and <a href="month"><code><input type="month"></code></a> +</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"> + © 2005–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/time" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Furl.html b/devdocs/html/element%2Finput%2Furl.html new file mode 100644 index 00000000..fb831e72 --- /dev/null +++ b/devdocs/html/element%2Finput%2Furl.html @@ -0,0 +1,268 @@ +<header><h1><input type="url"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>url</code> are used to let the user enter and edit a URL.</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/input-url.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The input value is automatically validated to ensure that it's either empty or a properly-formatted URL before the form can be submitted. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid URL or not.</p> <p>On browsers that don't support inputs of type <code>url</code>, a <code>url</code> input falls back to being a standard <a href="text">text</a> input.</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The <a href="../input"><code><input></code></a> element's <a href="../input#value"><code>value</code></a> attribute contains a string which is automatically validated as conforming to URL syntax. More specifically, there are two possible value formats that will pass validation:</p> <ol> <li>An empty string ("") indicating that the user did not enter a value or that the value was removed.</li> <li>A single properly-formed absolute URL. This doesn't necessarily mean the URL address exists, but it is at least formatted correctly. In simple terms, this means <code>urlscheme://restofurl</code>.</li> </ol> <p>See <a href="#validation">Validation</a> for details on how URLs are validated to ensure that they're formatted properly.</p> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes that operate on all <a href="../input"><code><input></code></a> elements regardless of their type, <code>url</code> inputs support the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="maxlength">maxlength</h3> +<div class="section-content"> +<p>The maximum string length (measured in UTF-16 code units) that the user can enter into the <code>url</code> input. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the <code>url</code> input has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text value of the field is greater than <code>maxlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="minlength">minlength</h3> +<div class="section-content"> +<p>The minimum string length (measured in UTF-16 code units) that the user can enter into the <code>url</code> input. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the <code>url</code> input has no minimum length.</p> <p>The input will fail <a href="../../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.</p> +</div> +<h3 id="pattern">pattern</h3> +<div class="section-content"> +<p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's <a href="../input#value"><code>value</code></a> must match for the value to pass <a href="../../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Use the <a href="../input#title"><code>title</code></a> attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.</p> </div> <p>See the section <a href="#pattern_validation">Pattern validation</a> for details and an example.</p> +</div> +<h3 id="placeholder">placeholder</h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="size">size</h3> +<div class="section-content"> +<p>The <code>size</code> attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> settings in use).</p> <p>This does <em>not</em> set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the <a href="#maxlength"><code>maxlength</code></a> attribute.</p> +</div> +<h3 id="spellcheck">spellcheck</h3> +<div class="section-content"> +<p><code>spellcheck</code> is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content, but here we consider specifics related to the use of <code>spellcheck</code> on <a href="../input"><code><input></code></a> elements. The permitted values for <code>spellcheck</code> are:</p> <dl> <dt id="false"><a href="#false"><code>false</code></a></dt> <dd> <p>Disable spell checking for this element.</p> </dd> <dt id="true"><a href="#true"><code>true</code></a></dt> <dd> <p>Enable spell checking for this element.</p> </dd> <dt id="_empty_string_or_no_value"><a href="#_empty_string_or_no_value">"" (empty string) or no value</a></dt> <dd> <p>Follow the element's default behavior for spell checking. This may be based upon a parent's <code>spellcheck</code> setting or other factors.</p> </dd> </dl> <p>An input field can have spell checking enabled if it doesn't have the <a href="#readonly">readonly</a> attribute set and is not disabled.</p> <p>The value returned by reading <code>spellcheck</code> may not reflect the actual state of spell checking within a control, if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> preferences override the setting.</p> +</div> +<h2 id="non-standard_attributes">Non-standard attributes</h2> +<div class="section-content"><p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p></div> +<h3 id="autocorrect">autocorrect</h3> +<div class="section-content"> +<p>A Safari extension, the <code>autocorrect</code> attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic correction of typos, as well as processing of text substitutions if any are configured.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic correction and text substitutions.</p> </dd> </dl> +</div> +<h3 id="mozactionhint_deprecated">mozactionhint <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</h3> +<div class="section-content"> +<p>A Mozilla extension, which provides a hint as to what sort of action will be taken if the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field.</p> <p><strong>Deprecated: Use <a href="../../global_attributes#enterkeyhint"><code>enterkeyhint</code></a> instead.</strong></p> +</div> +<h2 id="using_url_inputs">Using URL inputs</h2> +<div class="section-content"> +<p>When you create a URL input with the proper <code>type</code> value, <code>url</code>, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mistypes their website's address, or provides an invalid one.</p> <p>It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It ensures that the value of the field is properly formatted to be a URL.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> A user can tinker with your HTML behind the scenes, so your site <em>must not</em> use this validation for any security purposes. You <em>must</em> verify the URL on the server-side of any transaction in which the provided text may have any security implications of any kind.</p> </div> +</div> +<h3 id="a_simple_url_input">A simple URL input</h3> +<div class="section-content"> +<p>Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="LX13nWW1z+KSZSIugL5xTBwGi+TkZ4WPp5zcrXx3cNU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="A simple URL input sample" id="frame_a_simple_url_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=a_simple_url_input" loading="lazy"></iframe> +</div> <p>Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the <a href="../input#required"><code>required</code></a> attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.</p> <p>There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: <code>myURL=http%3A%2F%2Fwww.example.com</code>. Note how characters are escaped as necessary.</p> +</div> +<h3 id="placeholders">Placeholders</h3> +<div class="section-content"> +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <a href="../input"><code><input></code></a>. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> <p>Here, we have a <code>url</code> input with the placeholder <code>http://www.example.com</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="rQ3SmWXAAWuly00LTbeY7+xqIdRWCT3h3I26kEponkA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_the_input_size">Controlling the input size</h3> +<div class="section-content"> +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> <h4 id="physical_input_element_size">Physical input element size</h4> <p>The physical size of the input box can be controlled using the <a href="../input#size"><code>size</code></a> attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>url</code> edit box is 30 characters wide:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="K1zTV2WOjsXOr+mmxpz+KpfeloY/FJT9TGh8JNr5MoY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Physical input element size sample" id="frame_physical_input_element_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=physical_input_element_size" loading="lazy"></iframe> +</div> <h4 id="element_value_length">Element value length</h4> <p>The <code>size</code> is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the <a href="../input#minlength"><code>minlength</code></a> attribute; similarly, use <a href="../input#maxlength"><code>maxlength</code></a> to set the maximum length of the entered URL. If <code>maxLength</code> exceeds <code>size</code>, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.</p> <p>The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="CPAfwxU6EQOlruhYtG2/GyAQxe7sgYOVdAkQtxzWviA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> + <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Element value length sample" id="frame_element_value_length" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=element_value_length" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will refuse to let the user enter a value longer than the specified maximum length.</p> </div> +</div> +<h3 id="providing_default_options">Providing default options</h3> +<div class="section-content"> +<h4 id="providing_a_single_default_using_the_value_attribute">Providing a single default using the value attribute</h4> <p>As always, you can provide a default value for a <code>url</code> input box by setting its <a href="../input#value"><code>value</code></a> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="nADslc9qrxb0ZB8XApv1YE8cTRwhQWzcK4VLA3di3SE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<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>http://www.example.com<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Providing a single default using the value attribute sample" id="frame_providing_a_single_default_using_the_value_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=providing_a_single_default_using_the_value_attribute" loading="lazy"></iframe> +</div> <h4 id="offering_suggested_values">Offering suggested values</h4> <p>Taking it a step further, you can provide a list of default options from which the user can select by specifying the <a href="../input#list"><code>list</code></a> attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to <a href="../input#autocomplete"><code>autocomplete</code></a>. The <code>list</code> attribute specifies the ID of a <a href="../datalist"><code><datalist></code></a>, which in turn contains one <a href="../option"><code><option></code></a> element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the URL entry box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YIUl1aUc2kWhVHxT+POQtJYnwnpnh/R+HiKjoAALpOI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultURLs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultURLs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>https://developer.mozilla.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://www.google.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://www.microsoft.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>https://www.mozilla.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://w3.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=offering_suggested_values" loading="lazy"></iframe> +</div> <p>With the <a href="../datalist"><code><datalist></code></a> element and its <a href="../option"><code><option></code></a>s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> <h4 id="using_labels_for_suggested_values">Using labels for suggested values</h4> <p>You can opt to include the <a href="../option#label"><code>label</code></a> attribute on one or all of your <code><option></code> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="S27m5XLW7qUfqRYISeL5nD0p4r0GCxbZ8EAqwHI1FaE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultURLs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</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>defaultURLs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>https://developer.mozilla.org/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN Web Docs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://www.google.com/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Google<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://www.microsoft.com/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Microsoft<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>https://www.mozilla.org/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mozilla<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>http://w3.org/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>W3C<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Using labels for suggested values sample" id="frame_using_labels_for_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=using_labels_for_suggested_values" loading="lazy"></iframe> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>There are two levels of content validation available for <code>url</code> inputs. First, there's the standard level of validation offered to all <a href="../input"><code><input></code></a>s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> <div class="notecard warning" id="sect13"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> </div> +</div> +<h3 id="basic_validation">Basic validation</h3> +<div class="section-content"> +<p>Browsers that support the <code>url</code> input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.</p> <p>The syntax of a URL is fairly intricate. It's defined by WHATWG's <a href="https://url.spec.whatwg.org/" target="_blank">URL Living Standard</a> and is described for newcomers in our article <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">What is a URL?</a></p> +</div> +<h3 id="making_a_url_required">Making a URL required</h3> +<div class="section-content"> +<p>As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the <a href="../input#required"><code>required</code></a> attribute on the input.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DEtBznjLwi6O99oJgP6bKeCAuTPzFr4OuUvvG+PwmS8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Making a URL required sample" id="frame_making_a_url_required" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=making_a_url_required" loading="lazy"></iframe> +</div> <p>Try submitting the above form with no value entered to see what happens.</p> +</div> +<h3 id="pattern_validation">Pattern validation</h3> +<div class="section-content"> +<p>If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the <a href="../input#pattern"><code>pattern</code></a> attribute to specify a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression">regular expression</a> the value must match for the value to be valid.</p> <p>For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.</p> <p>Since inputs of type <code>url</code> validate against both the standard URL validation <em>and</em> the specified <a href="../input#pattern"><code>pattern</code></a>, you can implement this easily. Let's see how:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fGJQoQ+w8tMmJhiYc1CntLTOyMxdWW4/e74FLPnR8jk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter the problem website address:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myURL<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myURL<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>url<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.*\.myco\..*<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The URL must be in a Myco domain<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myComment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What is the problem?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>myComment<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myComment<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 attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Pattern validation sample" id="frame_pattern_validation" width="700" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/url/runner.html?id=pattern_validation" loading="lazy"></iframe> +</div> <p>First of all, the <a href="../input#required"><code>required</code></a> attribute is specified, making it mandatory that a valid URL be provided.</p> <p>Second, in the <code>url</code> input we set <code>pattern</code> to <code>".*\.myco\..*"</code>. This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter <em>and</em> our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."</p> <p>This isn't perfect, but it is good enough for this simple demo's requirements.</p> <p>It's advisable to use the <a href="../../global_attributes#title"><code>title</code></a> attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.</p> <p>That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."</p> <div class="notecard note" id="sect16"> <p><strong>Note:</strong> If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>There's not much else to say about <code>url</code> type inputs; check the <a href="#pattern_validation">Pattern validation</a> and <a href="#using_url_inputs">Using URL inputs</a> sections for numerous examples.</p> <p>You can also find our <a href="https://github.com/mdn/learning-area/blob/main/html/forms/url-example/index.html" target="_blank">pattern validation example on GitHub</a> (see it <a href="https://mdn.github.io/learning-area/html/forms/url-example/" target="_blank">running live also</a>).</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 representing a URL, or empty</td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported Common Attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#maxlength"><code>maxlength</code></a>, <a href="../input#minlength"><code>minlength</code></a>, <a href="../input#pattern"><code>pattern</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a>, <a href="../input#required"><code>required</code></a> and <a href="../input#size"><code>size</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </td> <td>with <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code> +</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#url-state-(type=url)">HTML Standard <br><small># url-state-(type=url)</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>url</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">10</td> +<td class="bc-supports-yes">11</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">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="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li><a href="../input"><code><input></code></a></li> <li><a href="tel"><code><input type="tel"></code></a></li> <li><a href="email"><code><input type="email"></code></a></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"> + © 2005–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/url" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput%2Fweek.html b/devdocs/html/element%2Finput%2Fweek.html new file mode 100644 index 00000000..c7084a1d --- /dev/null +++ b/devdocs/html/element%2Finput%2Fweek.html @@ -0,0 +1,280 @@ +<header><h1><input type="week"></h1></header><div class="section-content"><p><a href="../input"><code><input></code></a> elements of type <code>week</code> create input fields allowing easy entry of a year plus the <a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates" target="_blank">ISO 8601 week number</a> during that year (i.e., week 1 to <a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates" target="_blank">52 or 53</a>).</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/input-week.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only Chrome/Opera and Microsoft Edge supporting it at this time. In non-supporting browsers, the control degrades gracefully to function identically to <a href="text"><code><input type="text"></code></a>.</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADrCAMAAAAv4r8BAAACalBMVEX///8AAADt7e1wrutLlP673f7n8v/19fW8zuy/v7+x2P/i4uKDwf2ysrLx8fH4//////jp6Ojp6enr6+vq8PDk5OTh4eHn5+cABkfYnkenp6fIyMj7+fju9fYpmdfd3d0ATaP516EAAi7868ICGpr/+NBtb27w///vzZjr2MPEwMD//+/O+P/z59bV1dXW+//pwpPD0eKTz+9GCUMvAQD//thNTk7//uepzu329e2Z1vi/xNHTy8dHoNXo9/wnk83/9uLwzqDI8f/Nwb/O3Orc7vxwCgClSAC/wcmura4CFouQut3M4/ejMgDizsJPBQBFAwABEHHz8/LHpHSVxusBC160urbE7fje9f+ZmZv74K3dp0yqqqq/y9f18+D/7c+ezuzO7fO0bwAANqCx0+Dz+P/tvXTe0snPl0T9/Py6zOUxCEJnreKo1/uXEQBrLQDm///l7+nrzatdWl6r4v2Pzv7f/f8ANJf24byYMQDy3s1sp8+UYAhMg6tfBgD29M47N0bX5u7fsG+36f8AZLb4zpXQ9PW8j09bSUEACE8ASYGee1NNp9YHdr8ucKjn5/BBls7dt4i/eACGDgCRTgAAh8SJq84rh7y63PORnq6Fnry4zcr37e0AZqTEvq3NrI7e8/XQky2mjmR9RgB+tuVTm70AUpWGgoi5po6qwdzKiABuuuWqVgbr5s8jIyOcgklvh6SRYVB4DAC5fi3Pn0WmoYVfkbuFx+yovcwrV38AV7AAMXuBcERETYe3tJ7ZwKK94/hNDEnPnmEAkc4AMleARkd2d3no4OiftrdID19WcI3f474xDmNOMFS8JOVSAAAZtElEQVR42uyaiVcTSR7Hq8Iy/QjmgAg0JtlcHJmHHBMgGIZj4AlZA6wkSph4RGDEmSwvypplgAWJC4I8EAfwWMSDaxRm9DnMKh7jqCyOLqu7/9NWpTuQo1Fi3CGZ9Lef9vGr/lH16d+vqrpTALBitdVq/igk1Rwu/Cqqo0NS1RVhwi+6bVtIqi06LAg2V7dFhajaqsMhiz+K3hZlD8UMtkdti/4oTABGh+IYEh1WAIPzwX2L3r9eLMDNAeTHymL5LMAAABKyInGRjKDP4pMIG5EU/1sEmJHlM42Io4oRTAB3Nbhw7bJTu7cA5Igpcaj4S3DtEvhhDjBnfrFV/Wq+1dOi6in1PBXeg3AXAGOQzPYDePQEhCNcrv1nCKO43CVItnG5ZgjxmV/8id1yPQiUvZI0Ccpjypp21yVe2AFUwC5wpEkuADaJ66oE7xSjngUPkNnHUgTg2puWnX4ArxrsV5VtXDPZtpSC4m+1BQG82sU9+p9CP4AysZgvE8v4YrEMn2bZwLx2Htiy6A7xLsbuCL8IzHj59b6+/mIUX7BuGWSchfD656C/WJVnXAs3xRmQ/++vAcj/506mPhADfPaTixn3KAaItHTGP4WLMLl4zLHIBRAUOQhHEaABAgsGmBV+AIV3HvVcWmlTkPWg15CeLC/JaBoBilPDD9bfBZJ/T7HbAOAcSuEfSil2boBzUf4AcfKKgAjvKICU3HtwGsJX4TiIrGgnfxy0Jyu1p7VPB/S/aLXaUwIFhB7tP1YK8nM3AmjvbkfDx9KIF8CrOBoZI1DkEYE+AM3wri0cAR6DfcnK7GOGVvDZH9LHLwGQeRinMB423H1gXavCkA7AkVwK4Nm6bI9BRG6/bOea6+zPDAjkVQrg7BmGUdi3D/QFCByWsJzGIDYqQ6sQdX7wgaDgIoTKqgN554Aenlsr+RWEdgBWUIkudFbwj5H1CFxCF/HIi0bhbVzuMDorRlFZGcUA0GcU9u0DEeHwngdKJJ47n7Z7XlTAPoaJND0P5G56HugzCkfQm4hq8oO8ichErnmgSMa+yr3fuzAnCw8ZtiwOC/A9PybIsuJt8VmycH8X3jpVfPLpo093h/n3QPaLdBBifxMJVhXREnEMqwAl9pjSVYg5gFWA4og9TmJYHoErhgXIAmQBsgBZgCxAFiALkAXIAvztNjORt4NBvMRgbBEFMCaJYFBSTDC2iALII0x8P5kIXjC2yAJo4jDIxAvGFlkA+Uwg+LxgbCxAFiALMAIAnn0YQDU/G4bwsgCAk7XwfCs6n3qanf9Sq9U6HggiFaCwpjSAajY9OXwDPgQqePPLyjOg4CIkywtu8HjmyushBdCyAaQEy6s0S8IGAC3vBzBDPwqEU4OvJ0DBjhsvXy+DI5ZWUID+/XVYO5kOVFcWnr6ZFADhwjIu3NlAmJpegJnrfEkH7OuXv8ktF5pMJlVeYQgBTLCkMQMUWdKQLBsAXEcbMMBxcnVWuTO1llztrsvuV5aDIy3lKnjqWc8LUAaHrryBfSjm8AojIb8ZFFSeE9aMCkBqrUbHd+aWYyffy+mfJR3QvXD3VwfIEcVTW+x8Wpr7mIbktmF+aa+YbfFpafOx3vdtGmDmdpP1Qltq7YTJWdtXRpaD1NxySQLf1JsiUBumTYS+GByUl9Ap32SYztCX4mjU2ASpLoAquMsdgI4t4gf2cOJp4TBzH3N4XjYaIKMNGy3e920a4MkTqNkaDCN1r4YGWDCLrsnT1e3pQDhmkBy/TSO6R9YLMmpGAcjfqwGAAjguX/tdnHMX3uVsEcA4aktEEeg+5uzxslEpzGyLQxGY6H3fuwFaK4BQX1xQefMbayUFsFajIHeC1JbyXuMn/N72dHVKOgDOXHNLPXXHfXKiGQjxwtbU2kIaoAra13tAvmNrfnvew0mKo7dES5r72A1pzYIGkURmW9y6JWnTAJPrKjryNPk9XZJ90A3QWVulO0uWHzQ2qk7IKYCSe3CEirFe2JWUVIF6xoaMJsPnNMDx6yGwMAOBWJfFfbAGiVaCRyFfm8XP9m6AqjkIz5cI90H4uIdO4QbJWQhPk+XIpPyZSmG8SLWB6gD1eIyQC4gVCOsmBBRArwDcQoAJSf6baE8wtncDlPAT/swXANcHHakEDbESvlRo4mzn85slru86AoKP4fQapymA1NcedIfoX/xml4Nm17+t1yFRAoNEh4KxbWYQoVZD22xec2tqOY3NHVfCO/Bb3xizSUIg6rwAxscyKP5QMLYP9S4szPybNOTfhQ/FxSb6bzSk97R9KIA2xpX8IQcwkUFxh4KxRdTXmB1JjCB2BGOLrM9ZWYmJMr8tixeMLaIAZpl5DDLLgrFFFEAbR8QgjiQYW0QB/P+JBcgCZAGyAFmALEAWIAuQBcgC9Dj+Hau36t0AicAUQ0SUWIAsQBYgC5AFyAJkAYY1QM6vCpDDcE3H2ezdH5dsFUDnSztBlD0dIIiVLm8fKljvB7DjvxMeO0YpTmsdDu3pho3sY+elhHX4W+Tf0ehxWa2s9/ehNkjf0sgOx6BW+3iAqusLhgLPT0Dl5TUPmdO+dusshI93BwlQV1NMEPdgA2G9cNvbhzPXH2AZ/Dve3YOaDZuVyTN33zLzqjeyq8kBoiNPLiV6jZ4tUpCN/j7UKW+LkjI4aTabqdBLZIjAA/CmbAquteq4H+Mm4+EvLxqng0zhZDliB4uJDrhM6KYGX1fjJ6NdnHYBfL447QOQRFRVtQggLvsnglgwDzuqfP56cin6L2cSxcik25nHc9nbQIzBukZi/BLKvB+1l3GoDJ5a8ATo9qF+8gxXyO3KFyDpir6OKwtPB6YYUsIVv2NVRCaqQTWxD/7i40LXieBmzg/Q7pGfwcXGwAEqyIEDxoV2aY6hhBgnV4fJeuuFIfOJ9hJn7kAOrPKOQPWTORSwK0NzGqKJXP0BNuj0cHIWFnrX7Cvc+JkUKW4C7czDqi8m7tzs3G+98BA9tFMLeaNEL1ycxUj9fJTBId6coYR25Q+wnnqoQ1e2H3/IFKGncH7iGnQbSp7XDj3yAaive1SxXtMyeMvcIw8coLWy8OAZZ0v996WEs7YQ/bnisroB1Kk0OHOX4H6fFFbLnxtKrJVVeg0uS8z8pKtBT7HmNgPA+1+gaqVIaWce1oNya89fZl6oUKd3H9U3hxzAvcgYyQQQ3XyArKdd+QPCa+2kavTkdZ1MfcpUHoSLJUQcCjDEGj04396mG8KhXe6aYj/97oQOZBRu6rpzW9d5GVVB4VoiPtrr2mmcPah2vgBTrJWafmNJjUaB82emfTu6Tacv3Rgg7cyzazLeMJb0t4+1S4k72EY29jT49IFuH2pUBvUkGwJ8VFS021WIGSBCtJB3ycWRbNTpRxmG+T92K5fdAJEfOqgDAzimJJeJFSVKIVXehE56TZpjnL6GZhXOvas9pX4Aifu3uouJTo0qrx5DogCOMgBM/oIg+lPczjzHvgtoJHL25KGAmBkhODqODuefmhFgigsg7WqDPhAXYgR48jtcDYMCfif9mKzX1fgCtO6Yxl3yfto99lPmrsX/2Dv7ryauNI7PZX/A+cFmPMsuoQdsXkxjCClJN5AgL8YiISVKQIhV2EChtrSAvGRZEBCOWCxvgoqIZRVdX3DFlaPF1fWla92unm5/2P9p751MaEjmPhNDyrGnd84ROOabZ+587nOfO/c+c++8DsBj9ltZuMfSkEtbLDMN1x5Dg1lW9Uc4Bu5BN6MBZh2zq/fh8jZ0LHYHq9oLqB64U31kZU6TJRmL/PgBiQzNpFlbdc6Csb6S2eq9K+71mnUAJVOUGEgFWE/IuS9o0ZGGBxhM82JZFMDhxZGGGvRCMh8CmIAHNvQXE3anye2UG6GhrFQr9vl5sRc+ib5e3wtjN39wEd/7vJ+q70ToURb5qyA6uogX34ADzLgmbCzysJJqPldN3Od73LicqQ3lCC38+FWsDW2oCYdNRQP0hzyQNOH9MgALyCbDt5rIr3fbmlKtqC/KRNCHBd5wSYkdrf+rDY5ELtOGBQmMRC4DY4y1I036fSAuU69bgt+lwYJtZyjm2ViYTSYwgAwgA8gAMoBvMEC2Py90xAFwAw84/AoOBpABZAAZQAbwNQGO5efnP8klq7AnnBBAoYXnC0s4zlXK8zb581uyeX4v/kkOWUnYRkgIKQawYoSq8JRxnLmUZmNNwrV4egFcwfGeJADM8/0XF9nocM9010S8Rin2qyZ+ryU7gMvt6W6RL7kju7C7iC9zvYcPecaSDVd24LctfBOgsPCB9CL+EE1RWqjiiviRFn4fB0gcGPEhKj7ygq5dyQD4B7GSDD/mcubzuwCAlRiJyWMc8HTh37IAXdm9nDlbvKYBvkROIdmw8L2cULoPUFRiQkKpfCXg/23kD7kIvKIAB0gGCi3ZdICGtqbyZABsrHq36skL8U896oFjoFBUqKr0FFGbDmnFolOYs23Uisc2HNmBtBa+DFAAADkutQC71wCuBK7SYwQkX3AuwAPJ/lfJAKhFQ+890JG2m+ferdCJVOKLruQ97xRRCeLGGWpDXbRSExv4Bw4bKkAxwNveauHl8Qhi8LMQNgMeeSOCFB83A6BwBv/rKMYRrENjhAGaSKEqSRMuKpQvkqO00CgGQ6oDijYGcP9goWlEBf7Je0rlGyiXmYkD6ABhQ/VAUbI5ABsf4x/l2znz3VtG+DZmIHRlpMyV8u6DOxjRhslDc8CQjUriOBQbIYXrDJfJyTfhlhFSQ/saRU+WtyFJNgdgHarlrOioMKs7su2HTwGAFr6wO/2MypVty1yR72PNuGlvS88CHFCygZ1MRfFASYExCpQoWen5K/lIKC0sGaCEEkmyOQC5GvFlmgaSqkLFUC8szlccwi7C8wGVfAAkChvggJINoYgP3e3RFfhOjkKH3IeSCiRno1RUWLI5ADkB2AxGbiQiHEjd8C1/ZoqCjS8yU6gb+xSkiAUW3qLbkCRsKMfGwgwgA8gAMoBvEsAtr3fwW35VBwPIADKADCADmAjAt0/cjAdg6xRCM06oCIFvERpyKpRz6l8fQx9fOYGPQdDCQ4Se1AKfXxrHJvJnIBM2mWtJFGArvur2eABe181/6JuGinXcP//Hqoswv9tIDV38lnuTCwsLXpjf4MHOCqCebNjCwrAGPIt6/mDn0+QA5Nu8N+ICeA+jqakAStU6he1M9YH8LlXdb4MB7lbwYJv7LPb1+wqOzttvQh/f2B17LYk34dbO9nhj4JwGLnfrQd9ZUHBcc0kB4Mt83RAk8NjvjyuEEvE84MfX/fOPO6c3H+B1Xa1CvSNY8RzVwgBbV9V/OWyfBn0YPXq7sw8meAXdhAtahVC0ZBMAPqQEy3X9SDUUnYYv4pABIi7EX7+tBvoZT9VZZUAKDmhzzzhbp6LO8vMDvK3Az3YYo3kOuSD2UHJAZkQbUD8TGC7GbgiHOEUHtP8m1sbPDvA5mll+vAw1P/ei0wZ64Jbl5eWtbWAf2znpDNyAe1C/N/Ct37kBB8SVgD3w3mZ74D1xmSDU/rbiyOL3KjTyS23gfeDBToSegY3c9goXw7sRB8QKXFLd4Bs4Egksb3xE0Nqq8LmiIq6zLLOhHBsLM4AMIAPIAG4mQJZUYlk5BpABZAAZwOQCJO/oGyqJA6B5DCHopcyN33ixaArpamEJecUzKAi/EpquaJxDOi/NhrQCxPHNI9CGNT8//0RPEgB+pjticl9QBijc9dtMPvqrna3iI5qz/qaa2Of9IyWOOTSRA9poftb0HfonoDB3LI58F7POQypmeAXI50ijAmwI5Us8v+4x2EQBfn4aQ9yhUgQovplUq6Y5j9Dxcf12zmDH8O5MQ5JTmpV/50ACcz+2MfsfQJH3N1yK8mJZRXgFiFb98BMVYCNZT6iGjuZRLg6APaRYOfQ2nLGd007gS6v/RAVIyPKeHA4U4Pa32g4rMoNUPxfROM631+2AimHufzJ+wpskgCd1HygDNO+fHFlZpTScNYAEsHbHRgEKzRVGUKFFqK8LAlhfYYSLYbBPBmrWBYrEAVqRM55e2DCH0OG2DxQAJsUDH0wo+qhlbhoA2GjfxZ3aAVbCNlzIa5FhMmGAe9D7cd3GvIPLUzeRCwLUIww44ym3MYD/UMPVZNiKi1JPczACMLSrny6HbsPxoTGqqhMFWIcudqefiaMX3q8paXRPc+ClCeWariCtQuIFeBLdTEkvgwCiQZWlH/JAIT0l5VwFZCPPt6TSD59OQhPOEFMducoe2OhGaLELBiiKBrkNAQy/EhowYSV7tOVCMZB4BhxJgnaEZoybOxK5HM8rc1M35b2wKUl4e2/UG2zZUI6NhRlABpABZAAZQAaQAWQAGUAG8JcD0HEPoUdGRYBiHoHMlz+iTRKZrw+p8l7l5+f/iZaMCOUzjgOjZaWMRziB03gDPfsIlpDiyCuCVWgSfzl6w7BEAd6ptpl8xUoAQ9mKOxNHTFXyk+3cMR/SqMimYFdWR+UVUi7i1kjQ/ndAkedeHLlKmdGREjiO1cXuZn8vJBGLIyvQo0FLc0XshmEJAhRqjnJcvUYhJxKR8dA/lr/4a8V7QtMfokruTKF8xjDJmkAZD3FS9pr8VIqUwDlV3cuZO+RrQZKsFSfm2KnBF6HLidkwLPEYmLnibleOgeJ888FO3Tw1iEhz6Hfg+dTmxRGTrxZQSHkV6nRy8yiXgStcKKdnCMUcDzClz31W3Rtyxp4kADTYUTw5EXJpaGL5in03DFBPzfaEAJLJ4upeQGGoGkoL0lOfJIEjziRLc/sUCQiQbDjERW8YtoFe2DVW3RUfQMzGKqv9CeAs3QFDyRwv52rWQIhx+Jq4TktoiAmcDAxQuEsDKOV46AD1dnEmOmrDsAQBmrfiBlMnmz2IAagnMVfrz4UAQg4YqgSSt/P30hXC7zlaVA4ncKwVRk7YT8l8hnM8VIAG31nxyqM2DEu0E+kY/dQcpwcK5Ysllv5RsAnPjnIgQD2aV7nuQhP2efazqiDlyQQpgZOHbxtOUlJGazkeGkDDasVI+g+qmA3DEm3Cx4YR8r+IKwZyjZ0ITVJ3pNLihgU64Fo+g3YP91O2gnKnGE7gBPGvWlgiFke2mGLGblfMhmGJx0BaqkNuJJKZhIyHYmpFuKx4FuGAikvywYZyDCADyAAygAwgA8gAMoAMIAPIAP6iANbIL9yInJGWEg1BH3r5tfzYam25if4VJaEh5SJiFmjE2DDQkyKhREbd/0jqxQvZMHUitRMsafS1JA5wJ5pQAiglGgxoqXtMfqXD2nITcz+SX4Ag5SJiF2hE2zB3TI5clZ+OkRIZLmzhOWoHbOT5ltKuxr4iJUJRh5bSxyIXHSQMMM+3IL9wI+KrUqJBf1+F5UflxGvLTeqfjckDlHIRsQs0om2cIpNrwVY5RUQi45T8nKJkow5Xs9DxZ0AhTsru354EgHeeUp65jYqBYqJBKKippj5nThR61FNPnWsnuYjYBRrRNjL6bttfOqmK0IyZ+Xw7ZMOxupR2Tv0ldBZcn1xkXiVRgFr0ZVwAQ4mGDISoORGiEMovAMkKkouIXaARbeN7dAsraE+qS4kMK3VSO1RSMi04rQIUO5H3QE1k6jPRKf2OYs4QB8C1xSSmKmpSFyusEznc/9s7n9cmoiCO79uD8i7NSgVTskJtLdqULO2lse0agiE20Npq8SCW4A808QeIXkQ0CEEDVUQoiAYplR4qKPbkRUUQwT/MfbtvZZvdN0O7j4o4cwgUJpP0k9m3+3Z25ruhQhzUImINGr0xBkTNSdUvJgsZRXUC+jE62a5ROP0C8DBWGXveSp+BI8E4q2kEYFBoGP3gvXxK5hN4bPjRkm+mB7WIeINGb4yGaFPyj7CE31sWMhrKwl4QY+Co97L8DfAoC92wWQ13pA8cNB/c7iKFdVlo6LBrqgyUHvYh0/z8JvGWs6xFxBs0emOMLD7KKD4lLGSoe+lkjMbQCWP48UnA4wg7b+l4MsFfVn5ilzGy0CCejWGbickTaTdRnERkLSLeoBGLITw2FUkcFDLGlQkY/aYv70KfIrRULu/5TsQyNRRF8MKKhtIL/k3t7bojtJWjvTABJIAEkAASQAJIAAkgASSA/w7A4ZXJyRXsIXPrHWNfT4GjsUIXaDSWIfTT5+EdWFOlvBmaEP+ul5B9nAsKrAdS8BN6AC6/V0mBRt56nM1tvRrMQKOxpAs0GsvXgOUwQKmzDphba2+pNYzlz8RBZVJjoeY4TlsPQPX948hbx1/7M2Og0VjSBRiNZQjF1XsVGKDUWYeSa16pLfznY/JuHgZ4S98hfOPX96G3GXQNtKeuPkVGY/ku8FQTK2MhAI1AZx102F9AMtCdKcIZ6PI8rx/TAtC6k/2yfhYdf2edEQ8lg6OxAhcYoFBARwEuKCXswzTmsEeBVxFx4Qp3mryuJwPXvPW48wwfvGOtsifIaCzhkh7gqEKcOZrqrlIGWiy0lQlEnfnm2j6xTt7XAnDdO3NezCJ9Ij+63tlvcRoajSVdUgN8iPAbc7x//hLEp+wLZUMnK6tZFXl6QQvA2cFSuYU1G348d0WkFzQaS7qkBSh11qEAM4fHwAy0+k2zwNvXwRilqUrPSrvr60Ah4IH1ypVbjLE5cDRW6JISYKjmDl3DeQ5t5Cgv5pHrQM5rVV07EVUBYvtZWBYQgNFYtqm9dyN5BevrSx9kaYm2crQXJoAEkAASwL0ESAYaCpBsN8ceASSABJAAEkAyAkgACeD/CTBnEo+dWn8u8oed42Q7tJxNSURGRkZGRvaX7Tf4L0MCeXCEDQAAAABJRU5ErkJggg==" alt="An input reading 'week 01, 2017'. The background of the 2017 is the same blue as the focus ring. There are 3 icons in the input: x or clear, a spinner with small up and down arrows, and a larger down arrow. A calendar is a pop-up below the input set to January 2017. The first column of the calendar is the week: 52, 1, 2, 3, 4, 5. the full month calendar is to the right of that. The row with Week 1 and January 2 to 8 is highlighted. On the same line as the month, there are buttons to move right and left for the next and previous months." width="320" height="235" loading="lazy"> </p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A string representing the value of the week/year entered into the input. The format of the date and time value used by this input type is described in <a href="../../date_and_time_formats#week_strings">Week strings</a>.</p> <p>You can set a default value for the input by including a value inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Q+HrjhE4jT44B1BYLhjHtoW7tMAyZUlKrPgsgNGviJ0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<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>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<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>2017-W01<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/week/runner.html?id=value" loading="lazy"></iframe> +</div> <p>One thing to note is that the displayed format may differ from the actual <code>value</code>, which is always formatted <code>yyyy-Www</code>. When the above value is submitted to the server, for example, browsers may display it as <code>Week 01, 2017</code>, but the submitted value will always look like <code>week=2017-W01</code>.</p> <p>You can also get and set the value in JavaScript using the input element's <a class="page-not-created"><code>value</code></a> property, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="IF/z7upehFEh8HuXSvtUSBUSVRcAy2LyBxfOQMpe33s=" data-language="js"><span class="token keyword">const</span> weekControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="week"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +weekControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2017-W45"</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes common to <a href="../input"><code><input></code></a> elements, week inputs offer the following attributes.</p></div> +<h3 id="max">max</h3> +<div class="section-content"> +<p>The latest (time-wise) year and week number, in the string format discussed in the <a href="#value">Value</a> section above, to accept. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid week string, then the element has no maximum value.</p> <p>This value must be greater than or equal to the year and week specified by the <code>min</code> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p>The earliest year and week to accept. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid week string, the input has no minimum value.</p> <p>This value must be less than or equal to the value of the <code>max</code> attribute.</p> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>For <code>week</code> inputs, the value of <code>step</code> is given in weeks, with a scaling factor of 604,800,000 (since the underlying numeric value is in milliseconds). The default value of <code>step</code> is 1, indicating 1week. The default stepping base is -259,200,000, which is the beginning of the first week of 1970 (<code>"1970-W01"</code>).</p> <p><em>At this time, it's unclear what a value of <code>"any"</code> means for <code>step</code> when used with <code>week</code> inputs. This will be updated as soon as that information is determined.</em></p> +</div> +<h2 id="using_week_inputs">Using week inputs</h2> +<div class="section-content"> +<p>Week inputs sound convenient at first glance, since they provide an easy UI for choosing weeks, and they normalize the data format sent to the server, regardless of the user's browser or locale. However, there are issues with <code><input type="week"></code> because browser support is not guaranteed across all browsers.</p> <p>We'll look at basic and more complex uses of <code><input type="week"></code>, then offer advice on mitigating the browser support issue later on (see <a href="#handling_browser_support">Handling browser support</a>).</p> +</div> +<h3 id="basic_uses_of_week">Basic uses of week</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="week"></code> involves a basic <code><input></code> and <a href="../label"><code><label></code></a> element combination, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mIWzDpg9FR8ULE7a4WaGc5S9VfUclW4QbmLIDEFFoWU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<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>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Basic uses of week sample" id="frame_basic_uses_of_week" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/week/runner.html?id=basic_uses_of_week" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p><code><input type="week"></code> doesn't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p></div> +<h3 id="using_the_step_attribute">Using the step attribute</h3> +<div class="section-content"><p>You should be able to use the <a href="../input#step"><code>step</code></a> attribute to vary the number of weeks jumped whenever they are incremented or decremented, however it doesn't seem to have any effect on supporting browsers.</p></div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>By default, <code><input type="week"></code> does not apply any validation to entered values. The UI implementations generally don't let you specify anything that isn't a valid week/year, which is helpful, but it's still possible to submit with the field empty, and you might want to restrict the range of choosable weeks.</p></div> +<h3 id="setting_maximum_and_minimum_weeks">Setting maximum and minimum weeks</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the valid weeks that can be chosen by the user. In the following example we are setting a minimum value of <code>Week 01, 2017</code> and a maximum value of <code>Week 52, 2017</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fwvpecVGJpgYEH7RWePLO1mt13nLI9g27PwrWbfGXag=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<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>week<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-W01<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-W52<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum weeks sample" id="frame_setting_maximum_and_minimum_weeks" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/week/runner.html?id=setting_maximum_and_minimum_weeks" loading="lazy"></iframe> +</div> <p>Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <a href="../span"><code><span></code></a> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The result here is that only weeks between W01 and W52 in 2017 will be seen as valid and be selectable in supporting browsers.</p> +</div> +<h3 id="making_week_values_required">Making week values required</h3> +<div class="section-content"> +<p>In addition you can use the <a href="../input#required"><code>required</code></a> attribute to make filling in the week mandatory. As a result, supporting browsers will display an error if you try to submit an empty week field.</p> <p>Let's look at an example; here we've set minimum and maximum weeks, and also made the field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QKd8+Dl8OwxQJGJzrOU/ywCxWCM8ibqgfKLoeIZeVmw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<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>week<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-W01<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-W52<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<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>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If you try to submit the form with no value, the browser displays an error. Try playing with the example now:</p> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Making week values required sample" id="frame_making_week_values_required" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/week/runner.html?id=making_week_values_required" loading="lazy"></iframe> +</div> <p>Here is a screenshot for those of you who aren't using a supporting browser:</p> <p> <img src="data:image/png;base64,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" alt="The week form control has two dashes where the week number should be. A popup with a yellow warning symbol and a 'Please fill out this field' is emanating from the two dashes, which are highlighted in blue, the same blue as the input's focus ring." width="473" height="85" loading="lazy"> </p> <div class="notecard warning" id="sect7"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth).</p> </div> +</div> +<h2 id="handling_browser_support">Handling browser support</h2> +<div class="section-content"> +<p>As mentioned above, the major problem with using week inputs right now is browser support: Safari and Firefox don't support it on desktop, and old versions of IE don't support it.</p> <p>Mobile platforms such as Android and iOS make perfect use of such input types, providing specialist UI controls that make it really easy to select values in a touchscreen environment. For example, the <code>week</code> picker on Chrome for Android looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAKACAMAAACGxBKVAAAA6lBMVEVmZmZgYGBeXl5cXFxlZWVkZGRiYmL///8AAABhYWFjY2NWVlZfX19aWlpYWFhnZ2dbW1tSUlNoaGhFRUVqamo/Pz/8/f1PT09sbGz6+/skJCRXV1d1dXVUVFRQUVGgoKAwMDAUFBSenp4GBgbh4eG2trZLS0sNDQ06OjobGxvb29vz9vZZOQCwsLBeQAdBNBxjWkdBPDRhYWLq6upCQkIWn5KFhYXAwMDMzMzm8fADMxvV1dWr3djA5uKS08ypqakXPSlwcHAvqZ5uw7yRkZFUubApRjcAkYKZmZkFl4lNWVM3TUJkX1Q/NycaZ2qcAAAftUlEQVR42uyYb3OiPBfGQZS/SiQhi8VCQ7ER6vgKRr3tC90Zx3H0+3+f5wQUsWtt7+3s3jM+HCcgIYn648qVEyW9ib8SUoOgAX2/oMdRBIfxuMHyh0HPsizRZ6vZ3f7aSw1FxTGOLlowHngs+mSc2WYzi74DWtM2+ma+uVvQnUV6vvBGTI9jPRnxqoo8jX5oEKNVGB+r4BwlIiqwMWlNoM1jOP5t0I8T7W18t6CjWO9qbyfS8eNkJs9Hoxd7NvlZViUv2jnmpOxExjEJPc9zWCX6rGzxw68PDQfK4qqND29jlsTXQf981TQ+u1PQ8fxZ72bzxRHPeIqf/nm2lafJbrAqeIxftXpk5SNhZJx6HufhGfRIG+02C21yGilcvfpigmSTl5Psnx6IHs0nk3l0XdHzB+35XkHrSbZpv3Ht8XS9yZiep1B9WpO8SR20ebKTkvQF6J0en0HPshG8HY/maX4a3NE0os8mLJnMroN+ybTs6eVePZployzbnGYzA9HpU1vXhydi+mONc0UoD4E09y5AP4rl7NTNT3+Ci8Rg4vFko+/msR69vvwg+uJF11dvH4BeaNpiereLIRtp59/2KBisHPCUUftU91xxnlbumnue0PQFaKrPpg/V89EfC7tOH6dgIT/hCe3mBBQ9X4CFjOLroF8mWvZyv6CzGugNCE6fYjgsKvWO50fOb+fkLfc4kPYvQD9DFqy9Ax2zRVYmNfk/PoNnYWq7zeTtOuj581R7mN+vdbxm2e70y2cgOJ0vIB9+HVRN/FG5EDK9DrogXQetUefhPWih6Wwn7r9ls5U2ZfpgvhH2cS3rmD+34Gne72Jo1hZD+iDQRTuVPdSwUrEgPgT6JWhBelwD/ZZk2jvQ0byn669TUPb4aQoWvKDFOmB+kHWs/Fctu9P07mWny9nilN7B9aLwh/RtVW/Wri+EJ+soSNdAPwmLqYHWYDGcT2arH3axGEIn8Gjdepms4g8UvYo3mra74w1LbWuYvr1ixn6OFpeb6Y22upwIYrvieWFFGkAXGfdDBZrsYIhoNp+GerEY6rG/g5vqU/+DDQsoepzApuhut+BGfQuuR5vRZDKavdtJx+/+xYijMvzkBHqRFTHyb0wfPb61Bc/7JI7lR/f/5E8lsVP24697T/WAjvH7fyo18eeiAd2AvjPQtIm/ElK7ib8SktHEX4kGdAO6Ad3EN0DL3SbOIf8x0HJXNZs4hfEHSB9Bd2WpiXPI3T8FWjEauudAcqsB3YBuQDegG9AN6AZ0A/q/Aa1eRAP6T4FWlV4tlNuk1X8DGkkINaArdNy/CH6DtNq1WuqXQbcP6/W+Thrhr33FY3lffb03RpfnUzX+tclXn/9vyeP9qL8qmvmMJdXLZ7e26HD7iuSvg0aH9eGwrJFG+62Kql/+8a+RzbK8A8qT9rXWloJgPGQyp/4gMEnO4wet+md1ZMkJbqL8rf8SZMn2boKWmS+fHVpm7OMtuhmA4j3zi6CN9d51t1tcA72Uix+ohjJc7D/4xmreRQaU96CT9Brotp9gkyjYiAi+bH0aAJkprcvb4Zjwm6A/uX1Vz628E+afgRZoVbNQausWaFVhKet9UdFIXiug6m1d0UvDBQNA3eUeu9u1C6rGqJjXIEl0NAccECQKwiLEsbiDB4nfLusqcyjuKQZA5gMj5QNxWY6BceK7VVMFJlLVs03sEvTxo1H50eKIUHmhmtXb8xvxJc5NpfPtYlTscRyS4yg3Qbc4C0Cr3fLqI9J9r/dFj0b79XINsdyqNdDhdn0AB1mCqazXWyOE0xbMBdx8GyLUD4VmiYUlMsROQpjPu4nPWgjJiQ+uJilJyHxaChtxn/FkiGhoscgnakqhjYztxEAoJ27iE5+FBYRO4mDcA9ez4RL18w4C0KgTEi4sxSIkaCMltEh3GFiEgxMFNlZCmxAbmvfgFCoFUxV69BEKgpC32454L0nQyumIz8gVAA1XfRxY6AZoM/H9EjS79e+eqZpfzDrwYXmMyqUB9PqwXe6V7XK7D9fLgwlvDuulgrfCzQ+gY5CSkpuiuGTMciCY0NRHkg8YIx9ZkQ/nvBAtj1jujzlOEyWJmKemaUIj5nqRgrDPBsnYh+4WLqwjd/spIyy1QW/cwwJ0mxCLUwN7NAhoiIcJ8Qye8IBQE25jKyEBTxTcF1XJsBiGkCGnCrg/cdo8Dzht4YA6AYXpgW3SFtKA7kavdwu0ERD/c0UbuU/l74Deu3i9HZysAwAjbILG14fB4HAAZZdzEHMoJDLcdsrcAYlUJ3Jc0CgaRt7AZUyARj5z3V7EsZ+4wjaMlA4GSYor0GnHhTZH0AOYDi4Wl2oOE0SQpB0XEwcFiuvCnLeBOeZEwjLQJR7cNrBEHUwIxgYdok6nbThtF+eiCuE+NVxXjNJzXRhJQgQmTUg7uENtfNs6Ot7nilYtWAxD8xugYVqvt64CdQVkKBIcoO32oJaGCnMQiYJJaoKSKQZ0cp52YHkToG3sMl/QM1KCUTctQLdSLmDDw0mlCjS0wsxHJWjRSnJp2hHuLwnQnHIOBaMh5zlBQ6AFoBFSab8EDYZAHIkGWDKp7dCcIzOEHiEYPAbxcu5BN2RzLuaAnMsIrAO+PrXw7cXQ9D5XtNrzU99SvwEavs4V0Ajvt8eUGw9JUaQj6KQATX8FLQvQrTpo0F5eB42KLifQ1JXgNtgCgChBhxA24rnV5zdAWwL00Gy1DDXndu8IOix6WyikQd+jJnbg8f1b0Lc8WnVoqBrfAn1UNBZCFkVUmAdjIHiLjATmoCiXoIHe0TpK0CJfAMC4G51AD06gw0jBbglanEViUloHLnq2ckjQBWgnhxQG0m9qg3XkH4AuqEKbIbTEQ9qGTyhBQ3OR4rRp4LpDakrE/jponjqfe3RHahvfBo3l5aELYPfSdnlQYE/TXq+VPdRD1iFTA3Wh1EDzSOnASs3TCrRrs66bR8RixWIIak4UkUcD6I4SJTYsirAYirPnElqAdiJaXMIKUII2KO8qkFfkRAnoe9C8BA1UrcTq8qRIV5TEaXlJARoMjrQUEoBfKzalHSWH1ljk0Z+DVq1EZG6fKNpL+P/YO7ceR40sjnNfwJjCh0KweHEgSFykaJKN/JaXeRpFu8n3/zp7TnHtdrfb7Z4e0b3nHymMza34UXUuZTjt3RzeDfo253jwn69oo7/9VwgKMcyvX/VvX9Fk4GeTtvPQflrol9AdUpTb5LbQSqR3yAMI0WZ1pdjnEUbIpTzle9C6Pi+xR9MmSV/6eYr3pLTxBvVlmWRxWfY99lrcyy7Jv+IRYvATitREirGkEZ/PqS3MOIlPsRXFCPqUYhfH5Kc5YBSB6Bo00GSdk6Nyv8UZ7foJUgwahY57N74IcO9D7GAkQwlAg6DjEF7IDH3LV5nhNRtN11vcmBlOKfZTSZZw0FFbDpkOx1fRPy5waWkpBqepebEPYIa7TvwwPNE9TYTVkHeDt2TsYOtDKoFfwrCp+trSLTTqqbXMTfi2UAvtSh7o41qvi4aAzbbneQO8I8vedhOIlyeVEG24Un4t6jhi1HHwv9s0qXKGl/M5T86CXGTkcZ/EfW5drl3BuDzCK3NrCJPD7hxbN0yDvTxNWvYPZu/Ka7OkcXnWv998tKTY+V7ZmDh2zntPw1rHOD75d83mXUyTht169q47Ot8lM7ytMW/hNEx1vPu0srhxcveGiX/ft1ePMt3xEwv/wsK/GTJoBs2gGTSDZtAM+lOCNgVrlma+G+ggDCPWpDB8tyf+dWMfsiZFxru9w+LprLX4PUN+oZPFoBn0/xXoHeuHiHv0j+rRLBaLxWKxWCwWi8VisVhv1ZZ+8P3U+uu3zegzY5ZfftmOnhpsz3165Zgd//GWw7zNbvz1y6//3owet44qc85vI/hGEDj3XKOFO+p0GHp3RLPxk/fjrPIK9N+G8/tG9KiZft7W9Wl8Th6aqq7zOx6ahxB3bA2hiaiqDDjip976EZgB9L1pSTGD/t3Zih431WlqN53Y2kbu3gNas7zOranqSeO6J7D00q2ugb7lNQu43o7hDa+mr9u26iwxgdY3C1qIagGtyfg+0BqYNYEWXl76eJjTVdDQJS+eBM7dlW1EkNNt3dVuF+1LN597dLChn7ImTzUurAk0vQa8Br0uNzKuB7F2fGuPJ6IBNEgaxzCAXpUpgQcety3lvOKivtLwhezzcZu5vspwOLUe2xkNrZX4uXJVRZutgaYS3TbaDPRY/go0OIc0yhbQ5N8CwxbkIA16q9cvmoMjcY1nqAP44wHWoEfXOoCmDci3CtCLnTcDFbJzS0ftKr1DU/jr2j7arjl5oCmGDu0MYp82R4u2wYY7oBWpiZa5cgtdx/FDQwNyt5STM9zMQ2YalOj+UoAEF4mcQQP9sbO6nEFDhB6trkLZ4HZtobbH/3A8Q4ffxBJ3qOtOrkGDluO2exhAA+1ZJyD8EpdtaY0dNKS/E0bnFlqnjnmeScOpqqq2jcHI1TadhCNZ4brfgWp4buPOdZNQW+vKGbo69JsErfno/hrQ/KJ1F9CQum5XxH21mI6octsQ1xd1XWjYC/vQ3+cukvYPrXuWmh1WwwWuerRzdutwBK1B4lapLwR2uCjE/40GwGjQ4zZxJACNa+Qfe3ciLcy69+BYt76D2/RNHAqC6GuJskTY8LbMUzzr8Yw3qmms8c7Vi+nYEmgBFYHWZL4GjSAykHq7gMbRW1GFOJssKvq6SKINaGvssLgngtay8gI0OO0MGqyq0iUFIj1aWaN2x1oCAvfrMhCwc1s0KDKs26EgGZ0xyfDouSWyzs0zUO3aAfitewTltysr6/pCOnVtyHHoaXhPrMkZmpv5swHUokvQIqjdgr4rV84QL2/o6weAGGlp0z4wgJaXoIU+g8atWmM4DWIF2buTnRn3w0GSy2Hkj9XZ6Cy2FAHmPNNK4Z/oFf/KpVjfUkMIhwo2t45Gd1r0bh7ARwENhau6FV3fEuupi5VlNdwAqU3Lm0CjYVBdGLthtzscin7eeAKdD+inJQVtrVsluhTLXdAg0wLTbCfQsRw2nEALo26TsZiCAm1sRc+APrmtIx7F0RQbRzhsqcTRyHS4EbeA7ktXHR4tD/otpUegYQK9HAZ26Otayj/m7h6WVdX39QR6jEQX0GYdZ6sU/MOAPq8TloxGfaOs8qtB1z3mitSlEXSsmyhjSpaeB62BFSPq3JpAw651O9N3ZtNxugDtzlUhtwoa1qBDtzYem47BAuRknKcONkC5BXSrZ+Sk8Cs0wfLBXPhkOqabN5sOKu0oBcaZDYwnJFOVrW30Y9Cak4RiBXpvbkXUoF6ZOjSeizN0lOOji16n4Lhl0xJTDB0qVRhMIR77IvTXnSFa1sHqDG5tsf1jjx5HjxjuOx39mGMilCW429Sj1ZmE1z4LGizQtgqaaGYSk0AMpgQlsE0mVLghJUbIvVxIU4TXUmkcYeM1YvgX1tTxFTuZnWoMCUffL/dubUohvdoNM5GlbqsB2qE6zYDi8ExKr5yqAqluiplzgDdFAm5b2WJasZcU2cVSJiq7pnuSEXX3hPeXpmWyoSJm6xaSck3MnsrN9mjsb26elFXpVo3eoNOqYpO6X1/mLV5Sd1hmeDHCG51/WrfxDkc1WURKEfKODtDGqgqx8GJM5fImaGgR78nQlgeB/bHuDMRUl0nZTjgpYKzPh0JgNFfRMetmmqbF8K7Yx3XlU5CNDTlQU8tzXmLX2MMRm5qn4Tiy+kNKBcp6t9bFRkHjBdGEcVH0VX8qVc2gE0BUVm1/8vDDatoMe9Q0rIu8bds8HevV9pgBp1Hf92q1iIbSQ8VYP3yoQySEleQ5BeE9peDGMsa7akjmU3XMYlmRYAJelTrdzDNuU1I1TlxoTV91GGf22GLVOohwzypS8wH5Zk2HKuTljWWIYaw4rAFYNqVi8KA+ed/O/RAcw5nWgdB1Acvc23SYBwu6UcP4Bi+w5WqWDuxAVViiY/oPzqfpwTiPD5b6lQa0wKGSgaoK8lIxiA6pJk+Evv4p6+/tvA88T1U+Nct78WvnYXF3D6dFX1li6fFviPPnix8X11Ov4tqZLkvIbRL0TZP5Mqhq8+M8oKBA77ei25vtHJN2THkZ9DuChhj9VAMag35n0Jof+PCROCvQx81UTHiVB/tgD9590B798Z5wRNDpYSv61KC//LodfeqHdn/7sh197sd27e38CWyNxWKxWCwWi8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVgsFovFYrFYLBaLxWKxWCwWi8VisVisTymL9VYx5a2wZj4/BvW0ic16i15EzZS/N+srnIftVFl6h/VaKW5r1Nc5M+O3wV736pc4e7rBukO65y2onyS94ox3xTOcf7HukIOolQWZST8FerTOxFn+8U/WHfpDvkD6IWc9/PMfrLv0Z6gT6dF8XANNnPXjT4zsPv10DJSdfo70ijOCDhj03aB3RrDyiI9Bzx164GzsGPS9oAsEvRiPZ0Arw0GgCwZ9p34uzJn02KWfsRxooQ2j+JmR3Q/a0Bfj8ahLP+rQJoO+G/TBnLr0C6B1Bv2dQDsvgTZM88Cg7wYdLV2aQf8g0P6FN1yDDhj0m0DvbwA9RtFmxKDvBv0/9u69OU0lDAN426TdadPc6nGbJSZCDjTCDn9RbgPCRHTU7/+FzrsLtuklilo9Jn2eab0ihZ+vL4sVvT29aANdbwsBvS30R0DvBfoNoAENaATQgAb0/wjNZSAB3RY68MdjZ0OvsREBuiW0M7AoX5NHNwmnDNotQ3QP6JbQnuH2YufY6j6ilaaVAfoPQ/fvPyvawX1JZ3Yck3eQDQzH1uKeOrP1iSfoeuJkvH5+HDVlDS09TwJ6JbTVUUqJ7zE+NizL7LOZZRiW4me2MZAsMLvqZBCwpGNZ7nsClpGa0q+h5Zl1BeiV0LZpfWk68swazMaGm2Rj04h8Par44ibMt9yYxdY7mtTt3Z3c95RvdxYZhqeg+af7a4nWsXpjqMrUvKJtYWAadHpHkHxAhk0P7rMH14rY+P6OrvRU/zaCQBnraqa/kdUJ0KPbDO9k+d64N2Yscc2yLCNqGnJgNBvD2HqQ5s3XDn/jZuzG6tEEXTeJrYGe8iOLrIFhetgYtt1hsSPX8GLXcFU64jt0YHZiq4zcZNCVvKPvNtzYb6a8Jmi6oQT0amgevdIj6Nv7fuIOkoziPapo9tE4MuzE/WRQ17i1xur+TDpWJ6unpIqOXnxJ/5mKfvvvPzRgkx2rTE3a6FG3kATtLqBnlnurrrt6iPFJDew8Gnurbs5irvt07/5MAHplRWemdTYe31imzcaWGfXPrRkTHeu4X+NlhjVmrGcZNJb2TOtdP1KDvejeHN+9sUoNHXxVkwB65ajjjMbE7i2VqFCjY/eKxhClcd+toWVHFa/jXnM9QHEtqxs342ijF1DroB2WuC5wQK/aGHpxnNWstGeo+y33nKZ38MAjYuHVIzjaM0zk4ykDfYftBYBuM+rgv724fGLO/prgjX9AAxoBNKABDWhAAxoBNKABDWhAAxoBNKABDWhAAxoBNKABDWhAAxoBNKDXD68/0cQpgN5h7Lg+7iiuzwG9o0jflp4jmBcHQSAAvTtoW2FLlr2Ej5kedo+WQRJzlvhOfcQioHeVzC/VZ9ezICvRo3ca4ZX1wMPJAL2zBIQryoBnZO0kgN4d9J0nM6poP5Z2H61jh/HK0ifg1CnL5945nseeIZPP/xgMvNcBaEAjgAY0oAENaEAjgAY0oAENaEAjgAY0oAENaEAjgAY0oAENaEAjzxPa3jBLPu/BN53ni4aOjj9tkPOH9OlZpg/nm8zzOHrJ0Dz2N8qyH42SzmbzjNGj0aMRQAMa0IAGNKARQAMa0IAGNKARQAMa0IAGNKB3knTW66u39nk83v6Ye3vcK4Wep6/+A0w6HmPOmDKz/3Zoefl6dnvFmXzX6W0NbXcfZt0ekydvZt2IyajjOoz5URT1jOxvh07OJPPMgEWnf+CY+9kNY7Ep4oFk9DeIko5T39E//utbB6dXujNIRac/68tt5xVQg3A6vP9Z/Xy2+l3QBlp+jdGjWXlqOsw2O9Htmdx+bmmnZLPLBpo30OUtBzTLyrf/CM9MmDS3rzvx7oH9Ai2+7OmX3w96Y6i+xdHMbGrT7LK/9ex6R/SqKL/QdtG0v0E7XQnouKs2hp74WrJgsPWXV41190kI2acN4gL6ZF+/Rn7QFf36S68TceaYV52rbb8yM7ZuPp2/j3mv0xuobsG7vrrVDABNDTSe6dac3TlbfzWp/iZZx6adn7t63JzoHyPf25di/U274LzlbYDGex0IoAENaEADGtAIoAENaEADGtAIoAEN6P1Dx76zQVYdObvRPOMXDR19ePVEzl+dP5nj5ceCH28wy/MPL/pYcGZ7m2XZtxtsOEsbPRo9GgE0oAENaEADGgE0oAENaEADGgE0oAENaEADGgE0oAENaEADGgE0oAF9KNAykIwJqSIAvbtkpV96zCt93+9ngN5Zgn7AvVJwIURQpoDeXeOwGUtL/YHRJEaP3i11rL8QRfoBoHcZzyn1hzuzZ1/QBz+8C3w17nBsQO8SOVPG1DTsmAN6lx3a8dIsFozHz7+gD7t1BEmcUOeQiQA0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0AmhAAxrQgAY0sh9oPiyKlLFhzvWVnDKkC2mujnlVV4eHcTQ3T4tiqC8N1RlXS6mXurkjVUuepzJf/T0sizXWD9Cn+XDn0GIyH4XhkE1CBSvCeRiGE7o0meb6NAznI3kI0Pk8HM0rupCGoTr4OQwJq6KLBS3yvGA5LWoY5kO93EufsUqtca7XLRzl9GC6UO0cupjmXI5GDTQPJ4Ki1mauuUMp8mlxAM5pOJG8mFLlFXNiJejphMxCkc4nglfTlITVkufT4ap6pvWp11jSA7gQVZgKvnNo+hepWiqxqOhJ4x8W81RB023z6hAKWgHKik5Gk8lIV/Q8p4qu8dNqOKyF20BXnKWL1zCrXxY779F8IdtAj8LRZJQyPppIVTeTcDisVr4Y95Fq3vTe4TzP6bIMKypJgl7ckU9pyasW0FT+o0oV0ZwekKvr+4AWv0BXFS2F6nSTEVd9bH4QnYMVC2hiIWQFnc6rH6AnVVW0gKbnaqJ7ND1cvUL2U9F16xgW/MfWUU3DUThVL680PxBo3TqKIR/NR/RHKOyCtmrUOgg6LdK2rYOnqtXQA1VbrCt8L9BqBYT+Zx9By3BSFAWtyiTkaqNxCBvDOXVWWljqsEVRTYeClo6PpmpjWLH6jrxdj9ZP2WSxxnvr0WLUDO+moxE1ZhrM0ZleFnptSbUwtGqH0TtGanineagepPIdzvXwTt9BwztadBreqbNl2FK/Jop6jdX2qJrvo6Jp5F/p4TuVcJGLXJ8NC/Vkp4XUuzH5IWwMaQmrKm/2U2iRhL6Qq92qoW61qVryIm3OljaPXD9Ar3EhF/tqu4emP/ypew4vi2Xl7M8tM8d7HXhTCdCABjSgEUADGtCABjSgEUADGtCABjSgEUA/P+gZyDbLeD3os1eZ4DqiOUeWp2YS2duTdaCPTq8vHh4erpD18nB1enO2HvTZ9c3l5e3t7WekbUjr8vLkbF3os+uTkxvKJdIySuvkek3oCy0N6HWdVUGfHq0J3UgjrXPSFPQRObeC/i4N6nWYlXNbaJJ+BE3SSPto51bQHx5B19Kwbq18rZx1QbeE1k26kW6wkdWpteqCXkC/XQX9gzTSOqenTUHToKOBPn4SmnqHLmklfQrstZRPL7TzT53jV+hma9iU9NEF5RRpnQvNrJyXQj/qHQtpZIN8c14FvZAG9WbMtfOioH/aFi6gF136terTyCb5uHD+bUH/VNJKmqg/QnttZMX8yPlJ6Fq6oUY2yvtlzj9LEzWsN1RWzOS8Cpqka2pljayd2u5p5x+lG2pko3xomLXz76FraU0N7o2RG+YnnBvphvqbNbJ2GsEnnX+SRrbL8dPOC2lQ/ynmp5y/U0N7e+Slzo+lkS3zalVAtBdmYO/LGEEQBEGQ/9qzm902gSgAo2ktVTSRIlVO1Mp15R9osBmxogKsLKxIXvj9n6hOmibs2xvR+pwVrAY+w3g8BgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7ADW/iYsqbuMh4E0ILLTRCCy20BEILjdBCC82/G3ozC7zifDadLkuhs2y5aLqwEPll16TU9O027oP88PHF5XS0oct50RRF1CM9q1NTt+2iSv2PoCHKLg00tyMN/alL3fQYFXrbpcXy6aBtituYMVZVd/eiTdejDD1bpGJeZmGhj+mQPx9Omn4VFHoxeG7S1QhDn2aNtH5MHBV6M5z82zQPCr1/PbkeY+jPferusjwwdJu+Dd6eosvPMfRssXucNX694TGh864arjXqmFHGHrpO+5f7Dgpd9v3wGT7ulucY+pj6qzw2dN73w/X5ujnL0OVDlepNaOhsP0yb99XqHEOfZulD0xxmkaFvUvt6Mt0tznTVcVp+1en+SxkXentfLF9/wDXTsw2d5ZOnJd4h6gfLJPXPs9N2nw5ZfOivIw19usy22K3rsL2O+a5oN9vV8qFP+zIqdFX/tu9GGzrLlusmFWF7a+/7tKuq0wht1AZh3t4PfJ+NNvTpa6pu86jQ2erduuv288gd79XAX7uRiNB5Fix8gAD+yhJaaIQWWmgJhBYaoYUWGqH/Jz8B3oGYYUv6yLcAAAAASUVORK5CYII=" alt="A modal popup. The header reads 'set week'. There are two columns: the left has 36 in the middle at full opacity, with 35 above it and 37 below being semi-opaque. On the right side, 2017 is fully opaque. There are no other options. Three text links or buttons on the bottom include 'clear' on the 'left' and 'cancel' and 'set' on the right." width="360" height="640" loading="lazy"> </p> <p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> <p>The second problem is the more serious. As mentioned earlier, with a <code>week</code> input the actual value is always normalized to the format <code>yyyy-Www</code>. When the browser falls back to a generic text input, there's nothing to guide the user toward correctly formatting the input (and it's certainly not intuitive). There are multiple ways in which people could write week values; for example:</p> <ul> <li><code>Week 1 2017</code></li> <li><code>Jan 2-8 2017</code></li> <li><code>2017-W01</code></li> <li>etc.</li> </ul> <p>The best way to deal with week/years in forms in a cross-browser way at the moment is to get the user to enter the week number and year in separate controls (<a href="../select"><code><select></code></a> elements being popular; see below for an example), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/" target="_blank">jQuery date picker</a>.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example we create two sets of UI elements for choosing weeks: a native picker created using <code><input type="week"></code>, and a set of two <a href="../select"><code><select></code></a> elements for choosing weeks/years in older browsers that don't support the <code>week</code> input type.</p> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/week/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>The HTML looks like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="xMvGIJr6Sl7IPIW0NL/O8W8c5xwkSvwz3yTNoNgh+TM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>nativeWeekPicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<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>week<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-W01<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2018-W52<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>fallbackLabel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What week would you like to start?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>fallbackWeekPicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Week:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>fallbackWeek<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>week<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Year:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>year<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>2017<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>2018<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2018<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The week values are dynamically generated by the JavaScript code below.</p> <p>The other part of the code that may be of interest is the feature detection code. To detect whether the browser supports <code><input type="week"></code>, we create a new <a href="../input"><code><input></code></a> element, try setting its <code>type</code> to <code>week</code>, then immediately check what its <code>type</code> is set to. Non-supporting browsers will return <code>text</code>, because the <code>week</code> type falls back to type <code>text</code>. If <code><input type="week"></code> is not supported, we hide the native picker and show the fallback picker UI (<a href="../select"><code><select></code></a>s) instead.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="nqTtjvcW5yQSer5JqjQ0mgZehIU0tQ+CY2+L1gaBmjk=" data-language="js"><span class="token comment">// Get UI elements</span> +<span class="token keyword">const</span> nativePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".nativeWeekPicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackWeekPicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackLabel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackLabel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> yearSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#year"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> weekSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fallbackWeek"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// Hide fallback initially</span> +fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> +fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + +<span class="token comment">// Test whether a new date input falls back to a text input or not</span> +<span class="token keyword">const</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">try</span> <span class="token punctuation">{</span> + test<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"week"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>description<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// If it does, run the code inside the if () {} block</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Hide the native picker and show the fallback</span> + nativePicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + <span class="token comment">// populate the weeks dynamically</span> + <span class="token function">populateWeeks</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateWeeks</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Populate the week select with 52 weeks</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">52</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> i <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token operator">:</span> i<span class="token punctuation">;</span> + weekSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year" target="_blank">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> </div> +</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 representing a week and year, or empty </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, and <code>list</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> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</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#week-state-(type=week)">HTML Standard <br><small># week-state-(type=week)</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>week</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li> +<a href="datetime-local"><code><input type="datetime-local"></code></a>, <a href="date"><code><input type="date"></code></a>, <a href="time"><code><input type="time"></code></a>, and <a href="month"><code><input type="month"></code></a> +</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"> + © 2005–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/week" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week</a> + </p> +</div> diff --git a/devdocs/html/element%2Finput.html b/devdocs/html/element%2Finput.html new file mode 100644 index 00000000..1195f556 --- /dev/null +++ b/devdocs/html/element%2Finput.html @@ -0,0 +1,1191 @@ +<header><h1><input>: The Input (Form Input) element</h1></header><div class="section-content"><p>The <code><input></code> <a href="../index">HTML</a> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. The <code><input></code> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.</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/input-text.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="input_types"><input> types</h2> +<div class="section-content"> +<p>How an <code><input></code> works varies considerably depending on the value of its <a href="#type"><code>type</code></a> attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is <code>text</code>.</p> <p>The available types are as follows:</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <colgroup> <col> <col style="width: 50%"> <col> </colgroup> <thead> <tr> <th>Type</th> <th>Description</th> <th>Basic Examples</th> </tr> </thead> <tbody> <tr> <td><a href="input/button">button</a></td> <td>A push button with no default behavior displaying the value of the <a href="#value"><code>value</code></a> attribute, empty by default.</td> <td id="examplebutton"> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="examplebutton sample" id="frame_examplebutton" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplebutton" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/checkbox">checkbox</a></td> <td>A check box allowing single values to be selected/deselected.</td> <td id="examplecheckbox"> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="examplecheckbox sample" id="frame_examplecheckbox" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplecheckbox" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/color">color</a></td> <td>A control for specifying a color; opening a color picker when active in supporting browsers.</td> <td id="examplecolor"> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="examplecolor sample" id="frame_examplecolor" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplecolor" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/date">date</a></td> <td> A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. </td> <td id="exampledate"> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="exampledate sample" id="frame_exampledate" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampledate" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/datetime-local">datetime-local</a></td> <td> A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. </td> <td id="exampledtl"> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="exampledtl sample" id="frame_exampledtl" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampledtl" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/email">email</a></td> <td> A field for editing an email address. Looks like a <code>text</code> input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. </td> <td id="exampleemail"> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="exampleemail sample" id="frame_exampleemail" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampleemail" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/file">file</a></td> <td> A control that lets the user select a file. Use the <a href="#accept"><code>accept</code></a> attribute to define the types of files that the control can select. </td> <td id="examplefile"> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="examplefile sample" id="frame_examplefile" width="100%" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplefile" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/hidden">hidden</a></td> <td> A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! </td> <td id="examplehidden"> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="examplehidden sample" id="frame_examplehidden" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplehidden" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/image">image</a></td> <td> A graphical <code>submit</code> button. Displays an image defined by the <code>src</code> attribute. The <a href="#alt"><code>alt</code></a> attribute displays if the image <a href="#src"><code>src</code></a> is missing. </td> <td id="exampleimage"> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="exampleimage sample" id="frame_exampleimage" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampleimage" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/month">month</a></td> <td>A control for entering a month and year, with no time zone.</td> <td id="examplemonth"> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="examplemonth sample" id="frame_examplemonth" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplemonth" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/number">number</a></td> <td> A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. </td> <td id="examplenumber"> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="examplenumber sample" id="frame_examplenumber" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplenumber" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/password">password</a></td> <td> A single-line text field whose value is obscured. Will alert user if site is not secure. </td> <td id="examplepassword"> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="examplepassword sample" id="frame_examplepassword" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplepassword" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/radio">radio</a></td> <td>A radio button, allowing a single value to be selected out of multiple choices with the same <a href="#name"><code>name</code></a> value.</td> <td id="exampleradio"> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="exampleradio sample" id="frame_exampleradio" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampleradio" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/range">range</a></td> <td> A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a> to define the range of acceptable values. </td> <td id="examplerange"> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="examplerange sample" id="frame_examplerange" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplerange" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/reset">reset</a></td> <td>A button that resets the contents of the form to default values. Not recommended.</td> <td id="examplereset"> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="examplereset sample" id="frame_examplereset" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplereset" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/search">search</a></td> <td> A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. </td> <td id="examplesearch"> +<div class="code-example" id="sect16"> + +<iframe class="sample-code-frame" title="examplesearch sample" id="frame_examplesearch" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplesearch" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/submit">submit</a></td> <td>A button that submits the form.</td> <td id="examplesubmit"> +<div class="code-example" id="sect17"> + +<iframe class="sample-code-frame" title="examplesubmit sample" id="frame_examplesubmit" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=examplesubmit" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/tel">tel</a></td> <td> A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. </td> <td id="exampletel"> +<div class="code-example" id="sect18"> + +<iframe class="sample-code-frame" title="exampletel sample" id="frame_exampletel" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampletel" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/text">text</a></td> <td> The default value. A single-line text field. Line-breaks are automatically removed from the input value. </td> <td id="exampletext"> +<div class="code-example" id="sect19"> + +<iframe class="sample-code-frame" title="exampletext sample" id="frame_exampletext" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampletext" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/time">time</a></td> <td>A control for entering a time value with no time zone.</td> <td id="exampletime"> +<div class="code-example" id="sect20"> + +<iframe class="sample-code-frame" title="exampletime sample" id="frame_exampletime" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampletime" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/url">url</a></td> <td> A field for entering a URL. Looks like a <code>text</code> input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. </td> <td id="exampleurl"> +<div class="code-example" id="sect21"> + +<iframe class="sample-code-frame" title="exampleurl sample" id="frame_exampleurl" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampleurl" loading="lazy"></iframe> +</div> </td> </tr> <tr> <td><a href="input/week">week</a></td> <td>A control for entering a date consisting of a week-year number and a week number with no time zone.</td> <td id="exampleweek"> +<div class="code-example" id="sect22"> + +<iframe class="sample-code-frame" title="exampleweek sample" id="frame_exampleweek" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampleweek" loading="lazy"></iframe> +</div> </td> </tr> <tr> <th colspan="3">Obsolete values</th> </tr> <tr> <td> +<code>datetime</code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</td> <td>A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.</td> <td id="exampledatetime"> +<div class="code-example" id="sect23"> + +<iframe class="sample-code-frame" title="exampledatetime sample" id="frame_exampledatetime" width="200" height="75" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=exampledatetime" loading="lazy"></iframe> +</div> </td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>The <code><input></code> element is so powerful because of its attributes; the <a href="#type"><code>type</code></a> attribute, described with examples above, being the most important. Since every <code><input></code> element, regardless of type, is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.</p> <p>This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p> <p>Attributes for the <code><input></code> element include the <a href="../global_attributes">global HTML attributes</a> and additionally:</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Attribute</th> <th>Type or Types</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="#accept"><code>accept</code></a></td> <td><code>file</code></td> <td>Hint for expected file type in file upload controls</td> </tr> <tr> <td><a href="#alt"><code>alt</code></a></td> <td><code>image</code></td> <td>alt attribute for the image type. Required for accessibility</td> </tr> <tr> <td><a href="#autocomplete"><code>autocomplete</code></a></td> <td>all except <code>checkbox</code>, <code>radio</code>, and buttons</td> <td>Hint for form autofill feature</td> </tr> <tr> <td><a href="#capture"><code>capture</code></a></td> <td><code>file</code></td> <td>Media capture input method in file upload controls</td> </tr> <tr> <td><a href="#checked"><code>checked</code></a></td> <td> +<code>checkbox</code>, <code>radio</code> +</td> <td>Whether the command or control is checked</td> </tr> <tr> <td><a href="#dirname"><code>dirname</code></a></td> <td> +<code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code> +</td> <td>Name of form field to use for sending the element's directionality in form submission</td> </tr> <tr> <td><a href="#disabled"><code>disabled</code></a></td> <td>all</td> <td>Whether the form control is disabled</td> </tr> <tr> <td><a href="#form"><code>form</code></a></td> <td>all</td> <td>Associates the control with a form element</td> </tr> <tr> <td><a href="#formaction"><code>formaction</code></a></td> <td> +<code>image</code>, <code>submit</code> +</td> <td>URL to use for form submission</td> </tr> <tr> <td><a href="#formenctype"><code>formenctype</code></a></td> <td> +<code>image</code>, <code>submit</code> +</td> <td>Form data set encoding type to use for form submission</td> </tr> <tr> <td><a href="#formmethod"><code>formmethod</code></a></td> <td> +<code>image</code>, <code>submit</code> +</td> <td>HTTP method to use for form submission</td> </tr> <tr> <td><a href="#formnovalidate"><code>formnovalidate</code></a></td> <td> +<code>image</code>, <code>submit</code> +</td> <td>Bypass form control validation for form submission</td> </tr> <tr> <td><a href="#formtarget"><code>formtarget</code></a></td> <td> +<code>image</code>, <code>submit</code> +</td> <td>Browsing context for form submission</td> </tr> <tr> <td><a href="#height"><code>height</code></a></td> <td><code>image</code></td> <td>Same as height attribute for <a href="img"><code><img></code></a>; vertical dimension</td> </tr> <tr> <td><a href="#list"><code>list</code></a></td> <td>all except <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and buttons</td> <td>Value of the id attribute of the <a href="datalist"><code><datalist></code></a> of autocomplete options</td> </tr> <tr> <td><a href="#max"><code>max</code></a></td> <td> +<code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> +</td> <td>Maximum value</td> </tr> <tr> <td><a href="#maxlength"><code>maxlength</code></a></td> <td> +<code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> +</td> <td>Maximum length (number of characters) of <code>value</code> +</td> </tr> <tr> <td><a href="#min"><code>min</code></a></td> <td> +<code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> +</td> <td>Minimum value</td> </tr> <tr> <td><a href="#minlength"><code>minlength</code></a></td> <td> +<code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> +</td> <td>Minimum length (number of characters) of <code>value</code> +</td> </tr> <tr> <td><a href="#multiple"><code>multiple</code></a></td> <td> +<code>email</code>, <code>file</code> +</td> <td>Boolean. Whether to allow multiple values</td> </tr> <tr> <td><a href="#name"><code>name</code></a></td> <td>all</td> <td>Name of the form control. Submitted with the form as part of a name/value pair</td> </tr> <tr> <td><a href="#pattern"><code>pattern</code></a></td> <td> +<code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> +</td> <td>Pattern the <code>value</code> must match to be valid</td> </tr> <tr> <td><a href="#placeholder"><code>placeholder</code></a></td> <td> +<code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>number</code> +</td> <td>Text that appears in the form control when it has no value set</td> </tr> <tr> <td><a href="#popovertarget"><code>popovertarget</code></a></td> <td><code>button</code></td> <td>Designates an <code><input type="button"></code> as a control for a popover element</td> </tr> <tr> <td><a href="#popovertargetaction"><code>popovertargetaction</code></a></td> <td><code>button</code></td> <td>Specifies the action that a popover control should perform</td> </tr> <tr> <td><a href="#readonly"><code>readonly</code></a></td> <td>all except <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, and buttons</td> <td>Boolean. The value is not editable</td> </tr> <tr> <td><a href="#required"><code>required</code></a></td> <td>all except <code>hidden</code>, <code>range</code>, <code>color</code>, and buttons</td> <td>Boolean. A value is required or must be checked for the form to be submittable</td> </tr> <tr> <td><a href="#size"><code>size</code></a></td> <td> +<code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> +</td> <td>Size of the control</td> </tr> <tr> <td><a href="#src"><code>src</code></a></td> <td><code>image</code></td> <td>Same as <code>src</code> attribute for <a href="img"><code><img></code></a>; address of image resource</td> </tr> <tr> <td><a href="#step"><code>step</code></a></td> <td> +<code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> +</td> <td>Incremental values that are valid</td> </tr> <tr> <td><a href="#type"><code>type</code></a></td> <td>all</td> <td>Type of form control</td> </tr> <tr> <td><a href="#value"><code>value</code></a></td> <td>all except <code>image</code> +</td> <td>The initial value of the control</td> </tr> <tr> <td><a href="#width"><code>width</code></a></td> <td><code>image</code></td> <td>Same as <code>width</code> attribute for <a href="img"><code><img></code></a> +</td> </tr> </tbody> </table></div></figure> <p>A few additional non-standard attributes are listed following the descriptions of the standard attributes.</p> +</div> +<h3 id="individual_attributes">Individual attributes</h3> +<div class="section-content"><dl> <dt id="accept"><a href="#accept"><code>accept</code></a></dt> <dd> <p>Valid for the <code>file</code> input type only, the <code>accept</code> attribute defines which file types are selectable in a <code>file</code> upload control. See the <a href="input/file">file</a> input type.</p> </dd> <dt id="alt"><a href="#alt"><code>alt</code></a></dt> <dd> <p>Valid for the <code>image</code> button only, the <code>alt</code> attribute provides alternative text for the image, displaying the value of the attribute if the image <a href="#src"><code>src</code></a> is missing or otherwise fails to load. See the <a href="input/image">image</a> input type.</p> </dd> <dt id="sect24"><a href="../attributes/autocomplete"><code>autocomplete</code></a></dt> <dd> <p>(<strong>Not</strong> a Boolean attribute!) The <a href="../attributes/autocomplete"><code>autocomplete</code></a> attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete <code>email</code> addresses in an email input field. See <a href="../attributes/autocomplete#values"><code>autocomplete</code></a> for permitted values.</p> <p>The <code>autocomplete</code> attribute is valid on <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>password</code>. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> <p>See the <a href="../attributes/autocomplete"><code>autocomplete</code> attribute</a> for additional information, including information on password security and how <code>autocomplete</code> is slightly different for <code>hidden</code> than for other input types.</p> </dd> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <a href="dialog"><code><dialog></code></a> containing the element has been displayed).</p> <div class="notecard note" id="sect25"> <p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> event is fired.</p> </div> <p>No more than one element in the document may have the <code>autofocus</code> attribute. If put on more than one element, the first one with the attribute receives focus.</p> <p>The <code>autofocus</code> attribute cannot be used on inputs of type <code>hidden</code>, since hidden inputs cannot be focused.</p> <div class="notecard warning" id="sect26"> <p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p> </div> <p>Use careful consideration for accessibility when applying the <code>autofocus</code> attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.</p> </dd> <dt id="capture"><a href="#capture"><code>capture</code></a></dt> <dd> <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the <a href="input/file">file</a> input type.</p> </dd> <dt id="checked"><a href="#checked"><code>checked</code></a></dt> <dd> <p>Valid for both <code>radio</code> and <code>checkbox</code> types, <code>checked</code> is a Boolean attribute. If present on a <code>radio</code> type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>'s <code>checked</code> IDL attribute</a> is updated.)</p> <div class="notecard note" id="sect27"> <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p> <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p> </div> </dd> <dt id="dirname"><a href="#dirname"><code>dirname</code></a></dt> <dd> <p>Valid for <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, and <code>email</code> input types, the <code>dirname</code> attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the <a href="#name"><code>name</code></a> and <a href="#value"><code>value</code></a>, and the second being the value of the <code>dirname</code> attribute as the name, with a value of <code>ltr</code> or <code>rtl</code> as set by the browser.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SpqNMW45tpDQe81d6+z5BZXvy3gm9u/dq7+gHTSX/qE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page.html<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Fruit: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruit<span class="token punctuation">"</span></span> <span class="token attr-name">dirname</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruit-dir<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>cherry<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token comment"><!-- page.html?fruit=cherry&fruit-dir=ltr --></span> +</pre> +</div> <p> When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit-dir=ltr</code> to be sent. For more information, see the <a href="../attributes/dirname"><code>dirname</code> attribute</a>. </p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p> <p>Specifically, disabled inputs do not receive the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event, and disabled inputs are not submitted with the form.</p> <div class="notecard note" id="sect28"> <p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persist the dynamic disabled state</a> of an <code><input></code> across page loads. Use the <a href="#autocomplete"><code>autocomplete</code></a> attribute to control this feature.</p> </div> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>A string specifying the <a href="form"><code><form></code></a> element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the <a href="#id"><code>id</code></a> of a <code><form></code> element in the same document. If this attribute isn't specified, the <code><input></code> element is associated with the nearest containing form, if any.</p> <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p> <div class="notecard note" id="sect29"> <p><strong>Note:</strong> An input can only be associated with one form.</p> </div> </dd> <dt id="formaction"><a href="#formaction"><code>formaction</code></a></dt> <dd> <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the <a href="input/submit">submit</a> input type for more information.</p> </dd> <dt id="formenctype"><a href="#formenctype"><code>formenctype</code></a></dt> <dd> <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the <a href="input/submit">submit</a> input type for more information.</p> </dd> <dt id="formmethod"><a href="#formmethod"><code>formmethod</code></a></dt> <dd> <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the <a href="input/submit">submit</a> input type for more information.</p> </dd> <dt id="formnovalidate"><a href="#formnovalidate"><code>formnovalidate</code></a></dt> <dd> <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the <a href="input/submit">submit</a> input type for more information.</p> </dd> <dt id="formtarget"><a href="#formtarget"><code>formtarget</code></a></dt> <dd> <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the <a href="input/submit">submit</a> input type for more information.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>Valid for the <code>image</code> input button only, the <code>height</code> is the height of the image file to display to represent the graphical submit button. See the <a href="input/image">image</a> input type.</p> </dd> <dt id="id"><a href="#id"><code>id</code></a></dt> <dd> <p>Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the <a href="label"><code><label></code></a>'s <code>for</code> attribute to link the label with the form control. See <a href="label"><code><label></code></a>.</p> </dd> <dt id="inputmode"><a href="#inputmode"><code>inputmode</code></a></dt> <dd> <p>Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include <code>none</code>, <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code>.</p> </dd> <dt id="list"><a href="#list"><code>list</code></a></dt> <dd> <p>The value given to the <code>list</code> attribute should be the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="datalist"><code><datalist></code></a> element located in the same document. The <code><datalist></code> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p> <p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color</code>.</p> <p>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p> <p>Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even an input that opens like a <a href="select"><code><select></code></a> but allows for non-listed values. Check out the <a href="datalist#browser_compatibility">browser compatibility table</a> for the other input types.</p> <p>See the <a href="datalist"><code><datalist></code></a> element.</p> </dd> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the greatest value in the range of permitted values. If the <a href="#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> <p>There is a special case: if the data type is periodic (such as for dates or times), the value of <code>max</code> may be lower than the value of <code>min</code>, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.</p> </dd> <dt id="maxlength"><a href="#maxlength"><code>maxlength</code></a></dt> <dd> <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the maximum string length (measured in UTF-16 code units) that the user can enter into the field. This must be an integer value of 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p> <p>The input will fail <a href="../constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the <code>maxlength</code> attribute. See <a href="#client-side_validation">Client-side validation</a> for more information.</p> </dd> <dt id="min"><a href="#min"><code>min</code></a></dt> <dd> <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the most negative value in the range of permitted values. If the <a href="#value"><code>value</code></a> entered into the element is less than this, the element fails <a href="../constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a number, then the element has no minimum value.</p> <p>This value must be less than or equal to the value of the <code>max</code> attribute. If the <code>min</code> attribute is present but is not specified or is invalid, no <code>min</code> value is applied. If the <code>min</code> attribute is valid and a non-empty value is less than the minimum allowed by the <code>min</code> attribute, constraint validation will prevent form submission. See <a href="#client-side_validation">Client-side validation</a> for more information.</p> <p>There is a special case: if the data type is periodic (such as for dates or times), the value of <code>max</code> may be lower than the value of <code>min</code>, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM.</p> </dd> <dt id="minlength"><a href="#minlength"><code>minlength</code></a></dt> <dd> <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the minimum string length (measured in UTF-16 code units) that the user can enter into the entry field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p> <p>The input will fail <a href="../constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See <a href="#client-side_validation">Client-side validation</a> for more information.</p> </dd> <dt id="multiple"><a href="#multiple"><code>multiple</code></a></dt> <dd> <p>The Boolean <code>multiple</code> attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the <code>file</code> input. See the <a href="input/email">email</a> and <a href="input/file">file</a> input type.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.</p> <p>Consider the <code>name</code> a required attribute (even though it's not). If an input has no <code>name</code> specified, or <code>name</code> is empty, the input's value is not submitted with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)</p> <p>There are two special cases:</p> <ol> <li> +<code>_charset_</code> : If used as the name of an <code><input></code> element of type <a href="input/hidden">hidden</a>, the input's <code>value</code> is automatically set by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> to the character encoding being used to submit the form.</li> <li> +<code>isindex</code>: For historical reasons, the name <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name" target="_blank"><code>isindex</code></a> is not allowed.</li> </ol> <p>The <a href="#name"><code>name</code></a> attribute creates a unique behavior for radio buttons.</p> <p>Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,</p> <p>When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.</p> <p>Once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.</p> <p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> property. If you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="VJAAvf1YpFJYgMbjyVpku+0tptK/b7Y+hl5JUxZ94Iw=" data-language="js"><span class="token keyword">let</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">let</span> guestName <span class="token operator">=</span> form<span class="token punctuation">.</span>elements<span class="token punctuation">.</span>guest<span class="token punctuation">;</span> +<span class="token keyword">let</span> hatSize <span class="token operator">=</span> form<span class="token punctuation">.</span>elements<span class="token punctuation">[</span><span class="token string">"hat-size"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> +</pre> +</div> <p>When this code has run, <code>guestName</code> will be the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p> <div class="notecard warning" id="sect30"> <p><strong>Warning:</strong> Avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p> </div> </dd> <dt id="pattern"><a href="#pattern"><code>pattern</code></a></dt> <dd> <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, the <code>pattern</code> attribute defines a regular expression that the input's <a href="#value"><code>value</code></a> must match in order for the value to pass <a href="../constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> type, and as documented in our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a>. No forward slashes should be specified around the pattern text.</p> <p>If the <code>pattern</code> attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.</p> <div class="notecard note" id="sect31"> <p><strong>Note:</strong> If using the <code>pattern</code> attribute, inform the user about the expected format by including explanatory text nearby. You can also include a <a href="#title"><code>title</code></a> attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement.</p> </div> <p>See <a href="#client-side_validation">Client-side validation</a> for more information.</p> </dd> <dt id="placeholder"><a href="#placeholder"><code>placeholder</code></a></dt> <dd> <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, and <code>number</code>, the <code>placeholder</code> attribute provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text <em>must not</em> include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is "First Name", a suitable placeholder might be "e.g. Mustafa".</p> <div class="notecard note" id="sect32"> <p><strong>Note:</strong> The <code>placeholder</code> attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="#labels">Labels</a> for more information.</p> </div> </dd> <dt id="popovertarget"><a href="#popovertarget"><code>popovertarget</code></a></dt> <dd> <p>Turns an <code><input type="button"></code> element into a popover control button; takes the ID of the popover element to control as its value. See the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> landing page for more details.</p> </dd> <dt id="popovertargetaction"><a href="#popovertargetaction"><code>popovertargetaction</code></a></dt> <dd> <p>Specifies the action to be performed on a popover element being controlled by a control <code><input type="button"></code>. Possible values are:</p> <dl> <dt id="hide"><a href="#hide"><code>"hide"</code></a></dt> <dd> <p>The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken.</p> </dd> <dt id="show"><a href="#show"><code>"show"</code></a></dt> <dd> <p>The button will show a hidden popover. If you try to show an already showing popover, no action will be taken.</p> </dd> <dt id="toggle"><a href="#toggle"><code>"toggle"</code></a></dt> <dd> <p>The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If <code>popovertargetaction</code> is omitted, <code>"toggle"</code> is the default action that will be performed by the control button.</p> </dd> </dl> </dd> <dt id="readonly"><a href="#readonly"><code>readonly</code></a></dt> <dd> <p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The <code>readonly</code> attribute is supported by the <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>password</code> input types.</p> <p>See the <a href="../attributes/readonly">HTML attribute: <code>readonly</code></a> for more information.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported by <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and <code>file</code> inputs.</p> <p>See <a href="#client-side_validation">Client-side validation</a> and the <a href="../attributes/required">HTML attribute: <code>required</code></a> for more information.</p> </dd> <dt id="size"><a href="#size"><code>size</code></a></dt> <dd> <p>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, <code>url</code>, and <code>text</code>, the <code>size</code> attribute specifies how much of the input is shown. Basically creates same result as setting CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property with a few specialities. The actual unit of the value depends on the input type. For <code>password</code> and <code>text</code>, it is a number of characters (or <code>em</code> units) with a default value of <code>20</code>, and for others, it is pixels (or <code>px</code> units). CSS <code>width</code> takes precedence over the <code>size</code> attribute.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the <a href="input/image">image</a> input type.</p> </dd> <dt id="step"><a href="#step"><code>step</code></a></dt> <dd> <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, the <a href="../attributes/step"><code>step</code></a> attribute is a number that specifies the granularity that the value must adhere to.</p> <p>If not explicitly included:</p> <ul> <li> +<code>step</code> defaults to 1 for <code>number</code> and <code>range</code>.</li> <li>Each date/time input type has a default <code>step</code> value appropriate for the type; see the individual input pages: <a href="input/date#step"><code>date</code></a>, <a href="input/datetime-local#step"><code>datetime-local</code></a>, <a href="input/month#step"><code>month</code></a>, <a href="input/time#step"><code>time</code></a>, and <a href="input/week#step"><code>week</code></a>.</li> </ul> <p>The value must be a positive number—integer or float—or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <p>If <code>any</code> is not explicitly set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping — the <a href="#min"><code>min</code></a> value and increments of the step value, up to the <a href="#max"><code>max</code></a> value, if specified.</p> <p>For example, if you have <code><input type="number" min="10" step="2"></code>, then any even integer, <code>10</code> or greater, is valid. If omitted, <code><input type="number"></code>, any integer is valid, but floats (like <code>4.2</code>) are not valid, because <code>step</code> defaults to <code>1</code>. For <code>4.2</code> to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the <code>min</code> value would have had to be a number ending in <code>.2</code>, such as <code><input type="number" min="-5.2"></code></p> <div class="notecard note" id="sect33"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the <code>:invalid</code> pseudoclass.</p> </div> <p>See <a href="#client-side_validation">Client-side validation</a> for more information.</p> </dd> <dt id="tabindex"><a href="#tabindex"><code>tabindex</code></a></dt> <dd> <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p> </dd> <dt id="title"><a href="#title"><code>title</code></a></dt> <dd> <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the <a href="label"><code><label></code></a> element with a <code>for</code> attribute set to the form control's <a href="#id"><code>id</code></a> attribute. See <a href="#labels">Labels</a> below.</p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p> <p>Permitted values are listed in <a href="#input_types">Input types</a> above.</p> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> object's <code>value</code> property. The <code>value</code> attribute is always optional, though should be considered mandatory for <code>checkbox</code>, <code>radio</code>, and <code>hidden</code>.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the <a href="input/image">image</a> input type.</p> </dd> </dl></div> +<h3 id="non-standard_attributes">Non-standard attributes</h3> +<div class="section-content"> +<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><a href="#autocapitalize"><code>autocapitalize</code></a></td> <td>A string indicating how auto-capitalization should be applied to the content of text elements. <strong>Safari only.</strong> +</td> </tr> <tr> <td><a href="#autocorrect"><code>autocorrect</code></a></td> <td>A string indicating whether autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong> +</td> </tr> <tr> <td><a href="#incremental"><code>incremental</code></a></td> <td> Whether or not to send repeated <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event"><code>search</code></a> events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong> </td> </tr> <tr> <td> +<code>mozactionhint</code> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</td> <td> <p> A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Since this attribute is deprecated, use <a href="../global_attributes/enterkeyhint"><code>enterkeyhint</code></a> instead.</strong> </p> </td> </tr> <tr> <td><a href="#orient"><code>orient</code></a></td> <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td> </tr> <tr> <td><a href="#results"><code>results</code></a></td> <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong> +</td> </tr> <tr> <td><a href="#webkitdirectory"><code>webkitdirectory</code></a></td> <td>A Boolean indicating whether to only allow the user to choose a directory (or directories, if <a href="#multiple"><code>multiple</code></a> is also present)</td> </tr> </tbody> </table></div></figure> <dl> <dt id="autocapitalize"> +<a href="#autocapitalize"><code>autocapitalize</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>(Safari only). A string which indicates how auto-capitalization should be applied while the user is editing this field. Permitted values are:</p> <dl> <dt id="none"><a href="#none"><code>none</code></a></dt> <dd> <p>Do not automatically capitalize any text</p> </dd> <dt id="sentences"><a href="#sentences"><code>sentences</code></a></dt> <dd> <p>Automatically capitalize the first character of each sentence.</p> </dd> <dt id="words"><a href="#words"><code>words</code></a></dt> <dd> <p>Automatically capitalize the first character of each word.</p> </dd> <dt id="characters"><a href="#characters"><code>characters</code></a></dt> <dd> <p>Automatically capitalize every character.</p> </dd> </dl> </dd> <dt id="autocorrect"> +<a href="#autocorrect"><code>autocorrect</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>(Safari only). A string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic correction of typos, as well as processing of text substitutions if any are configured.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic correction and text substitutions.</p> </dd> </dl> </dd> <dt id="incremental"> +<a href="#incremental"><code>incremental</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The Boolean attribute <code>incremental</code> is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> to process the input as a live search. As the user edits the value of the field, the user agent sends <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event"><code>search</code></a> events to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> object representing the search box. This allows your code to update the search results in real time as the user edits the search.</p> <p>If <code>incremental</code> is not specified, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/search_event"><code>search</code></a> event is only sent when the user explicitly initiates a search (such as by pressing the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field).</p> <p>The <code>search</code> event is rate-limited so that it is not sent more frequently than an implementation-defined interval.</p> </dd> <dt id="orient"> +<a href="#orient"><code>orient</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Similar to the -moz-orient non-standard CSS property impacting the <a href="progress"><code><progress></code></a> and <a href="meter"><code><meter></code></a> elements, the <code>orient</code> attribute defines the orientation of the range slider. Values include <code>horizontal</code>, meaning the range is rendered horizontally, and <code>vertical</code>, where the range is rendered vertically.</p> </dd> <dt id="results"> +<a href="#results"><code>results</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The <code>results</code> attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the <a href="input" aria-current="page"><code><input></code></a> element's natively-provided drop-down menu of previous search queries.</p> <p>The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.</p> </dd> <dt id="webkitdirectory"> +<a href="#webkitdirectory"><code>webkitdirectory</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The Boolean <code>webkitdirectory</code> attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory"><code>HTMLInputElement.webkitdirectory</code></a> for additional details and examples.</p> <p>Though originally implemented only for WebKit-based browsers, <code>webkitdirectory</code> is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.</p> </dd> </dl> +</div> +<h2 id="methods">Methods</h2> +<div class="section-content"> +<p>The following methods are provided by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface which represents <code><input></code> elements in the DOM. Also available are those methods specified by the parent interfaces, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element"><code>Element</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node"><code>Node</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</p> <dl> <dt id="sect34"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"><code>checkValidity()</code></a></dt> <dd> <p>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code> and fires an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code></a> event at the element.</p> </dd> <dt id="sect35"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"><code>reportValidity()</code></a></dt> <dd> <p>Returns <code>true</code> if the element's value passes validity checks; otherwise, returns <code>false</code>, fires an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code></a> event at the element, and (if the event isn't canceled) reports the problem to the user.</p> </dd> <dt id="sect36"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></dt> <dd> <p>Selects the entire content of the <code><input></code> element, if the element's content is selectable. For elements with no selectable text content (such as a visual color picker or calendar date input), this method does nothing.</p> </dd> <dt id="sect37"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"><code>setCustomValidity()</code></a></dt> <dd> <p>Sets a custom message to display if the input element's value isn't valid.</p> </dd> <dt id="sect38"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setRangeText"><code>setRangeText()</code></a></dt> <dd> <p>Sets the contents of the specified range of characters in the input element to a given string. A <code>selectMode</code> parameter is available to allow controlling how the existing content is affected.</p> </dd> <dt id="sect39"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange"><code>setSelectionRange()</code></a></dt> <dd> <p>Selects the specified range of characters within a textual input element. Does nothing for inputs which aren't presented as text input fields.</p> </dd> <dt id="sect40"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker"><code>showPicker()</code></a></dt> <dd> <p>Displays the browser picker for the input element that would normally be displayed when the element is selected, but triggered from a button press or other user interaction.</p> </dd> <dt id="sect41"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a></dt> <dd> <p>Decrements the value of a numeric input by one, by default, or by the specified number of units.</p> </dd> <dt id="sect42"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a></dt> <dd> <p>Increments the value of a numeric input by one or by the specified number of units.</p> </dd> </dl> +</div> +<h2 id="css">CSS</h2> +<div class="section-content"><p>Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specifically target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.</p></div> +<h3 id="ui_pseudo-classes">UI pseudo-classes</h3> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Captions super relevant to the <code><input></code> element: </caption> <thead> <tr> <th>Pseudo-class</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled"><code>:enabled</code></a></td> <td> Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled"><code>:disabled</code></a></td> <td> Any currently disabled element that has an enabled state, meaning it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only"><code>:read-only</code></a></td> <td>Element not editable by the user</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write"><code>:read-write</code></a></td> <td>Element that is editable by the user.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown"><code>:placeholder-shown</code></a></td> <td> Element that is currently displaying <a href="#placeholder"><code>placeholder</code> text</a>, including <code><input></code> and <a href="textarea"><code><textarea></code></a> elements with the <a href="#placeholder"><code>placeholder</code></a> attribute present that has, as yet, no value. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:default"><code>:default</code></a></td> <td> Form elements that are the default in a group of related elements. Matches <a href="input/checkbox">checkbox</a> and <a href="input/radio">radio</a> input types that were checked on page load or render. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked"><code>:checked</code></a></td> <td> Matches <a href="input/checkbox">checkbox</a> and <a href="input/radio">radio</a> input types that are currently checked (and the (<a href="option"><code><option></code></a> in a <a href="select"><code><select></code></a> that is currently selected). </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a></td> <td> <a href="input/checkbox">checkbox</a> elements whose indeterminate property is set to true by JavaScript, <a href="input/radio">radio</a> elements, when all radio buttons with the same name value in the form are unchecked, and <a href="progress"><code><progress></code></a> elements in an indeterminate state </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a></td> <td> Form controls that can have constraint validation applied and are currently valid. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a></td> <td> Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by its attributes, such as <a href="#required"><code>required</code></a>, <a href="#pattern"><code>pattern</code></a>, <a href="#step"><code>step</code></a> and <a href="#max"><code>max</code></a>. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range"><code>:in-range</code></a></td> <td> A non-empty input whose current value is within the range limits specified by the <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a> attributes and the <a href="#step"><code>step</code></a>. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></td> <td> A non-empty input whose current value is NOT within the range limits specified by the <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a> attributes or does not adhere to the <a href="#step"><code>step</code></a> constraint. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a></td> <td> <code><input></code>, <a href="select"><code><select></code></a>, or <a href="textarea"><code><textarea></code></a> element that has the <a href="#required"><code>required</code></a> attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a></td> <td> <code><input></code>, <a href="select"><code><select></code></a>, or <a href="textarea"><code><textarea></code></a> element that does NOT have the <a href="#required"><code>required</code></a> attribute set on it. Does not match elements that can't be required. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:blank"><code>:blank</code></a></td> <td> +<code><input></code> and <a href="textarea"><code><textarea></code></a> elements that currently have no value.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid"><code>:user-invalid</code></a></td> <td> Similar to <code>:invalid</code>, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control. </td> </tr> </tbody> </table></div></figure> <h4 id="pseudo-classes_example">Pseudo-classes example</h4> <p>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> of the <a href="label"><code><label></code></a> that comes immediately after a checked input. We haven't applied any styles if the <code>input</code> is not checked.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="LeGdovSmSJTnwql9Cnk37QKvxT4bob2xvLGgtCv4ufc=" data-language="css"><span class="token selector">input:checked + label</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect43"> + +<iframe class="sample-code-frame" title="Pseudo-classes example sample" id="frame_pseudo-classes_example" width="500" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=pseudo-classes_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="attribute_selectors">Attribute selectors</h3> +<div class="section-content"> +<p>It is possible to target different types of form controls based on their <a href="#type"><code>type</code></a> using <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of an attribute or the value of a given attribute.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="DWCopqr+iRb5kdljszHR180NAMTCE/2772olTJHSIjI=" data-language="css"><span class="token comment">/* matches a password input */</span> +<span class="token selector">input[type="password"]</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span> + +<span class="token comment">/* matches a form control whose valid values are limited to a range of values*/</span> +<span class="token selector">input[min][max]</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span> + +<span class="token comment">/* matches a form control with a pattern attribute */</span> +<span class="token selector">input[pattern]</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="placeholder_2">::placeholder</h3> +<div class="section-content"> +<p>By default, the appearance of placeholder text is a translucent or light gray. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder"><code>::placeholder</code></a> pseudo-element is the input's <a href="#placeholder"><code>placeholder</code> text</a>. It can be styled with a limited subset of CSS properties.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="bvdww/UcUqdKzGaf9D4eHDo+TwF0phu7VaM1jRlNVh0=" data-language="css"><span class="token selector">::placeholder</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Only the subset of CSS properties that apply to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line"><code>::first-line</code></a> pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> +</div> +<h3 id="appearance">appearance</h3> +<div class="section-content"> +<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the <code>none</code> value.</p> <p>You could make a <code><div></code> look like a radio button with <code>div {appearance: radio;}</code> or a radio look like a checkbox with <code>[type="radio"] {appearance: checkbox;}</code>, but don't.</p> <p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p> +</div> +<h3 id="caret-color">caret-color</h3> +<div class="section-content"> +<p>A property specific to text entry-related elements is the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color"><code>caret-color</code></a> property, which lets you set the color used to draw the text input caret:</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qvx218NzGwZIkrNPCqCNJZKBEmmzZszrUbYtAtv3rP0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>textInput<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Note the red caret:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>textInput<span class="token punctuation">"</span></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>custom<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>32<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <h4 id="css_2">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="dPwxFuwn6pEYRmB2gphP7JB+jvqwY+47+RZZ+b4bUbk=" data-language="css"><span class="token selector">input.custom</span> <span class="token punctuation">{</span> + <span class="token property">caret-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Helvetica"</span><span class="token punctuation">,</span> + <span class="token string">"Arial"</span><span class="token punctuation">,</span> + <span class="token string">"sans-serif"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect44"> + +<iframe class="sample-code-frame" title="caret-color sample" id="frame_caret-color" width="500" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=caret-color" loading="lazy"></iframe> +</div> +</div> +<h3 id="object-position_and_object-fit">object-position and object-fit</h3> +<div class="section-content"><p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> properties</p></div> +<h3 id="styling">Styling</h3> +<div class="section-content"> +<p>For more information about adding color to elements in HTML, see:</p> <ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Applying_color">Applying color to HTML elements using CSS</a>.</li> </ul> <p>Also see:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a> and</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">compatibility table of CSS properties</a>.</li> </ul> +</div> +<h2 id="additional_features">Additional features</h2> + +<h3 id="labels">Labels</h3> +<div class="section-content"> +<p>Labels are needed to associate assistive text with an <code><input></code>. The <a href="label"><code><label></code></a> element provides explanatory information about a form field that is <em>always</em> appropriate (aside from any layout concerns you have). It's never a bad idea to use a <code><label></code> to explain what should be entered into an <code><input></code> or <a href="textarea"><code><textarea></code></a>.</p> <h4 id="associated_labels">Associated labels</h4> <p>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'s <a href="label#for"><code>for</code></a> attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</p> <p>It does not suffice to have plain text adjacent to the <code><input></code> element. Rather, usability and accessibility requires the inclusion of either implicit or explicit <a href="label"><code><label></code></a>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PqcObUpa+LaH5swPcB0eVM59vBEZ1RfCKYd++NXCNaE=" data-language="html"><span class="token comment"><!-- inaccessible --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Enter your name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<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 attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- implicit label --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Enter your name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<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 attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- explicit label --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your name: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<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 attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The first example is inaccessible: no relationship exists between the prompt and the <code><input></code> element.</p> <p>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</p> <p>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your website—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</p> <h4 id="placeholders_are_not_accessible">Placeholders are not accessible</h4> <p>The <a href="#placeholder"><code>placeholder</code></a> attribute lets you specify text that appears within the <code><input></code> element's content area itself when it is empty. The placeholder should never be required to understand your forms. It is not a label, and should not be used as a substitute, because it isn't. The placeholder is used to provide a hint as to what an inputted value should look like, not an explanation or prompt.</p> <p>Not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, the placeholder disappears. Browsers with automatic page translation features may skip over attributes when translating, meaning the <code>placeholder</code> may not get translated.</p> <div class="notecard note" id="sect45"> <p><strong>Note:</strong> Don't use the <a href="#placeholder"><code>placeholder</code></a> attribute if you can avoid it. If you need to label an <code><input></code> element, use the <a href="label"><code><label></code></a> element.</p> </div> +</div> +<h3 id="client-side_validation">Client-side validation</h3> +<div class="section-content"> +<div class="notecard warning" id="sect46"> <p><strong>Warning:</strong> Client-side validation is useful, but it does <em>not</em> guarantee that the server will receive valid data. If the data must be in a specific format, <em>always</em> verify it also on the server-side, and return a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400"><code>400</code> HTTP response</a> if the format is invalid.</p> </div> <p>In addition to using CSS to style inputs based on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> UI states based on the current state of each input, as noted in the <a href="#ui_pseudo-classes">UI pseudo-classes</a> section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.</p> <p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code><input type="number" min="2" max="10" step="2"></code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p> <p>For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the <a href="#max"><code>max</code></a> and <a href="#min"><code>min</code></a> properties to be reversed, which indicates that the range of permitted values starts at <code>min</code>, wraps around to the lowest possible value, then continues on until <code>max</code> is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gvX7B0Php+CNV92PbbnzDVvkxNGpmY+YO4VrDt9mcPE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>time<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20:00<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>08:00<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overnight<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Specific attributes and their values can lead to a specific error <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a>:</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Validity object errors depend on the <a href="input" aria-current="page"><code><input></code></a> attributes and their values: </caption> <thead> <tr> <th scope="col">Attribute</th> <th scope="col">Relevant property</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><a href="#max"><code>max</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></td> <td> Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute </td> </tr> <tr> <td><a href="#maxlength"><code>maxlength</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong"><code>validityState.tooLong</code></a></td> <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td> </tr> <tr> <td><a href="#min"><code>min</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></td> <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td> </tr> <tr> <td><a href="#minlength"><code>minlength</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a></td> <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td> </tr> <tr> <td><a href="#pattern"><code>pattern</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch"><code>validityState.patternMismatch</code></a></td> <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td> </tr> <tr> <td><a href="#required"><code>required</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>validityState.valueMissing</code></a></td> <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td> </tr> <tr> <td><a href="#step"><code>step</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></td> <td> The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error. </td> </tr> <tr> <td><a href="#type"><code>type</code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch"><code>validityState.typeMismatch</code></a></td> <td>Occurs when the value is not of the correct type, for example an email does not contain an <code>@</code> or a url doesn't contain a protocol.</td> </tr> </tbody> </table></div></figure> <p>If a form control doesn't have the <code>required</code> attribute, no value, or an empty string, is not invalid. Even if the above attributes are present, with the exception of <code>required</code>, an empty string will not lead to an error.</p> <p>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.</p> <p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>validityState.valueMissing</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/typeMismatch"><code>validityState.typeMismatch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch"><code>validityState.patternMismatch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong"><code>validityState.tooLong</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput"><code>validityState.badInput</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>validityState.valid</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState"><code>validityState.customError</code></a></li> </ul> <p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p> <p>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or <code>null</code>), the form will be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="D2uieCKI70Jblh2X4UcrqeGWzsJDFvBFgE5RCJoWHPY=" data-language="js"><span class="token keyword">function</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> validityState_object <span class="token operator">=</span> input<span class="token punctuation">.</span>validity<span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>validityState_object<span class="token punctuation">.</span>valueMissing<span class="token punctuation">)</span> <span class="token punctuation">{</span> + input<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">"A value is required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>validityState_object<span class="token punctuation">.</span>rangeUnderflow<span class="token punctuation">)</span> <span class="token punctuation">{</span> + input<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">"Your value is too low"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>validityState_object<span class="token punctuation">.</span>rangeOverflow<span class="token punctuation">)</span> <span class="token punctuation">{</span> + input<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">"Your value is too high"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + input<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The last line, setting the custom validity message to the empty string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all the values are valid, until the message is <code>null</code>.</p> <h4 id="custom_validation_error_example">Custom validation error example</h4> <p>If you want to present a custom error message when a field fails to validate, you need to use the <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript">Constraint Validation API</a> available on <code><input></code> (and related) elements. Take the following form:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eEatdwyMGfpRKlR314VnJ8q4rU1NipkHznzJRgpM4uw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter username (upper and lowercase letters): <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>name<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[A-Za-z]+<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the <code>pattern</code>.</p> <p>If you wanted to instead display custom error messages, you could use JavaScript like the following:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="sQxzh7mjUj7vWco+akAhlKjFkBqkuPXoUMQfHNzyd18=" data-language="js"><span class="token keyword">const</span> nameInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +nameInput<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + nameInput<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + nameInput<span class="token punctuation">.</span><span class="token function">checkValidity</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +nameInput<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"invalid"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>nameInput<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + nameInput<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span><span class="token string">"Enter your username!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + nameInput<span class="token punctuation">.</span><span class="token function">setCustomValidity</span><span class="token punctuation">(</span> + <span class="token string">"Usernames can only contain upper and lowercase letters. Try again!"</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>The example renders like so:</p> +<div class="code-example" id="sect47"> + +<iframe class="sample-code-frame" title="Custom validation error example sample" id="frame_custom_validation_error_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/runner.html?id=custom_validation_error_example" loading="lazy"></iframe> +</div> <p>In brief:</p> <ul> <li>We check the valid state of the input element every time its value is changed by running the <code>checkValidity()</code> method via the <code>input</code> event handler.</li> <li>If the value is invalid, an <code>invalid</code> event is raised, and the <code>invalid</code> event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the pattern, using an <code>if ()</code> block, and set a custom validity error message.</li> <li>As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.</li> <li>If it is valid, it will submit as you'd expect. For this to happen, the custom validity has to be cancelled, by invoking <code>setCustomValidity()</code> with an empty string value. We therefore do this every time the <code>input</code> event is raised. If you don't do this, and a custom validity was previously set, the input will register as invalid, even if it currently contains a valid value on submission.</li> </ul> <div class="notecard note" id="sect48"> <p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p> </div> <div class="notecard note" id="sect49"> <p><strong>Note:</strong> Firefox supported a proprietary error attribute — <code>x-moz-errormessage</code> — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see <a href="https://bugzil.la/1513890" target="_blank">Firefox bug 1513890</a>).</p> </div> +</div> +<h3 id="localization">Localization</h3> +<div class="section-content"> +<p>The allowed inputs for certain <code><input></code> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.</p> <p>Firefox uses the following heuristics to determine the locale to validate the user's input (at least for <code>type="number"</code>):</p> <ul> <li>Try the language specified by a <code>lang</code>/<code>xml:lang</code> attribute on the element or any of its parents.</li> <li>Try the language specified by any <code>Content-Language</code> HTTP header. Or,</li> <li>If none specified, use the browser's locale.</li> </ul> +</div> +<h3 id="technical_summary">Technical summary</h3> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="../content_categories#phrasing_content">phrasing content</a>. If the <a href="#type"><code>type</code></a> is not <code>hidden</code>, then labelable element, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <ul> <li> <code>type=button</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code> </li> <li> <code>type=checkbox</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code> </li> <li> +<code>type=email</code> <ul> <li> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </li> <li>with <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> +</li> </ul> </li> <li> <code>type=image</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code> </li> <li> +<code>type=number</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role"><code>spinbutton</code></a> +</li> <li> +<code>type=radio</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a> +</li> <li> +<code>type=range</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role"><code>slider</code></a> +</li> <li> <code>type=reset</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code> </li> <li> +<code>type=search</code> <ul> <li>with no <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role"><code>searchbox</code></a> +</li> <li>with <code>list</code> attribute:<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> +</li> </ul> </li> <li> <code>type=submit</code>: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code> </li> <li> +<code>type=tel</code> <ul> <li> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </li> <li>with <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> +</li> </ul> </li> <li> +<code>type=text</code> <ul> <li> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </li> <li>with <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> +</li> </ul> </li> <li> +<code>type=url</code> <ul> <li> with no <code>list</code> attribute: <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code> </li> <li>with <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> +</li> </ul> </li> <li> <code>type=color|date|datetime-local|file|hidden|month|password|time|week</code>: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">no corresponding role</a> </li> </ul> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <ul> <li> <code>type=button</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a> </li> <li> <code>type=checkbox</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a> when used with <code>aria-pressed</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a> </li> <li> <code>type=image</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a> </li> <li> +<code>type=radio</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a> +</li> <li> <code>type=text</code> with no <code>list</code> attribute: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role"><code>searchbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role"><code>spinbutton</code></a> </li> <li> <code>type=color|date|datetime-local|email|file|hidden|</code> <code>month|number|password|range|reset|search|submit|tel|url|week</code> or <code>text</code> with <code>list</code> attribute: no <code>role</code> permitted </li> </ul> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="labels_2">Labels</h3> +<div class="section-content"> +<p>When including inputs, it is an accessibility requirement to add labels alongside. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. This is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see <a href="#labels">Labels</a> .</p> <p>The following is an example of how to associate the <code><label></code> with an <code><input></code> element in the above style. You need to give the <code><input></code> an <code>id</code> attribute. The <code><label></code> then needs a <code>for</code> attribute whose value is the same as the input's <code>id</code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BM38bO2DKrGk+orS+/TW0g2eFNNOBGhCbP7JnWu7jCc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>peas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Do you like peas?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>peas<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>peas<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="size_2">Size</h3> +<div class="section-content"> +<p>Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" target="_blank">CSS pixels</a> is recommended.</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html" target="_blank">Target Size and 2.5.5 | Adrian Roselli</a></li> <li><a href="https://www.a11yproject.com/posts/large-touch-targets/" target="_blank">Quick test: Large touch targets - The A11Y Project</a></li> </ul> +</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-input-element">HTML Standard <br><small># the-input-element</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>input</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>Before Firefox 89, manipulating the content of <code><input></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>).</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>Before Firefox 89, manipulating the content of <code><input></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>).</details></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> +<tr> +<th><code>accept</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">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> +<tr> +<th><code>align</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> +<tr> +<th><code>alt</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> +<tr> +<th><code>capture</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>checked</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> +<tr> +<th><code>dirname</code></th> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>disabled</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> +<tr> +<th><code>form</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> +<tr> +<th><code>formaction</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">3</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">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formenctype</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">3</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">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formmethod</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">3</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">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formnovalidate</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>formtarget</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">3</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">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>list</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">4.4.3</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>max</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>maxlength</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> +<tr> +<th><code>min</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>minlength</code></th> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>mozactionhint</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">4–119</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">4–119</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>multiple</code></th> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.6</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤37</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> +<tr> +<th><code>name</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> +<tr> +<th><code>pattern</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>placeholder</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤37</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> +<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> +<tr> +<th><code>src</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> +<tr> +<th><code>step</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_button</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_checkbox</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_color</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes"><details><summary>27</summary>Firefox for Android doesn't allow the user to choose a custom color, only one of the predefined ones.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>type_date</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>type_datetime-local</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">93</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>type_email</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</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">11</td> +<td class="bc-supports-yes"><details><summary>3</summary>["Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.", "The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.", "Automatically applies a default style of <code>opacity: 0.4</code> to disable textual <code><input></code> elements, including those of type 'email'. Other major browsers don't currently share this particular default style."]</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_file</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>You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see <a href="https://bugzil.la/1384030">bug 1384030</a>).</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</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">11</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_hidden</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">Yes</td> +<td class="bc-supports-yes">2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_image</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_month</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no"><details><summary>No</summary>The input type is recognized, but there is no month-specific control. See <a href="https://webkit.org/b/200416">bug 200416</a>.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>type_number</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_password</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">2</td> +<td class="bc-supports-yes">2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_radio</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_range</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">4.4<details><summary>2–4.4</summary>Pre-Chromium Android WebView recognizes the <code>range</code> type, but doesn't implement a range-specific control.</details> +</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">7.0</td> +</tr> +<tr> +<th><code>type_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><button></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><button></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> +<tr> +<th><code>type_search</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">10.6</td> +<td class="bc-supports-yes">5</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">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_submit</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><button></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><button></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> +<tr> +<th><code>type_tel</code></th> +<td class="bc-supports-yes"><details><summary>3</summary>The field type doesn't demonstrate any special behavior.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>4</summary>The field type doesn't demonstrate any special behavior.</details></td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_text</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_time</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">14.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>type_url</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">10</td> +<td class="bc-supports-yes">11</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type_week</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>usemap</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">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> +<tr> +<th><code>x-moz-errormessage</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">Yes–66</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">Yes–66</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../constraint_validation">Form constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form">Your first HTML form</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure an HTML form</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls">The native form widgets</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form data validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form widgets</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS property compatibility table</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input</a> + </p> +</div> diff --git a/devdocs/html/element%2Fins.html b/devdocs/html/element%2Fins.html new file mode 100644 index 00000000..f0aa7894 --- /dev/null +++ b/devdocs/html/element%2Fins.html @@ -0,0 +1,131 @@ +<header><h1><ins>: The Inserted Text element</h1></header><div class="section-content"><p>The <code><ins></code> <a href="../index">HTML</a> element represents a range of text that has been added to a document. You can use the <a href="del"><code><del></code></a> element to similarly represent a range of text that has been deleted from the document.</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/ins.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#transparent_content_model">Transparent</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">insertion</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cite"><a href="#cite"><code>cite</code></a></dt> <dd> <p>This attribute defines the URI of a resource that explains the change, such as a link to meeting minutes or a ticket in a troubleshooting system.</p> </dd> <dt id="datetime"><a href="#datetime"><code>datetime</code></a></dt> <dd> <p>This attribute indicates the time and date of the change and must be a valid date with an optional time string. If the value cannot be parsed as a date with an optional time string, the element does not have an associated timestamp. For the format of the string without a time, see <a href="../date_and_time_formats#date_strings">Format of a valid date string</a>. The format of the string if it includes both date and time is covered in <a href="../date_and_time_formats#local_date_and_time_strings">Format of a valid local date and time string</a>.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="VxGymyPQ4l0mCfd4mrEHLOMjINvPoTA8FpomIgTn5p8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ins</span><span class="token punctuation">></span></span>This text has been inserted<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ins</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ins/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>The presence of the <code><ins></code> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a> property, along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> pseudo-elements.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="gDn3WjYyrnt3XVGrTDw1bDnEgGsHMpXMWM8h9MFRsXo=" data-language="css"><span class="token selector">ins::before, +ins::after</span> <span class="token punctuation">{</span> + <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">ins::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [insertion start] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">ins::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [insertion end] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been inserted would adversely affect understanding.</p> <ul> <li><a href="https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/" target="_blank">Short note on making your mark (more accessible) | The Paciello Group</a></li> <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html" target="_blank">Tweaking Text Level Styles | Adrian Roselli</a></li> </ul> +</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/edits.html#the-ins-element">HTML Standard <br><small># the-ins-element</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>ins</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cite</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>datetime</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="del"><code><del></code></a> element for marking deletion into a document</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/ins" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins</a> + </p> +</div> diff --git a/devdocs/html/element%2Fkbd.html b/devdocs/html/element%2Fkbd.html new file mode 100644 index 00000000..673d315f --- /dev/null +++ b/devdocs/html/element%2Fkbd.html @@ -0,0 +1,155 @@ +<header><h1><kbd>: The Keyboard Input element</h1></header><div class="section-content"><p>The <code><kbd></code> <a href="../index">HTML</a> element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> defaults to rendering the contents of a <code><kbd></code> element using its default monospace font, although this is not mandated by the HTML standard.</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/kbd.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p><code><kbd></code> may be nested in various combinations with the <a href="samp"><code><samp></code></a> (Sample Output) element to represent various forms of input or output based on visual cues.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Other elements can be used in tandem with <code><kbd></code> to represent more specific scenarios:</p> <ul> <li>Nesting a <code><kbd></code> element within another <code><kbd></code> element represents an actual key or other unit of input as a portion of a larger input. See <a href="#representing_keystrokes_within_an_input">Representing keystrokes within an input</a> below.</li> <li>Nesting a <code><kbd></code> element inside a <a href="samp"><code><samp></code></a> element represents input that has been echoed back to the user by the system. See <a href="#echoed_input">Echoed input</a>, below, for an example.</li> <li>Nesting a <code><samp></code> element inside a <code><kbd></code> element, on the other hand, represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen. See the example under <a href="#representing_onscreen_input_options">Representing onscreen input options</a> below.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You can define a custom style to override the browser's default font selection for the <code><kbd></code> element, although the user's preferences may potentially override your CSS.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ZTbJWrxjhMASwIKNqsUzw1VN/1q19gU28u3tFqRG3Tc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Use the command <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>help mycommand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> to view documentation for the + command "mycommand". +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="350" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="representing_keystrokes_within_an_input">Representing keystrokes within an input</h3> +<div class="section-content"> +<p>To describe an input comprised of multiple keystrokes, you can nest multiple <code><kbd></code> elements, with an outer <code><kbd></code> element representing the overall input and each individual keystroke or component of the input enclosed within its own <code><kbd></code>.</p> <h4 id="unstyled">Unstyled</h4> <p>First, let's look at what this looks like as just plain HTML.</p> <h5 id="html">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="oe7Eg5nq/4f2N2ClXNhbh2ayCMAdOD/XhxFvckYUGIQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + You can also create a new document using the + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> keyboard shortcut. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This wraps the entire key sequence in an outer <code><kbd></code> element, then each individual key within its own, in order to denote the components of the sequence.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> You don't need to do all this wrapping; you can choose to simplify it by leaving out the external <code><kbd></code> element. In other words, simplifying this to just <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code> would be perfectly valid.</p> <p><strong>Note:</strong> Depending on your style sheet, though, you may find it useful to do this kind of nesting.</p> </div> <h5 id="result_2">Result</h5> <p>The output looks like this without a style sheet applied:</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Unstyled sample" id="frame_unstyled" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=unstyled" loading="lazy"></iframe> +</div> <h4 id="with_custom_styles">With custom styles</h4> <p>We can make more sense of this by adding some CSS:</p> <h5 id="css">CSS</h5> <p>We add a new selector for nested <code><kbd></code> elements, <code>kbd>kbd</code>, which we can apply when rendering keyboard keys:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="j4kW4UyXh7LB9+a8To58tlJDnnfToFHmAdME8bdQoUU=" data-language="css"><span class="token selector">kbd > kbd</span> <span class="token punctuation">{</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 1px 2px 0<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="html_2">HTML</h5> <p>Then we update the HTML to use this class on the keys in the output to be presented:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XBK2d3K2sEkLYg/1BEf54GdKIyEnnx1NmL6ibyAdKh0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + You can also create a new document by pressing the + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>Ctrl<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span>+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> shortcut. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_3">Result</h5> <p>The result is just what we want!</p> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="With custom styles sample" id="frame_with_custom_styles" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=with_custom_styles" loading="lazy"></iframe> +</div> +</div> +<h3 id="echoed_input">Echoed input</h3> +<div class="section-content"> +<p>Nesting a <code><kbd></code> element inside a <a href="samp"><code><samp></code></a> element represents input that has been echoed back to the user by the system.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="cRO5xElsOic3+L7b0b/PK7++zE4J+KaQWog5Hs9cA8k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + If a syntax error occurs, the tool will output the initial command you typed + for your review: +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>custom-git ad my-new-file.cpp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Echoed input sample" id="frame_echoed_input" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=echoed_input" loading="lazy"></iframe> +</div> +</div> +<h3 id="representing_onscreen_input_options">Representing onscreen input options</h3> +<div class="section-content"> +<p>Nesting a <code><samp></code> element inside a <code><kbd></code> element represents input which is based on text presented by the system, such as the names of menus and menu items, or the names of buttons displayed on the screen.</p> <p>For example, you can explain how to choose the "New Document" option in the "File" menu using HTML that looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="g9Fuxj2PJB83TkidSQozMyepKdHCiVYO/ZYRZ5GqlaI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + To create a new file, choose the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>File<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> + ⇒<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>New Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> menu option. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Don't forget to click the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>OK<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> button to confirm once + you've entered the name of the new file. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This does some interesting nesting. For the menu option description, the entire input is enclosed in a <code><kbd></code> element. Then, inside that, both the menu and menu item names are contained within both <code><kbd></code> and <code><samp></code>, indicating an input which is selected from a screen widget.</p> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Representing onscreen input options sample" id="frame_representing_onscreen_input_options" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/kbd/runner.html?id=representing_onscreen_input_options" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-kbd-element">HTML Standard <br><small># the-kbd-element</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>kbd</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>Before Firefox 4, creating a <kbd> element incorrectly resulted in an <code>HTMLSpanElement</code> object, instead of the expected <code>HTMLElement</code>.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="code"><code><code></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/kbd" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd</a> + </p> +</div> diff --git a/devdocs/html/element%2Flabel.html b/devdocs/html/element%2Flabel.html new file mode 100644 index 00000000..bd85c5ef --- /dev/null +++ b/devdocs/html/element%2Flabel.html @@ -0,0 +1,163 @@ +<header><h1><label>: The Label element</h1></header><div class="section-content"><p>The <code><label></code> <a href="../index">HTML</a> element represents a caption for an item in a user interface.</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/label.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Associating a <code><label></code> with a form control, such as <a href="input"><code><input></code></a> or <a href="textarea"><code><textarea></code></a> offers some major advantages:</p> <ul> <li>The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.</li> <li>When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.</li> </ul> <p>To explicitly associate a <code><label></code> element with an <code><input></code> element, you first need to add the <code>id</code> attribute to the <code><input></code> element. Next, you add the <code>for</code> attribute to the <code><label></code> element, where the value of <code>for</code> is the same as the <code>id</code> in the <code><input></code> element.</p> <p>Alternatively, you can nest the <code><input></code> directly inside the <code><label></code>, in which case the <code>for</code> and <code>id</code> attributes are not needed because the association is implicit:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="AhbN4XMmwVUdlXr/epl2ZoZtkoH6Z/oLycoxC/M9Cdk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Do you like peas? + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>peas<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The form control that a label is labeling is called the <em>labeled control</em> of the label element. Multiple labels can be associated with the same form control:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="p/y8SAuSdhvsGlGe0d09441fqspimX5+IxypUUshDSs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your username:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>username<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<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">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forgot your username?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Elements that can be associated with a <code><label></code> element include <a href="button"><code><button></code></a>, <a href="input"><code><input></code></a> (except for <code>type="hidden"</code>), <a href="meter"><code><meter></code></a>, <a href="output"><code><output></code></a>, <a href="progress"><code><progress></code></a>, <a href="select"><code><select></code></a> and <a href="textarea"><code><textarea></code></a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="for"><a href="#for"><code>for</code></a></dt> <dd> <p>The value of the <code>for</code> attribute must be a single <a href="../global_attributes#id"><code>id</code></a> for a <a href="../content_categories#labelable">labelable</a> form-related element in the same document as the <code><label></code> element. So, any given <code>label</code> element can be associated with only one form control.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> To programmatically set the <code>for</code> attribute, use <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor"><code>htmlFor</code></a>.</p> </div> <p>The first element in the document with an <code>id</code> attribute matching the value of the <code>for</code> attribute is the <em>labeled control</em> for this <code>label</code> element — if the element with that <code>id</code> is actually a <a href="https://html.spec.whatwg.org/multipage/forms.html#category-label" target="_blank">labelable element</a>. If it is <em>not</em> a labelable element, then the <code>for</code> attribute has no effect. If there are other elements that also match the <code>id</code> value, later in the document, they are not considered.</p> <p>Multiple <code>label</code> elements can be given the same value for their <code>for</code> attribute; doing so causes the associated form control (the form control that <code>for</code> value references) to have multiple labels.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> A <code><label></code> element can have both a <code>for</code> attribute and a contained control element, as long as the <code>for</code> attribute points to the contained control element.</p> </div> </dd> </dl> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"><p>There are no special styling considerations for <code><label></code> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <a href="span"><code><span></code></a> or <a href="a"><code><a></code></a> element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="defining_an_implicit_label">Defining an implicit label</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zW3MmaUYroG77TWJSIxrKzZE4RkU5OJPPqJ/KgNIGD0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Click me <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Defining an implicit label" id="frame_simple_label_example" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/label/runner.html?id=simple_label_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="defining_an_explicit_label_with_the_for_attribute">Defining an explicit label with the "for" attribute</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="FJoTP/pDVUzrBSJlEQZHU1RkCfAqfIAuPO9IejzEm24=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me to focus on the input field<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title='Defining an explicit label with the "for" attribute' id="frame_using_the_for_attribute" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/label/runner.html?id=using_the_for_attribute" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="interactive_content">Interactive content</h3> +<div class="section-content"> +<p>Don't place interactive elements such as <a href="a">anchors</a> or <a href="button">buttons</a> inside a <code>label</code>. Doing so makes it difficult for people to activate the form input associated with the <code>label</code>.</p> <p><strong>Don't do this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="epJVCPTN1DLAdZwplkXthSuVyiJoerAoyIqtRGfE8LA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tac<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tac<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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>terms-and-conditions<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + I agree to the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>terms-and-conditions.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Terms and Conditions<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <p><strong>Prefer this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gFBBDE3RMFHvSVSD+vt0qoHK+7QzrnZZXmtlFJ0wT6Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tac<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>tac<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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>terms-and-conditions<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + I agree to the Terms and Conditions +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>terms-and-conditions.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Read our Terms and Conditions<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="headings">Headings</h3> +<div class="section-content"> +<p>Placing <a href="heading_elements">heading elements</a> within a <code><label></code> interferes with many kinds of assistive technology, because headings are commonly used as <a href="heading_elements#navigation">a navigation aid</a>. If the label's text needs to be adjusted visually, use CSS classes applied to the <code><label></code> element instead.</p> <p>If a <a href="form">form</a>, or a section of a form needs a title, use the <a href="legend"><code><legend></code></a> element placed within a <a href="fieldset"><code><fieldset></code></a>.</p> <p><strong>Don't do this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Nncfx6JqBjmvXGwg6eqjkitN3xmJQx91CUrovtNpnoc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>your-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Your name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>your-name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-name<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">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <p><strong>Prefer this:</strong></p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="FXaFdhbRkL6arJ2NGvxQFIb+GBqLOh7pk37rLHUiiCI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</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>large-label<span class="token punctuation">"</span></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>your-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Your name + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>your-name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-name<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">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="buttons">Buttons</h3> +<div class="section-content"><p>An <a href="input"><code><input></code></a> element with a <code>type="button"</code> declaration and a valid <code>value</code> attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <a href="button"><code><button></code></a> element.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">interactive content</a>, <a href="../content_categories#form-associated_content">form-associated element</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but no descendant <code>label</code> elements. No <a href="../content_categories#labelable">labelable</a> elements other than the labeled control are allowed. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement"><code>HTMLLabelElement</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/forms.html#the-label-element">HTML Standard <br><small># the-label-element</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>label</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>for</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/label" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label</a> + </p> +</div> diff --git a/devdocs/html/element%2Flegend.html b/devdocs/html/element%2Flegend.html new file mode 100644 index 00000000..e5aea484 --- /dev/null +++ b/devdocs/html/element%2Flegend.html @@ -0,0 +1,78 @@ +<header><h1><legend>: The Field Set Legend element</h1></header><div class="section-content"><p>The <code><legend></code> <a href="../index">HTML</a> element represents a caption for the content of its parent <a href="fieldset"><code><fieldset></code></a>.</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/legend.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="form"><code><form></code></a> for examples on <code><legend></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a> and <a href="heading_elements">headings</a> (h1–h6 elements). </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="fieldset"><code><fieldset></code></a> whose first child is this <code><legend></code> element </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLegendElement"><code>HTMLLegendElement</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/form-elements.html#the-legend-element">HTML Standard <br><small># the-legend-element</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>legend</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">3</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> +<tr> +<th><code>align</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role">ARIA: Form role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/legend" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend</a> + </p> +</div> diff --git a/devdocs/html/element%2Fli.html b/devdocs/html/element%2Fli.html new file mode 100644 index 00000000..818a8a6a --- /dev/null +++ b/devdocs/html/element%2Fli.html @@ -0,0 +1,152 @@ +<header><h1><li>: The List Item element</h1></header><div class="section-content"><p>The <code><li></code> <a href="../index">HTML</a> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<a href="ol"><code><ol></code></a>), an unordered list (<a href="ul"><code><ul></code></a>), or a menu (<a href="menu"><code><menu></code></a>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</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/li.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>This integer attribute indicates the current ordinal value of the list item as defined by the <a href="ol"><code><ol></code></a> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The <strong>value</strong> attribute has no meaning for unordered lists (<a href="ul"><code><ul></code></a>) or for menus (<a href="menu"><code><menu></code></a>).</p> </dd> <dt id="type"> +<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This character attribute indicates the numbering type:</p> <ul> <li> +<code>a</code>: lowercase letters</li> <li> +<code>A</code>: uppercase letters</li> <li> +<code>i</code>: lowercase Roman numerals</li> <li> +<code>I</code>: uppercase Roman numerals</li> <li> +<code>1</code>: numbers</li> </ul> <p>This type overrides the one used by its parent <a href="ol"><code><ol></code></a> element, if any.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This attribute has been deprecated; use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property instead.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>For more detailed examples, see the <a href="ol"><code><ol></code></a> and <a href="ul"><code><ul></code></a> pages.</p></div> +<h3 id="ordered_list">Ordered list</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="d0aCtyTysW90QKmJ9Zpbsy1/9oiB+KCpFVk+NE2nBRk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Ordered list sample" id="frame_ordered_list" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=ordered_list" loading="lazy"></iframe> +</div> +</div> +<h3 id="ordered_list_with_a_custom_value">Ordered list with a custom value</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="CS/ra7gVs/R/4xtSHYAsPjcKq4VKzpGaKpFX/ctvCuk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>I<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>fourth item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>fifth item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Ordered list with a custom value sample" id="frame_ordered_list_with_a_custom_value" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=ordered_list_with_a_custom_value" loading="lazy"></iframe> +</div> +</div> +<h3 id="unordered_list">Unordered list</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="n7kxjao4feyxWliQCMdrMcy8RxCttlQhOI9lg8Od7fc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Unordered list sample" id="frame_unordered_list" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/li/runner.html?id=unordered_list" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag can be omitted if the list item is immediately followed by another <a href="li" aria-current="page"><code><li></code></a> element, or if there is no more content in its parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> An <a href="ul"><code><ul></code></a>, <a href="ol"><code><ol></code></a>, or <a href="menu"><code><menu></code></a> element. Though not a conforming usage, the obsolete <a href="dir"><code><dir></code></a> can also be a parent. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role">listitem</a></code> when child of an <code><a href="ol">ol</a></code>, <code><a href="ul">ul</a></code> or <code><a href="menu">menu</a></code> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role"><code>separator</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role"><code>treeitem</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</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/grouping-content.html#the-li-element">HTML Standard <br><small># the-li-element</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>li</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">3</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> +<tr> +<th><code>type</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> +<tr> +<th><code>value</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other list-related HTML Elements: <a href="ul"><code><ul></code></a>, <a href="ol"><code><ol></code></a>, <a href="menu"><code><menu></code></a>, and the obsolete <a href="dir"><code><dir></code></a>;</li> <li>CSS properties that may be specially useful to style the <code><li></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> property, to choose the way the ordinal is displayed,</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a>, to handle complex nested lists,</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property, to control the indent of the list item.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/li" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li</a> + </p> +</div> diff --git a/devdocs/html/element%2Flink.html b/devdocs/html/element%2Flink.html new file mode 100644 index 00000000..8714a5db --- /dev/null +++ b/devdocs/html/element%2Flink.html @@ -0,0 +1,503 @@ +<header><h1><link>: The External Resource Link element</h1></header><div class="section-content"><p> The <code><link></code> <a href="../index">HTML</a> element specifies relationships between the current document and an external resource. This element is most commonly used to link to <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">stylesheets</a>, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. </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/link.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>To link an external stylesheet, you'd include a <code><link></code> element inside your <a href="head"><code><head></code></a> like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="yd99hgsDkt0nYYltFbi3414dS176ga+Iys8raiW52IQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>This simple example provides the path to the stylesheet inside an <code>href</code> attribute, and a <a href="../attributes/rel"><code>rel</code></a> attribute with a value of <code>stylesheet</code>. The <code>rel</code> stands for "relationship", and is one of the key features of the <code><link></code> element — the value denotes how the item being linked to is related to the containing document.</p> <p>There are a number of other common types you'll come across. For example, a link to the site's favicon:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bNWRQSgMJ5lvH4tEqJJoMKBlYGGEJbaC1RB6YHUh+EE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>There are a number of other icon <code>rel</code> values, mainly used to indicate special icon types for use on various mobile platforms, e.g.:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UQ0+hLiF0qwA+J7WTT2WwkqDiXNRj+E01ulyYEPgED0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> + <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>114x114<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-icon-114.png<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>image/png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p> The <code>sizes</code> attribute indicates the icon size, while the <code>type</code> contains the MIME type of the resource being linked. These provide useful hints to allow the browser to choose the most appropriate icon available. </p> <p>You can also provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aELLDMFU47rL/TmycTIGMtKvLRVB7dvIQEvbLFFekYg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mobile.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Some interesting new performance and security features have been added to the <code><link></code> element too. Take this example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aJQL7u5ZpARf1KBfV9cdKRk6srd8DqtlSVAPi9BkIw8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myFont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<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>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p> A <code>rel</code> value of <code>preload</code> indicates that the browser should preload this resource (see <a href="../attributes/rel/preload"><code>rel="preload"</code></a> for more details), with the <code>as</code> attribute indicating the specific class of content being fetched. The <code>crossorigin</code> attribute indicates whether the resource should be fetched with a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> request. </p> <p>Other usage notes:</p> <ul> <li> A <code><link></code> element can occur either in the <a href="head"><code><head></code></a> or <a href="body"><code><body></code></a> element, depending on whether it has a <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok" target="_blank">link type</a> that is <strong>body-ok</strong>. For example, the <code>stylesheet</code> link type is body-ok, and therefore <code><link rel="stylesheet"></code> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <code><link></code> elements from your body content, putting them in the <code><head></code>. </li> <li> When using <code><link></code> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> header's <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it. </li> <li>The HTML and XHTML specifications define event handlers for the <code><link></code> element, but it is unclear how they would be used.</li> <li>Under XHTML 1.0, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void elements</a> such as <code><link></code> require a trailing slash: <code><link /></code>.</li> <li>WebTV supports the use of the value <code>next</code> for <code>rel</code> to preload the next page in a document series.</li> </ul> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="as"><a href="#as"><code>as</code></a></dt> <dd> <p> This attribute is required when <a href="../attributes/rel/preload"><code>rel="preload"</code></a> has been set on the <code><link></code> element, optional when <a href="../attributes/rel/modulepreload"><code>rel="modulepreload"</code></a> has been set, and otherwise should not be used. It specifies the type of content being loaded by the <code><link></code>, which is necessary for request matching, application of correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a>, and setting of correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> request header. </p> <p> Furthermore, <code>rel="preload"</code> uses this as a signal for request prioritization. The table below lists the valid values for this attribute and the elements or resources they apply to. </p> <figure class="table-container"><div class="_table"><table class="standard-table"> <thead> <tr> <th scope="col">Value</th> <th scope="col">Applies To</th> </tr> </thead> <tbody> <tr> <td>audio</td> <td> +<code><audio></code> elements</td> </tr> <tr> <td>document</td> <td> +<code><iframe></code> and <code><frame></code> elements</td> </tr> <tr> <td>embed</td> <td> +<code><embed></code> elements</td> </tr> <tr> <td>fetch</td> <td> <p>fetch, XHR</p> <div class="notecard note" id="sect1"> <p> <strong>Note:</strong> This value also requires <code><link></code> to contain the crossorigin attribute, see <a href="../attributes/rel/preload#cors-enabled_fetches">CORS-enabled fetches</a>. </p> </div> </td> </tr> <tr> <td>font</td> <td>CSS @font-face</td> </tr> <tr> <td>image</td> <td> <code><img></code> and <code><picture></code> elements with srcset or imageset attributes, SVG <code><image></code> elements, CSS <code>*-image</code> rules </td> </tr> <tr> <td>object</td> <td> +<code><object></code> elements</td> </tr> <tr> <td>script</td> <td> +<code><script></code> elements, Worker <code>importScripts</code> +</td> </tr> <tr> <td>style</td> <td> <code><link rel=stylesheet></code> elements, CSS <code>@import</code> </td> </tr> <tr> <td>track</td> <td> +<code><track></code> elements</td> </tr> <tr> <td>video</td> <td> +<code><video></code> elements</td> </tr> <tr> <td>worker</td> <td>Worker, SharedWorker</td> </tr> </tbody> </table></div></figure> </dd> <dt id="blocking"> +<a href="#blocking"><code>blocking</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>This attribute explicitly indicates that certain operations should be blocked on the fetching of an external resource. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.</p> <ul> <li> +<code>render</code>: The rendering of content on the screen is blocked.</li> </ul> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p> This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates whether <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> must be used when fetching the resource. <a href="../cors_enabled_image">CORS-enabled images</a> can be reused in the <a href="canvas"><code><canvas></code></a> element without being <em>tainted</em>. The allowed values are: </p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p> A cross-origin request (i.e. with an <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> HTTP header) is performed, but no credential is sent (i.e. no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> HTTP header) the resource will be tainted and its usage restricted. </p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p> A cross-origin request (i.e. with an <code>Origin</code> HTTP header) is performed along with a credential sent (i.e. a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials"><code>Access-Control-Allow-Credentials</code></a> HTTP header), the resource will be <em>tainted</em> and its usage restricted. </p> </dd> </dl> <p> If the attribute is not present, the resource is fetched without a <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> request (i.e. without sending the <code>Origin</code> HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="../attributes/crossorigin">CORS settings attributes</a> for additional information. </p> </dd> <dt id="disabled"> +<a href="#disabled"><code>disabled</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p> For <code>rel="stylesheet"</code> only, the <code>disabled</code> Boolean attribute indicates whether the described stylesheet should be loaded and applied to the document. If <code>disabled</code> is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the <code>disabled</code> attribute is changed to <code>false</code> or removed. </p> <p>Setting the <code>disabled</code> property in the DOM causes the stylesheet to be removed from the document's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets"><code>Document.styleSheets</code></a> list.</p> </dd> <dt id="fetchpriority"> +<a href="#fetchpriority"><code>fetchpriority</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Provides a hint of the relative priority to use when fetching a preloaded resource. Allowed values:</p> <dl> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>Signals a high-priority fetch relative to other resources of the same type.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>Signals a low-priority fetch relative to other resources of the same type.</p> </dd> <dt id="auto"><a href="#auto"><code>auto</code></a></dt> <dd> <p>Default: Signals automatic determination of fetch priority relative to other resources of the same type.</p> </dd> </dl> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p>This attribute specifies the <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a> of the linked resource. A URL can be absolute or relative.</p> </dd> <dt id="hreflang"><a href="#hreflang"><code>hreflang</code></a></dt> <dd> <p> This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are specified by <a href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank">RFC 5646: Tags for Identifying Languages (also known as BCP 47)</a>. Use this attribute only if the <a href="a#href"><code>href</code></a> attribute is present. </p> </dd> <dt id="imagesizes"><a href="#imagesizes"><code>imagesizes</code></a></dt> <dd> <p>For <code>rel="preload"</code> and <code>as="image"</code> only, the <code>imagesizes</code> attribute is <a href="https://html.spec.whatwg.org/multipage/images.html#sizes-attribute" target="_blank">a sizes attribute</a> that indicates to preload the appropriate resource used by an <code>img</code> element with corresponding values for its <code>srcset</code> and <code>sizes</code> attributes.</p> </dd> <dt id="imagesrcset"><a href="#imagesrcset"><code>imagesrcset</code></a></dt> <dd> <p>For <code>rel="preload"</code> and <code>as="image"</code> only, the <code>imagesrcset</code> attribute is <a href="https://html.spec.whatwg.org/multipage/images.html#srcset-attribute" target="_blank">a sourceset attribute</a> that indicates to preload the appropriate resource used by an <code>img</code> element with corresponding values for its <code>srcset</code> and <code>sizes</code> attributes.</p> </dd> <dt id="integrity"><a href="#integrity"><code>integrity</code></a></dt> <dd> <p> Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you're telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>. </p> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p> This attribute specifies the media that the linked resource applies to. Its value must be a media type / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media query</a>. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on. </p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li> In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media">media types and groups</a>, where defined and allowed as values for this attribute, such as <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 extended this to any kind of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media queries</a>, which are a superset of the allowed values of HTML 4. </li> <li>Browsers not supporting <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">CSS Media Queries</a> won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.</li> </ul> </div> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>A string indicating which referrer to use when fetching the resource:</p> <ul> <li> +<code>no-referrer</code> means that the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> <code>no-referrer-when-downgrade</code> means that no <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified. </li> <li> +<code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li> <li> +<code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li> <li> <code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins. </li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p>This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of <a href="../attributes/rel">link type values</a>.</p> </dd> <dt id="sizes"> +<a href="#sizes"><code>sizes</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p> This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the <a href="#rel"><code>rel</code></a> contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values: </p> <ul> <li> +<code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li> <li>a white-space separated list of sizes, each in the format <code><width in pixels>x<height in pixels></code> or <code><width in pixels>X<height in pixels></code>. Each of these sizes must be contained in the resource.</li> </ul> <div class="notecard note" id="sect3"> <p> <strong>Note:</strong> Most icon formats are only able to store one single icon; therefore, most of the time, the <a href="#sizes"><code>sizes</code></a> attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions). </p> </div> </dd> <dt id="title"><a href="#title"><code>title</code></a></dt> <dd> <p> The <code>title</code> attribute has special semantics on the <code><link></code> element. When used on a <code><link rel="stylesheet"></code> it defines a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">default or an alternate stylesheet</a>. </p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p> This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as <strong>text/html</strong>, <strong>text/css</strong>, and so on. The common use of this attribute is to define the type of stylesheet being referenced (such as <strong>text/css</strong>), but given that CSS is the only stylesheet language used on the web, not only is it possible to omit the <code>type</code> attribute, but is actually now recommended practice. It is also used on <code>rel="preload"</code> link types, to make sure the browser only downloads file types that it supports. </p> </dd> </dl> +</div> +<h3 id="non-standard_attributes">Non-standard attributes</h3> +<div class="section-content"><dl> <dt id="methods"> +<a href="#methods"><code>methods</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. </p> </dd> <dt id="target"> +<a href="#target"><code>target</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</p> </dd> </dl></div> +<h3 id="obsolete_attributes">Obsolete attributes</h3> +<div class="section-content"><dl> <dt id="charset"> +<a href="#charset"><code>charset</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in <a href="https://datatracker.ietf.org/doc/html/rfc2045" target="_blank">RFC 2045</a>. The default value is <code>iso-8859-1</code>. </p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> To produce the same effect as this obsolete attribute, use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> HTTP header on the linked resource.</p> </div> </dd> <dt id="rev"> +<a href="#rev"><code>rev</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p> The value of this attribute shows the relationship of the current document to the linked document, as defined by the <a href="#href"><code>href</code></a> attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="../attributes/rel">Link type values</a> for the attribute are similar to the possible values for <a href="#rel"><code>rel</code></a>. </p> <div class="notecard note" id="sect5"> <p> <strong>Note:</strong> Instead of <code>rev</code>, you should use the <a href="#rel"><code>rel</code></a> attribute with the opposite <a href="../attributes/rel">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also, this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way. </p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="including_a_stylesheet">Including a stylesheet</h3> +<div class="section-content"> +<p>To include a stylesheet in a page, use the following syntax:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DvvZTZQUSZQXAdi/WSn6B9yZA37EzhmqxwhTYS45Gqs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="providing_alternative_stylesheets">Providing alternative stylesheets</h3> +<div class="section-content"> +<p>You can also specify <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheets</a>.</p> <p> The user can choose which style sheet to use by choosing it from the <strong>View > Page Style</strong> menu. This provides a way for users to see multiple versions of a page. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8PHBgZC9cfjYBDEFobhQP0jdcJrmlhs44ypheJVnj7A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Default Style<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fancy.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Fancy<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Basic<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3> +<div class="section-content"> +<p>You can include links to several icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="f+TkBHc5YLkmw1xTtInn/Tql7nGVRPTkZql73grG6rU=" data-language="html"><span class="token comment"><!-- third-generation iPad with high-resolution Retina display: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>144x144<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon144.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- iPhone with high-resolution Retina display: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>114x114<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon114.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- first- and second-generation iPad: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>72x72<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon72.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple-touch-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon57.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token comment"><!-- basic favicon --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon32.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="conditionally_loading_resources_with_media_queries">Conditionally loading resources with media queries</h3> +<div class="section-content"> +<p> You can provide a media type or query inside a <code>media</code> attribute; this resource will then only be loaded if the media condition is true. For example: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ng95STwoikVGw+hKB6w+gPNnQvTA+bu59CGQ3OKMFSY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>print<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mobile.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>desktop.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>highres.css<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>screen and (min-resolution: 300dpi)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h3 id="stylesheet_load_events">Stylesheet load events</h3> +<div class="section-content"> +<p>You can determine when a style sheet has been loaded by watching for a <code>load</code> event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an <code>error</code> event:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Bjo7QXeHMJivDENJjpP41TBVQ2fY0tZnIYE5RPhSPw4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token keyword">const</span> stylesheet <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#my-stylesheet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + stylesheet<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// Do something interesting; the sheet has been loaded</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + stylesheet<span class="token punctuation">.</span><span class="token function-variable function">onerror</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"An error occurred loading the stylesheet!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mystylesheet.css<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>my-stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</p> </div> +</div> +<h3 id="preload_examples">Preload examples</h3> +<div class="section-content"><p>You can find a number of <code><link rel="preload"></code> examples in <a href="../attributes/rel/preload">Preloading content with <code>rel="preload"</code></a>.</p></div> +<h3 id="blocking_rendering_till_a_resource_is_fetched">Blocking rendering till a resource is fetched</h3> +<div class="section-content"> +<p> You can include <code>render</code> token inside a <code>blocking</code> attribute; the rendering of the page will be blocked till the resource is fetched. For example: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+hpnMZQm2TuM5SPQYET9iRblnaGshQVTkElMFSONUCI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">blocking</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>render<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>critical-font.woff2<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> Metadata content. If <code><a href="../global_attributes/itemprop">itemprop</a></code> is present: <a href="../content_categories#flow_content">Flow content</a> and <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th>Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th>Tag omission</th> <td>As it is a void element, the start tag must be present and the end tag must not be present</td> </tr> <tr> <th>Permitted parents</th> <td> Any element that accepts metadata elements. If <a href="../global_attributes/itemprop">itemprop</a> is present: any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> with <code>href</code> attribute</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</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/semantics.html#the-link-element">HTML Standard <br><small># the-link-element</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>link</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">Yes</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> +<tr> +<th><code>blocking</code></th> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">91</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +<tr> +<th><code>charset</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> +<tr> +<th><code>crossorigin</code></th> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">34</td> +<td class="bc-supports-yes"><details><summary>18</summary>Before Firefox 83, <code>crossorigin</code> is not supported for <code>rel="icon"</code>.</details></td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>disabled</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Since Edge 79, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes"><details><summary>≤12.1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>≤12.1</summary>In Chrome and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>In Samsung Internet and other Blink-based browsers, adding the <code>disabled</code> attribute using JavaScript does not remove the stylesheet from <code>document.styleSheets</code>.</details></td> +</tr> +<tr> +<th><code>fetchpriority</code></th> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">preview</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +<tr> +<th><code>href</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> +<tr> +<th><code>hreflang</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> +<tr> +<th><code>imagesizes</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">78</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>imagesrcset</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">78</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>integrity</code></th> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">32</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">32</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>media</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> +<tr> +<th><code>methods</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">12–79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</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">Yes</td> +<td class="bc-supports-yes">9</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rev</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> +<tr> +<th><code>sizes</code></th> +<td class="bc-supports-yes">≤80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">≤72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">13.0</td> +</tr> +<tr> +<th><code>target</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> +<tr> +<th><code>title</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">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>type</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link"><code>Link</code></a> HTTP header</li> <li> +<a href="https://150daysofhtml.com/book/day010/" target="_blank">The <code>integrity</code> attribute</a> on 150daysofhtml.com (2021)</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/link" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmain.html b/devdocs/html/element%2Fmain.html new file mode 100644 index 00000000..b2f6a0cb --- /dev/null +++ b/devdocs/html/element%2Fmain.html @@ -0,0 +1,125 @@ +<header><h1><main></h1></header><div class="section-content"><p>The <code><main></code> <a href="../index">HTML</a> element represents the dominant content of the <a href="body"><code><body></code></a> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.</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/main.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>A document mustn't have more than one <code><main></code> element that doesn't have the <a href="../global_attributes#hidden"><code>hidden</code></a> attribute specified.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None; both the starting and ending tags are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Where <a href="../content_categories#flow_content">flow content</a> is expected, but only if it is a <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" target="_blank">hierarchically correct <code>main</code> element</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role">main</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The content of a <code><main></code> element should be unique to the document. Content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright information, site logos, and search forms shouldn't be included unless the search form is the main function of the page.</p> <p><code><main></code> doesn't contribute to the document's outline; that is, unlike elements such as <a href="body"><code><body></code></a>, headings such as <a href="heading_elements">h2</a>, and such, <code><main></code> doesn't affect the <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM's</a> concept of the structure of the page. It's strictly informative.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="tyfb3BYxWBtdvVUJ+iaJ7d3DOTT4AcsjzuhhiNZbuFA=" data-language="html"><span class="token comment"><!-- other content --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Apples<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The apple is the pomaceous fruit of the apple tree.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Red Delicious<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + These bright red apples are the most common found in many supermarkets. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Granny Smith<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>These juicy, green apples make a great filling for apple pies.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- other content --></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/main/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="landmark">Landmark</h3> +<div class="section-content"><p>The <code><main></code> element behaves like a <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role"><code>main</code> landmark</a> role. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles">Landmarks</a> can be used by assistive technology to quickly identify and navigate to large sections of the document. Prefer using the <code><main></code> element over declaring <code>role="main"</code>, unless there are <a href="#browser_compatibility">legacy browser support concerns</a>.</p></div> +<h3 id="skip_navigation">Skip navigation</h3> +<div class="section-content"> +<p>Skip navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeated content (main navigation, info banners, etc.). This lets the user access the main content of the page faster.</p> <p>Adding an <a href="../global_attributes#id"><code>id</code></a> attribute to the <code><main></code> element lets it be a target of a skip navigation link.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aBaSk9dQ7yDgTfk+fBabUFcjDX4FCxV/mO+DRQSOZNg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#main-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- navigation and header content --></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>main-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token comment"><!-- main page content --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <ul> <li><a href="https://webaim.org/techniques/skipnav/" target="_blank">WebAIM: "Skip Navigation" Links</a></li> </ul> +</div> +<h3 id="reader_mode">Reader mode</h3> +<div class="section-content"> +<p>Browser reader mode functionality looks for the presence of the <code><main></code> element, as well as <a href="heading_elements">heading</a> and <a href="../element#content_sectioning">content sectioning elements</a> when converting content into a specialized reader view.</p> <ul> <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9" target="_blank">Building websites for Safari Reader Mode and other reading apps.</a></li> </ul> +</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/grouping-content.html#the-main-element">HTML Standard <br><small># the-main-element</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>main</code></th> +<td class="bc-supports-yes">26</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">26</td> +<td class="bc-supports-yes">21</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Basic structural elements: <a href="html"><code><html></code></a>, <a href="head"><code><head></code></a>, <a href="body"><code><body></code></a> +</li> <li>Section-related elements: <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="footer"><code><footer></code></a>, <a href="header"><code><header></code></a>, or <a href="nav"><code><nav></code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role">ARIA: Main role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/main" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmap.html b/devdocs/html/element%2Fmap.html new file mode 100644 index 00000000..40ebe80d --- /dev/null +++ b/devdocs/html/element%2Fmap.html @@ -0,0 +1,110 @@ +<header><h1><map>: The Image Map element</h1></header><div class="section-content"><p>The <code><map></code> <a href="../index">HTML</a> element is used with <a href="area"><code><area></code></a> elements to define an image map (a clickable link area).</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/map.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The <code>name</code> attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the <code>name</code> attribute must not be equal to the value of the <code>name</code> attribute of another <code><map></code> element in the same document. If the <a href="../global_attributes#id"><code>id</code></a> attribute is also specified, both attributes must have the same value.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="image_map_with_two_areas">Image map with two areas</h3> +<div class="section-content"> +<p>Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="LEh5/t8XIY1dh+1Z5cZFYcYdrDJL438BprxMI1C1vGw=" data-language="html"><span class="token comment"><!-- Photo by Juliana e Mariana Amorim on Unsplash --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/docs/Web/JavaScript<span class="token punctuation">"</span></span> + <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>JavaScript<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> + <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> + <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>275,75,75<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/docs/Web/CSS<span class="token punctuation">"</span></span> + <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CSS<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#primary<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrots.jpg<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350 x 150 picture of two parrots<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Image map with two areas sample" id="frame_image_map_with_two_areas" height="250" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/map/runner.html?id=image_map_with_two_areas" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Any <a href="../content_categories#transparent_content_model">transparent</a> element. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMapElement"><code>HTMLMapElement</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/image-maps.html#the-map-element">HTML Standard <br><small># the-map-element</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>map</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>["Before Firefox 5, in Quirks Mode, empty maps were no longer skipped over in favor of non-empty ones when matching.", "Before Firefox 17, the default styling of the <code><map></code> HTML element was <code>display: block;</code>. This is now <code>display: inline;</code> and matches the behavior of the other browsers. It was already the case in Quirks Mode."]</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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">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">4</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="a"><code><a></code></a></li> <li><a href="area"><code><area></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/map" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmark.html b/devdocs/html/element%2Fmark.html new file mode 100644 index 00000000..a2c8ee3c --- /dev/null +++ b/devdocs/html/element%2Fmark.html @@ -0,0 +1,129 @@ +<header><h1><mark>: The Mark Text element</h1></header><div class="section-content"><p>The <code><mark></code> <a href="../index">HTML</a> element represents text which is <strong>marked</strong> or <strong>highlighted</strong> for reference or notation purposes due to the marked passage's relevance in the enclosing context.</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/mark.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Typical use cases for <code><mark></code> include:</p> <ul> <li>When used in a quotation (<a href="q"><code><q></code></a>) or block quote (<a href="blockquote"><code><blockquote></code></a>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.</li> <li>Otherwise, <code><mark></code> indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.</li> <li>Don't use <code><mark></code> for syntax highlighting purposes; instead, use the <a href="span"><code><span></code></a> element with appropriate CSS applied to it.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Don't confuse <code><mark></code> with the <a href="strong"><code><strong></code></a> element; <code><mark></code> is used to denote content which has a degree of <em>relevance</em>, while <code><strong></code> indicates spans of text of <em>importance</em>.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="marking_text_of_interest">Marking text of interest</h3> +<div class="section-content"> +<p>In this first example, a <code><mark></code> element is used to mark some text within a quote which is of particular interest to the user.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4nFU68jtDIfxzlLzp6KADHDnHc7VTZNPH7sKC4csKps=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> + It is a period of civil war. Rebel spaceships, striking from a hidden base, + have won their first victory against the evil Galactic Empire. During the + battle, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</span><span class="token punctuation">></span></span>Rebel spies managed to steal secret plans<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> to the Empire's + ultimate weapon, the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Marking text of interest sample" id="frame_marking_text_of_interest" width="650" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/mark/runner.html?id=marking_text_of_interest" loading="lazy"></iframe> +</div> +</div> +<h3 id="identifying_context-sensitive_passages">Identifying context-sensitive passages</h3> +<div class="section-content"> +<p>This example demonstrates using <code><mark></code> to mark search results within a passage.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="D6SMpiFU+fIknROdjuudwKfwL3OW6lKXKb1b4sfKCo4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + It is a dark time for the Rebellion. Although the Death Star has been + destroyed, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</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>match<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Imperial<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> troops have driven the Rebel + forces from their hidden base and pursued them across the galaxy. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Evading the dreaded <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mark</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>match<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Imperial<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mark</span><span class="token punctuation">></span></span> Starfleet, a group of + freedom fighters led by Luke Skywalker has established a new secret base on + the remote ice world of Hoth. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>To help distinguish the use of <code><mark></code> for search results from other potential usage, this example applies the custom class <code>"match"</code> to each match.</p> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Identifying context-sensitive passages sample" id="frame_identifying_context-sensitive_passages" width="650" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/mark/runner.html?id=identifying_context-sensitive_passages" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>The presence of the <code>mark</code> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a> property, along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> pseudo-elements.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="/z/NMcR/fBwUXyOBykZwJXigNSm/zDFjJ3jFTaJYz4E=" data-language="css"><span class="token selector">mark::before, +mark::after</span> <span class="token punctuation">{</span> + <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">mark::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [highlight start] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">mark::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [highlight end] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been highlighted would adversely affect understanding.</p> <ul> <li><a href="https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/" target="_blank">Short note on making your mark (more accessible) | The Paciello Group</a></li> <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html" target="_blank">Tweaking Text Level Styles | Adrian Roselli</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-mark-element">HTML Standard <br><small># the-mark-element</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>mark</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/mark" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmarquee.html b/devdocs/html/element%2Fmarquee.html new file mode 100644 index 00000000..f88841c2 --- /dev/null +++ b/devdocs/html/element%2Fmarquee.html @@ -0,0 +1,276 @@ +<header><h1><marquee>: The Marquee element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><marquee></code> <a href="../index">HTML</a> element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><dl> <dt id="behavior"> +<a href="#behavior"><code>behavior</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets how the text is scrolled within the marquee. Possible values are <code>scroll</code>, <code>slide</code> and <code>alternate</code>. If no value is specified, the default value is <code>scroll</code>.</p> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the background color through color name or hexadecimal value.</p> </dd> <dt id="direction"> +<a href="#direction"><code>direction</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the direction of the scrolling within the marquee. Possible values are <code>left</code>, <code>right</code>, <code>up</code> and <code>down</code>. If no value is specified, the default value is <code>left</code>.</p> </dd> <dt id="height"> +<a href="#height"><code>height</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the height in pixels or percentage value.</p> </dd> <dt id="hspace"> +<a href="#hspace"><code>hspace</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the horizontal margin</p> </dd> <dt id="loop"> +<a href="#loop"><code>loop</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.</p> </dd> <dt id="scrollamount"> +<a href="#scrollamount"><code>scrollamount</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the amount of scrolling at each interval in pixels. The default value is 6.</p> </dd> <dt id="scrolldelay"> +<a href="#scrolldelay"><code>scrolldelay</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead unless <code>truespeed</code> is specified.</p> </dd> <dt id="truespeed"> +<a href="#truespeed"><code>truespeed</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>By default, <code>scrolldelay</code> values lower than 60 are ignored. If <code>truespeed</code> is present, those values are not ignored.</p> </dd> <dt id="vspace"> +<a href="#vspace"><code>vspace</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the vertical margin in pixels or percentage value.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Sets the width in pixels or percentage value.</p> </dd> </dl></div> +<h2 id="event_handlers">Event handlers</h2> +<div class="section-content"><dl> <dt id="onbounce"><a href="#onbounce"><code>onbounce</code></a></dt> <dd> <p>Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to <code>alternate</code>.</p> </dd> <dt id="onfinish"><a href="#onfinish"><code>onfinish</code></a></dt> <dd> <p>Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0.</p> </dd> <dt id="onstart"><a href="#onstart"><code>onstart</code></a></dt> <dd> <p>Fires when the marquee starts scrolling.</p> </dd> </dl></div> +<h2 id="methods">Methods</h2> +<div class="section-content"><dl> <dt id="start"><a href="#start"><code>start()</code></a></dt> <dd> <p>Starts scrolling of the marquee.</p> </dd> <dt id="stop"><a href="#stop"><code>stop()</code></a></dt> <dd> <p>Stops scrolling of the marquee.</p> </dd> </dl></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="S+Xuxas52akJRA+M+5zTkwk6i034ndEoM8OwHx3jbYY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>marquee</span><span class="token punctuation">></span></span>This text will scroll from right to left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>marquee</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>marquee</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>up<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This text will scroll from bottom to top<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>marquee</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>marquee</span> + <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>250<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> + <span class="token attr-name">behavior</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span> + <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">border</span><span class="token punctuation">:</span>solid</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>marquee</span> <span class="token attr-name">behavior</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alternate<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> This text will bounce <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>marquee</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>marquee</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="450" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/marquee/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMarqueeElement"><code>HTMLMarqueeElement</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/rendering.html#the-marquee-element-2">HTML Standard <br><small># the-marquee-element-2</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>marquee</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">65<details><summary>1</summary>Implements the <code>HTMLDivElement</code> interface.</details> +</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">65<details><summary>4</summary>Implements the <code>HTMLDivElement</code> interface.</details> +</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>behavior</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>direction</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>hspace</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">5.5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1.2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loop</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">5.5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1.2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scrollamount</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scrolldelay</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>truespeed</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1.2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>vspace</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">5.5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1.2</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">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">2</td> +<td class="bc-supports-yes">7.2</td> +<td class="bc-supports-yes">1.2</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">10.1</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="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMarqueeElement"><code>HTMLMarqueeElement</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/marquee" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmenu.html b/devdocs/html/element%2Fmenu.html new file mode 100644 index 00000000..2961f63f --- /dev/null +++ b/devdocs/html/element%2Fmenu.html @@ -0,0 +1,154 @@ +<header><h1><menu>: The Menu element</h1></header><div class="section-content"><p>The <code><menu></code> <a href="../index">HTML</a> element is described in the HTML specification as a semantic alternative to <a href="ul"><code><ul></code></a>, but treated by browsers (and exposed through the accessibility tree) as no different than <a href="ul"><code><ul></code></a>. It represents an unordered list of items (which are represented by <a href="li"><code><li></code></a> elements).</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/menu.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><menu></code> and <a href="ul"><code><ul></code></a> elements both represent an unordered list of items. The key difference is that <a href="ul"><code><ul></code></a> primarily contains items for display, while <code><menu></code> was intended for interactive items. The related <a href="menuitem"><code><menuitem></code></a> element has been deprecated.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> In early versions of the HTML specification, the <code><menu></code> element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="toolbar">Toolbar</h3> +<div class="section-content"> +<p>In this example, a <code><menu></code> is used to create a toolbar for an editing application.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+ibiomxSB7T/tf4A98FczqPgSB1Vvo88rvgVic1oS8A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">copy</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Copy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">cut</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">paste</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Note that this is functionally no different from:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sBEXR0ox55FC+5I8tcsv1LBFg1cqgJm/ZptNuF7UzOA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">copy</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Copy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">cut</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">paste</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Ds3T2i/t1IFJChaVhw974MklLz721KI8GZ3piLe9Inw=" data-language="css"><span class="token selector">menu, +ul</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">li</span> <span class="token punctuation">{</span> + <span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Toolbar sample" id="frame_toolbar" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/menu/runner.html?id=toolbar" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <p> <a href="../content_categories#flow_content">Flow content</a>. If the element's children include at least one <a href="li"><code><li></code></a> element: <a href="../content_categories#palpable_content">Palpable content</a>. </p> </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <p> Zero or more occurrences of <a href="li"><code><li></code></a>, <a href="script"><code><script></code></a>, and <a href="template"><code><template></code></a>. </p> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role">list</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role"><code>directory</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role">listbox</a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role"><code>menubar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role"><code>tablist</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role"><code>toolbar</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role"><code>tree</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMenuElement"><code>HTMLMenuElement</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/grouping-content.html#the-menu-element">HTML Standard <br><small># the-menu-element</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>menu</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">3</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> +<tr> +<th><code>hr_separator</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">51–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">51–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>label</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">8–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>8–85</summary>Nested menus are not supported.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>type_menu</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">≤18–79</td> +<td class="bc-supports-no">8–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>8–85</summary>Nested menus are not supported.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other list-related HTML Elements: <a href="ol"><code><ol></code></a>, <a href="ul"><code><ul></code></a>, and <a href="li"><code><li></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/menu" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmenuitem.html b/devdocs/html/element%2Fmenuitem.html new file mode 100644 index 00000000..c446d12a --- /dev/null +++ b/devdocs/html/element%2Fmenuitem.html @@ -0,0 +1,81 @@ +<header><h1><menuitem></h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> +<div class="notecard nonstandard" id="sect2"><p><strong>Non-standard:</strong> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p></div> <p>The <code><menuitem></code> <a href="../index">HTML</a> element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.</p> <p>A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an <em>indirect command</em> whose behavior is defined by a separate element. Commands can also optionally include a checkbox or be grouped to share radio buttons. (Menu items for indirect commands gain checkboxes or radio buttons when defined against elements <code><input type="checkbox"></code> and <code><input type="radio"></code>.)</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>; in particular <code>title</code> can be used to describe the command, or provide usage hints.</p> <dl> <dt id="checked"> +<a href="#checked"><code>checked</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Boolean attribute which indicates whether the command is selected. May only be used when the <code>type</code> attribute is <code>checkbox</code> or <code>radio</code>.</p> </dd> <dt id="command"> +<a href="#command"><code>command</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Specifies the ID of a separate element, indicating a command to be invoked indirectly. May not be used within a menu item that also includes the attributes <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> or <code>type</code>.</p> </dd> <dt id="default"> +<a href="#default"><code>default</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This Boolean attribute indicates use of the same command as the menu's subject element (such as a <code>button</code> or <code>input</code>).</p> </dd> <dt id="disabled"> +<a href="#disabled"><code>disabled</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Boolean attribute which indicates that the command is not available in the current state. Note that <code>disabled</code> is distinct from <code>hidden</code>; the <code>disabled</code> attribute is appropriate in any context where a change in circumstances might render the command relevant.</p> </dd> <dt id="icon"> +<a href="#icon"><code>icon</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Image URL, used to provide a picture to represent the command.</p> </dd> <dt id="label"><a href="#label"><code>label</code></a></dt> <dd> <p>The name of the command as shown to the user. Required when a <code>command</code> attribute is not present.</p> </dd> <dt id="radiogroup"> +<a href="#radiogroup"><code>radiogroup</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the <code>type</code> attribute is <code>radio</code>.</p> </dd> <dt id="type"> +<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This attribute indicates the kind of command, and can be one of three values.</p> <ul> <li> +<code>command</code>: A regular command with an associated action. This is the missing value default.</li> <li> +<code>checkbox</code>: Represents a command that can be toggled between two different states.</li> <li> +<code>radio</code>: Represent one selection from a group of commands that can be toggled as radio buttons.</li> </ul> </dd> </dl> +</div> +<h2 id="examples">Examples</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="BTiHTjP6sN+zysHcuCfxoMzzFEa1aUEgiVt8vdn3otY=" data-language="html"><span class="token comment"><!-- A <div> element with a context menu --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right-click to see the adjusted context menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</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>context<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>popup-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</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>command<span class="token punctuation">"</span></span> + <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This command does nothing<span class="token punctuation">"</span></span> + <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon-192x192.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Commands don't render their contents. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</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>command<span class="token punctuation">"</span></span> + <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This command has javascript<span class="token punctuation">"</span></span> + <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'command clicked'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + Commands don't render their contents. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">radiogroup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Radio Button 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</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>radio<span class="token punctuation">"</span></span> <span class="token attr-name">radiogroup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Radio Button 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="css">CSS</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sZSFt7GZWQTjuNzkDA9M0lYCZVgpeqYK+GNWMLzPZQk=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span> +<span class="token punctuation">}</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="Examples" id="frame_example" width="100%" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/menuitem/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> The <a href="menu"><code><menu></code></a> element, where that element is in the <em>popup menu</em> state. (If specified, the <code>type</code> attribute of the <a href="menu"><code><menu></code></a> element must be <code>popup</code>; if missing, the parent element of the <a href="menu"><code><menu></code></a> must itself be a <a href="menu"><code><menu></code></a> in the <em>popup menu</em> state.) </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>None</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMenuItemElement"><code>HTMLMenuItemElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="section-content"><p>Not part of any current specifications.</p></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/" target="_blank">HTML context menus in Firefox (Screencast and Code)</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/menuitem" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html b/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html new file mode 100644 index 00000000..accdd947 --- /dev/null +++ b/devdocs/html/element%2Fmeta%2Fname%2Ftheme-color.html @@ -0,0 +1,70 @@ +<header><h1>theme-color</h1></header><div class="section-content"><p>The <code>theme-color</code> value for the <a href="../../meta#name"><code>name</code></a> attribute of the <a href="../../meta"><code><meta></code></a> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the <a href="../../meta#content"><code>content</code></a> attribute must contain a valid CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><code><color></code></a>.</p></div> +<h2 id="example">Example</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="N2Mkht8+FUeDBSnvL0tGBwdP7Kvrjuo2rB+w2bJFR9w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>theme-color<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4285f4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>The following image shows the effect that the <a href="../../meta"><code><meta></code></a> element above will have on a document displayed in Chrome running on an Android mobile device.</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA34AAAKuCAMAAADJvj69AAAC/VBMVEVHcEwEBAQLCgoMCwsGBggGBgYNDQ5EQUJCQEFDQEFBP0A8Ojs5Nzg6ODo8OTo7OTo6ODk/PT4HBgY7OjszMzM2NTY5ODk7Ozs5ODo9PT0+Pj4/P0FAQEBBQUFDQ0NERERFRUU5OTkxFhtJSUtNTE5OTU9LSkxGRUdHRUdHR0dHR0lISEhKSkpLS0xNTE5PTlBRUFJUU1RJSUk3Nzc2NTY0NDQyMjIwMDAuLi4rKysoKCglJSUiIiJOTk9OTk9LSktWVVdZWFocHBwTExIUFBQVFRUWFhYZGRkfHx9OTU9cW11aWFpaWVpgYGFeXV9nZ2htbW91dXZkY2V7fHyCg4MpOEwzV3gnSGU2UWtOZouIiIiRkZGkpKSbm5tDPTgVEAwVFBMJCQkODg4KMVIAAAADAwNAe640cakwbaYqaqQhaKUbY6AVYJ0BVJkCR4ATFRcmaKIhZaEAUZQAS5AUFhitra3R0dHW1taEqctViLZsmsGhvtfA1OPX4+7IyMjf39+3t7e/v7/x8fH+/v/o6ent7u74+PghY5jy8vL09PT////5/P/l5eXb29v29vbw8PDs7OzZ2dkvmPUujegcjuwBhvEQjfcHf+kDb8g1n/kqm/kil/kblfgTkvgBkfgAivcAiPkAifwDddMAh/cAhvc7oPg9n/lQp/lktPtfr/pbrfpZqvpUqfpLpvlApPliqe2z2v3O5/6i0/1/wfx2vPuSyv2r1vvl8v6bz/zs9v/F4/293/2IxvyLwPKMxP/d7/5qufvW6/7z+f9LnOsJi/gAhPgAjv8AdNZtqtrz7Ojx6uUgICACAgJUVFTzdXv7P0mK1rgOsWn8Lzz3rbAru38Cql724Mf1UVK3Z4QApVf82IxvsFr8xkaeyvQAi/9IQj1FPzobFRERQGYAAAAAAAANPGIFifcAgvcAfvc/g/JChfRAhPNAhPNBg/NBg/MCcOIAAAABAQEBAQECAgIAAAAAAAABAQEBAQECAgIAAAAuLS0AAAASEREjIyMBAQHgZXuwAAAA/3RSTlMAAggNEhkgNERTZXWGlqSvt7cEys/h8P//////////////AYCNrtDk8P//////////////////////////nMjZ////////////vP+K1v/S////6f///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8yG1P///////////////////////////0tv/////0f/1n+0l/8nMEJYOGR4lK+g9L7c68sQKoyFAAB5C0lEQVR4AezRRXbjUBRAQTMGzDJJYZItiPe/uH5yw7TnOVWCj7PbAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg/2h3Ot1efzAYDkej8XgymUzDTbi9vb374/6P2Ww2n83u/7m7ug1xfxomYTwej0aj4XA4GPT7vW63s1i0kJTW4tqlqRJJIsfd/Wy5XK3X680mSZJtskt2u/3huA/H4363j/kxPaZZmj1kj1n80vSQ/pEd9of099X4ds2ziy9Jnp62TyHZbDbrsFouo+9d5IyW0XE4iIKd59ZPJynPnW7TJtK8vN6+zd/fPz4+P9N9mmbZ41d+Op/zU1GWVV3X39/xK6uqqqu6LMtzWVwuX1/5V57Hd75c4mum8T7GV5zzxiVvnOM9ny/novh6TNNjvIemb5rFF8vou2/somNybdgEnEW9aBfpep12C0l/jHYnAo0nL02daJPnRVFEhmuQEEHKKnoU5yJ//MWufTA3ijRhAK7a4JwTCEkIbU6OIFDyt5IGsD/n9P9/y73d09XCvr3Km+elZ5A59sI8VV0z1n1stbCWNc/34yTpIGmWZl1O1s1QuKbpycwXgknT7w2GyGDQ7/fxV7I0idux76GhtlrR5yOCjaJWFIKvXoOdh/i+twO41RW4zc2+fO42NY70d82zFyx0/PZ/X99/+EI4sBmNxqPRIWjgEoWNoB7QErXjGIUJ5dnUOAFdKAwbD2XTpiGJaVASCYyTZGJMnpt/JS/K8uRkMjkdDvq9btpJGDBCH4ZdiG5qu6jf3oHaMtBmXvwuZo7UkW48n5kD0f8hdLRLQIcjBE7woT5o9+7EQZv6RhPhie6cgMM+NFiIXhcjERIlDZxQYEJxenlRoAzdchRuJjf4wD9V7PAG7E6HkEvaNbBFYIMadjS8m9nZ3lxdAtnz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" alt="Image showing the effect of using theme-color" width="894" height="686" loading="lazy"> </p> <p><em>Image credit: from <a href="https://web.dev/icons-and-browser-colors/" target="_blank">Icons & Browser Colors</a>, created and shared by Google and used according to terms described in the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons 4.0 Attribution License</a>.</em></p> <p>You can provide a media type or query inside the <a href="../../meta#media"><code>media</code></a> attribute; the color will then only be set if the media condition is true. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PsBucUxCp6vJwg81ZVvLCvWgVsx2YPBJVG790YclcRY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>theme-color<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(prefers-color-scheme: light)<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cyan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>theme-color<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(prefers-color-scheme: dark)<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>black<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</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/semantics.html#meta-theme-color">HTML Standard <br><small># meta-theme-color</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>theme-color</code></th> +<td class="bc-supports-yes"> +<details><summary>73</summary>Chrome uses the color only on installed progressive web apps.</details><details><summary>39–72</summary>Chrome reports support, but does not actually use the color anywhere.</details> +</td> +<td class="bc-supports-yes"><details><summary>79</summary>Edge uses the color only on installed progressive web apps.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>80</summary>Chrome for Android does not use the color on devices with native dark mode enabled.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6.2</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme"><code>color-scheme</code></a> CSS property</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> media query</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/meta/name/theme-color" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmeta%2Fname.html b/devdocs/html/element%2Fmeta%2Fname.html new file mode 100644 index 00000000..d8692880 --- /dev/null +++ b/devdocs/html/element%2Fmeta%2Fname.html @@ -0,0 +1,166 @@ +<header><h1>Standard metadata names</h1></header><div class="section-content"><p>The <a href="../meta"><code><meta></code></a> element can be used to provide document metadata in terms of name-value pairs, with the <a href="../meta#name"><code>name</code></a> attribute giving the metadata name, and the <a href="../meta#content"><code>content</code></a> attribute giving the value.</p></div> +<h3 id="standard_metadata_names_defined_in_the_html_specification">Standard metadata names defined in the HTML specification</h3> +<div class="section-content"> +<p>The HTML specification defines the following set of standard metadata names:</p> <ul> <li> +<code>application-name</code>: the name of the application running in the web page. <div class="notecard note" id="sect1"> <p><strong>Note:</strong></p> <ul> <li>Browsers may use this to identify the application. It is different from the <a href="../title"><code><title></code></a> element, which usually contain the application name, but may also contain information like the document name or a status.</li> <li>Simple web pages shouldn't define an application-name.</li> </ul> </div> </li> <li> +<code>author</code>: the name of the document's author.</li> <li> +<code>description</code>: a short and accurate summary of the content of the page. Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages.</li> <li> +<code>generator</code>: the identifier of the software that generated the page.</li> <li> +<code>keywords</code>: words relevant to the page's content separated by commas.</li> <li> +<code>referrer</code>: controls the HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header of requests sent from the document: <figure class="table-container"><div class="_table"><table class="standard-table"> <caption> Values for the <code>content</code> attribute of <code><meta name="referrer"></code> </caption> <tbody> <tr> <td><code>no-referrer</code></td> <td>Do not send a HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header.</td> </tr> <tr> <td><code>origin</code></td> <td>Send the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a> of the document.</td> </tr> <tr> <td><code>no-referrer-when-downgrade</code></td> <td> Send the full URL when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP). This is the default behavior. </td> </tr> <tr> <td><code>origin-when-cross-origin</code></td> <td> Send the full URL (stripped of parameters) for same-origin requests, but only send the origin for other cases. </td> </tr> <tr> <td><code>same-origin</code></td> <td> Send the full URL (stripped of parameters) for same-origin requests. Cross-origin requests will contain no referrer header. </td> </tr> <tr> <td><code>strict-origin</code></td> <td> Send the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP). </td> </tr> <tr> <td><code>strict-origin-when-cross-origin</code></td> <td> Send the full URL (stripped of parameters) for same-origin requests. Send the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS). Otherwise, send no referrer. </td> </tr> <tr> <td><code>unsafe-URL</code></td> <td> Send the full URL (stripped of parameters) for same-origin or cross-origin requests. </td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li>Dynamically inserting <code><meta name="referrer"></code> (with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/write"><code>document.write()</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild"><code>appendChild()</code></a>) makes the referrer behavior unpredictable.</li> <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li> </ul> </div> </li> <li> +<a href="name/theme-color"><code>theme-color</code></a>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><code><color></code></a>. The <code>media</code> attribute with a valid media query list can be included to set the media the theme color metadata applies to.</li> <li> <code>color-scheme</code>: specifies one or more color schemes with which the document is compatible. The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <code><meta name="color-scheme"></code> is to indicate compatibility with—and order of preference for—light and dark color modes. The value of the <a href="../meta#content"><code>content</code></a> property for <code>color-scheme</code> may be one of the following: <dl> <dt id="normal"><a href="#normal"><code>normal</code></a></dt> <dd> <p>The document is unaware of color schemes and should be rendered using the default color palette.</p> </dd> <dt id="sect3"> +<a href="#sect3">[</a><code>light</code> | <code>dark</code>]+</dt> <dd> <p>One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.</p> </dd> <dt id="only_light"><a href="#only_light"><code>only light</code></a></dt> <dd> <p>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.</p> </dd> </dl>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well: <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0w0L++l4RuA3mMDJx2WP4P5IvHUqhkh7+LHZnzh6nHc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-scheme<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark light<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div>This works at the document level in the same way that the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme"><code>color-scheme</code></a> property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> CSS media feature. </li> </ul> +</div> +<h3 id="standard_metadata_names_defined_in_other_specifications">Standard metadata names defined in other specifications</h3> +<div class="section-content"> +<p>The CSS Device Adaptation specification defines the following metadata name:</p> <ul> <li> +<code>viewport</code>: gives hints about the size of the initial size of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a>. <figure class="table-container"><div class="_table"><table class="fullwidth-table"> <caption> Values for the content of <code><meta name="viewport"></code> </caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Possible subvalues</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><code>width</code></td> <td>A positive integer number, or the text <code>device-width</code> +</td> <td> Defines the pixel width of the viewport that you want the website to be rendered at. </td> </tr> <tr> <td><code>height</code></td> <td>A positive integer, or the text <code>device-height</code> +</td> <td>Defines the height of the viewport. Not used by any browser.</td> </tr> <tr> <td><code>initial-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code> +</td> <td> Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size. </td> </tr> <tr> <td><code>maximum-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code> +</td> <td> Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>minimum-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code> +</td> <td> Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>user-scalable</code></td> <td> +<code>yes</code> or <code>no</code> +</td> <td> If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>viewport-fit</code></td> <td> +<code>auto</code>, <code>contain</code> or <code>cover</code> +</td> <td> <p> The <code>auto</code> value doesn't affect the initial layout viewport, and the whole web page is viewable. </p> <p> The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display. </p> <p> The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display. </p> </td> </tr> </tbody> </table></div></figure> <div class="notecard warning" id="sect4"> <p><strong>Warning:</strong></p> <p>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" target="_blank">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> </ul> </div> </li> </ul> +</div> +<h3 id="other_metadata_names">Other metadata names</h3> +<div class="section-content"> +<p>The <a href="https://wiki.whatwg.org/wiki/MetaExtensions" target="_blank">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p> <ul> <li> +<code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several <a href="../meta"><code><meta></code></a> elements should be used.</li> <li> +<code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li> <li> +<code>publisher</code>: the name of the document's publisher.</li> <li> +<code>robots</code>: the behavior that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below: <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Value</th> <th>Description</th> <th>Used by</th> </tr> </thead> <tbody> <tr> <td><code>index</code></td> <td>Allows the robot to index the page (default).</td> <td>All</td> </tr> <tr> <td><code>noindex</code></td> <td>Requests the robot to not index the page.</td> <td>All</td> </tr> <tr> <td><code>follow</code></td> <td>Allows the robot to follow the links on the page (default).</td> <td>All</td> </tr> <tr> <td><code>nofollow</code></td> <td>Requests the robot to not follow the links on the page.</td> <td>All</td> </tr> <tr> <td><code>all</code></td> <td>Equivalent to <code>index, follow</code> +</td> <td><a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?visit_id=637855965067987211-415685194&rd=1" target="_blank">Google</a></td> </tr> <tr> <td><code>none</code></td> <td>Equivalent to <code>noindex, nofollow</code> +</td> <td><a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?visit_id=637855965074074862-574753619&rd=1" target="_blank">Google</a></td> </tr> <tr> <td><code>noarchive</code></td> <td>Requests the search engine not to cache the page content.</td> <td> +<a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html" target="_blank">Yahoo</a>, <a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a> +</td> </tr> <tr> <td><code>nosnippet</code></td> <td>Prevents displaying any description of the page in search engine results.</td> <td> +<a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a>, <a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a> +</td> </tr> <tr> <td><code>noimageindex</code></td> <td>Requests this page not to appear as the referring page of an indexed image.</td> <td><a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a></td> </tr> <tr> <td><code>nocache</code></td> <td>Synonym of <code>noarchive</code>.</td> <td><a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a></td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect5"> <p><strong>Note:</strong></p> <ul> <li>Only cooperative robots follow these rules. Do not expect to prevent email harvesters with them.</li> <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em><a href="https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt">robots.txt</a></em> file.</li> <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li> <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behavior is undefined and may vary between them.</li> <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li> </ul> </div> </li> </ul> +</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/semantics.html#standard-metadata-names">HTML Standard <br><small># standard-metadata-names</small></a></td></tr> +<tr><td><a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-meta">Referrer Policy <br><small># referrer-policy-delivery-meta</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>name</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> +<tr> +<th><code>color-scheme</code></th> +<td class="bc-supports-yes">81</td> +<td class="bc-supports-yes">81</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">68</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">81</td> +<td class="bc-supports-yes">81</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">13.0</td> +</tr> +<tr> +<th><code>referrer</code></th> +<td class="bc-supports-yes"><details><summary>17</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes"><details><summary>36</summary>The <code>referrer</code> value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.</details></td> +<td class="bc-supports-yes"><details><summary>11</summary>Browsers initially supported an <a href="https://wiki.whatwg.org/wiki/Meta_referrer">early draft</a> of the specification which can only use a meta tag and is only compatible with the <code>origin</code> value from the new spec.</details></td> +<td class="bc-supports-yes"><details><summary>15</summary>Until Opera 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes"><details><summary>37</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td> +<td class="bc-supports-yes"><details><summary>36</summary>The <code>referrer</code> value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Until Samsung Internet 5.0, <code>content</code> values weren't constrained to the values listed in the spec.</details></td> +</tr> +<tr> +<th><code>scheme</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> +<tr> +<th><code>theme-color</code></th> +<td class="bc-supports-yes"> +<details><summary>73</summary>Chrome uses the color only on installed progressive web apps.</details><details><summary>39–72</summary>Chrome reports support, but does not actually use the color anywhere.</details> +</td> +<td class="bc-supports-yes"><details><summary>79</summary>Edge uses the color only on installed progressive web apps.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>80</summary>Chrome for Android does not use the color on devices with native dark mode enabled.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6.2</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../../viewport_meta_tag">Viewport <code><meta></code> tag</a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element">Metadata: the <code><meta></code> element</a> in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/meta/name" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmeta.html b/devdocs/html/element%2Fmeta.html new file mode 100644 index 00000000..0136b0fe --- /dev/null +++ b/devdocs/html/element%2Fmeta.html @@ -0,0 +1,131 @@ +<header><h1><meta>: The metadata element</h1></header><div class="section-content"> +<p>The <code><meta></code> <a href="../index">HTML</a> element represents <a href="https://developer.mozilla.org/en-US/docs/Glossary/Metadata">metadata</a> that cannot be represented by other HTML meta-related elements, like <a href="base"><code><base></code></a>, <a href="link"><code><link></code></a>, <a href="script"><code><script></code></a>, <a href="style"><code><style></code></a> or <a href="title"><code><title></code></a>.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>. If the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute is present: <a href="../content_categories#flow_content">flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th>Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th>Tag omission</th> <td> As it is a void element, the start tag must be present and the end tag must not be present. </td> </tr> <tr> <th>Permitted parents</th> <td> <ul> <li> <code><meta charset></code>, <code><meta http-equiv></code>: a <a href="head"><code><head></code></a> element. If the <a href="meta#http-equiv" aria-current="page"><code>http-equiv</code></a> is not an encoding declaration, it can also be inside a <a href="noscript"><code><noscript></code></a> element, itself inside a <code><head></code> element. </li> <li> <code><meta name></code>: any element that accepts <a href="../content_categories#metadata_content">metadata content</a>. </li> <li> <code><meta itemprop></code>: any element that accepts <a href="../content_categories#metadata_content">metadata content</a> or <a href="../content_categories#flow_content">flow content</a>. </li> </ul> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></td> </tr> </tbody> </table></div></figure> <p>The type of metadata provided by the <code><meta></code> element can be one of the following:</p> <ul> <li>If the <a href="#name"><code>name</code></a> attribute is set, the <code><meta></code> element provides <em>document-level metadata</em>, applying to the whole page.</li> <li>If the <a href="#http-equiv"><code>http-equiv</code></a> attribute is set, the <code><meta></code> element is a <em>pragma directive</em>, providing information equivalent to what can be given by a similarly-named HTTP header.</li> <li>If the <a href="#charset"><code>charset</code></a> attribute is set, the <code><meta></code> element is a <em>charset declaration</em>, giving the character encoding in which the document is encoded.</li> <li>If the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute is set, the <code><meta></code> element provides <em>user-defined metadata</em>.</li> </ul> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> the attribute <a href="#name"><code>name</code></a> has a specific meaning for the <code><meta></code> element, and the <a href="../global_attributes/itemprop"><code>itemprop</code></a> attribute must not be set on the same <code><meta></code> element that has any existing <a href="#name"><code>name</code></a>, <a href="#http-equiv"><code>http-equiv</code></a> or <a href="#charset"><code>charset</code></a> attributes.</p> </div> <dl> <dt id="charset"><a href="#charset"><code>charset</code></a></dt> <dd> <p>This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string <code>"utf-8"</code>, because UTF-8 is the only valid encoding for HTML5 documents. <code><meta></code> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.</p> </dd> <dt id="content"><a href="#content"><code>content</code></a></dt> <dd> <p>This attribute contains the value for the <a href="#http-equiv"><code>http-equiv</code></a> or <a href="#name"><code>name</code></a> attribute, depending on which is used.</p> </dd> <dt id="http-equiv"><a href="#http-equiv"><code>http-equiv</code></a></dt> <dd> <p>Defines a pragma directive. The attribute is named <code>http-equiv(alent)</code> because all the allowed values are names of particular HTTP headers:</p> <ul> <li> <code>content-security-policy</code> Allows page authors to define a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">content policy</a> for the current page. Content policies mostly specify allowed server origins and script endpoints which help guard against cross-site scripting attacks. </li> <li> <code>content-type</code> Declares the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> and the document's character encoding. The <code>content</code> attribute must have the value <code>"text/html; charset=utf-8"</code> if specified. This is equivalent to a <code><meta></code> element with the <a href="#charset"><code>charset</code></a> attribute specified and carries the same restriction on placement within the document. <strong>Note:</strong> Can only be used in documents served with a <code>text/html</code> — not in documents served with an XML MIME type. </li> <li> <code>default-style</code> Sets the name of the default <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS style sheet</a> set. </li> <li> <code>x-ua-compatible</code> If specified, the <code>content</code> attribute must have the value <code>"IE=edge"</code>. User agents are required to ignore this pragma. </li> <li> +<code>refresh</code> This instruction specifies: <ul> <li>The number of seconds until the page should be reloaded - only if the <a href="#content"><code>content</code></a> attribute contains a non-negative integer.</li> <li>The number of seconds until the page should redirect to another - only if the <a href="#content"><code>content</code></a> attribute contains a non-negative integer followed by the string '<code>;url=</code>', and a valid URL.</li> </ul> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong></p> <p>Pages set with a <code>refresh</code> value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%E2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_%E2%80%94_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html" target="_blank">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html" target="_blank">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html" target="_blank">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> </ul> </div> </li> </ul> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The <code>name</code> and <code>content</code> attributes can be used together to provide document metadata in terms of name-value pairs, with the <code>name</code> attribute giving the metadata name, and the <code>content</code> attribute giving the value.</p> <p>See <a href="meta/name">standard metadata names</a> for details about the set of standard metadata names defined in the HTML specification.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ZKxchLc9Rnwup9RkUsx2VD1dcdYZZLvhr67TzaYZpgM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token comment"><!-- Redirect page after 3 seconds --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3;url=https://www.mozilla.org<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</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/semantics.html#the-meta-element">HTML Standard <br><small># the-meta-element</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>meta</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">Yes</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> +<tr> +<th><code>charset</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>content</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> +<tr> +<th><code>http-equiv</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> +<tr> +<th><code>name</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="meta/name">Standard metadata names</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element">Learn: <code><meta></code></a></li> <li><a href="../viewport_meta_tag">The viewport meta tag</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/meta" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</a> + </p> +</div> diff --git a/devdocs/html/element%2Fmeter.html b/devdocs/html/element%2Fmeter.html new file mode 100644 index 00000000..74d5fe58 --- /dev/null +++ b/devdocs/html/element%2Fmeter.html @@ -0,0 +1,198 @@ +<header><h1><meter>: The HTML Meter element</h1></header><div class="section-content"><p>The <code><meter></code> <a href="../index">HTML</a> element represents either a scalar value within a known range or a fractional value.</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/meter.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, labelable content, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but there must be no <code><meter></code> element among its descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">meter</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>The current numeric value. This must be between the minimum and maximum values (<code>min</code> attribute and <code>max</code> attribute) if they are specified. If unspecified or malformed, the value is <code>0</code>. If specified, but not within the range given by the <code>min</code> attribute and <code>max</code> attribute, the value is equal to the nearest end of the range.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unless the <code>value</code> attribute is between <code>0</code> and <code>1</code> (inclusive), the <code>min</code> and <code>max</code> attributes should define the range so that the <code>value</code> attribute's value is within it.</p> </div> </dd> <dt id="min"><a href="#min"><code>min</code></a></dt> <dd> <p>The lower numeric bound of the measured range. This must be less than the maximum value (<code>max</code> attribute), if specified. If unspecified, the minimum value is <code>0</code>.</p> </dd> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>The upper numeric bound of the measured range. This must be greater than the minimum value (<code>min</code> attribute), if specified. If unspecified, the maximum value is <code>1</code>.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<code>min</code> attribute), and it also must be less than the high value and maximum value (<code>high</code> attribute and <code>max</code> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <code>low</code> value is equal to the minimum value.</p> </dd> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<code>max</code> attribute), and it also must be greater than the low value and minimum value (<code>low</code> attribute and <code>min</code> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <code>high</code> value is equal to the maximum value.</p> </dd> <dt id="optimum"><a href="#optimum"><code>optimum</code></a></dt> <dd> <p>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <code>min</code> attribute and <code>max</code> attribute). When used with the <code>low</code> attribute and <code>high</code> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <code>min</code> attribute and the <code>low</code> attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>This optional attribute is used to explicitly set a <a href="form"><code><form></code></a> owner for the <code><meter></code> element. If omitted, the <code><meter></code> is associated with its ancestor <code><form></code> element or the form association set by the <code>form</code> attribute on another ancestor element, such as on a <a href="fieldset"><code><fieldset></code></a>, if any. If included, the value must be the <a href="../global_attributes/id"><code>id</code></a> of a <code><form></code> in the same tree.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_example">Simple example</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ic/tVZIoOKqzf9hhKRU+V8ra719/91AQQw4/Ku9LKO8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Heat the oven to <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<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>350<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>350 degrees<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=simple_example" loading="lazy"></iframe> +</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAABKBAMAAAClc1uGAAAAJ1BMVEXv7+/Ly8sPfBD////q6urj4+P5+fnV1dVJkkTZ2dmWtpJsome5xLjq2SPCAAABl0lEQVR42u3bv07DMBAG8ENKhRgtAeHf5FeghDlCBTFWoO4o8AARE2vfgKl7J2YmZibEU3GJQrCLwxgjf9+NyfSr7TvHvsopcAjxxBNPPPHEE088BL6YrUyy8XRb/YW/r03SkV8O4x9M8rEYwp8ZgLgJ44saAZ9XQXxpIGI3hJ+2rz7f7JghI0Y2e26JFwF8O/Av1iaL17h2h142Bn5s+9h4uXKG3sHf6dNjmzpe5src/4XXVH+yTB8/aRL+Jr6p8R82fbyUfa0Xb9YvEfCTft7/4OcxVnwMfLPq93x8ob/HGgO/rdTKw0/jzPoY+Oy72PX4c2OOLAZedJ/36OE13x2g4Msu44mzt31HwW91O1xxkv0aBb/Tpfser+vgFQWvlf7Qw9dxkn0sfO7hNf1bFHxT64hHxAtHngmPpQ57kwO9vYX+sIH+pIU+zIA+xoI+wMQ5us4CR9fQlxbQ11XYF5XQV9TQzQkIbSmrwbYU6IYk7FY06CZE7PZT7MZj7JZz/tOCeOKJJ5544oknnnjiiSeeeOL/f3wBq/zMPETkfsUAAAAASUVORK5CYII=" alt="A screenshot of the meter element in Google Chrome" width="504" height="74" loading="lazy"> </p> +</div> +<h3 id="high_and_low_range_example">High and Low range example</h3> +<div class="section-content"> +<p>Note that in this example the <a href="#min"><code>min</code></a> attribute is omitted. This is allowed, as it will default to <code>0</code>.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jIuNcu8JP2Is9t87tZGpBrFJgNQ+rzNj1BVdLO/0JiA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + He got a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>69<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<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>84<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> on the exam. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="High and Low range example sample" id="frame_high_and_low_range_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=high_and_low_range_example" loading="lazy"></iframe> +</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfIAAABGBAMAAADFkws0AAAALVBMVEXv7+/Ly8vXOgL////q6urj4+P5+fnV1dXdYUDZ2dnboJHRvbjZRx3eeV7egmmSFlynAAABnElEQVR42u3bPU7DQBAF4EFyhChXAsyPRLFXIJjaQgFRRqD0yHAAi4o2N6BKn4qaClHmCFQch7VjZ23HBpd43pvS3Zddz4x3J3KOGkI55ZRTTjnllFOuRB5NFkZtvNwnnfLH1KiO8LpD/mTUx6xVfmEA4q5FHqUI8jDZlscGIva35OP8+ef3yg45pDuCyWtOvGrK8yV/swMP+TVuq4su1SUfPPwPudxUFr2UP7hHZ1a7XKaOeViXu8R+OtcvH2XpvSbPavmH1S+XeFPTxW/2OYJ8tNnuhXyq4i3vIc/e9IOKPHK/xBJDvuuoiZePlWz2HvKgrGtr+aUxJxZDLq6Te/Zyl+COUORxkeKkbF3fUeQ7RQMrZWpfosj3iuS+lru9/4UidxX92MtTJam9pzz0cpfpVyjyrKzV5JZy7XJpykF3O26Gw61quJ0MbveK+8WC+5WKezKBexqFewKJc+ocNE+dcW8acG+XgG8UcW+RcScHEKZFFu3TIrgTQsBTYbiTgMDTn8ATv8BT3vxPA+WUU0455ZRTTjnllP/L+AFRr1+X/KW5rAAAAABJRU5ErkJggg==" alt="red meter in Google Chrome" width="498" height="70" loading="lazy"> </p> +</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/form-elements.html#the-meter-element">HTML Standard <br><small># the-meter-element</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>meter</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>high</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>low</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>min</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>optimum</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>value</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</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="progress"><code><progress></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/meter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter</a> + </p> +</div> diff --git a/devdocs/html/element%2Fnav.html b/devdocs/html/element%2Fnav.html new file mode 100644 index 00000000..d8d5d024 --- /dev/null +++ b/devdocs/html/element%2Fnav.html @@ -0,0 +1,105 @@ +<header><h1><nav>: The Navigation Section element</h1></header><div class="section-content"><p>The <code><nav></code> <a href="../index">HTML</a> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</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/nav.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#sectioning_content">sectioning content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">navigation</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>It's not necessary for all links to be contained in a <code><nav></code> element. <code><nav></code> is intended only for a major block of navigation links; typically the <a href="footer"><code><footer></code></a> element often has a list of links that don't need to be in a <a href="nav" aria-current="page"><code><nav></code></a> element.</li> <li>A document may have several <a href="nav" aria-current="page"><code><nav></code></a> elements, for example, one for site navigation and one for intra-page navigation. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> can be used in such case to promote accessibility, see <a href="heading_elements#labeling_section_content">example</a>.</li> <li>User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, a <code><nav></code> block is used to contain an unordered list (<a href="ul"><code><ul></code></a>) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="lvHiSO1FEwp248bp4D6V4uLSBWnonuH9Q1bJkeF/9DY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</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>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The semantics of the <code>nav</code> element is that of providing links. However a <code>nav</code> element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NpWeQ3PZnVei0X8e1Ma+f4F87L9r2flLHqsYdUdbvbM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + You are on my home page. To the north lies <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>my blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>, from + whence the sounds of battle can be heard. To the east you can see a large + mountain, upon which many <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/school<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>school papers<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> are littered. + Far up this mountain you can spy a little figure who appears to be me, + desperately scribbling a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/school/thesis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>thesis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + To the west are several exits. One fun-looking exit is labeled + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://games.example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>"games"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Another more + boring-looking exit is labeled <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://isp.example.net/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ISP™<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + To the south lies a dark and dank <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>contacts page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. + Cobwebs cover its disused entrance, and at one point you see a rat run + quickly out of the page. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/nav/runner.html?id=examples" 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/sections.html#the-nav-element">HTML Standard <br><small># the-nav-element</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>nav</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="article"><code><article></code></a>, <a href="section"><code><section></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a>;</li> <li> +<a href="heading_elements">Sections and outlines of an HTML document</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role">ARIA: Navigation role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/nav" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav</a> + </p> +</div> diff --git a/devdocs/html/element%2Fnobr.html b/devdocs/html/element%2Fnobr.html new file mode 100644 index 00000000..15fd9691 --- /dev/null +++ b/devdocs/html/element%2Fnobr.html @@ -0,0 +1,59 @@ +<header><h1><nobr>: The Non-Breaking Text element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><nobr></code> <a href="../index">HTML</a> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Although this element is widely supported, it was <em>never</em> standard HTML, so you shouldn't use it. Instead, use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a> like this:</p> </div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ojJQqBHOsvuFfGOUqwPzOXxvw3vyGh4KH/An+Lwh1yY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Long line with no breaks<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</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/obsolete.html#nobr">HTML Standard <br><small># nobr</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>nobr</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"><code>overflow</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/nobr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr</a> + </p> +</div> diff --git a/devdocs/html/element%2Fnoembed.html b/devdocs/html/element%2Fnoembed.html new file mode 100644 index 00000000..aba7f9a7 --- /dev/null +++ b/devdocs/html/element%2Fnoembed.html @@ -0,0 +1,65 @@ +<header><h1><noembed>: The Embed Fallback element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><noembed></code> <a href="../index">HTML</a> element is an obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the <a href="embed"><code><embed></code></a> element or do not support the type of <a href="../content_categories#embedded_content">embedded content</a> an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an <a href="object"><code><object></code></a> element.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> While this element currently still works in many browsers, it is obsolete and should not be used. Use <a href="object"><code><object></code></a> instead, with fallback content between the opening and closing tags of the element.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>The message inside <code><noembed></code> tag will appear only when your browser does not support <code><embed></code> tag.</p></div> +<h3 id="show_an_alternative_content">Show an alternative content</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="c972tvMGBdOXeNppt5WhnIa1UtTGWR7uB4dDcU9SW1w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>embed</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>vide/webm<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/media/examples/flower.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noembed</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Alternative content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noembed</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>embed</span><span class="token punctuation">></span></span> +</pre> +</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/obsolete.html#noembed">HTML Standard <br><small># noembed</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>noembed</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/noembed" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noembed</a> + </p> +</div> diff --git a/devdocs/html/element%2Fnoframes.html b/devdocs/html/element%2Fnoframes.html new file mode 100644 index 00000000..7b9410a6 --- /dev/null +++ b/devdocs/html/element%2Fnoframes.html @@ -0,0 +1,80 @@ +<header><h1><noframes>: The Frame Fallback element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><noframes></code> <a href="../index">HTML</a> element provides content to be presented in browsers that don't support (or have disabled support for) the <a href="frame"><code><frame></code></a> element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.</p> <p>A <code><noframes></code> element can contain any HTML elements that are allowed within the body of an HTML document, except for the <a href="frameset"><code><frameset></code></a> and <a href="frame"><code><frame></code></a> elements, since using frames when they aren't supported doesn't make sense.</p> <p><code><noframes></code> can be used to present a message explaining that the user's browser doesn't support frames, but ideally should be used to present an alternate form of the site that doesn't use frames but still offers the same or similar functionality.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> This element is obsolete and shouldn't be used, since the <a href="frame"><code><frame></code></a> and <a href="frameset"><code><frameset></code></a> elements are also obsolete. When frames are needed at all, they should be presented using the <a href="iframe"><code><iframe></code></a> element.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>. It has no other attributes available.</p></div> +<h2 id="example">Example</h2> +<div class="section-content"> +<p>In this example, we see a frameset with two frames. In addition, <code><noframes></code> is used to present an explanatory message if the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> doesn't support frames.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+Q5KRHcH2KJgMrBHlk/KdH72wQRAuFcJ1TSnezqWGMU=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Document metadata goes here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>45%, 55%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/frameset<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://developer.mozilla.org/en/HTML/Element/frame<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noframes</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + It seems your browser does not support frames or is configured to not + allow them. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noframes</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</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/obsolete.html#noframes">HTML Standard <br><small># noframes</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>noframes</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="frameset"><code><frameset></code></a></li> <li><a href="frame"><code><frame></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/noframes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noframes</a> + </p> +</div> diff --git a/devdocs/html/element%2Fnoscript.html b/devdocs/html/element%2Fnoscript.html new file mode 100644 index 00000000..79a5d195 --- /dev/null +++ b/devdocs/html/element%2Fnoscript.html @@ -0,0 +1,71 @@ +<header><h1><noscript>: The Noscript element</h1></header><div class="section-content"> +<p>The <code><noscript></code> <a href="../index">HTML</a> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>, <a href="../content_categories#flow_content">flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> When scripting is disabled and when it is a descendant of the <a href="head"><code><head></code></a> element: in any order, zero or more <a href="link"><code><link></code></a> elements, zero or more <a href="style"><code><style></code></a> elements, and zero or more <a href="meta"><code><meta></code></a> elements.<br>When scripting is disabled and when it isn't a descendant of the <a href="head"><code><head></code></a> element: any <a href="../content_categories#transparent_content_model">transparent content</a>, but no <code><noscript></code> element must be among its descendants.<br>Otherwise: flow content or phrasing content. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, if there are no ancestor <code><noscript></code> element, or in a <a href="head"><code><head></code></a> element (but only for an HTML document), here again if there are no ancestor <code><noscript></code> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="OOhJQl/3vn5jXTIZwHLqDDg9lfwwyY16x6xvY8+6LfE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noscript</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- anchor linking to external file --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.mozilla.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>External Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noscript</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Rocks!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result_with_scripting_enabled">Result with scripting enabled</h3> +<div class="section-content"><p>Rocks!</p></div> +<h3 id="result_with_scripting_disabled">Result with scripting disabled</h3> +<div class="section-content"> +<p><a href="https://www.mozilla.org/" target="_blank">External Link</a></p> <p>Rocks!</p> +</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/scripting.html#the-noscript-element">HTML Standard <br><small># the-noscript-element</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>noscript</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/noscript" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript</a> + </p> +</div> diff --git a/devdocs/html/element%2Fobject.html b/devdocs/html/element%2Fobject.html new file mode 100644 index 00000000..7c2fb7f1 --- /dev/null +++ b/devdocs/html/element%2Fobject.html @@ -0,0 +1,324 @@ +<header><h1><object>: The External Object element</h1></header><div class="section-content"><p>The <code><object></code> <a href="../index">HTML</a> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.</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/object.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="archive"> +<a href="#archive"><code>archive</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A space-separated list of URIs for archives of resources for the object.</p> </dd> <dt id="border"> +<a href="#border"><code>border</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The width of a border around the control, in pixels.</p> </dd> <dt id="classid"> +<a href="#classid"><code>classid</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</p> </dd> <dt id="codebase"> +<a href="#codebase"><code>codebase</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</p> </dd> <dt id="codetype"> +<a href="#codetype"><code>codetype</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The content type of the data specified by <strong>classid</strong>.</p> </dd> <dt id="data"><a href="#data"><code>data</code></a></dt> <dd> <p>The address of the resource as a valid URL. At least one of <strong>data</strong> and <strong>type</strong> must be defined.</p> </dd> <dt id="declare"> +<a href="#declare"><code>declare</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code><object></code> element. Repeat the <code><object></code> element completely each time the resource is reused.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The form element, if any, that the object element is associated with (its <em>form owner</em>). The value of the attribute must be an ID of a <a href="form"><code><form></code></a> element in the same document.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The height of the displayed resource, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a>. — (Absolute values only. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes" target="_blank">NO percentages</a>)</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of valid browsing context (HTML5), or the name of the control (HTML 4).</p> </dd> <dt id="standby"> +<a href="#standby"><code>standby</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A message that the browser can show while loading the object's implementation and data.</p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">content type</a> of the resource specified by <strong>data</strong>. At least one of <strong>data</strong> and <strong>type</strong> must be defined.</p> </dd> <dt id="usemap"><a href="#usemap"><code>usemap</code></a></dt> <dd> <p>A hash-name reference to a <a href="map"><code><map></code></a> element; that is a '#' followed by the value of a <a href="map#name"><code>name</code></a> of a map element.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The width of the display resource, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a>. — (Absolute values only. <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes" target="_blank">NO percentages</a>)</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="embed_a_video">Embed a video</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="u94sPWtd4wCI83rEScsFhbgO+s6tZ/Art1Ewe55cJZs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>object</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>video/mp4<span class="token punctuation">"</span></span> + <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>600<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>140<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>path/image.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>useful image description<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>object</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Embed a video" id="frame_4298" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/object/runner.html?id=4298" loading="lazy"></iframe> +</div> <p>If the video in the example fails to load, the user will be provided with an image as fallback content. The <a href="img"><code><img></code></a> tag is used to display an image. We include the <code>src</code> attribute set to the path to the image we want to embed. We also include the <code>alt</code> attribute, which provides the image with an accessible name. If the image also fails to load, the content of the <code>alt</code> attribute will be displayed.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>; <a href="../content_categories#phrasing_content">phrasing content</a>; <a href="../content_categories#embedded_content">embedded content</a>, palpable content; if the element has a <a href="object#usemap" aria-current="page"><code>usemap</code></a> attribute, <a href="../content_categories#interactive_content">interactive content</a>; <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_content">form-associated</a> element. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> zero or more <a href="param"><code><param></code></a> elements, then <a href="../content_categories#transparent_content_model">transparent</a>. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts <a href="../content_categories#embedded_content">embedded content</a>.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role"><code>img</code></a> +</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement"><code>HTMLObjectElement</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/iframe-embed-object.html#the-object-element">HTML Standard <br><small># the-object-element</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>object</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>archive</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>border</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>classid</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>codebase</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>codetype</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>data</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>declare</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>standby</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>tabindex</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>usemap</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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="embed"><code><embed></code></a></li> <li><a href="param"><code><param></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/object" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object</a> + </p> +</div> diff --git a/devdocs/html/element%2Fol.html b/devdocs/html/element%2Fol.html new file mode 100644 index 00000000..1f117533 --- /dev/null +++ b/devdocs/html/element%2Fol.html @@ -0,0 +1,237 @@ +<header><h1><ol>: The Ordered List element</h1></header><div class="section-content"><p>The <code><ol></code> <a href="../index">HTML</a> element represents an ordered list of items — typically rendered as a numbered list.</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/ol.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element also accepts the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="reversed"><a href="#reversed"><code>reversed</code></a></dt> <dd> <p>This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.</p> </dd> <dt id="start"><a href="#start"><code>start</code></a></dt> <dd> <p>An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering <code>type</code> is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use <code>start="4"</code>.</p> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>Sets the numbering type:</p> <ul> <li> +<code>a</code> for lowercase letters</li> <li> +<code>A</code> for uppercase letters</li> <li> +<code>i</code> for lowercase Roman numerals</li> <li> +<code>I</code> for uppercase Roman numerals</li> <li> +<code>1</code> for numbers (default)</li> </ul> <p>The specified type is used for the entire list unless a different <a href="li#type"><code>type</code></a> attribute is used on an enclosed <a href="li"><code><li></code></a> element.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property instead.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Typically, ordered list items display with a preceding <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker">marker</a>, such as a number or letter.</p> <p>The <code><ol></code> and <a href="ul"><code><ul></code></a> elements may nest as deeply as desired, alternating between <code><ol></code> and <code><ul></code> however you like.</p> <p>The <code><ol></code> and <a href="ul"><code><ul></code></a> elements both represent a list of items. The difference is with the <code><ol></code> element, the order is meaningful. For example:</p> <ul> <li>Steps in a recipe</li> <li>Turn-by-turn directions</li> <li>The list of ingredients in decreasing proportion on nutrition information labels</li> </ul> <p>To determine which list to use, try changing the order of the list items; if the meaning changes, use the <code><ol></code> element — otherwise you can use <a href="ul"><code><ul></code></a>.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_example">Simple example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6kDgrEEvDkFQLRMGZhbFCFDPrbV7kZiK7yqGYt2hJko=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Fee<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Fi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Fo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Fum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="400" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ol/runner.html?id=simple_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_roman_numeral_type">Using Roman Numeral type</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="AQjfsseOztiYWvZ1s79naUgXU0qUgonoYoblPUUFI5E=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>i<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Introduction<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List of Grievances<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Conclusion<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Using Roman Numeral type sample" id="frame_using_roman_numeral_type" width="400" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ol/runner.html?id=using_roman_numeral_type" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_the_start_attribute">Using the start attribute</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UsEhPVqfYPTlAgsMJpnCD6aif1rvpYG4XT3s5Dlyzlc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Finishing places of contestants not in the winners' circle:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span> <span class="token attr-name">start</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Speedwalk Stu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Saunterin' Sam<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Slowpoke Rodriguez<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Using the start attribute sample" id="frame_using_the_start_attribute" width="400" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ol/runner.html?id=using_the_start_attribute" loading="lazy"></iframe> +</div> +</div> +<h3 id="nesting_lists">Nesting lists</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SlmbcOxxr64zPSGcfrgmN8hBcyl0zAyqPMTZLwVzhZo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + second item + <span class="token comment"><!-- closing </li> tag is not here! --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Here's the closing </li> tag --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Nesting lists sample" id="frame_nesting_lists" width="400" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ol/runner.html?id=nesting_lists" loading="lazy"></iframe> +</div> +</div> +<h3 id="unordered_list_inside_ordered_list">Unordered list inside ordered list</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Y1nCSf2gP77BPcXkYpgSlCYzUxibFPwUK+STDipqoxQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + second item + <span class="token comment"><!-- closing </li> tag is not here! --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Here's the closing </li> tag --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Unordered list inside ordered list sample" id="frame_unordered_list_inside_ordered_list" width="400" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ol/runner.html?id=unordered_list_inside_ordered_list" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, and if the <code><ol></code> element's children include at least one <a href="li"><code><li></code></a> element, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="li"><code><li></code></a>, <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role">list</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role"><code>directory</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role"><code>menubar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role"><code>tablist</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role"><code>toolbar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role"><code>tree</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</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/grouping-content.html#the-ol-element">HTML Standard <br><small># the-ol-element</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>ol</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>compact</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>reversed</code></th> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>start</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>Other list-related HTML Elements: <a href="ul"><code><ul></code></a>, <a href="li"><code><li></code></a>, <a href="menu"><code><menu></code></a> +</li> <li>CSS properties that may be specially useful to style the <code><ol></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> property, to choose the way the ordinal displays</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a>, to handle complex nested lists</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property, to simulate the deprecated <a href="#compact"><code>compact</code></a> attribute</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property, to control the list indentation</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/ol" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol</a> + </p> +</div> diff --git a/devdocs/html/element%2Foptgroup.html b/devdocs/html/element%2Foptgroup.html new file mode 100644 index 00000000..15a7eea5 --- /dev/null +++ b/devdocs/html/element%2Foptgroup.html @@ -0,0 +1,119 @@ +<header><h1><optgroup>: The Option Group element</h1></header><div class="section-content"><p>The <code><optgroup></code> <a href="../index">HTML</a> element creates a grouping of options within a <a href="select"><code><select></code></a> element.</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/optgroup.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Optgroup elements may not be nested.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.</p> </dd> <dt id="label"><a href="#label"><code>label</code></a></dt> <dd> <p>The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="8d6LzWimwabx5QLlOyOM1drlp2h1OtESJZZ77PRdMe8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 1.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 2.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Group 3<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 3.1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 3.2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Option 3.3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/optgroup/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Zero or more <a href="option"><code><option></code></a> elements.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory. The end tag is optional if this element is immediately followed by another <code><optgroup></code> element, or if the parent element has no more content. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="select"><code><select></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptGroupElement"><code>HTMLOptGroupElement</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/form-elements.html#the-optgroup-element">HTML Standard <br><small># the-optgroup-element</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>optgroup</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">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>disabled</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">8</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>label</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">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>Other form-related elements: <a href="form"><code><form></code></a>, <a href="legend"><code><legend></code></a>, <a href="label"><code><label></code></a>, <a href="button"><code><button></code></a>, <a href="select"><code><select></code></a>, <a href="datalist"><code><datalist></code></a>, <a href="option"><code><option></code></a>, <a href="fieldset"><code><fieldset></code></a>, <a href="textarea"><code><textarea></code></a>, <a href="input"><code><input></code></a>, <a href="output"><code><output></code></a>, <a href="progress"><code><progress></code></a> and <a href="meter"><code><meter></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/optgroup" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup</a> + </p> +</div> diff --git a/devdocs/html/element%2Foption.html b/devdocs/html/element%2Foption.html new file mode 100644 index 00000000..cfaa7be7 --- /dev/null +++ b/devdocs/html/element%2Foption.html @@ -0,0 +1,127 @@ +<header><h1><option>: The HTML Option element</h1></header><div class="section-content"><p>The <code><option></code> <a href="../index">HTML</a> element is used to define an item contained in a <a href="select"><code><select></code></a>, an <a href="optgroup"><code><optgroup></code></a>, or a <a href="datalist"><code><datalist></code></a> element. As such, <code><option></code> can represent menu items in popups and other lists of items in an HTML document.</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/option.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>If this Boolean attribute is set, this option is not checkable. Often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones. If this attribute is not set, the element can still be disabled if one of its ancestors is a disabled <a href="optgroup"><code><optgroup></code></a> element.</p> </dd> <dt id="label"><a href="#label"><code>label</code></a></dt> <dd> <p>This attribute is text for the label indicating the meaning of the option. If the <code>label</code> attribute isn't defined, its value is that of the element text content.</p> </dd> <dt id="selected"><a href="#selected"><code>selected</code></a></dt> <dd> <p>If present, this Boolean attribute indicates that the option is initially selected. If the <code><option></code> element is the descendant of a <a href="select"><code><select></code></a> element whose <a href="select#multiple"><code>multiple</code></a> attribute is not set, only one single <code><option></code> of this <a href="select"><code><select></code></a> element may have the <code>selected</code> attribute.</p> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.</p> </dd> </dl> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"><p>Styling the <code><option></code> element is highly limited. Options don't inherit the font set on the parent. In Firefox, only <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color"><code>color</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> can be set, however in Chrome and Safari it's not possible to set any properties. You can find more details about styling in <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">our guide to advanced form styling</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="select"><code><select></code></a> for examples.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> Text, possibly with escaped characters (like <code>&eacute;</code>). </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory. The end tag is optional if this element is immediately followed by another <code><option></code> element or an <a href="optgroup"><code><optgroup></code></a>, or if the parent element has no more content. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="select"><code><select></code></a>, an <a href="optgroup"><code><optgroup></code></a> or a <a href="datalist"><code><datalist></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</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/form-elements.html#the-option-element">HTML Standard <br><small># the-option-element</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>option</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>disabled</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>label</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>["Before 77, Firefox didn't display the value of the <code>label</code> attribute as option text if element's content was empty. See <a href="https://bugzil.la/40545">bug 40545</a>.", "Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code><option></code> element to the parent <code><select></code> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), they will not bubble up when Firefox is in multi-process mode and the <code><select></code> element is displayed as a drop-down list. The behavior is unchanged if the <code><select></code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than <code>1</code>. Rather than watching <code><option></code> elements for events, you should watch for <a href="https://developer.mozilla.org/docs/Web/Events/change">change</a> events on <code><select></code>. See <a href="https://bugzil.la/1090602">bug 1090602</a> for details.", "When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <code><option></code> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <code><option></code> elements again, using the <code>color</code> and <code>background-color</code> CSS properties. See <a href="https://bugzil.la/910022">bug 910022</a> for more information. Note that this is still disabled in Linux due to lack of contrast (see <a href="https://bugzil.la/1338283">bug 1338283</a> for progress on this)."]</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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"><details><summary>4</summary>Before 77, Firefox didn't display the value of the <code>label</code> attribute as option text if element's content was empty. See <a href="https://bugzil.la/40545">bug 40545</a>.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>selected</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>value</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>Other form-related elements: <a href="form"><code><form></code></a>, <a href="legend"><code><legend></code></a>, <a href="label"><code><label></code></a>, <a href="button"><code><button></code></a>, <a href="select"><code><select></code></a>, <a href="datalist"><code><datalist></code></a>, <a href="optgroup"><code><optgroup></code></a>, <a href="fieldset"><code><fieldset></code></a>, <a href="textarea"><code><textarea></code></a>, <a href="input"><code><input></code></a>, <a href="output"><code><output></code></a>, <a href="progress"><code><progress></code></a> and <a href="meter"><code><meter></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/option" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option</a> + </p> +</div> diff --git a/devdocs/html/element%2Foutput.html b/devdocs/html/element%2Foutput.html new file mode 100644 index 00000000..6ecd439b --- /dev/null +++ b/devdocs/html/element%2Foutput.html @@ -0,0 +1,124 @@ +<header><h1><output>: The Output element</h1></header><div class="section-content"><p>The <code><output></code> <a href="../index">HTML</a> element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.</p></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="for"><a href="#for"><code>for</code></a></dt> <dd> <p>A space-separated list of other elements' <a href="../global_attributes#id"><code>id</code></a>s, indicating that those elements contributed input values to (or otherwise affected) the calculation.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The <a href="form"><code><form></code></a> element to associate the output with (its <em>form owner</em>). The value of this attribute must be the <a href="../global_attributes#id"><code>id</code></a> of a <code><form></code> in the same document. (If this attribute is not set, the <code><output></code> is associated with its ancestor <code><form></code> element, if any.)</p> <p>This attribute lets you associate <code><output></code> elements to <code><form></code>s anywhere in the document, not just inside a <code><form></code>. It can also override an ancestor <code><form></code> element.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The element's name. Used in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements"><code>form.elements</code></a> API.</p> </dd> </dl> <p>The <code><output></code> value, name, and contents are NOT submitted during form submission.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In the following example, the form provides a slider whose value can range between <code>0</code> and <code>100</code>, and an <a href="input"><code><input></code></a> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <code><output></code> element each time the value of any of the controls changes.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="E8BAOuvk/mX5mUmJ+nS516ASOd04vytU8mgzgZvVsvo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">oninput</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>result.value=parseInt(a.value)+parseInt(b.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>range<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>b<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<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>50<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>number<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>a<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<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>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> = + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>result<span class="token punctuation">"</span></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>a b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>60<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/output/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility Concerns</h2> +<div class="section-content"><p>Many browsers implement this element as an <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, <a href="../content_categories#form_resettable">resettable</a> <a href="../content_categories#form-associated_content">form-associated element</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role"><code>status</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</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/form-elements.html#the-output-element">HTML Standard <br><small># the-output-element</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>output</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>for</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/output" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output</a> + </p> +</div> diff --git a/devdocs/html/element%2Fp.html b/devdocs/html/element%2Fp.html new file mode 100644 index 00000000..5abe191c --- /dev/null +++ b/devdocs/html/element%2Fp.html @@ -0,0 +1,163 @@ +<header><h1><p>: The Paragraph element</h1></header><div class="section-content"> +<p>The <code><p></code> <a href="../index">HTML</a> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.</p> <p>Paragraphs are <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level elements</a>, and notably will automatically close if another block-level element is parsed before the closing <code></p></code> tag. See "Tag omission" below.</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/p.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is required. The end tag may be omitted if the <a href="p" aria-current="page"><code><p></code></a> element is immediately followed by an <a href="address"><code><address></code></a>, <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="blockquote"><code><blockquote></code></a>, <a href="details"><code><details></code></a>, <a href="div"><code><div></code></a>, <a href="dl"><code><dl></code></a>, <a href="fieldset"><code><fieldset></code></a>, <a href="figcaption"><code><figcaption></code></a>, <a href="figure"><code><figure></code></a>, <a href="footer"><code><footer></code></a>, <a href="form"><code><form></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="header"><code><header></code></a>, <a href="hgroup"><code><hgroup></code></a>, <a href="hr"><code><hr></code></a>, <a href="main"><code><main></code></a>, <a href="menu"><code><menu></code></a>, <a href="nav"><code><nav></code></a>, <a href="ol"><code><ol></code></a>, <a href="pre"><code><pre></code></a>, <a href="search"><code><search></code></a>, <a href="section"><code><section></code></a>, <a href="table"><code><table></code></a>, <a href="ul"><code><ul></code></a> or another <a href="p" aria-current="page"><code><p></code></a> element, or if there is no more content in the parent element and the parent element is not an <a href="a"><code><a></code></a>, <a href="audio"><code><audio></code></a>, <a href="del"><code><del></code></a>, <a href="ins"><code><ins></code></a>, <a href="map"><code><map></code></a>, <a href="noscript"><code><noscript></code></a> or <a href="video"><code><video></code></a> element, or an autonomous custom element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles">paragraph</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement"><code>HTMLParagraphElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element only includes the <a href="../global_attributes">global attributes</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>align</code> attribute on <code><p></code> tags is obsolete and shouldn't be used.</p> </div> +</div> +<h2 id="examples">Examples</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="FbcvsC38VNKV5rvL7IZ3SMq4jAhh+BqGj/GGrTDVtDs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first paragraph of text. This is the first paragraph of text. This + is the first paragraph of text. This is the first paragraph of text. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the second paragraph. This is the second paragraph. This is the second + paragraph. This is the second paragraph. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/p/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="styling_paragraphs">Styling paragraphs</h2> +<div class="section-content"><p>By default, browsers separate paragraphs with a single blank line. Alternate separation methods, such as first-line indentation, can be achieved with <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a>:</p></div> +<h3 id="html_2">HTML</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ArLnQg2kOLl8KSZ5VpaS6wrUF8m9ge4XH+7RP3M8tfg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Separating paragraphs with blank lines is easiest for readers to scan, but + they can also be separated by indenting their first lines. This is often used + to take up less space, such as to save paper in print. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Writing that is intended to be edited, such as school papers and rough drafts, + uses both blank lines and indentation for separation. In finished works, + combining both is considered redundant and amateurish. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + In very old writing, paragraphs were separated with a special character: ¶, + the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>pilcrow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>. Nowadays, this is considered claustrophobic and hard to + read. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + How hard to read? See for yourself: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">data-toggle-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Oh no! Switch back!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Use pilcrow for paragraphs + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="css">CSS</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="vgpXjJe+JsfZeiUxmbRM7/M6B7zsSGiKQMxeZ+EhR/M=" data-language="css"><span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">text-indent</span><span class="token punctuation">:</span> 3ch<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">p.pilcrow</span> <span class="token punctuation">{</span> + <span class="token property">text-indent</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">p.pilcrow + p.pilcrow::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" ¶ "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div></div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="SD7N47Qi2DXpOUk8UvzrGUIfE0FpStuKBw4sSYFJIAk=" data-language="js">document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">paragraph</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + paragraph<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"pilcrow"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token punctuation">[</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">,</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>toggleText<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> + event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>toggleText<span class="token punctuation">,</span> + event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText<span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div></div> +<h3 id="result_2">Result</h3> +<div class="section-content"><div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Styling paragraphs sample" id="frame_styling_paragraphs" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/p/runner.html?id=styling_paragraphs" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.</p> <p>Using empty <code><p></code> elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.</p> <p>If extra space is desired, use <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> to create the effect:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="8IOLiGNqGIFy1pDARviiN2xl/VLbbo48fMURml9fhUk=" data-language="css"><span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token comment">/* increase white space after a paragraph */</span> +<span class="token punctuation">}</span> +</pre> +</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/grouping-content.html#the-p-element">HTML Standard <br><small># the-p-element</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>p</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">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">4</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="hr"><code><hr></code></a></li> <li><a href="br"><code><br></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/p" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p</a> + </p> +</div> diff --git a/devdocs/html/element%2Fparam.html b/devdocs/html/element%2Fparam.html new file mode 100644 index 00000000..2a594d86 --- /dev/null +++ b/devdocs/html/element%2Fparam.html @@ -0,0 +1,134 @@ +<header><h1><param>: The Object Parameter element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><param></code> <a href="../index">HTML</a> element defines parameters for an <a href="object"><code><object></code></a> element.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="name"> +<a href="#name"><code>name</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Name of the parameter.</p> </dd> <dt id="value"> +<a href="#value"><code>value</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Specifies the value of the parameter.</p> </dd> <dt id="type"> +<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Only used if the <code>valuetype</code> is set to <code>ref</code>. Specifies the MIME type of values found at the URI specified by value.</p> </dd> <dt id="valuetype"> +<a href="#valuetype"><code>valuetype</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Specifies the type of the <code>value</code> attribute. Possible values are:</p> <ul> <li> +<code>data</code>: Default value. The value is passed to the object's implementation as a string.</li> <li> +<code>ref</code>: The value is a URI to a resource where run-time values are stored.</li> <li> +<code>object</code>: An ID of another <a href="object"><code><object></code></a> in the same document.</li> </ul> </dd> </dl> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> As it is a void element, the start tag must be present and the end tag must not be present. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> An <a href="object"><code><object></code></a> before any <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLParamElement"><code>HTMLParamElement</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/obsolete.html#the-param-element">HTML Standard <br><small># the-param-element</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>param</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>value</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valuetype</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="object"><code><object></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/param" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/param</a> + </p> +</div> diff --git a/devdocs/html/element%2Fpicture.html b/devdocs/html/element%2Fpicture.html new file mode 100644 index 00000000..3beeaf09 --- /dev/null +++ b/devdocs/html/element%2Fpicture.html @@ -0,0 +1,108 @@ +<header><h1><picture>: The Picture element</h1></header><div class="section-content"> +<p>The <code><picture></code> <a href="../index">HTML</a> element contains zero or more <a href="source"><code><source></code></a> elements and one <a href="img"><code><img></code></a> element to offer alternative versions of an image for different display/device scenarios.</p> <p>The browser will consider each child <code><source></code> element and choose the best match among them. If no matches are found—or the browser doesn't support the <code><picture></code> element—the URL of the <code><img></code> element's <a href="img#src"><code>src</code></a> attribute is selected. The selected image is then presented in the space occupied by the <code><img></code> element.</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/picture.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>To decide which URL to load, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> examines each <code><source></code>'s <a href="source#srcset"><code>srcset</code></a>, <a href="source#media"><code>media</code></a>, and <a href="source#type"><code>type</code></a> attributes to select a compatible image that best matches the current layout and capabilities of the display device.</p> <p>The <code><img></code> element serves two purposes:</p> <ol> <li>It describes the size and other attributes of the image and its presentation.</li> <li>It provides a fallback in case none of the offered <code><source></code> elements are able to provide a usable image.</li> </ol> <p>Common use cases for <code><picture></code>:</p> <ul> <li> +<strong>Art direction.</strong> Cropping or modifying images for different <code>media</code> conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).</li> <li> +<strong>Offering alternative image formats</strong>, for cases where certain formats are not supported. <div class="notecard note" id="sect1"> <p><strong>Note:</strong> For example, newer formats like <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif_image">AVIF</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image">WEBP</a> have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a>.</p> </div> </li> <li> +<strong>Saving bandwidth and speeding page load times</strong> by loading the most appropriate image for the viewer's display.</li> </ul> <p>If providing higher-density versions of an image for high-DPI (Retina) display, use <a href="img#srcset"><code>srcset</code></a> on the <code><img></code> element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit <code>media</code> conditions.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, phrasing content, embedded content</td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="source"><code><source></code></a> elements, followed by one <a href="img"><code><img></code></a> element, optionally intermixed with script-supporting elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that allows embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLPictureElement"><code>HTMLPictureElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes only <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> property to adjust the positioning of the image within the element's frame, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> property to control how the image is resized to fit within the frame.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Use these properties on the child <code><img></code> element, <strong>not</strong> the <code><picture></code> element.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>These examples demonstrate how different attributes of the <a href="source"><code><source></code></a> element change the selection of the image inside <code><picture></code>.</p></div> +<h3 id="the_media_attribute">The media attribute</h3> +<div class="section-content"> +<p>The <code>media</code> attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <a href="source"><code><source></code></a> element.</p> <p>If the <a href="source"><code><source></code></a>'s media condition evaluates to <code>false</code>, the browser skips it and evaluates the next element inside <code><picture></code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="HTS5sj9/JeZxfgCJb0vNnD+K4YSJezBpfY1Kw5ewzc8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-wide.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-narrow.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="the_srcset_attribute">The srcset attribute</h3> +<div class="section-content"> +<p>The <a href="source#srcset">srcset</a> attribute is used to offer list of possible images <em>based on size</em>.</p> <p>It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and <em>either</em>:</p> <ul> <li> a <em>width descriptor</em>, followed by a <code>w</code> (such as <code>300w</code>); <em>OR</em> </li> <li>a <em>pixel density descriptor</em>, followed by an <code>x</code> (such as <code>2x</code>) to serve a high-res image for high-DPI screens.</li> </ul> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TFQUnfmCqrOpzau1E7THczzY1iLwGn9FPJjRqHl4S0s=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo-768.png, logo-768-1.5x.png 1.5x<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo-320.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="the_type_attribute">The type attribute</h3> +<div class="section-content"> +<p>The <code>type</code> attribute specifies a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> for the resource URL(s) in the <a href="source"><code><source></code></a> element's <code>srcset</code> attribute. If the user agent does not support the given type, the <a href="source"><code><source></code></a> element is skipped.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zVNOyNoqC/eoScJZQdVdBQnuXcLhZ8ZB/GfEmIpVD5s=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo.avif<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>image/avif<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo.webp<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>image/webp<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>photo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> +</pre> +</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/embedded-content.html#the-picture-element">HTML Standard <br><small># the-picture-element</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>picture</code></th> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">3.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="img"><code><img></code></a> element</li> <li> +<a href="source"><code><source></code></a> element</li> <li>Positioning and sizing the picture within its frame: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/picture" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture</a> + </p> +</div> diff --git a/devdocs/html/element%2Fplaintext.html b/devdocs/html/element%2Fplaintext.html new file mode 100644 index 00000000..62a338bc --- /dev/null +++ b/devdocs/html/element%2Fplaintext.html @@ -0,0 +1,62 @@ +<header><h1><plaintext>: The Plain Text element (Deprecated)</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><plaintext></code> <a href="../index">HTML</a> element renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Do not use this element.</p> <ul> <li> +<code><plaintext></code> is deprecated since HTML 2, and not all browsers implemented it. Browsers that did implement it didn't do so consistently.</li> <li> +<code><plaintext></code> is obsolete; browsers that accept it may instead treat it as a <a href="pre"><code><pre></code></a> element that still interprets HTML within.</li> <li>If <code><plaintext></code> is the first element on the page (other than any non-displayed elements, like <a href="head"><code><head></code></a>), do not use HTML at all. Instead serve a text file with the <code>text/plain</code> <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Configuring_server_MIME_types">MIME-type</a>.</li> <li>Instead of <code><plaintext></code>, use the <a href="pre"><code><pre></code></a> element or, if semantically accurate (such as for inline text), the <a href="code"><code><code></code></a> element. Escape any <code><</code>, <code>></code> and <code>&</code> characters, to prevent browsers inadvertently parsing content the element content as HTML.</li> <li>A monospaced font can be applied to any HTML element via a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> style with the <code>monospace</code> generic value.</li> </ul> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element has no other attributes than the <a href="../global_attributes">global attributes</a> common to all elements.</p></div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</p></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/obsolete.html#plaintext">HTML Standard <br><small># plaintext</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>plaintext</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4<details><summary>1–4</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details> +</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="pre"><code><pre></code></a> and <a href="code"><code><code></code></a> elements, which should be used instead.</li> <li>The <a href="xmp"><code><xmp></code></a> element, also obsolete, similar to <a href="plaintext" aria-current="page"><code><plaintext></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/plaintext" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext</a> + </p> +</div> diff --git a/devdocs/html/element%2Fportal.html b/devdocs/html/element%2Fportal.html new file mode 100644 index 00000000..54f1da5c --- /dev/null +++ b/devdocs/html/element%2Fportal.html @@ -0,0 +1,73 @@ +<header><h1><portal>: The Portal element</h1></header><div class="section-content"> +<div class="notecard experimental" id="sect1"><p><strong>Experimental:</strong> <strong>This is an <a href="https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental">experimental technology</a></strong><br>Check the <a href="#browser_compatibility">Browser compatibility table</a> carefully before using this in production.</p></div> <p>The <code><portal></code> <a href="../index">HTML</a> element enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.</p> <p>A <code><portal></code> is similar to an <code><iframe></code>. An <code><iframe></code> allows a separate <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context">browsing context</a> to be embedded. However, the embedded content of a <code><portal></code> is more limited than that of an <code><iframe></code>. It cannot be interacted with, and therefore is not suitable for embedding widgets into a document. Instead, the <code><portal></code> acts as a preview of the content of another page. It can be navigated into therefore allowing for seamless transition to the embedded content.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>Sets the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy">referrer policy</a> to use when requesting the page at the URL given as the value of the <code>src</code> attribute.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the page to embed.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>The following example will embed the contents of <code>https://example.com</code> as a preview.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BkkdrCpVu4CLKRpLt4O0P9P5K19EvJl/qZBKf1erhWs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>portal</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>exampleportal<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>portal</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>The preview displayed by a <code><portal></code> is not interactive, therefore does not receive input events or focus. Therefore the embedded contents of the portal are not exposed as elements in the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree">accessibility tree</a>. The portal can be navigated to and activated like a button, the default behavior when clicking on the portal is to activate it.</p> <p>Portals are given a default label which is the title of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attribute can be used to override this.</p> <p>Portals used for prerendering only should be hidden with the hidden HTML attribute or the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> property with a value of <code>none</code>.</p> <p>When using animations during portal activation the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features">media feature</a> should be respected.</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> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></td> </tr> <tr> <th scope="row">DOM interface</th> <td><a class="page-not-created"><code>HTMLPortalElement</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://wicg.github.io/portals/#the-portal-element">Portals <br><small># the-portal-element</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>portal</code></th> +<td class="bc-supports-yes">85</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-no">No</td> +<td>?</td> +<td class="bc-supports-yes">85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/portal" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal</a> + </p> +</div> diff --git a/devdocs/html/element%2Fpre.html b/devdocs/html/element%2Fpre.html new file mode 100644 index 00000000..d3143640 --- /dev/null +++ b/devdocs/html/element%2Fpre.html @@ -0,0 +1,183 @@ +<header><h1><pre>: The Preformatted Text element</h1></header><div class="section-content"><p>The <code><pre></code> <a href="../index">HTML</a> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or <a href="https://en.wikipedia.org/wiki/Monospaced_font" target="_blank">monospaced</a>, font. Whitespace inside this element is displayed as written.</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/pre.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If you have to display reserved characters such as <code><</code>, <code>></code>, <code>&</code>, and <code>"</code> within the <code><pre></code> tag, the characters must be escaped using their respective <a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML entity</a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element only includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cols"> +<a href="#cols"><code>cols</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of <a href="#width"><code>width</code></a>. To achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> instead.</p> </dd> <dt id="wrap"> +<a href="#wrap"><code>wrap</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a> instead.</p> </dd> </dl> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.</p> <p>People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.</p> <p>A combination of the <a href="figure"><code><figure></code></a> and <a href="figcaption"><code><figcaption></code></a> elements, supplemented by the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> attributes on the <code>pre</code> element allow the preformatted <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> art to be announced as an image with alternative text, and the <code>figcaption</code> serving as the image's caption.</p> +</div> +<h3 id="example">Example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="B5YQB9OgIEPWVPXxsTuXL2miUqASlopw2LLCKbutcpc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>img<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ASCII COW<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + ___________________________ + <span class="token entity named-entity">&lt;</span> I'm an expert in my field. <span class="token entity named-entity">&gt;</span> + --------------------------- + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</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>cow-caption<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + A cow saying, "I'm an expert in my field." The cow is illustrated using + preformatted text characters. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%E2%80%94_providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html" target="_blank">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> </ul> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iIQd1jZopQJdpu+WHzSH6n5jyMjDI5+WBXiveyKwjEk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Using CSS to change the font color is easy.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +body { + color: red; +} +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="escaping_reserved_characters">Escaping reserved characters</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6tKQNA302zYigID+/jL3rLMNftHbaURc1QMq1nXNeOc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +let i = 5; + +if (i <span class="token entity named-entity">&lt;</span> 10 <span class="token entity named-entity">&amp;</span><span class="token entity named-entity">&amp;</span> i <span class="token entity named-entity">&gt;</span> 0) + return <span class="token entity named-entity">&quot;</span>Single Digit Number<span class="token entity named-entity">&quot;</span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Escaping reserved characters sample" id="frame_escaping_reserved_characters" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/pre/runner.html?id=escaping_reserved_characters" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, palpable content.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</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/grouping-content.html#the-pre-element">HTML Standard <br><small># the-pre-element</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>pre</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>cols</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">1–29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">4–29</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>12</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>1</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>15</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>3</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Since Firefox 29, specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>14</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>2</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Specifying the <code>width</code> attribute has no layout effect.</details></td> +</tr> +<tr> +<th><code>wrap</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</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">14</td> +<td class="bc-supports-yes">6</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>CSS: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break"><code>word-break</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity">HTML Entity</a></li> <li>Related element: <a href="code"><code><code></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/pre" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre</a> + </p> +</div> diff --git a/devdocs/html/element%2Fprogress.html b/devdocs/html/element%2Fprogress.html new file mode 100644 index 00000000..37dbd36c --- /dev/null +++ b/devdocs/html/element%2Fprogress.html @@ -0,0 +1,144 @@ +<header><h1><progress>: The Progress Indicator element</h1></header><div class="section-content"><p>The <code><progress></code> <a href="../index">HTML</a> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.</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/progress.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, labelable content, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but there must be no <code><progress></code> element among its descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role"><code>progressbar</code></a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>This attribute describes how much work the task indicated by the <code>progress</code> element requires. The <code>max</code> attribute, if present, must have a value greater than <code>0</code> and be a valid floating point number. The default value is <code>1</code>.</p> </dd> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>This attribute specifies how much of the task that has been completed. It must be a valid floating point number between <code>0</code> and <code>max</code>, or between <code>0</code> and <code>1</code> if <code>max</code> is omitted. If there is no <code>value</code> attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.</p> </dd> </dl> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unlike the <a href="meter"><code><meter></code></a> element, the minimum value is always 0, and the <code>min</code> attribute is not allowed for the <code><progress></code> element.</p> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a> pseudo-class can be used to match against indeterminate progress bars. To change the progress bar to indeterminate after giving it a value you must remove the value attribute with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute"><code>element.removeAttribute('value')</code></a>.</p> </div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="sYbVDP2IuhmHL5r75JnUEJV1DgBWTyk+r2Q6Dq4Gv/k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</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>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></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="Examples sample" id="frame_examples" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility Concerns</h2> + +<h3 id="labelling">Labelling</h3> +<div class="section-content"> +<p>In most cases you should provide an accessible label when using <code><progress></code>. While you can use the standard ARIA labelling attributes <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label"><code>aria-label</code></a> as you would for any element with <code>role="progressbar"</code>, when using <code><progress></code> you can alternatively use the <a href="label"><code><label></code></a> element.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Text placed between the element's tags is not an accessible label, it is only recommended as a fallback for old browsers that do not support this element.</p> </div> <h4 id="examples_2">Examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2XAw33ZFo8U002wNEFxdJAJJuVI1wG+/0ADjGgbznU8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Uploading Document: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</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>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- OR --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>progress-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Uploading Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</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>progress-bar<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>70<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>70 %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Labelling sample" id="frame_labelling" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=labelling" loading="lazy"></iframe> +</div> +</div> +<h3 id="describing_a_particular_region">Describing a particular region</h3> +<div class="section-content"> +<p>If the <code><progress></code> element is describing the loading progress of a section of a page, use <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> to point to the status, and set <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy"><code>aria-busy="true"</code></a> on the section that is being updated, removing the <code>aria-busy</code> attribute when it has finished loading.</p> <h4 id="examples_3">Examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SZbOj87Ct/1GbidII73AYhoOcTVKoCoKk2+TBmURn64=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">aria-busy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token comment"><!-- content is for this region is loading --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- ... --></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>progress</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>progress-bar<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content loading…<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>progress</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_3">Result</h5> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Describing a particular region sample" id="frame_describing_a_particular_region" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/progress/runner.html?id=describing_a_particular_region" 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/form-elements.html#the-progress-element">HTML Standard <br><small># the-progress-element</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>progress</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>6</summary>["Before Firefox 14, the <code><progress></code> element was incorrectly classified as a form element, and therefore had a <code>form</code> attribute. This has been fixed.", "Firefox provides the <code>::-moz-progress-bar</code> pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]</details></td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>6</summary>["Before Firefox 14, the <code><progress></code> element was incorrectly classified as a form element, and therefore had a <code>form</code> attribute. This has been fixed.", "Firefox provides the <code>::-moz-progress-bar</code> pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far."]</details></td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes"><details><summary>7</summary>Safari on iOS does not support indeterminate progress bars (they are rendered like 0%-completed progress bars).</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>value</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</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="meter"><code><meter></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate"><code>:indeterminate</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient"><code>-moz-orient</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar"><code>::-moz-progress-bar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar"><code>::-webkit-progress-bar</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value"><code>::-webkit-progress-value</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-inner-element"><code>::-webkit-progress-inner-element</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/progress" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress</a> + </p> +</div> diff --git a/devdocs/html/element%2Fq.html b/devdocs/html/element%2Fq.html new file mode 100644 index 00000000..e235ac28 --- /dev/null +++ b/devdocs/html/element%2Fq.html @@ -0,0 +1,78 @@ +<header><h1><q>: The Inline Quotation element</h1></header><div class="section-content"><p>The <code><q></code> <a href="../index">HTML</a> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <a href="blockquote"><code><blockquote></code></a> element.</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/q.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="cite"><a href="#cite"><code>cite</code></a></dt> <dd> <p>The value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UkatQ5f27iIWgcn2yBGnEQxYtrquDq930IQGbAfaG+k=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + According to Mozilla's website, + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q</span> <span class="token attr-name">cite</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.mozilla.org/en-US/about/history/details/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Firefox 1.0 was released in 2004 and became a big success. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/q/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</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/text-level-semantics.html#the-q-element">HTML Standard <br><small># the-q-element</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>q</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>The <a href="blockquote"><code><blockquote></code></a> element for long quotations.</li> <li>The <a href="cite"><code><cite></code></a> element for source citations.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/q" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q</a> + </p> +</div> diff --git a/devdocs/html/element%2Frb.html b/devdocs/html/element%2Frb.html new file mode 100644 index 00000000..cebee52a --- /dev/null +++ b/devdocs/html/element%2Frb.html @@ -0,0 +1,91 @@ +<header><h1><rb>: The Ruby Base element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><rb></code> <a href="../index">HTML</a> element is used to delimit the base text component of a <a href="ruby"><code><ruby></code></a> annotation, i.e. the text that is being annotated. One <code><rb></code> element should wrap each separate atomic segment of the base text.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Ruby annotations are for showing pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The <code><rb></code> element is used to separate out each segment of the ruby base text.</li> <li>Even though <code><rb></code> is not a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>, it is common to just include the opening tag of each element in the source code, so that the ruby markup is less complex and easier to read. The browser can then fill in the full element in the rendered version.</li> <li>You need to include one <a href="rt"><code><rt></code></a> element for each base segment/<code><rb></code> element that you want to annotate.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="using_rb">Using rb</h3> +<div class="section-content"> +<p>In this example, we provide an annotation for the original character equivalent of "Kanji":</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="6okhRiocfiWkPkX6HnFhYov0ZspFaOZmHPeNVDVt8kM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rb</span><span class="token punctuation">></span></span>漢<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rb</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rb</span><span class="token punctuation">></span></span>字 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rb</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>kan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>ji<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Note how we've included two <code><rb></code> elements, to delimit the two separate parts of the ruby base text. The annotation on the other hand is delimited by two <a href="rt"><code><rt></code></a> elements.</p> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Using rb sample" id="frame_using_rb" width="100%" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rb/runner.html?id=using_rb" loading="lazy"></iframe> +</div> +</div> +<h3 id="separate_annotations">Separate annotations</h3> +<div class="section-content"> +<p>Note that we could also write this example with the two base text parts annotated completely separately. In this case we don't need to include <code><rb></code> elements:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Y+5q/G3EBi/ofswS5LfyI/FrJgypPFnlRQxpSurHYlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> + 漢 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>Kan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> 字 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>ji<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Separate annotations sample" id="frame_separate_annotations" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rb/runner.html?id=separate_annotations" loading="lazy"></iframe> +</div> <p>See the article about the <a href="ruby"><code><ruby></code></a> element for further examples.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>As a child of a <a href="ruby"><code><ruby></code></a> element.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag can be omitted if the element is immediately followed by an <a href="rt"><code><rt></code></a>, <a href="rtc"><code><rtc></code></a>, or <a href="rp"><code><rp></code></a> element or another <code><rb></code> element, or if there is no more content in the parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="ruby"><code><ruby></code></a> element.</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/obsolete.html#rb">HTML Standard <br><small># rb</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>rb</code></th> +<td class="bc-supports-yes"><details><summary>5</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>79</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes"><details><summary>15</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>5</summary>Safari has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes"><details><summary>14</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>4.2</summary>Safari has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Blink has support for parsing the <code>rb</code> element, but not for rendering <code>rb</code> content as expected.</details></td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="ruby"><code><ruby></code></a></li> <li><a href="rt"><code><rt></code></a></li> <li><a href="rp"><code><rp></code></a></li> <li><a href="rtc"><code><rtc></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rb" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb</a> + </p> +</div> diff --git a/devdocs/html/element%2Frp.html b/devdocs/html/element%2Frp.html new file mode 100644 index 00000000..18e91041 --- /dev/null +++ b/devdocs/html/element%2Frp.html @@ -0,0 +1,85 @@ +<header><h1><rp>: The Ruby Fallback Parenthesis element</h1></header><div class="section-content"><p>The <code><rp></code> <a href="../index">HTML</a> element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <a href="ruby"><code><ruby></code></a> element. One <code><rp></code> element should enclose each of the opening and closing parentheses that wrap the <a href="rt"><code><rt></code></a> element that contains the annotation's text.</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/rp.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>Ruby annotations are for showing pronunciation of East Asian characters, like using Japanese furigana or Taiwanese bopomofo characters. The <code><rp></code> element is used in the case of lack of <a href="ruby"><code><ruby></code></a> element support; the <code><rp></code> content provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="using_ruby_annotations">Using ruby annotations</h3> +<div class="section-content"> +<p>This example uses ruby annotations to display the <a href="https://en.wikipedia.org/wiki/Romaji" target="_blank">Romaji</a> equivalents for each character.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Y+5q/G3EBi/ofswS5LfyI/FrJgypPFnlRQxpSurHYlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> + 漢 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>Kan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> 字 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>ji<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Using ruby annotations sample" id="frame_using_ruby_annotations" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rp/runner.html?id=using_ruby_annotations" loading="lazy"></iframe> +</div> <p>See the article about the <a href="ruby"><code><ruby></code></a> element for further examples.</p> +</div> +<h3 id="without_ruby_support">Without ruby support</h3> +<div class="section-content"> +<p>If your browser does not support ruby annotations, the result looks like this instead:</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Without ruby support sample" id="frame_without_ruby_support" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rp/runner.html?id=without_ruby_support" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Text</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag can be omitted if the element is immediately followed by an <a href="rt"><code><rt></code></a> or another <code><rp></code> element, or if there is no more content in the parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="ruby"><code><ruby></code></a> element. <code><rp></code> must be positioned immediately before or after an <a href="rt"><code><rt></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-rp-element">HTML Standard <br><small># the-rp-element</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>rp</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</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="ruby"><code><ruby></code></a></li> <li><a href="rt"><code><rt></code></a></li> <li><a href="rb"><code><rb></code></a></li> <li><a href="rtc"><code><rtc></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rp" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp</a> + </p> +</div> diff --git a/devdocs/html/element%2Frt.html b/devdocs/html/element%2Frt.html new file mode 100644 index 00000000..568e0dee --- /dev/null +++ b/devdocs/html/element%2Frt.html @@ -0,0 +1,76 @@ +<header><h1><rt>: The Ruby Text element</h1></header><div class="section-content"><p>The <code><rt></code> <a href="../index">HTML</a> element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <code><rt></code> element must always be contained within a <a href="ruby"><code><ruby></code></a> element.</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/rt.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>See the article about the <a href="ruby"><code><ruby></code></a> element for more examples.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="using_ruby_annotations">Using ruby annotations</h3> +<div class="section-content"> +<p>This simple example provides Romaji transliteration for the kanji characters within the <a href="ruby"><code><ruby></code></a> element:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ERUjSl+Rnqs4e1ggHovuFevQrhW8y+J1z4R+k7i+98I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> 漢 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>Kan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span> 字 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>ji<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Using ruby annotations sample" id="frame_using_ruby_annotations" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rt/runner.html?id=using_ruby_annotations" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The end tag may be omitted if the <code><rt></code> element is immediately followed by an <code><rt></code> or <a href="rp"><code><rp></code></a> element, or if there is no more content in the parent element </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="ruby"><code><ruby></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-rt-element">HTML Standard <br><small># the-rt-element</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>rt</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</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="ruby"><code><ruby></code></a></li> <li><a href="rp"><code><rp></code></a></li> <li><a href="rb"><code><rb></code></a></li> <li><a href="rtc"><code><rtc></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform"><code>text-transform: full-size-kana</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt</a> + </p> +</div> diff --git a/devdocs/html/element%2Frtc.html b/devdocs/html/element%2Frtc.html new file mode 100644 index 00000000..9c5637e2 --- /dev/null +++ b/devdocs/html/element%2Frtc.html @@ -0,0 +1,83 @@ +<header><h1><rtc>: The Ruby Text Container element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><rtc></code> <a href="../index">HTML</a> element embraces semantic annotations of characters presented in a ruby of <a href="rb"><code><rb></code></a> elements used inside of <a href="ruby"><code><ruby></code></a> element. <a href="rb"><code><rb></code></a> elements can have both pronunciation (<a href="rt"><code><rt></code></a>) and semantic (<a href="rtc" aria-current="page"><code><rtc></code></a>) annotations.</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/rtc.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bECTCJitb2YbU8IZEgBWaPu7xFCVDN1M0iiPZ2bZy6Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rtc</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rb</span><span class="token punctuation">></span></span>旧<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rb</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>jiù<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rb</span><span class="token punctuation">></span></span>金<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rb</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>jīn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rb</span><span class="token punctuation">></span></span>山<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rb</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>shān<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rtc</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rtc</span><span class="token punctuation">></span></span>San Francisco<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rtc</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/rtc/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a> or <a href="rt"><code><rt></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The closing tag can be omitted if it is immediately followed by a <a href="rb"><code><rb></code></a>, <a href="rtc" aria-current="page"><code><rtc></code></a> or <a href="rt"><code><rt></code></a> element opening tag or by its parent closing tag. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="ruby"><code><ruby></code></a> element.</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/obsolete.html#rtc">HTML Standard <br><small># rtc</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>rtc</code></th> +<td class="bc-supports-yes">≤80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">≤13.1</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">≤13.4</td> +<td class="bc-supports-yes">13.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="ruby"><code><ruby></code></a></li> <li><a href="rp"><code><rp></code></a></li> <li><a href="rb"><code><rb></code></a></li> <li><a href="rt"><code><rt></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/rtc" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc</a> + </p> +</div> diff --git a/devdocs/html/element%2Fruby.html b/devdocs/html/element%2Fruby.html new file mode 100644 index 00000000..a305f07f --- /dev/null +++ b/devdocs/html/element%2Fruby.html @@ -0,0 +1,91 @@ +<header><h1><ruby>: The Ruby Annotation element</h1></header><div class="section-content"> +<p>The <code><ruby></code> <a href="../index">HTML</a> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.</p> <p>The term <em>ruby</em> originated as <a href="https://en.wikipedia.org/wiki/Agate_(typography)" target="_blank">a unit of measurement used by typesetters</a>, representing the smallest size that text can be printed on newsprint while remaining legible.</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/ruby.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="example_1_character">Example 1: Character</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Y+5q/G3EBi/ofswS5LfyI/FrJgypPFnlRQxpSurHYlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> + 漢 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>Kan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> 字 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>ji<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Example 1: Character sample" id="frame_example_1_character" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ruby/runner.html?id=example_1_character" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_2_word">Example 2: Word</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kxTOGr0mDKTUUitWa/Wn6g33xUq3S5goNG9ONodGkeA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ruby</span><span class="token punctuation">></span></span> 明日 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>(<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rt</span><span class="token punctuation">></span></span>Ashita<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rt</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rp</span><span class="token punctuation">></span></span>)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rp</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ruby</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example 2: Word" id="frame_example_1_word" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ruby/runner.html?id=example_1_word" 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/text-level-semantics.html#the-ruby-element">HTML Standard <br><small># the-ruby-element</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>ruby</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">4.2</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="rt"><code><rt></code></a></li> <li><a href="rp"><code><rp></code></a></li> <li><a href="rb"><code><rb></code></a></li> <li><a href="rtc"><code><rtc></code></a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform"><code>text-transform</code></a>: full-size-kana</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/ruby" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby</a> + </p> +</div> diff --git a/devdocs/html/element%2Fs.html b/devdocs/html/element%2Fs.html new file mode 100644 index 00000000..e8eb27ad --- /dev/null +++ b/devdocs/html/element%2Fs.html @@ -0,0 +1,105 @@ +<header><h1><s>: The Strikethrough element</h1></header><div class="section-content"><p>The <code><s></code> <a href="../index">HTML</a> element renders text with a strikethrough, or a line through it. Use the <code><s></code> element to represent things that are no longer relevant or no longer accurate. However, <code><s></code> is not appropriate when indicating document edits; for that, use the <a href="del"><code><del></code></a> and <a href="ins"><code><ins></code></a> elements, as appropriate.</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/s.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">deletion</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="WpxZxZhQia1LnwY5tEUb7e9d65NVrd8svAw4TMawKMU=" data-language="css"><span class="token selector">.sold-out</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="n6IwfJsmaEombS6bOmQjxI7kPJLh0ugOWJYr24/9NIk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>Today's Special: Salmon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span> SOLD OUT<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>sold-out<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Today's Special: Salmon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> SOLD OUT +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/s/runner.html?id=examples" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>The presence of the <code>s</code> element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a> property, along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after"><code>::after</code></a> pseudo-elements.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="QHvZ4Z2AJBrl0NhVvYGBcqPmY56YvwoC5NXuIQG2Z3U=" data-language="css"><span class="token selector">s::before, +s::after</span> <span class="token punctuation">{</span> + <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">inset</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">s::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [start of stricken text] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">s::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" [end of stricken text] "</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Some people who use screen readers deliberately disable announcing content that creates extra verbosity. Because of this, it is important to not abuse this technique and only apply it in situations where not knowing content has been struck out would adversely affect understanding.</p> <ul> <li><a href="https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/" target="_blank">Short note on making your mark (more accessible) | The Paciello Group</a></li> <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html" target="_blank">Tweaking Text Level Styles | Adrian Roselli</a></li> </ul> +</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/text-level-semantics.html#the-s-element">HTML Standard <br><small># the-s-element</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>s</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="strike"><code><strike></code></a> element, alter ego of the <a href="s" aria-current="page"><code><s></code></a> element, is obsolete and should not be used on websites anymore.</li> <li>The <a href="del"><code><del></code></a> element is to be used instead if the data has been <em>deleted</em>.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a> property is to be used to achieve the former visual aspect of the <a href="s" aria-current="page"><code><s></code></a> element.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/s" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsamp.html b/devdocs/html/element%2Fsamp.html new file mode 100644 index 00000000..c63e916b --- /dev/null +++ b/devdocs/html/element%2Fsamp.html @@ -0,0 +1,119 @@ +<header><h1><samp>: The Sample Output element</h1></header><div class="section-content"><p>The <code><samp></code> <a href="../index">HTML</a> element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as <a href="https://en.wikipedia.org/wiki/Courier_(typeface)" target="_blank">Courier</a> or Lucida Console).</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/samp.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>You can use a CSS rule to override the browser's default font face for the <code><samp></code> element; however, it's possible that the browser's preferences may take precedence over any CSS you specify.</p> <p>The CSS to override the default font face would look like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Uxw6ThaSsf8ELJtNXLp/NodTL+pg+/PyYbpDm+BUX0s=" data-language="css"><span class="token selector">samp</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Courier"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If you need an element which will serve as a container for output generated by your website or app's JavaScript code, you should instead use the <a href="output"><code><output></code></a> element.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>In this simple example, a paragraph includes an example of the output of a program.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XiIjkvkBVMlSUxZu3prSx0AVs4qF37gU/KvgxN5Y9/Q=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + When the process is complete, the utility will output the text + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span>Scan complete. Found <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> results.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span> You can then proceed to + the next step. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/samp/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="sample_output_including_user_input">Sample output including user input</h3> +<div class="section-content"> +<p>You can nest the <a href="kbd"><code><kbd></code></a> element within a <code><samp></code> block to present an example that includes text entered by the user. For example, consider this text presenting a transcript of a Linux (or macOS) console session:</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7h9Kd8DXpiv0gW4ouR5I4lqxiLlAQhryp2oj5TmkcQI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>prompt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mike@interwebz:~$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>kbd</span><span class="token punctuation">></span></span>md5 -s "Hello world"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>kbd</span><span class="token punctuation">></span></span> +MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>prompt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mike@interwebz:~$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>cursor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>█<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>samp</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Note the use of <a href="span"><code><span></code></a> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. Note also the use of <code><kbd></code> to represent the command the user entered at the prompt in the sample text.</p> <h4 id="css">CSS</h4> <p>The CSS that achieves the appearance we want is:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="FJYp9Hh/WyPQU8y6IFO1AgNTQsNF00LXnOuQB/rkqwg=" data-language="css"><span class="token selector">.prompt</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> #b00<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">samp > kbd</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.cursor</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> #00b<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This gives the prompt and cursor fairly subtle colorization and emboldens the keyboard input within the sample text.</p> <h4 id="result_2">Result</h4> <p>The resulting output is this:</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Sample output including user input sample" id="frame_sample_output_including_user_input" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/samp/runner.html?id=sample_output_including_user_input" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-samp-element">HTML Standard <br><small># the-samp-element</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>samp</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>Related elements: <a href="kbd"><code><kbd></code></a>, <a href="code"><code><code></code></a>, <a href="pre"><code><pre></code></a> +</li> <li>The <a href="output"><code><output></code></a> element: a container for script-generated output</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/samp" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp</a> + </p> +</div> diff --git a/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html b/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html new file mode 100644 index 00000000..f9c27c4c --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype%2Fimportmap.html @@ -0,0 +1,159 @@ +<header><h1><script type="importmap"></h1></header><div class="section-content"> +<p>The <code>importmap</code> value of the <a href="../type"><code>type</code></a> attribute of the <a href="../../script"><code><script></code> element</a> indicates that the body of the element contains an import map.</p> <p> An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a>. It provides a mapping between the text used as the module specifier in an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code> operator</a>, and the corresponding value that will replace the text when resolving the specifier. The JSON object must conform to the <a href="#import_map_json_representation">Import map JSON representation format</a>. </p> <p> An import map is used to resolve module specifiers in static and dynamic imports, and therefore must be declared and processed before any <code><script></code> elements that import modules using specifiers declared in the map. Note that the import map applies only to module specifiers in the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code> operator</a>; it does not apply to the path specified in the <code>src</code> attribute of a <code><script></code> element. </p> <p>For more information, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">Importing modules using import maps</a> section in the JavaScript modules guide.</p> +</div> +<h2 id="syntax">Syntax</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="W1MLptakZGEpSqk/zmhXElBD9r/d2cSbR9iebIbrVMk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>importmap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token comment">// JSON object defining import</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The <code>src</code>, <code>async</code>, <code>nomodule</code>, <code>defer</code>, <code>crossorigin</code>, <code>integrity</code>, and <code>referrerpolicy</code> attributes must not be specified.</p> <p>Only the first import map in the document with an inline definition is processed; any additional import maps and external import maps are ignored.</p> +</div> +<h3 id="exceptions">Exceptions</h3> +<div class="section-content"> +<dl> <dt id="typeerror"><a href="#typeerror"><code>TypeError</code></a></dt> <dd> <p>The import map definition is not a JSON object, the <code>importmap</code> key is defined but its value is not a JSON object, or the <code>scopes</code> key is defined but its value is not a JSON object.</p> </dd> </dl> <p>Browsers generate console warnings for other cases where the import map JSON does not conform to the <a href="#import_map_json_representation">import map</a> schema.</p> <p> An <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event"><code>error</code> event</a> is fired at script elements with <code>type="importmap"</code> that are not processed. This might occur, for example, if module loading has already started when an import map is processed, or if multiple import maps are defined in the page. </p> +</div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p> When importing a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript module</a>, both the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code> operator</a> have a "module specifier" that indicates the module to be imported. A browser must be able to resolve this specifier to an absolute URL in order to import the module. </p> <p>For example, the following statements import elements from the module specifier <code>"./modules/shapes/square.js"</code>, which is a path relative to the base URL of the document, and the module specifier <code>"https://example.com/shapes/circle.js"</code>, which is an absolute URL.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="TdazKExEZ3xZwWwxrYZ63SXM5jOwQS17lyhaRNA9Wcg=" data-language="js"><span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> squareName<span class="token punctuation">,</span> draw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./modules/shapes/square.js"</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> circleName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"https://example.com/shapes/circle.js"</span><span class="token punctuation">;</span> +</pre> +</div> <p>Import maps allow developers to specify (almost) any text they want in the module specifier; the map provides a corresponding value that will replace the text when the module specifier is resolved.</p> +</div> +<h3 id="bare_modules">Bare modules</h3> +<div class="section-content"> +<p>The import map below defines an <code>imports</code> key that has a "module specifier map" with properties <code>square</code> and <code>circle</code>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="B/cfwcu6SI60sb2KeAMZUKgjMFOGwdP0wPPOGdy3t2o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>importmap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"imports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"square"</span><span class="token operator">:</span> <span class="token string">"./module/shapes/square.js"</span><span class="token punctuation">,</span> + <span class="token string-property property">"circle"</span><span class="token operator">:</span> <span class="token string">"https://example.com/shapes/circle.js"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>With this import map we can import the same modules as above, but using "bare modules" in our module specifiers:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="3z7KTwOPwElmzvBo8T4qhEwW/oNOKzGT6BYzM4NAgYc=" data-language="js"><span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> squareName<span class="token punctuation">,</span> draw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"square"</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> circleName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"circle"</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="mapping_path_prefixes">Mapping path prefixes</h3> +<div class="section-content"> +<p> A module specifier map key can also be used to remap a path prefix in a module specifier. Note that in this case the property and mapped path must both have a trailing forward slash (<code>/</code>). </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="f5rs688GUUvsEnWzZlDepvyQ/5tryJGGg5evMI+OE64=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>importmap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"imports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"shapes/"</span><span class="token operator">:</span> <span class="token string">"./module/shapes/"</span><span class="token punctuation">,</span> + <span class="token string-property property">"othershapes/"</span><span class="token operator">:</span> <span class="token string">"https://example.com/modules/shapes/"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>We could then import a circle module as shown.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="zDvRPLz3TafP+QYSNrib1Y5i/YeVHa22088Ew3mpmiY=" data-language="js"><span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> circleName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"shapes/circle.js"</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="paths_in_the_module_specifier_map_key">Paths in the module specifier map key</h3> +<div class="section-content"> +<p> Module specifier keys do not have to be single word names ("bare names"). They can also contain or end with path separators, or be absolute URLs, or be relative URL paths that start with <code>/</code>, <code>./</code>, or <code>../</code>. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">json</span></p> +<pre data-signature="DBXMnfrlmdqP+n7HKzDapcJ/2W75k54eDV98rVgRjl4=" data-language="json"><span class="token punctuation">{</span> + <span class="token property">"imports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"modules/shapes/"</span><span class="token operator">:</span> <span class="token string">"./module/src/shapes/"</span><span class="token punctuation">,</span> + <span class="token property">"modules/square"</span><span class="token operator">:</span> <span class="token string">"./module/src/other/shapes/square.js"</span><span class="token punctuation">,</span> + <span class="token property">"https://example.com/modules/square.js"</span><span class="token operator">:</span> <span class="token string">"./module/src/other/shapes/square.js"</span><span class="token punctuation">,</span> + <span class="token property">"../modules/shapes/"</span><span class="token operator">:</span> <span class="token string">"/modules/shapes/"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>If there are several module specifier keys in a module specifier map that might match, then the most specific key will be selected (i.e. the one with the longer path/value).</p> <p> A module specifier of <code>./foo/../js/app.js</code> would be resolved to <code>./js/app.js</code> before matching. This means that a module specifier key of <code>./js/app.js</code> would match the module specifier even though they are not exactly the same. </p> +</div> +<h3 id="scoped_module_specifier_maps">Scoped module specifier maps</h3> +<div class="section-content"> +<p> You can use the <code>scopes</code> key to provide mappings that are only used if the script importing the module contains a particular URL path. If the URL of the loading script matches the supplied path, the mapping associated with the scope will be used. This allows different versions of the module to be used depending on what code is doing the importing. </p> <p>For example, the map below will only use the scoped map if the loading module has a URL that includes the path: "/modules/customshapes/".</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/IkQBcDtg4JAWXEZRKtvhdJ2g4L0XrdJ9bc98PETRU8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>importmap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"imports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"square"</span><span class="token operator">:</span> <span class="token string">"./module/shapes/square.js"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"scopes"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"/modules/customshapes/"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"square"</span><span class="token operator">:</span> <span class="token string">"https://example.com/modules/shapes/square.js"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p> If multiple scopes match the referrer URL, then the most specific scope path is used (the scope key name with the longest name). The browser falls back to the next most specific scoped path if there is no matching specifier, and so on, eventually falling back to the module specifier map in the <code>imports</code> key. </p> +</div> +<h2 id="import_map_json_representation">Import map JSON representation</h2> +<div class="section-content"> +<p>The following is a "formal" definition of the import map JSON representation.</p> <p>The import map must be a valid JSON object that can define at most two optional keys: <code>imports</code> and <code>scopes</code>. Each key's value must be an object, which may be empty.</p> <dl> <dt id="imports"> +<a href="#imports"><code>imports</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>The value is a <a href="#module_specifier_map">module specifier map</a>, which provides the mappings between module specifier text that might appear in an <code>import</code> statement or <code>import()</code> operator, and the text that will replace it when the specifier is resolved.</p> <p>This is the fallback map that is searched for matching module specifiers if no <code>scopes</code> path URLs match, or if module specifier maps in matching <code>scopes</code> paths do not contain a key that matches the module specifier.</p> <dl> <dt id="module_specifier_map"><a href="#module_specifier_map"><code><module specifier map></code></a></dt> <dd> <p>A "module specifier map" is a valid JSON object where the <em>keys</em> are text that may be present in the module specifier when importing a module, and the corresponding <em>values</em> are the URLs or paths that will replace this text when the module specifier is resolved to an address.</p> <p>The module specifier map JSON object has the following requirements:</p> <ul> <li>None of the keys may be empty.</li> <li>All of the values must be strings, defining either a valid absolute URL or a valid URL string that starts with <code>/</code>, <code>./</code>, or <code>../</code>.</li> <li> If a key ends with <code>/</code>, then the corresponding value must also end with <code>/</code>. A key with a trailing <code>/</code> can be used as a prefix for when mapping (or remapping) modules addresses. </li> <li>The object properties' ordering is irrelevant: if multiple keys can match the module specifier, the most specific key is used (in other words, a specifier "olive/branch/" would match before "olive/").</li> </ul> </dd> </dl> </dd> <dt id="scopes"> +<a href="#scopes"><code>scopes</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>Scopes define path-specific <a href="#module_specifier_map">module specifier maps</a>, allowing the choice of map to depend on the path of the code importing the module.</p> <p>The scopes object is a valid JSON object where each property is a <code><scope key></code>, which is an URL path, with a corresponding value that is a <code><module specifier map></code>.</p> <p> If the URL of a script importing a module matches a <code><scope key></code> path, then the <code><module specifier map></code> value associated with the key is checked for matching specifiers first. If there are multiple matching scope keys, then the value associated with the most specific/nested scope paths are checked for matching module specifiers first. The fallback module specifier map in <code>imports</code> is used if there are no matching module specifier keys in any of the matching scoped module specifier maps. </p> <p>Note that the scope does not change how an address is resolved; relative addresses are always resolved to the import map base URL.</p> </dd> </dl> +</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/webappapis.html#import-map">HTML Standard <br><small># import-map</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>importmap</code></th> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">75</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">15.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">JavaScript modules > Importing modules using import maps</a></li> <li><a href="../../script#type">The <code>type</code> attribute of HTML <code><script></code> elements</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code> statement</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code> operator</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/script/type/importmap" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap</a> + </p> +</div> diff --git a/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html b/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html new file mode 100644 index 00000000..3e0a83bd --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html @@ -0,0 +1,258 @@ +<header><h1><script type="speculationrules"></h1></header><div class="section-content"> +<p>The <code>speculationrules</code> value of the <a href="../type"><code>type</code></a> attribute of the <a href="../../script"><code><script></code> element</a> indicates that the body of the element contains speculation rules.</p> <p>Speculation rules take the form of a JSON structure that determine what resources should be prefetched or prerendered by the browser. This is part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>.</p> +</div> +<h2 id="syntax">Syntax</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zK3oMqc/hOPM1eUL89GSRRUVDukI2czSOTjnPpcQoC8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token comment">// JSON object defining rules</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>src</code>, <code>async</code>, <code>nomodule</code>, <code>defer</code>, <code>crossorigin</code>, <code>integrity</code>, and <code>referrerpolicy</code> attributes must not be specified.</p> </div> +</div> +<h3 id="exceptions">Exceptions</h3> +<div class="section-content"><dl> <dt id="typeerror"><a href="#typeerror"><code>TypeError</code></a></dt> <dd> <p>The speculation rules definition is not a valid JSON object.</p> </dd> </dl></div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p>A <code><script type="speculationrules"></code> element must contain a valid JSON structure that defines speculation rules. The following examples show separate prefetch and prerender rules:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="VmVycx3glwmo8CXpNM7qhoYwgPo0mPFaA39h//HyxNk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zQcC+7sAVTtyJHJDnHLwUiL2r4Diamfytdi2F5yRZSU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="speculation_rules_json_representation">Speculation rules JSON representation</h3> +<div class="section-content"> +<p>The JSON structure contains one or more fields at the top level, each one representing an action to define speculation rules for. At present the supported actions are:</p> <dl> <dt id="prefetch"> +<a href="#prefetch"><code>"prefetch"</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>Rules for potential future navigations that should have their associated document response body downloaded, leading to significant performance improvements when those documents are navigated to. Note that none of the subresources referenced by the page are downloaded.</p> </dd> <dt id="prerender"> +<a href="#prerender"><code>"prerender"</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>Rules for potential future navigations that should have their associated documents fully downloaded, rendered, and loaded into an invisible tab. This includes loading all subresources, running all JavaScript, and even loading subresources and performing data fetches started by JavaScript. When those documents are navigated to, navigations will be instant, leading to major performance improvements.</p> </dd> </dl> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Consult the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a> main page for full details on how to use prefetch and prerender effectively.</p> </div> <p>Each action field contains an array, which in turn contains one or more objects. Each object contains a single rule defining a set of URLs and related parameters.</p> <p>Specifically, each object can contain the following properties:</p> <dl> <dt id="source"><a href="#source"><code>"source"</code></a></dt> <dd> <p>A string representing the source of the URLs to which the rule applies. Possible values are:</p> <dl> <dt id="list"><a href="#list"><code>"list"</code></a></dt> <dd> <p>Denotes that the URLs will come from a specific list.</p> </dd> </dl> </dd> <dt id="urls"><a href="#urls"><code>"urls"</code></a></dt> <dd> <p>An array of strings representing the list of URLs to apply the rule to. These can be absolute or relative URLs. Relative URLs will be parsed relative to the document base URL (if inline in a document) or relative to the external resource URL (if externally fetched).</p> </dd> <dt id="requires"> +<a href="#requires"><code>"requires"</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>An array of strings representing capabilities of the browser parsing the rule, which must be available if the rule is to be applied to the specified URLs.</p> <div class="notecard warning" id="sect3"> <p><strong>Warning:</strong> Prefetches will automatically fail in browsers that cannot meet a specified requirement, even if they support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>.</p> </div> <p>Possible values are:</p> <dl> <dt id="anonymous-client-ip-when-cross-origin"><a href="#anonymous-client-ip-when-cross-origin"><code>"anonymous-client-ip-when-cross-origin"</code></a></dt> <dd> <p><code>"prefetch"</code>-only. Specifies that the rule matches only if the user agent can prevent the client IP address from being visible to the origin server if a cross-origin prefetch request is issued. Exactly how this works is dependent on browser implementation specifics. For example:</p> <ul> <li>Chrome's implementation hides the IP address using a Google-owned proxy, therefore by default it only works for Google-controlled referrers (since in that case, sending the URLs of the destination to Google is not an additional privacy leak). When used on a non-Google-owned site, rules that include this will only match for users that turn on "Enhanced preloading" in <code>chrome://settings/preloading</code>.</li> <li>Other Chromium-based browsers will have to provide their own solutions. Thorough testing in all target browsers is advised.</li> <li>A future Safari implementation may possibly use something along the lines of <a href="https://support.apple.com/en-us/102602" target="_blank">iCloud Private Relay</a>.</li> <li>A future Firefox implementation might use something based on the <a href="https://www.mozilla.org/en-US/products/vpn/" target="_blank">Mozilla VPN</a> product.</li> </ul> </dd> </dl> </dd> <dt id="referrer_policy"> +<a href="#referrer_policy"><code>"referrer_policy"</code></a> <span class="badge inline optional">Optional</span> +</dt> <dd> <p>A string representing a specific referrer policy string to use when requesting the URLs specified in the rule — see <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> for possible values. The purpose of this is to allow the referring page to set a stricter policy specifically for the speculative request than the policy the page already has set (either by default, or by using <code>Referrer-Policy</code>). A laxer policy set in the speculation rules will not override a stricter policy set on the referring page.</p> </dd> </dl> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> As speculation rules use a <code><script></code> element, they need to be explicitly allowed in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code></a> directive if the site includes it. This is done by adding the <code>"inline-speculation-rules"</code> value along with a hash- or nonce-source.</p> </div> +</div> +<h3 id="further_examples">Further examples</h3> +<div class="section-content"> +<p>The earlier examples showed separate speculation rules defined for prefetch and prerender. It is possible to define both in a single set of rules:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XQLMQk1Wy5Es9L2gGnvmAqI+aJFpdaO6bjV9RNfcBV0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>It is also allowable to include multiple sets of rules in a single HTML file:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Pg4RVArtAyIMM4Z6Y/1aMTpaJdpevqJFefO8WK/sSRE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>And multiple rules in a single result set:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="tO3gB1szyLU8jsyGnCwE7Kmw2UU1X3DEQiRGup6kRvs=" data-language="js"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"speculationrules"</span><span class="token operator">></span> +<span class="token punctuation">{</span> + <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"one.html"</span><span class="token punctuation">]</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"two.html"</span><span class="token punctuation">]</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> +<span class="token punctuation">}</span> +<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> +</pre> +</div> +</div> +<h3 id="dynamic_rule_insertion">Dynamic rule insertion</h3> +<div class="section-content"> +<p>Below is an example that feature detects speculation rules and, if supported, dynamically adds a prerender speculation rule via JavaScript:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="sdB13bsfUeQBgdHuWzH1JazQ37sHWTsS1vXwI/XVL3c=" data-language="js"><span class="token keyword">if</span> <span class="token punctuation">(</span> + HTMLScriptElement<span class="token punctuation">.</span>supports <span class="token operator">&&</span> + HTMLScriptElement<span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">"speculationrules"</span><span class="token punctuation">)</span> +<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> specScript <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + specScript<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"speculationrules"</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> specRules <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prerender</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span> + <span class="token literal-property property">urls</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/next.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + specScript<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>specRules<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"added speculation rules to: next.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>specScript<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>You can see this in action in this <a href="https://prerender-demos.glitch.me/" target="_blank">prerender demos</a> page.</p> +</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://wicg.github.io/nav-speculation/speculation-rules.html#speculation-rules-script">Speculation Rules <br><small># speculation-rules-script</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>speculationrules</code></th> +<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">95<details><summary>91</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74<details><summary>71</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21.0<details><summary>20.0</summary>Initial support included same-origin prerendering only.</details> +</td> +</tr> +<tr> +<th><code>prefetch</code></th> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">71</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +<tr> +<th><code>referrer_policy</code></th> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">97</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">22.0</td> +</tr> +<tr> +<th><code>requires</code></th> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-yes">110</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">96</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">71</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.chrome.com/blog/prerender-pages/" target="_blank">Prerender pages in Chrome for instant page navigations</a> on developer.chrome.com (2023)</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/script/type/speculationrules" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/speculationrules</a> + </p> +</div> diff --git a/devdocs/html/element%2Fscript%2Ftype.html b/devdocs/html/element%2Fscript%2Ftype.html new file mode 100644 index 00000000..45f928a6 --- /dev/null +++ b/devdocs/html/element%2Fscript%2Ftype.html @@ -0,0 +1,111 @@ +<header><h1><script>: type attribute</h1></header><div class="section-content"><p>The <code>type</code> attribute of the <a href="../script"><code><script></code></a> element indicates the <em>type</em> of script represented by the element: a classic script, an import map, a JavaScript module, speculation rules, or a data block.</p></div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>The value of this attribute indicates the type of data represented by the script, and will be one of the following:</p> <dl> <dt id="attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type"><a href="#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type"><strong>Attribute is not set (default), an empty string, or a JavaScript MIME type</strong></a></dt> <dd> <p> Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript">listed in the IANA media types specification</a>. </p> </dd> <dt id="sect1"><a href="type/importmap"><code>importmap</code></a></dt> <dd> <p> This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">JavaScript modules</a>. </p> </dd> <dt id="module"><a href="#module"><code>module</code></a></dt> <dd> <p> This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The <code>charset</code> and <code>defer</code> attributes have no effect. For information on using <code>module</code>, see our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching. </p> </dd> <dt id="sect2"> +<a href="type/speculationrules"><code>speculationrules</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p> This value indicates that the body of the element contains speculation rules. Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading#the_speculation_rules_api">speculation rules API</a>. </p> </dd> <dt id="any_other_value"><a href="#any_other_value"><strong>Any other value</strong></a></dt> <dd> <p> The embedded content is treated as a data block, and won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the <code>src</code> attribute. </p> </dd> </dl> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> In earlier browsers, the type identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code.</p> </div> +</div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.script.type</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</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>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>importmap</code></th> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">75</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>module</code></th> +<td class="bc-supports-yes"><details><summary>61</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +<td class="bc-supports-yes"> +<details><summary>79</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details>16–79</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>48</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +<td class="bc-supports-yes"><details><summary>10.1</summary>Module scripts do not load when the page is served as XHTML (<code>application/xhtml+xml</code>).</details></td> +<td class="bc-supports-yes"><details><summary>61</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +<td class="bc-supports-yes"><details><summary>61</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes"><details><summary>45</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +<td class="bc-supports-yes"><details><summary>10.3</summary>Module scripts do not load when the page is served as XHTML (<code>application/xhtml+xml</code>).</details></td> +<td class="bc-supports-yes"><details><summary>8.0</summary>Module scripts without the <code>async</code> attribute do not load when the page is served as XHTML (<code>application/xhtml+xml</code>). See <a href="https://crbug.com/717643">bug 717643</a>.</details></td> +</tr> +<tr> +<th><code>speculationrules</code></th> +<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">95<details><summary>91</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74<details><summary>71</summary>Initial support included same-origin prerendering only.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">21.0<details><summary>20.0</summary>Initial support included same-origin prerendering only.</details> +</td> +</tr> +</tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/script/type" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type</a> + </p> +</div> diff --git a/devdocs/html/element%2Fscript.html b/devdocs/html/element%2Fscript.html new file mode 100644 index 00000000..27283eb7 --- /dev/null +++ b/devdocs/html/element%2Fscript.html @@ -0,0 +1,361 @@ +<header><h1><script>: The Script element</h1></header><div class="section-content"> +<p>The <code><script></code> <a href="../index">HTML</a> element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <code><script></code> element can also be used with other languages, such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>'s GLSL shader programming language and <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON">JSON</a>.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>, <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">Phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>Dynamic script such as <code>text/javascript</code>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#metadata_content">metadata content</a>, or any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement"><code>HTMLScriptElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="async"><a href="#async"><code>async</code></a></dt> <dd> <p>For classic scripts, if the <code>async</code> attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.</p> <p>For <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">module scripts</a>, if the <code>async</code> attribute is present then the scripts and all their dependencies will be fetched in parallel to parsing and evaluated as soon as they are available.</p> <p>This attribute allows the elimination of <strong>parser-blocking JavaScript</strong> where the browser would have to load and evaluate scripts before continuing to parse. <code>defer</code> has a similar effect in this case.</p> <p>This is a boolean attribute: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.</p> <p>See <a href="#browser_compatibility">Browser compatibility</a> for notes on browser support. See also <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts">Async scripts for asm.js</a>.</p> </dd> <dt id="blocking"> +<a href="#blocking"><code>blocking</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>This attribute explicitly indicates that certain operations should be blocked on the fetching of the script. The operations that are to be blocked must be a space-separated list of blocking attributes listed below.</p> <ul> <li> +<code>render</code>: The rendering of content on the screen is blocked.</li> </ul> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p>Normal <code>script</code> elements pass minimal information to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event"><code>window.onerror</code></a> for scripts which do not pass the standard <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> checks. To allow error logging for sites which use a separate domain for static media, use this attribute. See <a href="../attributes/crossorigin">CORS settings attributes</a> for a more descriptive explanation of its valid arguments.</p> </dd> <dt id="defer"><a href="#defer"><code>defer</code></a></dt> <dd> <p>This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>.</p> <p>Scripts with the <code>defer</code> attribute will prevent the <code>DOMContentLoaded</code> event from firing until the script has loaded and finished evaluating.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> This attribute must not be used if the <code>src</code> attribute is absent (i.e. for inline scripts), in this case it would have no effect.</p> <p>The <code>defer</code> attribute has no effect on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">module scripts</a> — they defer by default.</p> </div> <p>Scripts with the <code>defer</code> attribute will execute in the order in which they appear in the document.</p> <p>This attribute allows the elimination of <strong>parser-blocking JavaScript</strong> where the browser would have to load and evaluate scripts before continuing to parse. <code>async</code> has a similar effect in this case.</p> </dd> <dt id="fetchpriority"> +<a href="#fetchpriority"><code>fetchpriority</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Provides a hint of the relative priority to use when fetching an external script. Allowed values:</p> <dl> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>Signals a high-priority fetch relative to other external scripts.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>Signals a low-priority fetch relative to other external scripts.</p> </dd> <dt id="auto"><a href="#auto"><code>auto</code></a></dt> <dd> <p>Default: Signals automatic determination of fetch priority relative to other external scripts.</p> </dd> </dl> </dd> <dt id="integrity"><a href="#integrity"><code>integrity</code></a></dt> <dd> <p>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</p> </dd> <dt id="nomodule"><a href="#nomodule"><code>nomodule</code></a></dt> <dd> <p>This Boolean attribute is set to indicate that the script should not be executed in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ES modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</p> </dd> <dt id="nonce"><a href="#nonce"><code>nonce</code></a></dt> <dd> <p>A cryptographic nonce (number used once) to allow scripts in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>Indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the script, or resources fetched by the script:</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> An empty string value (<code>""</code>) is both the default value, and a fallback value if <code>referrerpolicy</code> is not supported. If <code>referrerpolicy</code> is not explicitly specified on the <code><script></code> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to <code>strict-origin-when-cross-origin</code>.</p> </div> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.</p> </dd> <dt id="sect3"><a href="script/type"><code>type</code></a></dt> <dd> <p> This attribute indicates the type of script represented. The value of this attribute will be one of the following: </p> <dl> <dt id="attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type"><a href="#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type"><strong>Attribute is not set (default), an empty string, or a JavaScript MIME type</strong></a></dt> <dd> <p> Indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type. JavaScript MIME types are <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript">listed in the IANA media types specification</a>. </p> </dd> <dt id="sect4"><a href="script/type/importmap"><code>importmap</code></a></dt> <dd> <p> This value indicates that the body of the element contains an import map. The import map is a JSON object that developers can use to control how the browser resolves module specifiers when importing <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">JavaScript modules</a>. </p> </dd> <dt id="module"><a href="#module"><code>module</code></a></dt> <dd> <p> This value causes the code to be treated as a JavaScript module. The processing of the script contents is deferred. The <code>charset</code> and <code>defer</code> attributes have no effect. For information on using <code>module</code>, see our <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide. Unlike classic scripts, module scripts require the use of the CORS protocol for cross-origin fetching. </p> </dd> <dt id="sect5"> +<a href="script/type/speculationrules"><code>speculationrules</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p> This value indicates that the body of the element contains speculation rules. Speculation rules take the form of a JSON object that determine what resources should be prefetched or prerendered by the browser. This is part of the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading#the_speculation_rules_api">speculation rules API</a>. </p> </dd> <dt id="any_other_value"><a href="#any_other_value"><strong>Any other value</strong></a></dt> <dd> <p> The embedded content is treated as a data block, and won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. All of the other attributes will be ignored, including the <code>src</code> attribute. </p> </dd> </dl> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="charset"> +<a href="#charset"><code>charset</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>If present, its value must be an <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> case-insensitive match for "<code>utf-8</code>". It's unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</p> </dd> <dt id="language"> +<a href="#language"><code>language</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute's possible values were never standardized. The <code>type</code> attribute should be used instead.</p> </dd> </dl></div> +<h2 id="notes">Notes</h2> +<div class="section-content"> +<p>Scripts without <a href="#async"><code>async</code></a>, <a href="#defer"><code>defer</code></a> or <code>type="module"</code> attributes, as well as inline scripts without the <code>type="module"</code> attribute, are fetched and executed immediately before the browser continues to parse the page.</p> <p> The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>), a video type (<code>video/*</code>), an audio type (<code>audio/*</code>), or <code>text/csv</code>. If the script is blocked, an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event"><code>error</code></a> event is sent to the element; otherwise, a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event"><code>load</code></a> event is sent. </p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_usage">Basic usage</h3> +<div class="section-content"> +<p>These examples show how to import (an external) script using the <code><script></code> element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WL2iP3PQXAZ7+c2DL76Ujc0rBQRjIoXq8yrlyvGe1QA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>And the following examples show how to put (an inline) script inside the <code><script></code> element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BRn57YYY+rm8KCGVZjolEHCsoPX4ykNAhPEpQnAZTCE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Hello World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="module_fallback">Module fallback</h3> +<div class="section-content"> +<p>Browsers that support the <code>module</code> value for the <a href="#type"><code>type</code></a> attribute ignore any script with a <code>nomodule</code> attribute. That enables you to use module scripts while providing <code>nomodule</code>-marked fallback scripts for non-supporting browsers.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="cp7LD7t7m517wr8IDlzKh1px9BlCJoE88rX3TMBj62E=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">nomodule</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fallback.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="importing_modules_with_importmap">Importing modules with importmap</h3> +<div class="section-content"> +<p> When importing modules in scripts, if you don't use the <a href="#importmap"><code>type=importmap</code></a> feature, then each module must be imported using a module specifier that is either an absolute or relative URL. In the example below, the first module specifier ("./shapes/square.js") resolves relative to the base URL of the document, while the second is an absolute URL. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="gXEqEUrcNVdR5bCiOj+b10q6mo7U7GGs1744i1SZZ8c=" data-language="js"><span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> squareName<span class="token punctuation">,</span> draw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./shapes/square.js"</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> circleName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"https://example.com/shapes/circle.js"</span><span class="token punctuation">;</span> +</pre> +</div> <p> An import map allows you to provide a mapping that, if matched, can replace the text in the module specifier. The import map below defines keys <code>square</code> and <code>circle</code> that can be used as aliases for the module specifiers shown above. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kKMjrUvbBdFWOvRxvt29mabORhnBe+DFdAVIGFVYGoo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>importmap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"imports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"square"</span><span class="token operator">:</span> <span class="token string">"./shapes/square.js"</span><span class="token punctuation">,</span> + <span class="token string-property property">"circle"</span><span class="token operator">:</span> <span class="token string">"https://example.com/shapes/circle.js"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This allows us to import modules using names in the module specifier (rather than absolute or relative URLs).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="3z7KTwOPwElmzvBo8T4qhEwW/oNOKzGT6BYzM4NAgYc=" data-language="js"><span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> squareName<span class="token punctuation">,</span> draw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"square"</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> name <span class="token keyword">as</span> circleName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"circle"</span><span class="token punctuation">;</span> +</pre> +</div> <p>For more examples of what you can do with import maps, see the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps">Importing modules using import maps</a> section in the JavaScript modules guide.</p> +</div> +<h3 id="embedding_data_in_html">Embedding data in HTML</h3> +<div class="section-content"> +<p>You can also use the <code><script></code> element to embed data in HTML with server-side rendering by specifying a valid non-JavaScript MIME type in the <code>type</code> attribute.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vJ7NhD1+ZiLSNtkVUK7FZEKoZXdtTfmqsXE7k+0s/7Y=" data-language="html"><span class="token comment"><!-- Generated by the server --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>data<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>application/json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token punctuation">{</span> + <span class="token string-property property">"userId"</span><span class="token operator">:</span> <span class="token number">1234</span><span class="token punctuation">,</span> + <span class="token string-property property">"userName"</span><span class="token operator">:</span> <span class="token string">"Maria Cruz"</span><span class="token punctuation">,</span> + <span class="token string-property property">"memberSince"</span><span class="token operator">:</span> <span class="token string">"2000-01-01T00:00:00.000Z"</span> + <span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Static --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token keyword">const</span> userInfo <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"data"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"User information: %o"</span><span class="token punctuation">,</span> userInfo<span class="token punctuation">)</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="blocking_rendering_till_a_script_is_fetched_and_executed">Blocking rendering till a script is fetched and executed</h3> +<div class="section-content"> +<p> You can include <code>render</code> token inside a <code>blocking</code> attribute; the rendering of the page will be blocked till the script is fetched and executed. In the example below, we block rendering on an async script, so that the script doesn't block parsing but is guaranteed to be evaluated before rendering starts. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NFlvDEcAnmljjkrp0QZcV/2PS7k6J6Vzu5lNMxxYlpY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">blocking</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>render<span class="token punctuation">"</span></span> <span class="token attr-name">async</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>async-script.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</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/scripting.html#the-script-element">HTML Standard <br><small># the-script-element</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>script</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>Starting in Firefox 4, inserting <script> elements that have been created by calling <code>document.createElement("script")</code> no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">3</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">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>async</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>attributionsrc</code></th> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>blocking</code></th> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">91</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +<tr> +<th><code>crossorigin</code></th> +<td class="bc-supports-yes">19</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>6</summary>The <code>crossorigin</code> attribute was implemented in WebKit in WebKit <a href="https://webkit.org/b/81438">bug 81438</a>.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>6</summary>The <code>crossorigin</code> attribute was implemented in WebKit in WebKit <a href="https://webkit.org/b/81438">bug 81438</a>.</details></td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>defer</code></th> +<td class="bc-supports-yes"><details><summary>1</summary>Chrome does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>3.5</summary>Since Firefox 3.6, the <code>defer</code> attribute is ignored on scripts that don't have the <code>src</code> attribute. However, in Firefox 3.5 even inline scripts are deferred if the <code>defer</code> attribute is set.</details></td> +<td class="bc-supports-yes"><details><summary>10</summary>Before version 10, Internet Explorer implemented <code>defer</code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</details></td> +<td class="bc-supports-yes"><details><summary>15</summary>Opera does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Chrome does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Chrome does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>14</summary>Opera does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Samsung Internet does not defer scripts with the <code>defer</code> attribute when the page is served as XHTML (<code>application/xhtml+xml</code>) - <a href="https://crbug.com/611136">Chromium Issue #611136</a>, <a href="https://crbug.com/874749">Chromium Issue #874749</a></details></td> +</tr> +<tr> +<th><code>fetchpriority</code></th> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">preview</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-yes">101</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +<tr> +<th><code>integrity</code></th> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">32</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>language</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>nomodule</code></th> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">48</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">65</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-yes">65</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">10.0</td> +</tr> +<tr> +<th><code>src</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>text</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript"><code>document.currentScript</code></a></li> <li><a href="https://flaviocopes.com/javascript-async-defer/" target="_blank">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/script" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsearch.html b/devdocs/html/element%2Fsearch.html new file mode 100644 index 00000000..b8645a03 --- /dev/null +++ b/devdocs/html/element%2Fsearch.html @@ -0,0 +1,147 @@ +<header><h1><search>: The generic search element</h1></header><div class="section-content"><p>The <code><search></code> <a href="../index">HTML</a> element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <code><search></code> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.</p></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><p>The <code><search></code> element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the <code><search></code> element as they are search features.</p></div> +<h2 id="accessibility">Accessibility</h2> +<div class="section-content"><p>The <code><search></code> element defines a <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role"><code>search</code></a> landmark. This removes the need for adding <code>role=search</code> to a <a href="form"><code><form></code></a> element.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="header_search_form">Header search form</h3> +<div class="section-content"> +<p>This example demonstrates the use of <code><search></code> as the container for a search within a website header to perform a simple site-wide search. The <code><search></code> is a semantic container for the <a href="form"><code><form></code></a> that submits the user-entered search query to a server.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="NFWNkiEba3UjxsSVNFkVmI/c3rs4URpSOADLZOLZEQc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Movie website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./search/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>movie<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Find a Movie<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>movie<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Search<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>search</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Header search form sample" id="frame_header_search_form" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/search/runner.html?id=header_search_form" loading="lazy"></iframe> +</div> +</div> +<h3 id="web_app_search">Web app search</h3> +<div class="section-content"> +<p>This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a <a href="form"><code><form></code></a> element nor a submit <a href="button"><code><button></code></a> is required. For semantics, the <code><search></code> element is included to contain the search and filtering capabilities.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ge7fxrSKVSmGBd7NvisxguVLE/ye/NEk1tSiiPlRa50=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Find and filter your query + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>search<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>query<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>checkbox<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>exact-only<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + Exact matches only + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Results:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>results<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token comment"><!-- search result content --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</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>no-results<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token comment"><!-- no results content --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>search</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Web app search sample" id="frame_web_app_search" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/search/runner.html?id=web_app_search" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Remember that some users don't have JavaScript, and none of your users have JavaScript running until the JavaScript is successfully downloaded, parsed, and executed, ensure your users can access the content of your site with JavaScript disabled.</p> </div> +</div> +<h3 id="multiple_searches">Multiple searches</h3> +<div class="section-content"> +<p>This example demonstrates a page with two search features. The first is a global site search located on the header. The second is a search and filter based on the page context, in our example a car search.</p> <h4 id="html_3">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3Km2JjJHwHj8LKdbgOsp3GRsJO+4rxresokjcPsba/A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Car rental agency<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Website<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>search</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Cars available for rent<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>search</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Filter results<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> + ... + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>search</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- search result content --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Multiple searches sample" id="frame_multiple_searches" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/search/runner.html?id=multiple_searches" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#palpable_content">palpable content</a>.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role">search</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/form_role"><code>form</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role"><code>region</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role"><code>search</code></a> +</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/grouping-content.html#the-search-element">HTML Standard <br><small># the-search-element</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>search</code></th> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">104</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-yes">118</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-no">No</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Other search-related elements: <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="aside"><code><aside></code></a>, <a href="nav"><code><nav></code></a>, <a href="form"><code><form></code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role">ARIA: Search role</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/search" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsection.html b/devdocs/html/element%2Fsection.html new file mode 100644 index 00000000..428182f0 --- /dev/null +++ b/devdocs/html/element%2Fsection.html @@ -0,0 +1,118 @@ +<header><h1><section>: The Generic Section element</h1></header><div class="section-content"><p>The <code><section></code> <a href="../index">HTML</a> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.</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/section.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>As mentioned above, <code><section></code> is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. As an example, a navigation menu should be wrapped in a <a href="nav"><code><nav></code></a> element, but a list of search results or a map display and its controls don't have specific elements, and could be put inside a <code><section></code>.</p> <p>Also consider these cases:</p> <ul> <li>If the contents of the element represent a standalone, atomic unit of content that makes sense syndicated as a standalone piece (e.g. a blog post or blog comment, or a newspaper article), the <a href="article"><code><article></code></a> element would be a better choice.</li> <li>If the contents represent useful tangential information that works alongside the main content, but is not directly part of it (like related links, or an author bio), use an <a href="aside"><code><aside></code></a>.</li> <li>If the contents represent the main content area of a document, use <a href="main"><code><main></code></a>.</li> <li>If you are only using the element as a styling wrapper, use a <a href="div"><code><div></code></a> instead.</li> </ul> <p>To reiterate, each <code><section></code> should be identified, typically by including a heading (<a href="heading_elements">h1</a> - <a href="heading_elements">h6</a> element) as a child of the <code><section></code> element, wherever possible. See below for examples of where you might see a <code><section></code> without a heading.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_usage_example">Simple usage example</h3> +<div class="section-content"> +<h4 id="before">Before</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="J6KDvFLfQm8eED/CYG4hVDTBWEHgiZiGkHkWU4hbJ8g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Bunch of awesome content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result">Result</h5> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Before sample" id="frame_before" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/section/runner.html?id=before" loading="lazy"></iframe> +</div> <h4 id="after">After</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5b7leNz2AZvXzRIrnfZ11PsNHxxo4Vd3GBLTzD3JgLw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Heading<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Bunch of awesome content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_2">Result</h5> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="After sample" id="frame_after" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/section/runner.html?id=after" loading="lazy"></iframe> +</div> +</div> +<h3 id="using_a_section_without_a_heading">Using a section without a heading</h3> +<div class="section-content"> +<p>Circumstances where you might see <code><section></code> used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.</p> <p>Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a <code><nav></code> element, you could conceivably wrap a previous/next menu in a <code><section></code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RaHu3O0bE347gVJz13HmDceSS7OzEYB1A8UfKmik9Ko=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Previous article<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Next article<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gryYVEKrpXlsruYIxEPL5CFfWM2gKpqgOWLWiUK1Dt4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>reply-all<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply to all<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>fwd<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>del<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Using a section without a heading sample" id="frame_using_a_section_without_a_heading" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/section/runner.html?id=using_a_section_without_a_heading" loading="lazy"></iframe> +</div> <p>Depending on the content, including a heading could also be good for SEO, so it is an option to consider.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#sectioning_content">Sectioning content</a>, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. Note that a <code><section></code> element must not be a descendant of an <a href="address"><code><address></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role">region</a></code> if the element has an <a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" target="_blank">accessible name</a>, otherwise <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role"><code>alert</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role"><code>alertdialog</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role"><code>banner</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/complementary_role"><code>complementary</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role"><code>contentinfo</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/document_role"><code>document</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role"><code>feed</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/log_role"><code>log</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role"><code>main</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role"><code>marquee</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role"><code>navigation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/note_role"><code>note</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role"><code>search</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role"><code>status</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role"><code>tabpanel</code></a> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/sections.html#the-section-element">HTML Standard <br><small># the-section-element</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>section</code></th> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">11.1</td> +<td class="bc-supports-yes">5</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">11.1</td> +<td class="bc-supports-yes">4.2</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>Other section-related elements: <a href="body"><code><body></code></a>, <a href="nav"><code><nav></code></a>, <a href="article"><code><article></code></a>, <a href="aside"><code><aside></code></a>, <a href="heading_elements">h1</a>, <a href="heading_elements">h2</a>, <a href="heading_elements">h3</a>, <a href="heading_elements">h4</a>, <a href="heading_elements">h5</a>, <a href="heading_elements">h6</a>, <a href="hgroup"><code><hgroup></code></a>, <a href="header"><code><header></code></a>, <a href="footer"><code><footer></code></a>, <a href="address"><code><address></code></a> +</li> <li><a href="heading_elements">Using HTML sections and outlines</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role">ARIA: Region role</a></li> <li> +<a href="https://www.smashingmagazine.com/2020/01/html5-article-section/" target="_blank">Why You Should Choose HTML5 article Over section</a>, by Bruce Lawson</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/section" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section</a> + </p> +</div> diff --git a/devdocs/html/element%2Fselect.html b/devdocs/html/element%2Fselect.html new file mode 100644 index 00000000..5bf0a08e --- /dev/null +++ b/devdocs/html/element%2Fselect.html @@ -0,0 +1,548 @@ +<header><h1><select>: The HTML Select element</h1></header><div class="section-content"><p>The <code><select></code> <a href="../index">HTML</a> element represents a control that provides a menu of options.</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/select.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example shows typical <code><select></code> usage. It is given an <code>id</code> attribute to enable it to be associated with a <a href="label"><code><label></code></a> for accessibility purposes, as well as a <code>name</code> attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <a href="option"><code><option></code></a> element nested inside the <code><select></code>.</p> <p>Each <code><option></code> element should have a <a href="option#value"><code>value</code></a> attribute containing the data value to submit to the server when that option is selected. If no <code>value</code> attribute is included, the value defaults to the text contained inside the element. You can include a <a href="option#selected"><code>selected</code></a> attribute on an <code><option></code> element to make it selected by default when the page first loads.</p> <p>The <code><select></code> element has some unique attributes you can use to control it, such as <code>multiple</code> to specify whether multiple options can be selected, and <code>size</code> to specify how many options should be shown at once. It also accepts most of the general form input attributes such as <code>required</code>, <code>disabled</code>, <code>autofocus</code>, etc.</p> <p>You can further nest <code><option></code> elements inside <a href="optgroup"><code><optgroup></code></a> elements to create separate groups of options inside the dropdown.</p> <p>For further examples, see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls#drop-down_controls">The native form widgets: Drop-down content</a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autocomplete"><a href="#autocomplete"><code>autocomplete</code></a></dt> <dd> <p>A string providing a hint for a <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> autocomplete feature. See <a href="../attributes/autocomplete">The HTML autocomplete attribute</a> for a complete list of values and details on how to use autocomplete.</p> </dd> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the <code>autofocus</code> attribute.</p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <a href="fieldset"><code><fieldset></code></a>; if there is no containing element with the <code>disabled</code> attribute set, then the control is enabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The <a href="form"><code><form></code></a> element to associate the <code><select></code> with (its <em>form owner</em>). The value of this attribute must be the <a href="../global_attributes#id"><code>id</code></a> of a <code><form></code> in the same document. (If this attribute is not set, the <code><select></code> is associated with its ancestor <code><form></code> element, if any.)</p> <p>This attribute lets you associate <code><select></code> elements to <code><form></code>s anywhere in the document, not just inside a <code><form></code>. It can also override an ancestor <code><form></code> element.</p> </dd> <dt id="multiple"><a href="#multiple"><code>multiple</code></a></dt> <dd> <p>This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When <code>multiple</code> is specified, most browsers will show a scrolling list box instead of a single line dropdown.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>This attribute is used to specify the name of the control.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>A Boolean attribute indicating that an option with a non-empty string value must be selected.</p> </dd> <dt id="size"><a href="#size"><code>size</code></a></dt> <dd> <p>If the control is presented as a scrolling list box (e.g. when <code>multiple</code> is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is <code>0</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> According to the HTML specification, the default value for size should be <code>1</code>; however, in practice, this has been found to break some websites, and no other browser currently does that, so Mozilla has opted to continue to return <code>0</code> for the time being with Firefox.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="selecting_multiple_options">Selecting multiple options</h3> +<div class="section-content"> +<p>On a desktop computer, there are a number of ways to select multiple options in a <code><select></code> element with a <code>multiple</code> attribute:</p> <p>Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.</p> <p>On macOS, the <kbd>Ctrl</kbd> + <kbd>Up</kbd> and <kbd>Ctrl</kbd> + <kbd>Down</kbd> shortcuts conflict with the OS default shortcuts for <em>Mission Control</em> and <em>Application windows</em>, so you'll have to turn these off before it will work.</p> </div> <p>Keyboard users can select multiple contiguous items by:</p> <ul> <li> Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd> ). </li> <li> Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options. </li> <li> Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected. </li> </ul> <p>Keyboard users can select multiple non-contiguous items by:</p> <ul> <li> Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd> ). </li> <li> Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link. </li> <li> Pressing <kbd>Space</kbd> to select/deselect "focused" select options. </li> </ul> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p>The <code><select></code> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">box model</a>, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts">displayed font</a>, etc., and you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property to remove the default system <code>appearance</code>.</p> <p>However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <code><select></code> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> to provide semantics.</p> <p>For more useful information on styling <code><select></code>, see:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a></li> </ul> <p>Also see the "Customizing select styles" example below for an example of you could attempt a simple <code><select></code> styling.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_select">Basic select</h3> +<div class="section-content"> +<p>The following example creates a very simple dropdown menu, the second option of which is selected by default.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TPyBcla2JefLSgyZXj+GYW50vdXGUi9mYWW55AyUHIE=" data-language="html"><span class="token comment"><!-- The second value will be selected initially --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>first<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>second<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Second Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>third<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Third Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Basic select sample" id="frame_basic_select" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/select/runner.html?id=basic_select" loading="lazy"></iframe> +</div> +</div> +<h3 id="advanced_select_with_multiple_features">Advanced select with multiple features</h3> +<div class="section-content"> +<p>The follow example is more complex, showing off more features you can use on a <code><select></code> element:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gS9YJxhQ7MKmQIRBzQ0n705Ob6tGLmMv+QMElR/iMQw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Please choose one or more pets: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4-legged pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>hamster<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Hamster<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Flying pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Parrot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>macaw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Macaw<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</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>albatross<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Albatross<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Advanced select with multiple features sample" id="frame_advanced_select_with_multiple_features" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/select/runner.html?id=advanced_select_with_multiple_features" loading="lazy"></iframe> +</div> <p>You'll see that:</p> <ul> <li>Multiple options are selectable because we've included the <code>multiple</code> attribute.</li> <li>The <code>size</code> attribute causes only 4 lines to display at a time; you can scroll to view all the options.</li> <li>We've included <a href="optgroup"><code><optgroup></code></a> elements to divide the options up into different groups. This is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented.</li> <li>The "Hamster" option includes a <code>disabled</code> attribute and therefore can't be selected at all.</li> </ul> +</div> +<h3 id="customizing_select_styles">Customizing select styles</h3> +<div class="section-content"> +<p>This example shows how you could use some CSS and JavaScript to provide extensive custom styling for a <code><select></code> box.</p> <p>This example basically:</p> <ul> <li>Clones the <code><select></code>'s context (the <a href="option"><code><option></code></a> elements) in a parent wrapper and reimplements the standard expected behavior using additional HTML elements and JavaScript. This includes basic tab behavior to provide keyboard accessibility.</li> <li>Maps some standards native <code>attributes</code> to <code>data-attributes</code> of the new elements in order to manage state and CSS.</li> </ul> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Not all native features are supported, it's a Proof of Concept. IT starts from standard HTML but the same results can be achieved starting from JSON data, custom HTML, or other solutions.</p> </div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5jQB5n72rOLcUOQfu26qdO6uKEbpK6VIgeR8yH1lLh0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Standard controls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1A<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>select<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Carrots<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Peas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Beans<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Pneumonoultramicroscopicsilicovolcanoconiosis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</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>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Custom controls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2A<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>select<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Carrots<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Peas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Beans<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Pneumonoultramicroscopicsilicovolcanoconiosis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="hoa421zURWd/2yz5HGpqM2f+AG0g74k/IX/8x8UFo/c=" data-language="css"><span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> Cambria<span class="token punctuation">,</span> Cochin<span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> Times<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select:focus</span> <span class="token punctuation">{</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-multiple] div.header</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"↓"</span><span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"↓"</span><span class="token punctuation">;</span> + <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">justify-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header:hover::after</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select .header select</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select .header select optgroup</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select select div.option</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select</span> <span class="token punctuation">{</span> + <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select:focus, +html body form fieldset#custom div.select:hover</span> <span class="token punctuation">{</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-open]</span> <span class="token punctuation">{</span> + <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-open] datalist</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> + <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> + <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist div.option</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist div.option:hover, +html body form fieldset#custom div.select datalist div.option:focus, +html body form fieldset#custom div.select datalist div.option:checked</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html + body + form + fieldset#custom + div.select + div.optgroup + div.option[data-disabled]</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html + body + form + fieldset#custom + div.select + div.optgroup + div.option[data-checked]</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.optgroup div.label</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.optgroup div.option div.label</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header span</span> <span class="token punctuation">{</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="VBcwxA5gHMPSr1t4RJ64AxBBQlFeMAOWQ+bTmQDiEZM=" data-language="js"><span class="token keyword">const</span> selects <span class="token operator">=</span> custom<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> select <span class="token keyword">of</span> selects<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> header <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> datalist <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"datalist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> optgroups <span class="token operator">=</span> select<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"optgroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> select<span class="token punctuation">.</span>options<span class="token punctuation">;</span> + <span class="token keyword">const</span> parent <span class="token operator">=</span> select<span class="token punctuation">.</span>parentElement<span class="token punctuation">;</span> + <span class="token keyword">const</span> multiple <span class="token operator">=</span> select<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"multiple"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">function</span> <span class="token function">onclick</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> disabled <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + select<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>disabled<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>multiple<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>shiftKey<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> div<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> options<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> options<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + <span class="token keyword">function</span> <span class="token function">onkeyup</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">13</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + header<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> + select<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> select<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + header<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>span<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> select<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> options<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> o <span class="token operator">=</span> options<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> o<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + option<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value <span class="token operator">=</span> o<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onclick <span class="token operator">=</span> onclick<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onkeyup <span class="token operator">=</span> onkeyup<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + datalist<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>header<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> o <span class="token keyword">of</span> optgroups<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> optgroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> o<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>optgroup<span class="token punctuation">,</span> o<span class="token punctuation">)</span><span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"optgroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>optgroup<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> o <span class="token keyword">of</span> options<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> o<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + option<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value <span class="token operator">=</span> o<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onclick <span class="token operator">=</span> onclick<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onkeyup <span class="token operator">=</span> onkeyup<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + parent<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>div<span class="token punctuation">,</span> select<span class="token punctuation">)</span><span class="token punctuation">;</span> + header<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>select<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>datalist<span class="token punctuation">)</span><span class="token punctuation">;</span> + datalist<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>header<span class="token punctuation">.</span>offsetTop <span class="token operator">+</span> header<span class="token punctuation">.</span>offsetHeight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>multiple<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> open <span class="token operator">=</span> div<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>open<span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onkeyup</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">13</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> width <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span> + <span class="token operator">...</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> e<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + <span class="token keyword">return</span> div<span class="token punctuation">.</span>offsetWidth<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>width<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onsubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + submit<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>data<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result_3">Result</h4> +<iframe width="100%" height="300" src="https://mdn.github.io/html-examples/custom-select" loading="lazy"></iframe> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, <a href="../content_categories#form_resettable">resettable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_">form-associated </a>element </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="option"><code><option></code></a> or <a href="optgroup"><code><optgroup></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a> with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise no <code>role</code> permitted </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</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/form-elements.html#the-select-element">HTML Standard <br><small># the-select-element</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>select</code></th> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code><option></code> element to the parent <code><select></code> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <code><select></code> element is displayed as a drop-down list. The behavior is unchanged if the <code><select></code> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <code><option></code> elements for events, you should watch for change events on <code><select></code>. See <a href="https://bugzil.la/1090602">bug 1090602</a> for details.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>≤37</summary>["In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <code><select></code> will not be displayed if a <code>background</code>, <code>border</code>, or <code>border-radius</code> style is applied to the <code><select></code>.", "<code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value."]</details></td> +<td class="bc-supports-yes"><details><summary>18</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Firefox for Android, by default, sets a <code>background-image</code> gradient on all <code><select multiple></code> elements. This can be disabled using <code>background-image: none</code>.</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>1.0</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +</tr> +<tr> +<th><code>disabled</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>multiple</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>required</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>size</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>Events fired by <code><select></code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> +</li> <li>The <a href="option"><code><option></code></a> element</li> <li>The <a href="optgroup"><code><optgroup></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/select" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select</a> + </p> +</div> diff --git a/devdocs/html/element%2Fslot.html b/devdocs/html/element%2Fslot.html new file mode 100644 index 00000000..e7b67e7a --- /dev/null +++ b/devdocs/html/element%2Fslot.html @@ -0,0 +1,128 @@ +<header><h1><slot>: The Web Component Slot element</h1></header><div class="section-content"><p>The <code><slot></code> <a href="../index">HTML</a> element—part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.</p></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The slot's name.</p> <p>A <strong><em>named slot</em></strong> is a <code><slot></code> element with a <code>name</code> attribute.</p> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EdmHcu4vr/mG3mZb9UbYS3bWpOcGqGLEvp/AfS718+U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</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>element-details-template<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">details</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Open Sans Light"</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token selector">.name</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #217ac0<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 120%<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token selector">h4</span> <span class="token punctuation">{</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 10px 0 -8px 0<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #217ac0<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 6px<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #cee9f9<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token selector">.attributes</span> <span class="token punctuation">{</span> + <span class="token property">margin-left</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token selector">.attributes p</span> <span class="token punctuation">{</span> + <span class="token property">margin-left</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> + <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</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>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token entity named-entity">&lt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>element-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>NEED NAME<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><span class="token entity named-entity">&gt;</span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>NEED DESCRIPTION<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>attributes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Attributes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>attributes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>None<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> You can see this complete example in action at <a href="https://github.com/mdn/web-components-examples/tree/main/element-details" target="_blank">element-details</a> (see it <a href="https://mdn.github.io/web-components-examples/element-details/" target="_blank">running live</a>). In addition, you can find an explanation at <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots">Using templates and slots</a>.</p> </div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#transparent_content_model">Transparent</a></td> </tr> <tr> <th scope="row">Events</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event"><code>slotchange</code></a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</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/scripting.html#the-slot-element">HTML Standard <br><small># the-slot-element</small></a></td></tr> +<tr><td><a href="https://dom.spec.whatwg.org/#shadow-tree-slots">DOM Standard <br><small># shadow-tree-slots</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>slot</code></th> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">6.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">6.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>HTML <a href="template"><code><template></code></a> element</li> <li>HTML <a href="../global_attributes/slot"><code>slot</code></a> attribute</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted"><code>::slotted</code></a> pseudo-element</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scoping">CSS scoping</a> module</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/slot" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsmall.html b/devdocs/html/element%2Fsmall.html new file mode 100644 index 00000000..5f2c7931 --- /dev/null +++ b/devdocs/html/element%2Fsmall.html @@ -0,0 +1,96 @@ +<header><h1><small>: the side comment element</h1></header><div class="section-content"><p>The <code><small></code> <a href="../index">HTML</a> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from <code>small</code> to <code>x-small</code>.</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/small.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_usage">Basic usage</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iXr7PDWDfNhmV0Hp6My9qslH8oO7OVoxwrGtmNEpwzo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first sentence. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>This whole sentence is in small letters.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic usage sample" id="frame_basic_usage" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/small/runner.html?id=basic_usage" loading="lazy"></iframe> +</div> +</div> +<h3 id="css_alternative">CSS alternative</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zE0JR03IWtHqK6K5ed8w9QjPWNxJMVHla1OYmIKZxAM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + This is the first sentence. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>0.8em</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This whole sentence is in small letters.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="CSS alternative sample" id="frame_css_alternative" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/small/runner.html?id=css_alternative" loading="lazy"></iframe> +</div> +</div> +<h2 id="notes">Notes</h2> +<div class="section-content"><p>Although the <code><small></code> element, like the <a href="b"><code><b></code></a> and <a href="i"><code><i></code></a> elements, may be perceived to violate the principle of separation between structure and presentation, all three are valid in HTML. Authors are encouraged to use their best judgement when determining whether to use <code><small></code> or CSS.</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> <th scope="row">Content categories</th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td><a href="../content_categories#phrasing_content">Phrasing content</a></td> </tr> <tr> <th scope="row">Tag omission</th> <td>None; must have both a start tag and an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-small-element">HTML Standard <br><small># the-small-element</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>small</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="b"><code><b></code></a></li> <li> +<a href="sub"><code><sub></code></a> and <a href="sup"><code><sup></code></a> +</li> <li><a href="font"><code><font></code></a></li> <li><a href="style"><code><style></code></a></li> <li>HTML 4.01 Specification: <a href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2" target="_blank">Font Styles</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/small" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsource.html b/devdocs/html/element%2Fsource.html new file mode 100644 index 00000000..d1e07d52 --- /dev/null +++ b/devdocs/html/element%2Fsource.html @@ -0,0 +1,255 @@ +<header><h1><source>: The Media or Image Source element</h1></header><div class="section-content"><p>The <code><source></code> <a href="../index">HTML</a> element specifies multiple media resources for the <a href="picture"><code><picture></code></a>, the <a href="audio"><code><audio></code></a> element, or the <a href="video"><code><video></code></a> element. It is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">image file formats</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">media file formats</a>.</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/source.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>It must have a start tag, but must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A media element—<a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a>—and it must be placed before any <a href="../content_categories#flow_content">flow content</a> or <a href="track"><code><track></code></a> element. A <a href="picture"><code><picture></code></a> element, and it must be placed before the <a href="img"><code><img></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">MIME media type of the image</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">other media type</a>, optionally with a <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter"><code>codecs</code> parameter</a>.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>Required if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> and <a href="video"><code><video></code></a> element, but not allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element.</p> <p>Address of the media resource.</p> </dd> <dt id="srcset"><a href="#srcset"><code>srcset</code></a></dt> <dd> <p>Required if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>A list of one or more strings, separated by commas, indicating a set of possible images represented by the source for the browser to use. Each string is composed of:</p> <ol> <li>One URL specifying an image.</li> <li>A width descriptor, which consists of a string containing a positive integer directly followed by <code>"w"</code>, such as <code>300w</code>. The default value, if missing, is the infinity.</li> <li>A pixel density descriptor, that is a positive floating number directly followed by <code>"x"</code>. The default value, if missing, is <code>1x</code>.</li> </ol> <p>Each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. The two types of descriptors should not be mixed together and only one should be used consistently throughout the list. Among the list, the value of each descriptor must be unique. The browser chooses the most adequate image to display at a given point of time. If the <code>sizes</code> attribute is present, then a width descriptor must be specified for each string. If the browser does not support <code>srcset</code>, then <code>src</code> will be used for the default source.</p> </dd> <dt id="sizes"><a href="#sizes"><code>sizes</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>A list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. Before laying the page out, the browser uses this information to determine which image is defined in <a href="#srcset"><code>srcset</code></a> to use. Please note that <code>sizes</code> will have its effect only if width dimension descriptors are provided with <code>srcset</code> instead of pixel ratio values (200w instead of 2x for example).</p> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">Media query</a> of the resource's intended media.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>The intrinsic height of the image, in pixels. Must be an integer without a unit.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>Allowed if the <code>source</code> element's parent is a <a href="picture"><code><picture></code></a> element, but not allowed if the <code>source</code> element's parent is an <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element.</p> <p>The intrinsic width of the image in pixels. Must be an integer without a unit.</p> </dd> </dl> <p>If the <code>type</code> attribute isn't specified, the media's type is retrieved from the server and checked to see if the user agent can handle it; if it can't be rendered, the next <code><source></code> is checked. If the <code>type</code> attribute is specified, it's compared against the types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <code><source></code> element is checked at once.</p> <p>When used in the context of a <code><picture></code> element, the browser will fall back to using the image specified by the <code><picture></code> element's <a href="img"><code><img></code></a> child if it is unable to find a suitable image to use after examining every provided <code><source></code>.</p> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><source></code> element is a <strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a></strong>, which means that it not only has no content but also has no closing tag. That is, you <em>never</em> use "<code></source></code>" in your HTML.</p> <p>For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a> on the web. For details on the video and audio media types you can use, see the <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types formats used on the web</a>.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="video_with_type_attribute_example">Video with type attribute example</h3> +<div class="section-content"> +<p>This example demonstrates how to offer a video in WebM format for users whose browsers support WebM format, Ogg format for users whose browsers support Ogg format, and a QuickTime format video for users whose browsers support that. If the <code>audio</code> or <code>video</code> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an <code>error</code> event is raised and the default media controls (if enabled) will indicate an error. Be sure to reference our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">guide to media types and formats on the web</a> for details on what media file formats you can use and how well they're supported by browsers.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5HgJzmO/ATQufwctR1n74/oGvm60F5LN3zH9tHa9hjs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.webm<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>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.ogg<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>video/ogg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.mov<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>video/quicktime<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + I'm sorry; your browser doesn't support HTML video. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="video_with_media_attribute_example">Video with media attribute example</h3> +<div class="section-content"> +<p>This example demonstrates how to offer an alternate source file for viewports at or above a certain width. When a user's browsing environment meets the specified <code>media</code> condition, the associated <code><source></code> element is chosen, and the contents of its <code>src</code> attribute are requested and rendered. If the <code>media</code> condition does not match, the user agent will move on to the next <code><source></code> in the source order. The second source option in the below code has no <code>media</code> condition, so will be selected for all other browsing contexts.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="oNc/X6GxAcHQeegr8jv739lOrUerZcpTkZ2Uu+nIu8g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo-large.webm<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>foo.webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + I'm sorry; your browser doesn't support HTML video. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</div> <p>For more examples, the learning area article <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> is a great resource.</p> +</div> +<h3 id="picture_example">Picture example</h3> +<div class="section-content"> +<p>In this example, two <code><source></code> elements are included within the <a href="picture"><code><picture></code></a>, providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the user agent will fall back to the image given by the <a href="img"><code><img></code></a> element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zM8C3BUibuoydUljMfnaVhaTCvG878n1ry9zY3SAGkU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-wide.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-medium.png<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mdn-logo-narrow.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MDN Web Docs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> +</pre> +</div> <p>With the <code><picture></code> element, you must always include an <code><img></code> with a fallback image, with an <code>alt</code> attribute to ensure accessibility (unless the image is an irrelevant background decorative image).</p> +</div> +<h3 id="picture_with_height_width_attributes_example">Picture with height & width attributes example</h3> +<div class="section-content"> +<p> In this example, three <code><source></code> elements with <code>height</code> and <code>width</code> attributes are included in a <a href="picture"><code><picture></code></a> element. A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media query</a> allows the browser to select an image to display with the <code>height</code> and <code>width</code> attributes based on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> size. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4ABBCazrHHu8u1BhZYxILQlaD6KVGPjtX+m+m/K9TZs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>landscape.png<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 1000px)<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>square.png<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 800px)<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>portrait.png<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 600px)<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>600<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>800<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fallback.png<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image used when the browser does not support the sources<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> +</pre> +</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/embedded-content.html#the-source-element">HTML Standard <br><small># the-source-element</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>source</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>3.5</summary>Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see <a href="https://bugzil.la/449363">bug 449363</a> for details.</details></td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.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>Until Firefox 15, Firefox picked the first source element that has a type matching the MIME-type of a supported media format; see <a href="https://bugzil.la/449363">bug 449363</a> for details.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>height</code></th> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">76</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>media</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>sizes</code></th> +<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">38<details><summary>37–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">3.0<details><summary>2.0–3.0</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +</tr> +<tr> +<th><code>src</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>srcset</code></th> +<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">38<details><summary>37–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">38<details><summary>34–38</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">25<details><summary>21–25</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">3.0<details><summary>2.0–3.0</summary>Supports a subset of the syntax for resolution switching (using the <code>x</code> descriptor), but not the full syntax that can be used with <code>sizes</code> (using the <code>w</code> descriptor).</details> +</td> +</tr> +<tr> +<th><code>type</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">76</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">90</td> +<td class="bc-supports-yes">108</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">15.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></li> <li> +<a href="picture"><code><picture></code></a> element</li> <li> +<a href="audio"><code><audio></code></a> element</li> <li> +<a href="video"><code><video></code></a> element</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Web Performance</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/source" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source</a> + </p> +</div> diff --git a/devdocs/html/element%2Fspan.html b/devdocs/html/element%2Fspan.html new file mode 100644 index 00000000..332a3f51 --- /dev/null +++ b/devdocs/html/element%2Fspan.html @@ -0,0 +1,96 @@ +<header><h1><span>: The Content Span element</h1></header><div class="section-content"><p>The <code><span></code> <a href="../index">HTML</a> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the <a href="../global_attributes#class"><code>class</code></a> or <a href="../global_attributes#id"><code>id</code></a> attributes), or because they share attribute values, such as <a href="../global_attributes#lang"><code>lang</code></a>. It should be used only when no other semantic element is appropriate. <code><span></code> is very much like a <a href="div"><code><div></code></a> element, but <a href="div"><code><div></code></a> is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level element</a> whereas a <code><span></code> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline-level element</a>.</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/span.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="example">Example</h2> + +<h3 id="example_1">Example 1</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/1LifhEX+VZAZChGdanvRaMz9IOFdGLznGSZgB7uqcQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Some text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Example 1 sample" id="frame_example_1" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/span/runner.html?id=example_1" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_2">Example 2</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TJk3cIEcJaKZMyjoC3Vr9HJa3XPVT86AqoXZzXKe8MU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>portfolio.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>See my portfolio<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="CZUYCNVTUsHBcMNtifZGz3xxQNKn5otdoJ7UlA9rzuw=" data-language="css"><span class="token selector">li span</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Example 2 sample" id="frame_example_2" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/span/runner.html?id=example_2" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</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/text-level-semantics.html#the-span-element">HTML Standard <br><small># the-span-element</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>span</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">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">4</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>HTML <a href="div"><code><div></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/span" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span</a> + </p> +</div> diff --git a/devdocs/html/element%2Fstrike.html b/devdocs/html/element%2Fstrike.html new file mode 100644 index 00000000..f5f18581 --- /dev/null +++ b/devdocs/html/element%2Fstrike.html @@ -0,0 +1,71 @@ +<header><h1><strike></h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><strike></code> <a href="../index">HTML</a> element places a strikethrough (horizontal line) over text.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> This element is deprecated in HTML 4 and XHTML 1, and obsoleted in the <a href="https://html.spec.whatwg.org/multipage/obsolete.html#strike" target="_blank">HTML Living Standard</a>. If semantically appropriate, i.e., if it represents <em>deleted</em> content, use <a href="del"><code><del></code></a> instead. In all other cases use <a href="s"><code><s></code></a>.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+06vveLhj+8oJeCPAhwcMpJos94tBc5ZOhZfsgUW8vU=" data-language="html"><span class="token entity named-entity">&lt;</span>strike<span class="token entity named-entity">&gt;</span>: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strike</span><span class="token punctuation">></span></span>Today's Special: Salmon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strike</span><span class="token punctuation">></span></span> SOLD OUT<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +<span class="token entity named-entity">&lt;</span>s<span class="token entity named-entity">&gt;</span>: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>s</span><span class="token punctuation">></span></span>Today's Special: Salmon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>s</span><span class="token punctuation">></span></span> SOLD OUT +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/strike/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/obsolete.html#strike">HTML Standard <br><small># strike</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>strike</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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"><details><summary>4</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="s"><code><s></code></a> element.</li> <li>The <a href="del"><code><del></code></a> element should be used if the data has been <em>deleted</em>.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property can be used to style text with a strikethrough.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/strike" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strike</a> + </p> +</div> diff --git a/devdocs/html/element%2Fstrong.html b/devdocs/html/element%2Fstrong.html new file mode 100644 index 00000000..3d2577fc --- /dev/null +++ b/devdocs/html/element%2Fstrong.html @@ -0,0 +1,103 @@ +<header><h1><strong>: The Strong Importance element</h1></header><div class="section-content"><p>The <code><strong></code> <a href="../index">HTML</a> element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.</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/strong.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><strong></code> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.</p> <p>Typically this element is rendered by default using a bold font weight. However, it should <em>not</em> be used to apply bold styling; use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property for that purpose. Use the <a href="b"><code><b></code></a> element to draw attention to certain text without indicating a higher level of importance. Use the <a href="em"><code><em></code></a> element to mark text that has stress emphasis.</p> <p>Another accepted use for <code><strong></code> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.</p> +</div> +<h3 id="b_vs._strong"><b> vs. <strong></h3> +<div class="section-content"> +<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <a href="b"><code><b></code></a> and <code><strong></code> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <code><b></code> or <code><strong></code>? Don't they both do the same thing?"</p> <p>Not exactly. The <code><strong></code> element is for content that is of greater importance, while the <code><b></code> element is used to draw attention to text without indicating that it's more important.</p> <p>It may help to realize that both are valid and semantic elements in HTML and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <code><strong></code>). Each element is meant to be used in certain types of scenarios, and if you want to bold text for decoration, you should instead actually use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property.</p> <p>The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.</p> +</div> +<h3 id="em_vs._strong"><em> vs. <strong></h3> +<div class="section-content"> +<p>Adding to the confusion is the fact that while HTML 4 defined <code><strong></code> as indicating a stronger emphasis, HTML 5 defines <code><strong></code> as representing "strong importance for its contents." This is an important distinction to make.</p> <p>While <code><em></code> is used to change the meaning of a sentence as spoken emphasis does ("I <em>love</em> carrots" vs. "I love <em>carrots</em>"), <code><strong></code> is used to give portions of a sentence added importance (e.g., "<strong>Warning!</strong> This is <strong>very dangerous.</strong>") Both <code><strong></code> and <code><em></code> can be nested to increase the relative degree of importance or stress emphasis, respectively.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+ia1N9Cr/Ak2PJw0ZzSr6MjvzwYt24RhK5lB0/ynBVo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Before proceeding, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>make sure you put on your safety goggles<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/strong/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="labeling_warnings">Labeling warnings</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="aRvQkg5EdBGHvnO/h9OSM9U3Z0rxY/xx8glsxw4OjgM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Important:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Before proceeding, make sure you add plenty of + butter. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Labeling warnings sample" id="frame_labeling_warnings" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/strong/runner.html?id=labeling_warnings" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None; must have both a start tag and an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">strong</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-strong-element">HTML Standard <br><small># the-strong-element</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>strong</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>Before Firefox 4, creating a <code><strong></code> element incorrectly resulted in an <code>HTMLSpanElement</code> object, instead of the expected <code>HTMLElement</code>.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="b"><code><b></code></a> element</li> <li>The <a href="em"><code><em></code></a> element</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/strong" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong</a> + </p> +</div> diff --git a/devdocs/html/element%2Fstyle.html b/devdocs/html/element%2Fstyle.html new file mode 100644 index 00000000..b6d28bea --- /dev/null +++ b/devdocs/html/element%2Fstyle.html @@ -0,0 +1,230 @@ +<header><h1><style>: The Style Information element</h1></header><div class="section-content"><p>The <code><style></code> <a href="../index">HTML</a> element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <code><style></code> element.</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/style.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The <code><style></code> element must be included inside the <a href="head"><code><head></code></a> of the document. In general, it is better to put your styles in external stylesheets and apply them using <a href="link"><code><link></code></a> elements.</p> <p>If you include multiple <code><style></code> and <code><link></code> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you include them in the correct order, to avoid unexpected cascade issues.</p> <p>In the same manner as <code><link></code> elements, <code><style></code> elements can include <code>media</code> attributes that contain <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media queries</a>, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="blocking"> +<a href="#blocking"><code>blocking</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>This attribute explicitly indicates that certain operations should be blocked on the fetching of critical subresources. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import"><code>@import</code></a>-ed stylesheets are generally considered as critical subresources, whereas <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image"><code>background-image</code></a> and fonts are not.</p> <ul> <li> +<code>render</code>: The rendering of content on the screen is blocked.</li> </ul> </dd> <dt id="media"><a href="#media"><code>media</code></a></dt> <dd> <p>This attribute defines which media the style should be applied to. Its value is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media query</a>, which defaults to <code>all</code> if the attribute is missing.</p> </dd> <dt id="nonce"><a href="#nonce"><code>nonce</code></a></dt> <dd> <p>A cryptographic nonce (number used once) used to allow inline styles in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</p> </dd> <dt id="title"><a href="#title"><code>title</code></a></dt> <dd> <p>This attribute specifies <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">alternative style sheet</a> sets.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="type"> +<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute should not be provided: if it is, the only permitted values are the empty string or a case-insensitive match for <code>text/css</code>.</p> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="a_simple_stylesheet">A simple stylesheet</h3> +<div class="section-content"> +<p>In the following example, we apply a very simple stylesheet to a document:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Xp1eBLnbRbAAjqyTCFNTrBNTWck3M+5AxtWVn52AbH8=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="A simple stylesheet sample" id="frame_a_simple_stylesheet" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=a_simple_stylesheet" loading="lazy"></iframe> +</div> +</div> +<h3 id="multiple_style_elements">Multiple style elements</h3> +<div class="section-content"> +<p>In this example we've included two <code><style></code> elements — notice how the conflicting declarations in the later <code><style></code> element override those in the earlier one, if they have equal <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">specificity</a>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="HUSNAFh8BZIdBF/hp4GoX4t+HEJOnqLW1Khlt/2VJ14=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Multiple style elements sample" id="frame_multiple_style_elements" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=multiple_style_elements" loading="lazy"></iframe> +</div> +</div> +<h3 id="including_a_media_query">Including a media query</h3> +<div class="section-content"> +<p>In this example we build on the previous one, including a <code>media</code> attribute on the second <code><style></code> element so it is only applied when the viewport is less than 500px in width.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2vvFiULEGiSNCyiwFEbxjnlPzEVZXl/xwEfDs7YycdQ=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>all and (max-width: 500px)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> + <span class="token selector">p</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This is my paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Including a media query sample" id="frame_including_a_media_query" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/style/runner.html?id=including_a_media_query" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>, and if the <code>scoped</code> attribute is present: <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th>Permitted content</th> <td> Text content matching the <code>type</code> attribute, that is <code>text/css</code>. </td> </tr> <tr> <th>Tag omission</th> <td>Neither tag is omissible.</td> </tr> <tr> <th>Permitted parents</th> <td> Any element that accepts <a href="../content_categories#metadata_content">metadata content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th>DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</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/semantics.html#the-style-element">HTML Standard <br><small># the-style-element</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>style</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">3</td> +<td class="bc-supports-yes">3.5</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>blocking</code></th> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">91</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-yes">105</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20.0</td> +</tr> +<tr> +<th><code>media</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">3</td> +<td class="bc-supports-yes">3.5</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>title</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">3</td> +<td class="bc-supports-yes">3.5</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">10.1</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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>Before 75, Firefox accepted any CSS media (MIME) type, with optional parameters. Starting in 75, this has been restricted to the string 'text/css', per the spec.</details></td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">3.5</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">10.1</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>The <a href="link"><code><link></code></a> element, which allows us to apply external stylesheets to a document.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">Alternative Style Sheets</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/style" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsub.html b/devdocs/html/element%2Fsub.html new file mode 100644 index 00000000..09dc74f1 --- /dev/null +++ b/devdocs/html/element%2Fsub.html @@ -0,0 +1,112 @@ +<header><h1><sub>: The Subscript element</h1></header><div class="section-content"><p>The <code><sub></code> <a href="../index">HTML</a> element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.</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/sub.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><sub></code> element should be used only for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.</p> <p>For example, using <code><sub></code> to style the name of a company which uses altered baselines in their <a href="https://en.wikipedia.org/wiki/Wordmark" target="_blank">wordmark</a> would not be appropriate; instead, CSS should be used. For example, you could use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property with a declaration like <code>vertical-align: sub</code> or, to more precisely control the baseline shift, <code>vertical-align: -25%</code>.</p> <p>Appropriate use cases for <code><sub></code> include (but aren't necessarily limited to):</p> <ul> <li>Marking up footnote numbers. See <a href="#footnote_numbers">Footnote numbers</a> for an example.</li> <li>Marking up the subscript in mathematical variable numbers (although you may also consider using a <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a> formula for this). See <a href="#variable_subscripts">Variable subscripts</a>.</li> <li> Denoting the number of atoms of a given element within a chemical formula (such as every developer's best friend, C <sub>8</sub> H <sub>10</sub> N <sub>4</sub> O <sub>2</sub> , otherwise known as "caffeine"). See <a href="#chemical_formulas">Chemical formulas</a>. </li> </ul> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="footnote_numbers">Footnote numbers</h3> +<div class="section-content"> +<p>Traditional footnotes are denoted using numbers which are rendered in subscript. This is a common use case for <code><sub></code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mTljQa7lvApf0eis59NcyCtwMHPX/Cs6vWDX7xo89p0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + According to the computations by Nakamura, Johnson, and Mason<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span> this + will result in the complete annihilation of both particles. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Footnote numbers sample" id="frame_footnote_numbers" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sub/runner.html?id=footnote_numbers" loading="lazy"></iframe> +</div> +</div> +<h3 id="variable_subscripts">Variable subscripts</h3> +<div class="section-content"> +<p>In mathematics, families of variables related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9v18rU9x1ggtVHpn2xw8R6e83DxPWD85oGxBAWVvaFA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The horizontal coordinates' positions along the X-axis are represented as + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> … <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Variable subscripts sample" id="frame_variable_subscripts" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sub/runner.html?id=variable_subscripts" loading="lazy"></iframe> +</div> +</div> +<h3 id="chemical_formulas">Chemical formulas</h3> +<div class="section-content"> +<p>When writing a chemical formula, such as H<sub>2</sub>0, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.</p> <p>Another example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="x1TvICWeU/i582STE7h/wzqPLNpRkNxupsR3dUQlTlI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Almost every developer's favorite molecule is + C<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span>H<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span>O<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sub</span><span class="token punctuation">></span></span>, which is commonly known + as "caffeine." +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Chemical formulas sample" id="frame_chemical_formulas" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sub/runner.html?id=chemical_formulas" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">subscript</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-sub-and-sup-elements">HTML Standard <br><small># the-sub-and-sup-elements</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>sub</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="sup"><code><sup></code></a> HTML element that produces superscript. Note that you cannot use <code>sup</code> and <code>sub</code> both at the same time: you need to use <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a> to produce both a superscript directly above a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msup"><code><msup></code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML elements.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/sub" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsummary.html b/devdocs/html/element%2Fsummary.html new file mode 100644 index 00000000..0c9ddf94 --- /dev/null +++ b/devdocs/html/element%2Fsummary.html @@ -0,0 +1,145 @@ +<header><h1><summary>: The Disclosure Summary element</h1></header><div class="section-content"><p>The <code><summary></code> <a href="../index">HTML</a> element specifies a summary, caption, or legend for a <a href="details"><code><details></code></a> element's disclosure box. Clicking the <code><summary></code> element toggles the state of the parent <code><details></code> element open and closed.</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/summary.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><summary></code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p> <p>A <code><summary></code> element may <em>only</em> be used as the first child of a <code><details></code> element. When the user clicks on the summary, the parent <code><details></code> element is toggled open or closed, and then a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event"><code>toggle</code></a> event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p> +</div> +<h3 id="default_label_text">Default label text</h3> +<div class="section-content"><p>If a <code><details></code> element's first child is not a <code><summary></code> element, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> will use a default string (typically "Details") as the label for the disclosure box.</p></div> +<h3 id="default_style">Default style</h3> +<div class="section-content"> +<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p> <p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p> <p>See the <a href="#browser_compatibility">Browser compatibility</a> section for details, as not all browsers support full functionality of this element yet.</p> <p>For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element <code>::-webkit-details-marker</code>. To remove the disclosure triangle, use <code>summary::-webkit-details-marker { display: none }</code>.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the <a href="details"><code><details></code></a> element.</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>A simple example showing the use of <code><summary></code> in a <a href="details"><code><details></code></a> element:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="HOi2ZMwsCOmar8ZW4jXf0UP8OWDhVzDcw+qVxj+nsTc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Overview<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Cash on hand: $500.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Current invoice: $75.30<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Due date: 5/6/19<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/summary/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="summaries_as_headings">Summaries as headings</h3> +<div class="section-content"> +<p>You can use heading elements in <code><summary></code>, like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QYs9cS9qT5lDdKD90eqaZI0990MugbN0Xcb3s1Q9vCo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Overview<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Cash on hand: $500.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Current invoice: $75.30<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Due date: 5/6/19<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Summaries as headings sample" id="frame_summaries_as_headings" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/summary/runner.html?id=summaries_as_headings" loading="lazy"></iframe> +</div> <p>This currently has some spacing issues that could be addressed using CSS.</p> <div class="notecard warning" id="sect3"> <p><strong>Warning:</strong> Because the <code><summary></code> element has a default role of <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a> (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <code><h4></code> will have its role removed and thus will not be treated as a heading for these users.</p> </div> +</div> +<h3 id="html_in_summaries">HTML in summaries</h3> +<div class="section-content"> +<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Kcy7ZpB8/IzP+mSsQnLGfXDvAVyBzhM22Y1FtipSovk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span> <span class="token attr-name">open</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Overview<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Cash on hand: $500.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Current invoice: $75.30<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Due date: 5/6/19<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="HTML in summaries sample" id="frame_html_in_summaries" width="650" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/summary/runner.html?id=html_in_summaries" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a> or one element of <a href="../content_categories#heading_content">Heading content</a> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None; both the start tag and the end tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>The <a href="details"><code><details></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/interactive-elements.html#the-summary-element">HTML Standard <br><small># the-summary-element</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>summary</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>display_list_item</code></th> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">75</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">89</td> +<td class="bc-supports-yes">49</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="details"><code><details></code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/summary" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary</a> + </p> +</div> diff --git a/devdocs/html/element%2Fsup.html b/devdocs/html/element%2Fsup.html new file mode 100644 index 00000000..88eabe98 --- /dev/null +++ b/devdocs/html/element%2Fsup.html @@ -0,0 +1,111 @@ +<header><h1><sup>: The Superscript element</h1></header><div class="section-content"><p>The <code><sup></code> <a href="../index">HTML</a> element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.</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/sup.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><sup></code> element should only be used for typographical reasons—that is, to change the position of the text to comply with typographical conventions or standards, rather than solely for presentation or appearance purposes.</p> <p>For example, to style the <a href="https://en.wikipedia.org/wiki/Wordmark" target="_blank">wordmark</a> of a business or product which uses a raised baseline should be done using CSS (most likely <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a>) rather than <code><sup></code>. This would be done using, for example, <code>vertical-align: super</code> or, to shift the baseline up 50%, <code>vertical-align: 50%</code>.</p> <p>Appropriate use cases for <code><sup></code> include (but aren't necessarily limited to):</p> <ul> <li> Displaying exponents, such as "x <sup>3</sup> ." It may be worth considering the use of <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a> for these, especially in more complex cases. See <a href="#exponents">Exponents</a> under <a href="#examples">Examples</a> below. </li> <li> Displaying <a href="https://en.wikipedia.org/wiki/Superior_letter" target="_blank">superior lettering</a>, which is used in some languages when rendering certain abbreviations. For example, in French, the word "mademoiselle" can be abbreviated "M <sup>lle</sup> "); this is an acceptable use case. See <a href="#superior_lettering">Superior lettering</a> for examples. </li> <li> Representing ordinal numbers, such as "4 <sup>th</sup> " instead of "fourth." See <a href="#ordinal_numbers">Ordinal numbers</a> for examples. </li> </ul> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="exponents">Exponents</h3> +<div class="section-content"> +<p>Exponents, or powers of a number, are among the most common uses of superscripted text. For example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DpXZ/BNHuxtQsdc3kx7MruNXIbi0j2CLfV4RyLBLaYE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + One of the most common equations in all of physics is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>E<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span>=<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>m<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span> + <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>c<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Exponents sample" id="frame_exponents" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sup/runner.html?id=exponents" loading="lazy"></iframe> +</div> +</div> +<h3 id="superior_lettering">Superior lettering</h3> +<div class="section-content"> +<p>Superior lettering is not technically the same thing as superscript. However, it is common to use <code><sup></code> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="htBaORvyqtGvLwr21mj+XbEeGdAt9HpaTG9h8tV8Y0s=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Robert a présenté son rapport à M<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>lle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span> Bernard.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Superior lettering sample" id="frame_superior_lettering" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sup/runner.html?id=superior_lettering" loading="lazy"></iframe> +</div> +</div> +<h3 id="ordinal_numbers">Ordinal numbers</h3> +<div class="section-content"> +<p>Ordinal numbers, such as "fourth" in English or "quinto" in Spanish may be abbreviated using numerals and language-specific text rendered in superscript:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DrDkUGGmYQZCO+O83waLiV9u43fGlCWrnGALM2vI7zo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The ordinal number "fifth" can be abbreviated in various languages as follows: +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>English: 5<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>th<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>French: 5<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sup</span><span class="token punctuation">></span></span>ème<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sup</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Ordinal numbers sample" id="frame_ordinal_numbers" width="650" height="160" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/sup/runner.html?id=ordinal_numbers" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">superscript</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-sub-and-sup-elements">HTML Standard <br><small># the-sub-and-sup-elements</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>sup</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="sub"><code><sub></code></a> HTML element that produces subscripts. Note that you cannot use <code>sub</code> and <code>sup</code> at the same time: you need to use <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a> to produce both a superscript and a subscript next to the chemical symbol of an element, representing its atomic number and its nuclear number.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msup"><code><msup></code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a> MathML elements.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/sup" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftable.html b/devdocs/html/element%2Ftable.html new file mode 100644 index 00000000..08d97c72 --- /dev/null +++ b/devdocs/html/element%2Ftable.html @@ -0,0 +1,546 @@ +<header><h1><table>: The Table element</h1></header><div class="section-content"><p>The <code><table></code> <a href="../index">HTML</a> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.</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/table.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td><a href="../content_categories#flow_content">Flow content</a></td> </tr> <tr> <th scope="row">Permitted content</th> <td>In this order: <ol> <li>an optional <a href="caption"><code><caption></code></a> element,</li> <li>zero or more <a href="colgroup"><code><colgroup></code></a> elements,</li> <li>an optional <a href="thead"><code><thead></code></a> element,</li> <li>either one of the following: <ul> <li>zero or more <a href="tbody"><code><tbody></code></a> elements</li> <li>one or more <a href="tr"><code><tr></code></a> elements</li> </ul> </li> <li>an optional <a href="tfoot"><code><tfoot></code></a> element</li> </ol> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts flow content</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/table_role">table</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement"><code>HTMLTableElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates how the table must be aligned inside the containing document. It may have the following values:</p> <ul> <li> +<code>left</code>: the table is displayed on the left side of the document;</li> <li> +<code>center</code>: the table is displayed in the center of the document;</li> <li> +<code>right</code>: the table is displayed on the right side of the document.</li> </ul> <p>Set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right"><code>margin-right</code></a> to achieve an effect that is similar to the align attribute:</p> <ul> <li> +<code>left</code>: <code>margin-right: auto; margin-left: 0;</code> +</li> <li> +<code>center</code>: <code>margin-right: auto; margin-left: auto;</code> +</li> <li> +<code>right</code>: <code>margin-right: 0; margin-left: auto;</code> +</li> </ul> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The background color of the table. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keywords</a> can also be used.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property.</p> </dd> <dt id="border"> +<a href="#border"><code>border</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the <a href="#frame"><code>frame</code></a> attribute is set to void.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> shorthand property.</p> </dd> <dt id="cellpadding"> +<a href="#cellpadding"><code>cellpadding</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).</p> <p>To achieve a similar effect, apply the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> property to the <code><table></code> element, with its value set to collapse, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding</code></a> property to the <a href="td"><code><td></code></a> elements.</p> </dd> <dt id="cellspacing"> +<a href="#cellspacing"><code>cellspacing</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p> <p>To achieve a similar effect, apply the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> property to the <code><table></code> element. <code>border-spacing</code> does not have any effect if <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> is set to collapse.</p> </dd> <dt id="frame"> +<a href="#frame"><code>frame</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p> <p>To achieve a similar effect, use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style"><code>border-style</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width"><code>border-width</code></a> properties.</p> </dd> <dt id="rules"> +<a href="#rules"><code>rules</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p> <ul> <li> +<code>none</code>, which indicates that no rules will be displayed; it is the default value;</li> <li> +<code>groups</code>, which will cause the rules to be displayed between row groups (defined by the <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a> and <a href="tfoot"><code><tfoot></code></a> elements) and between column groups (defined by the <a href="col"><code><col></code></a> and <a href="colgroup"><code><colgroup></code></a> elements) only;</li> <li> +<code>rows</code>, which will cause the rules to be displayed between rows;</li> <li> +<code>cols</code>, which will cause the rules to be displayed between columns;</li> <li> +<code>all</code>, which will cause the rules to be displayed between rows and columns.</li> </ul> <p>To achieve a similar effect, apply the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> property to the appropriate <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a>, <a href="col"><code><col></code></a>, or <a href="colgroup"><code><colgroup></code></a> elements.</p> </dd> <dt id="summary"> +<a href="#summary"><code>summary</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines an alternative text that summarizes the content of the table. Use the <a href="caption"><code><caption></code></a> element instead.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the width of the table. Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property instead.</p> </dd> </dl> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> While no HTML specification includes <code>height</code> as a <code><table></code> attribute, some browsers support a non-standard interpretation of <code>height</code>. The unitless value sets a minimum absolute height in pixels. If set as a percent value, the minimum table height will be relative to the height of the parent container.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_table">Simple table</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kpTqedh9NYGmaj1F12OvnMO9OKIMOL91fmyFs5Ifox8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>John<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Doe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Jane<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Doe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Simple table sample" id="frame_simple_table" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=simple_table" loading="lazy"></iframe> +</div> +</div> +<h3 id="further_simple_examples">Further simple examples</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EGFuvN15xKajLKjgia1PUuXiowlmmIbnkk/NufiVPUQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Simple table with header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>First name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Last name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>John<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Doe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Jane<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Doe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Table with thead, tfoot, and tbody<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Header content 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Header content 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Body content 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Body content 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tfoot</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Footer content 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Footer content 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tfoot</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Table with colgroup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>colgroup</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>colgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Countries<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Capitals<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Population<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Language<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>USA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Washington, D.C.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>309 million<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>English<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Sweden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Stockholm<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>9 million<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Swedish<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Table with colgroup and col<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>colgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>col</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> #0f0</span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>col</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>colgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Lime<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Lemon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Orange<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Green<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Yellow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Orange<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Simple table with caption<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span> + Awesome caption + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Awesome data<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Further simple examples sample" id="frame_further_simple_examples" width="100%" height="700" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=further_simple_examples" loading="lazy"></iframe> +</div> +</div> +<h3 id="table_sorting">Table sorting</h3> +<div class="section-content"> +<h4 id="sorting_table_rows">Sorting table rows</h4> <p>There are no native methods for sorting the rows (<a href="tr"><code><tr></code></a> elements) of an HTML table. But using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.prototype.slice()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>Array.prototype.sort()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild"><code>Node.removeChild()</code></a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild"><code>Node.appendChild()</code></a>, you can implement your own <code>sort()</code> function to sort an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> of <code><tr></code> elements.</p> <p>In the below example, you can see such an example. We are attaching it to the <tbody> element so that it sorts the table cells in order of increasing value, and updates the display to suit.</p> <h5 id="html">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="VZmKtEBq36tGgDWrmDDGkf/e0pLsgVbrKCcAVGo8OhY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="javascript">JavaScript</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="dOThlPMdSGOOExVEjgO6MryPddJ1EKzlz5k0A+5FpPM=" data-language="js"><span class="token class-name">HTMLTableSectionElement</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sort</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">cb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>rows<span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span>cb<span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +document + <span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"table"</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span>tBodies<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span>textContent<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h5 id="result_3">Result</h5> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Sorting table rows sample" id="frame_sorting_table_rows" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=sorting_table_rows" loading="lazy"></iframe> +</div> <h4 id="sorting_rows_with_a_click_on_the_th_element">Sorting rows with a click on the th element</h4> <p>The following example adds an event handler to every <code><th></code> element of every <code><table></code> in the <code>document</code>; it sorts all the <code><tbody></code>'s rows, basing the sorting on the <code>td</code> cells contained in the rows.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> This solution assumes that the <code><td></code> elements are populated by raw text with no descendant elements.</p> </div> <h5 id="html_2">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5pE6zE/QZjoBhsJjPd2Q0PFTSehUCePvBbVZ6zfoluk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Numbers<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Letters<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="javascript_2">JavaScript</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="utDiAEghfzxvAuqOKqIOowGZDlmU+IxSTBH+OJvIL9k=" data-language="js"><span class="token keyword">const</span> allTables <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"table"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> table <span class="token keyword">of</span> allTables<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> tBody <span class="token operator">=</span> table<span class="token punctuation">.</span>tBodies<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> rows <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>tBody<span class="token punctuation">.</span>rows<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> headerCells <span class="token operator">=</span> table<span class="token punctuation">.</span>tHead<span class="token punctuation">.</span>rows<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>cells<span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> th <span class="token keyword">of</span> headerCells<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> cellIndex <span class="token operator">=</span> th<span class="token punctuation">.</span>cellIndex<span class="token punctuation">;</span> + + th<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + rows<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">tr1<span class="token punctuation">,</span> tr2</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> tr1Text <span class="token operator">=</span> tr1<span class="token punctuation">.</span>cells<span class="token punctuation">[</span>cellIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>textContent<span class="token punctuation">;</span> + <span class="token keyword">const</span> tr2Text <span class="token operator">=</span> tr2<span class="token punctuation">.</span>cells<span class="token punctuation">[</span>cellIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>textContent<span class="token punctuation">;</span> + <span class="token keyword">return</span> tr1Text<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>tr2Text<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + tBody<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token operator">...</span>rows<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="result_4">Result</h5> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Sorting rows with a click on the th element sample" id="frame_sorting_rows_with_a_click_on_the_th_element" width="100%" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=sorting_rows_with_a_click_on_the_th_element" loading="lazy"></iframe> +</div> +</div> +<h3 id="displaying_large_tables_in_small_spaces">Displaying large tables in small spaces</h3> +<div class="section-content"> +<p>A common issue with tables on the web is that they don't natively work very well on small screens when the amount of content is large, and the way to make them scrollable isn't obvious, especially when the markup may come from a CMS and cannot be modified to have a wrapper.</p> <p>This example provides one way to display tables in small spaces. We've hidden the HTML content as it is very large, and there is nothing remarkable about it. The CSS is more useful to inspect in this example.</p> <p>When looking at these styles you'll notice that table's <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> property has been set to <code>block</code>. While this allows scrolling, the table loses some of its integrity, and table cells try to become as small as possible. To mitigate this issue we've set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space"><code>white-space</code></a> to <code>nowrap</code> on the <code><tbody></code>. However, we don't do this for the <code><thead></code> to avoid long titles forcing columns to be wider than they need to be to display the data.</p> <p>To keep the table headers on the page while scrolling down we've set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position"><code>position</code></a> to sticky on the <code><th></code> elements. Note that we have <strong>not</strong> set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> to <code>collapse</code>, as if we do the header cannot be separated correctly from the rest of the table.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="s30Co5tpcKfokyJYnnMST58XtkB3X/BuPKgCYy5t3FA=" data-language="css"><span class="token selector">table, +th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 240px<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> + <span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">border-spacing</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">tbody</span> <span class="token punctuation">{</span> + <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> + <span class="token property">border-top-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-left-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span> + <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">vertical-align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th:last-child, +td:last-child</span> <span class="token punctuation">{</span> + <span class="token property">border-right-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">tr:last-child td</span> <span class="token punctuation">{</span> + <span class="token property">border-bottom-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Displaying large tables in small spaces sample" id="frame_displaying_large_tables_in_small_spaces" width="100%" height="240" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=displaying_large_tables_in_small_spaces" loading="lazy"></iframe> +</div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> + +<h3 id="captions">Captions</h3> +<div class="section-content"> +<p>By supplying a <a href="caption"><code><caption></code></a> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.</p> <p>This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#adding_a_caption_to_your_table_with_caption">MDN Adding a caption to your table with <caption></a></li> <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/" target="_blank">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> </ul> +</div> +<h3 id="scoping_rows_and_columns">Scoping rows and columns</h3> +<div class="section-content"> +<p>The <a href="th#scope"><code>scope</code></a> attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified to provide necessary information about the cells related to a header.</p> <h4 id="examples_2">Examples</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2Sq+7iq+Zy9x7lNZSQn3XOhjEC2/Cg/dbsIBwcbE7JU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span> + Color names and values + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HEX<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HSLa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>RGBa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Teal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>#51F6F6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>hsl(180 90% 64% / 1)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>rgb(81 246 246 / 1)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Goldenrod<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>#F6BC57<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>hsl(38 90% 65% / 1)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>rgba(246 188 87 / 1)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_6">Result</h5> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Scoping rows and columns sample" id="frame_scoping_rows_and_columns" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/table/runner.html?id=scoping_rows_and_columns" loading="lazy"></iframe> +</div> <p>Providing a declaration of <code>scope="col"</code> on a <a href="th"><code><th></code></a> element will help describe that the cell is at the top of a column. Providing a declaration of <code>scope="row"</code> on a <a href="th"><code><th></code></a> element will help describe that the cell is the first in a row.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/" target="_blank">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/" target="_blank">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html" target="_blank">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> </ul> +</div> +<h3 id="complicated_tables">Complicated tables</h3> +<div class="section-content"> +<p>Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can't be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the <a href="td#colspan"><code>colspan</code></a> and <a href="td#rowspan"><code>rowspan</code></a> attributes.</p> <p>Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the <code>colspan</code> and <code>rowspan</code> attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.</p> <p>If the table cannot be broken apart, use a combination of the <a href="../global_attributes#id"><code>id</code></a> and <a href="td#headers"><code>headers</code></a> attributes to programmatically associate each table cell with the header(s) the cell is associated with.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li> <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/" target="_blank">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html" target="_blank">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> </ul> +</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/tables.html#the-table-element">HTML Standard <br><small># the-table-element</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>table</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">Yes</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> +<tr> +<th><code>align</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">Yes</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> +<tr> +<th><code>bgcolor</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">Yes</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> +<tr> +<th><code>border</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">Yes</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> +<tr> +<th><code>cellpadding</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">Yes</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> +<tr> +<th><code>cellspacing</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">Yes</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> +<tr> +<th><code>frame</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">Yes</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> +<tr> +<th><code>rules</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">Yes</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> +<tr> +<th><code>summary</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">Yes</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> +<tr> +<th><code>width</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">Yes</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> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML data table tutorial</a></li> <li>CSS properties that may be especially useful to style the <code><table></code> element: <ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> to control the width of the table;</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style"><code>border-style</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color"><code>border-color</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width"><code>border-width</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> to control the aspect of cell borders, rules, and frame;</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding"><code>padding</code></a> to style the individual cell content;</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> to define the alignment of text and cell content.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/table" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftbody.html b/devdocs/html/element%2Ftbody.html new file mode 100644 index 00000000..555dfb2d --- /dev/null +++ b/devdocs/html/element%2Ftbody.html @@ -0,0 +1,292 @@ +<header><h1><tbody>: The Table Body element</h1></header><div class="section-content"><p>The <code><tbody></code> <a href="../index">HTML</a> element encapsulates a set of table rows (<a href="tr"><code><tr></code></a> elements), indicating that they comprise the body of the table (<a href="table"><code><table></code></a>).</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/tbody.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The <code><tbody></code> element, along with its related <a href="thead"><code><thead></code></a> and <a href="tfoot"><code><tfoot></code></a> elements, provide useful semantic information that can be used when rendering for either screen or printer.</p> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Zero or more <a href="tr"><code><tr></code></a> elements.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> A <code><tbody></code> element's start tag can be omitted if the first thing inside the <code><tbody></code> element is a <a href="tr"><code><tr></code></a> element, and if the element is not immediately preceded by a <code><tbody></code>, <a href="thead"><code><thead></code></a>, or <a href="tfoot"><code><tfoot></code></a> element whose end tag has been omitted. (It can't be omitted if the element is empty.) A <code><tbody></code> element's end tag can be omitted if the <code><tbody></code> element is immediately followed by a <code><tbody></code> or <a href="tfoot"><code><tfoot></code></a> element, or if there is no more content in the parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Within the required parent <a href="table"><code><table></code></a> element, the <code><tbody></code> element can be added after a <a href="caption"><code><caption></code></a>, <a href="colgroup"><code><colgroup></code></a>, and a <a href="thead"><code><thead></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role">rowgroup</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:</p> <ul> <li> +<code>left</code>, aligning the content to the left of the cell</li> <li> +<code>center</code>, centering the content in the cell</li> <li> +<code>right</code>, aligning the content to the right of the cell</li> <li> +<code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> <li> +<code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>If this attribute is not set, the <code>left</code> value is assumed.</p> <p>As this attribute is deprecated, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property instead.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The equivalent <code>text-align</code> property for the <code>align="char"</code> is not implemented in any browsers yet. See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#browser_compatibility"><code>text-align</code>'s browser compatibility section</a> for the <code><string></code> value.</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The background color of the table. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keywords</a> can also be used.</p> <p>As this attribute is deprecated, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property instead.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (<code>.</code>) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</p> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li> +<code>middle</code>, which will center the text in the cell;</li> <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> </ul> <p>As this attribute is deprecated, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property instead.</p> </dd> </dl></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>If the table includes a <a href="thead"><code><thead></code></a> block (to semantically identify a row of column headers), the <code><tbody></code> block <em>must</em> come after it.</li> <li>If <a href="tr"><code><tr></code></a> elements are specified outside an existing <code><tbody></code> element, as direct children of the <a href="table"><code><table></code></a>, these elements will be encapsulated by a separate <code><tbody></code> element generated by the browser.</li> <li>When printing a document, the <code><thead></code> and <a href="tfoot"><code><tfoot></code></a> elements specify information that may be the same—or at least very similar—on every page of a multipage table, while the <code><tbody></code> element's contents generally will differ from page to page.</li> <li>When a table is presented in a screen context (such as a window) which is not large enough to display the entire table, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may let the user scroll the contents of the <code><thead></code>, <code><tbody></code>, <code><tfoot></code>, and <a href="caption"><code><caption></code></a> blocks separately from one another for the same parent table.</li> <li>You <em>may</em> use more than one <code><tbody></code> per table as long as they are all consecutive. This lets you divide the rows in large tables into sections, each of which may be separately formatted if so desired. If not marked up to be consecutive elements, browsers will correct this author error, ensuring any <code><thead></code> and <code><tfoot></code> elements are rendered as the first and last elements of the table, respectively.</li> </ul></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Below are some examples showing the use of the <code><tbody></code> element. For more examples of this element, see the examples for <a href="table#examples"><code><table></code></a>.</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>In this relatively simple example, we create a table containing information about a group of students with a <a href="thead"><code><thead></code></a> and a <a href="tbody" aria-current="page"><code><tbody></code></a>, with a number of rows in the body.</p> <h4 id="html">HTML</h4> <p>The table's HTML is shown here. Note that all the body cells including information about students are contained within a single <code><tbody></code> element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qFb0zN6juxeSZ2o/sDmYvfb7FbHUv+0lqI4l3lTs988=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Student ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Major<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3741255<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Jones, Martha<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Computer Science<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3971244<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Nim, Victor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Russian Literature<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4100332<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Petrov, Alexandra<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Astrophysics<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <p>The CSS to style our table is shown next.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="hu3OWAcRnwZ3uRnmFFdvxIW6hZqSWORBnD4mGP/1Gf4=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #555<span class="token punctuation">;</span> + <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Lucida Grande"</span><span class="token punctuation">,</span> + <span class="token string">"Helvetica"</span><span class="token punctuation">,</span> + <span class="token string">"Arial"</span><span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>First, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> is used to establish an initial font for the table.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Njc3ARIanP/NEW7S8NEZLhBb1mpHKEqJatFNXT0nizA=" data-language="css"><span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #bbb<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 2px 8px 0<span class="token punctuation">;</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <a href="td"><code><td></code></a> and <a href="th"><code><th></code></a> cells. The cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a></p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="pTll3YqtLNvZflvBqdRZekXMNmjPmrI9ZcSxrc+jqCY=" data-language="css"><span class="token selector">thead > tr > th</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #cce<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> + <span class="token property">border-bottom</span><span class="token punctuation">:</span> 2px solid #999<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Finally, header cells contained within the <a href="thead"><code><thead></code></a> element are given additional styling. They use a darker <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a>, a larger font size, and a thicker, darker bottom border than the other cell borders.</p> <h4 id="result">Result</h4> <p>The resulting table looks like this:</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tbody/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="multiple_bodies">Multiple bodies</h3> +<div class="section-content"> +<p>You can create row groupings within a table by using multiple <code><tbody></code> elements. Each may potentially have its own header row or rows; however, <em>there can be only one <a href="thead"><code><thead></code></a> per table!</em> Because of that, you need to use a <a href="tr"><code><tr></code></a> filled with <a href="th"><code><th></code></a> elements to create headers within each <code><tbody></code>. Let's see how that's done.</p> <p>Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.</p> <h4 id="result_2">Result</h4> <p>First, the resulting table, so you know what we're building:</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Multiple bodies sample" id="frame_multiple_bodies" width="650" height="250" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tbody/runner.html?id=multiple_bodies" loading="lazy"></iframe> +</div> <h4 id="html_2">HTML</h4> <p>The revised HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="zxZQjptYuUSiwymia6bCfo3SO7/IOIBbqyJccBvLYY4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Student ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Computer Science<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3741255<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Jones, Martha<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4077830<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pierce, Benjamin<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5151701<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Kirk, James<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Russian Literature<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3971244<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Nim, Victor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Astrophysics<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4100332<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Petrov, Alexandra<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8892377<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Toyota, Hiroko<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Notice that each major is placed in a separate <code><tbody></code> block, the first row of which contains a single <a href="th"><code><th></code></a> element with a <a href="#colspan"><code>colspan</code></a> attribute that spans the entire width of the table. That heading lists the name of the major contained within the <code><tbody></code>.</p> <p>Then each remaining row in each major's <code><tbody></code> consists of two cells: the first for the student's ID and the second for their name.</p> <h4 id="css_2">CSS</h4> <p>Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <code><tbody></code> (as opposed to those which reside in a <a href="thead"><code><thead></code></a>). This is used for the headers indicating each table section's corresponding major.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="qU/Xb0tdpYOyX1Zq/gc47rXCnzuRxf9bwtwB8PZJ1cU=" data-language="css"><span class="token selector">tbody > tr > th</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #dde<span class="token punctuation">;</span> + <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1.5px solid #bbb<span class="token punctuation">;</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</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/tables.html#the-tbody-element">HTML Standard <br><small># the-tbody-element</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>tbody</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">Yes</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> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>CSS properties and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code><tbody></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pseudo-class to set the alignment on the cells of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to align all cells content on the same character, like '.'.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/tbody" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftd.html b/devdocs/html/element%2Ftd.html new file mode 100644 index 00000000..6a4ea2e3 --- /dev/null +++ b/devdocs/html/element%2Ftd.html @@ -0,0 +1,274 @@ +<header><h1><td>: The Table Data Cell element</h1></header><div class="section-content"><p>The <code><td></code> <a href="../index">HTML</a> element defines a cell of a table that contains data. It participates in the <em>table model</em>.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/td.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="colspan"><a href="#colspan"><code>colspan</code></a></dt> <dd> <p>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</p> </dd> <dt id="headers"><a href="#headers"><code>headers</code></a></dt> <dd> <p>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the <a href="th"><code><th></code></a> elements that apply to this element.</p> </dd> <dt id="rowspan"><a href="#rowspan"><code>rowspan</code></a></dt> <dd> <p>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section (<a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a>, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="abbr"> +<a href="#abbr"><code>abbr</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. Alternatively, you can put the abbreviated description inside the cell and place the long content in the <strong>title</strong> attribute.</p> </div> </dd> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:</p> <ul> <li> +<code>left</code>: The content is aligned to the left of the cell.</li> <li> +<code>center</code>: The content is centered in the cell.</li> <li> +<code>right</code>: The content is aligned to the right of the cell.</li> <li> +<code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li> <li> +<code>char</code> (with text only): The content is aligned to a character inside the <code><th></code> element with minimal offset. This character is defined by the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>The default value when this attribute is not specified is <code>left</code>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the element.</li> <li>To achieve the same effect as the <code>char</code> value, give the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property the same value you would use for the <a href="#char"><code>char</code></a>.</li> </ul> </div> </dd> <dt id="axis"> +<a href="#axis"><code>axis</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to.</p> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the background color of each cell in a column. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keywords</a> can also be used.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift.</p> </dd> <dt id="height"> +<a href="#height"><code>height</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to define a recommended cell height. Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"><code>height</code></a> property instead.</p> </dd> <dt id="scope"> +<a href="#scope"><code>scope</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This enumerated attribute defines the cells that the header (defined in the <a href="th"><code><th></code></a>) element relates to. Only use this attribute with the <code><th></code> element to define the row or column for which it is a header.</p> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>: Positions the text near the bottom of the cell.</li> <li> +<code>middle</code>: Centers the text in the cell.</li> <li>and <code>top</code>: Positions the text near the top of the cell.</li> </ul> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property.</p> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to define a recommended cell width. Use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property instead.</p> </dd> </dl></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="table"><code><table></code></a> for examples on <code><td></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>Sectioning root.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#flow_content">Flow content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory.<br>The end tag may be omitted, if it is immediately followed by a <a href="th"><code><th></code></a> or <a href="td" aria-current="page"><code><td></code></a> element or if there are no more data in its parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="tr"><code><tr></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role">cell</a></code> if a descendant of a <a href="table"><code><table></code></a> element </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</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/tables.html#the-td-element">HTML Standard <br><small># the-td-element</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>td</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">Yes</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> +<tr> +<th><code>abbr</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>axis</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>colspan</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>headers</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rowspan</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scope</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">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">4</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><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/td" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftemplate.html b/devdocs/html/element%2Ftemplate.html new file mode 100644 index 00000000..d851df81 --- /dev/null +++ b/devdocs/html/element%2Ftemplate.html @@ -0,0 +1,179 @@ +<header><h1><template>: The Content Template element</h1></header><div class="section-content"> +<p>The <code><template></code> <a href="../index">HTML</a> element is a mechanism for holding <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.</p> <p>Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <code><template></code> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>The only standard attributes that the <code><template></code> element supports are the <a href="../global_attributes">global attributes</a>.</p> <p>In Chromium-based browsers, the <code><template></code> element also supports a non-standard <a href="https://github.com/mfreed7/declarative-shadow-dom/blob/master/README.md#syntax" target="_blank"><code>shadowrootmode</code> attribute</a>, as part of an experimental <a href="https://developer.chrome.com/articles/declarative-shadow-dom/" target="_blank">"Declarative Shadow DOM"</a> proposal. In supporting browsers, a <code><template></code> element with the <code>shadowrootmode</code> attribute is detected by the HTML parser and immediately applied as the shadow root of its parent element. <code>shadowrootmode</code> can take a value of <code>open</code> or <code>closed</code>; these are equivalent to the <code>open</code> and <code>closed</code> values of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a> <code>mode</code> option.</p> <p>Also, the corresponding <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a> interface includes a standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content"><code>content</code></a> property (without an equivalent content/markup attribute). This <code>content</code> property is read-only and holds a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a> that contains the DOM subtree represented by the template. Be careful when using the <code>content</code> property because the returned <code>DocumentFragment</code> can exhibit unexpected behavior. For more details, see the <a href="#avoiding_documentfragment_pitfalls">Avoiding DocumentFragment pitfalls</a> section below.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>First we start with the HTML portion of the example.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="I8s7uGl9d3MCpGhD4iu/aLbSxzvqaTgHK7jKRNxZOIE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>producttable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>UPC_Code<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Product_Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- existing data could optionally be included here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</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>productrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>record<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +</pre> +</div> <p>First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.</p> <p>Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="fcTyqG2hfSPp31p+5ZaE2RIpOwoBDb569EosXX5oQh0=" data-language="js"><span class="token comment">// Test to see if the browser supports the HTML template element by checking</span> +<span class="token comment">// for the presence of the template element's content attribute.</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">"content"</span> <span class="token keyword">in</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"template"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Instantiate the table with the existing HTML tbody</span> + <span class="token comment">// and the row with the template</span> + <span class="token keyword">const</span> tbody <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"tbody"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> template <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#productrow"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Clone the new row and insert it into the table</span> + <span class="token keyword">const</span> clone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> td <span class="token operator">=</span> clone<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"td"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + td<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"1235646565"</span><span class="token punctuation">;</span> + td<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Stuff"</span><span class="token punctuation">;</span> + + tbody<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>clone<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Clone the new row and insert it into the table</span> + <span class="token keyword">const</span> clone2 <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + td <span class="token operator">=</span> clone2<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"td"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + td<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"0384928528"</span><span class="token punctuation">;</span> + td<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"Acme Kidney Beans 2"</span><span class="token punctuation">;</span> + + tbody<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>clone2<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// Find another way to add the rows to the table because</span> + <span class="token comment">// the HTML template element is not supported.</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The result is the original HTML table, with two new rows appended to it via JavaScript:</p> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="500" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/template/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h2 id="avoiding_documentfragment_pitfalls">Avoiding DocumentFragment pitfalls</h2> +<div class="section-content"> +<p>When a <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a> value is passed, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild"><code>Node.appendChild</code></a> and similar methods move only the <em>child nodes</em> of that value into the target node. Therefore, it is usually preferable to attach event handlers to the children of a <code>DocumentFragment</code>, rather than to the <code>DocumentFragment</code> itself.</p> <p>Consider the following HTML and JavaScript:</p> +</div> +<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="uJr6GnUPUCUNWoTzSM8RJE9yZVY76XSniXQyhjBxK5g=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</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>template<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="C1NNEZsMKRq3qmZWfEeX0g/WzogXFxvvdfrh4TR57Ng=" data-language="js"><span class="token keyword">const</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"container"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> template <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"template"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">clickHandler</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">" — Clicked this div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">const</span> firstClone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +firstClone<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span> +container<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>firstClone<span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> secondClone <span class="token operator">=</span> template<span class="token punctuation">.</span>content<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +secondClone<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> clickHandler<span class="token punctuation">)</span><span class="token punctuation">;</span> +container<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>secondClone<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div></div> +<h3 id="result">Result</h3> +<div class="section-content"> +<p>Since <code>firstClone</code> is a <code>DocumentFragment</code>, only its children are added to <code>container</code> when <code>appendChild</code> is called; the event handlers of <code>firstClone</code> are not copied. In contrast, because an event handler is added to the first <em>child node</em> of <code>secondClone</code>, the event handler is copied when <code>appendChild</code> is called, and clicking on it works as one would expect.</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Avoiding DocumentFragment pitfalls" id="frame_avoiding_documentfragment_pitfall" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/template/runner.html?id=avoiding_documentfragment_pitfall" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#metadata_content">Metadata content</a>, <a href="../content_categories#flow_content">flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#script-supporting_elements">script-supporting element</a> </td> </tr> <tr> <th scope="row">Permitted content</th> <td>No restrictions</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#metadata_content">metadata content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, or <a href="../content_categories#script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a <a href="colgroup"><code><colgroup></code></a> element that does <em>not</em> have a <a href="colgroup#span"><code>span</code></a> attribute. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</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/scripting.html#the-template-element">HTML Standard <br><small># the-template-element</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>template</code></th> +<td class="bc-supports-yes">26</td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">26</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">8</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>shadowrootmode</code></th> +<td class="bc-supports-yes">11190–111</td> +<td class="bc-supports-yes">11190–111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">9776–97</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">11190–111</td> +<td class="bc-supports-yes">11190–111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">64</td> +<td class="bc-supports-yes">16.4</td> +<td class="bc-supports-yes">22.015.0–22.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Web components: <a href="slot"><code><slot></code></a> (and historical: <code><shadow></code>)</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots">Using templates and slots</a></li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scoping">CSS scoping</a> module</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/template" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftextarea.html b/devdocs/html/element%2Ftextarea.html new file mode 100644 index 00000000..9c0e0bf2 --- /dev/null +++ b/devdocs/html/element%2Ftextarea.html @@ -0,0 +1,379 @@ +<header><h1><textarea>: The Textarea element</h1></header><div class="section-content"><p>The <code><textarea></code> <a href="../index">HTML</a> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.</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/textarea.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example demonstrates a number of features of <code><textarea></code>:</p> <ul> <li>An <code>id</code> attribute to allow the <code><textarea></code> to be associated with a <a href="label"><code><label></code></a> element for accessibility purposes</li> <li>A <code>name</code> attribute to set the name of the associated data point submitted to the server when the form is submitted.</li> <li> +<code>rows</code> and <code>cols</code> attributes to allow you to specify an exact size for the <code><textarea></code> to take. Setting these is a good idea for consistency, as browser defaults can differ.</li> <li>Default content entered between the opening and closing tags. <code><textarea></code> does not support the <code>value</code> attribute.</li> </ul> <p>The <code><textarea></code> element also accepts several attributes common to form <code><input></code>s, such as <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, and <code>required</code>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autocomplete"><a href="#autocomplete"><code>autocomplete</code></a></dt> <dd> <p>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:</p> <ul> <li> +<code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> <li> +<code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> </ul> <p>If the <code>autocomplete</code> attribute is not specified on a <code><textarea></code> element, then the browser uses the <code>autocomplete</code> attribute value of the <code><textarea></code> element's form owner. The form owner is either the <a href="form"><code><form></code></a> element that this <code><textarea></code> element is a descendant of or the form element whose <code>id</code> is specified by the <code>form</code> attribute of the input element. For more information, see the <a href="form#autocomplete"><code>autocomplete</code></a> attribute in <a href="form"><code><form></code></a>.</p> </dd> <dt id="autocorrect"> +<a href="#autocorrect"><code>autocorrect</code></a> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>A string which indicates whether to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this <code>textarea</code>. Permitted values are:</p> <dl> <dt id="on"><a href="#on"><code>on</code></a></dt> <dd> <p>Enable automatic spelling correction and text substitutions.</p> </dd> <dt id="off"><a href="#off"><code>off</code></a></dt> <dd> <p>Disable automatic spelling correction and text substitutions.</p> </dd> </dl> </dd> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.</p> </dd> <dt id="cols"><a href="#cols"><code>cols</code></a></dt> <dd> <p>The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <code>20</code>.</p> </dd> <dt id="dirname"><a href="#dirname"><code>dirname</code></a></dt> <dd> <p> This attribute is used to indicate the text directionality of the element contents similar to the <a href="input#dirname"><code>dirname</code></a> attribute of the <code><input></code> element. For more information, see the <a href="../attributes/dirname"><code>dirname</code> attribute</a>. </p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <a href="fieldset"><code><fieldset></code></a>; if there is no containing element when the <code>disabled</code> attribute is set, the control is enabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The form element that the <code><textarea></code> element is associated with (its "form owner"). The value of the attribute must be the <code>id</code> of a form element in the same document. If this attribute is not specified, the <code><textarea></code> element must be a descendant of a form element. This attribute enables you to place <code><textarea></code> elements anywhere within a document, not just as descendants of form elements.</p> </dd> <dt id="maxlength"><a href="#maxlength"><code>maxlength</code></a></dt> <dd> <p>The maximum string length (measured in UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.</p> </dd> <dt id="minlength"><a href="#minlength"><code>minlength</code></a></dt> <dd> <p>The minimum string length (measured in UTF-16 code units) required that the user should enter.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>The name of the control.</p> </dd> <dt id="placeholder"><a href="#placeholder"><code>placeholder</code></a></dt> <dd> <p>A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper <a href="label"><code><label></code></a> element tied to the input. See <a href="input#labels"><code><input></code> labels</a> for a full explanation.</p> </div> </dd> <dt id="readonly"><a href="#readonly"><code>readonly</code></a></dt> <dd> <p>This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the <code>disabled</code> attribute, the <code>readonly</code> attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>This attribute specifies that the user must fill in a value before submitting a form.</p> </dd> <dt id="rows"><a href="#rows"><code>rows</code></a></dt> <dd> <p>The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.</p> </dd> <dt id="spellcheck"><a href="#spellcheck"><code>spellcheck</code></a></dt> <dd> <p>Specifies whether the <code><textarea></code> is subject to spell checking by the underlying browser/OS. The value can be:</p> <ul> <li> +<code>true</code>: Indicates that the element needs to have its spelling and grammar checked.</li> <li> +<code>default</code> : Indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value.</li> <li> +<code>false</code> : Indicates that the element should not be spell checked.</li> </ul> </dd> <dt id="wrap"><a href="#wrap"><code>wrap</code></a></dt> <dd> <p>Indicates how the control should wrap the value for form submission. Possible values are:</p> <ul> <li> +<code>hard</code>: The browser automatically inserts line breaks (CR+LF) so that each line is no longer than the width of the control; the <a href="#cols"><code>cols</code></a> attribute must be specified for this to take effect</li> <li> +<code>soft</code>: The browser ensures that all line breaks in the entered value are a <code>CR+LF</code> pair, but no additional line breaks are added to the value.</li> <li> +<code>off</code> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>: Like <code>soft</code> but changes appearance to <code>white-space: pre</code> so line segments exceeding <code>cols</code> are not wrapped and the <code><textarea></code> becomes horizontally scrollable.</li> </ul> <p>If this attribute is not specified, <code>soft</code> is its default value.</p> </dd> </dl> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p><code><textarea></code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</a> — it has intrinsic dimensions, like a raster image. By default, its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value is <code>inline-block</code>. Compared to other form elements it is relatively easy to style, with its box model, fonts, color scheme, etc. being easily manipulable using regular CSS.</p> <p><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a> provides some useful tips on styling <code><textarea></code>s.</p> +</div> +<h3 id="baseline_inconsistency">Baseline inconsistency</h3> +<div class="section-content"><p>The HTML specification doesn't define where the baseline of a <code><textarea></code> is, so different browsers set it to different positions. For Gecko, the <code><textarea></code> baseline is set on the baseline of the first line of the textarea, on another browser it may be set on the bottom of the <code><textarea></code> box. Don't use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a><code>: baseline</code> on it; the behavior is unpredictable.</p></div> +<h3 id="controlling_whether_a_textarea_is_resizable">Controlling whether a textarea is resizable</h3> +<div class="section-content"> +<p>In most browsers, <code><textarea></code>s are resizable — you'll notice the drag handle in the right-hand corner, which can be used to alter the size of the element on the page. This is controlled by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resize</code></a> CSS property — resizing is enabled by default, but you can explicitly disable it using a <code>resize</code> value of <code>none</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Kb/u3bu1nvpT/O7lKtEIo+bzXU7mcTXkT9lOo9LL1Tc=" data-language="css"><span class="token selector">textarea</span> <span class="token punctuation">{</span> + <span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h3 id="styling_valid_and_invalid_values">Styling valid and invalid values</h3> +<div class="section-content"> +<p>Valid and invalid values of a <code><textarea></code> element (e.g. those within, and outside the bounds set by <code>minlength</code>, <code>maxlength</code>, or <code>required</code>) can be highlighted using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-classes. For example, to give your textarea a different border depending on whether it is valid or invalid:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="N1OulE5MuoghhOvoxHx6yKJIuwQYHshO3FFMuoHpy2U=" data-language="css"><span class="token selector">textarea:invalid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px dashed red<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">textarea:valid</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid lime<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>The following example shows a very simple textarea, with a set numbers of rows and columns and some default content.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3xzEtcGNjkcxT2lYqEWT3Y2E4wDgoJnvVDp2lJx2pgU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Write something here<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="600" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="example_using_minlength_and_maxlength">Example using "minlength" and "maxlength"</h3> +<div class="section-content"> +<p>This example has a minimum and maximum number of characters — of 10 and 20 respectively. Try it and see.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t8iKj8NgWrolFZ7i29EfhPEnrDyIQ/lcPwDjqcLMjSc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +Write something here… +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title='Example using "minlength" and "maxlength" sample' id="frame_example_using_minlength_and_maxlength" width="600" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=example_using_minlength_and_maxlength" loading="lazy"></iframe> +</div> <p>Note that <code>minlength</code> doesn't stop the user from removing characters so that the number entered goes past the minimum, but it does make the value entered into the <code><textarea></code> invalid. Also note that even if you have a <code>minlength</code> value set (3, for example), an empty <code><textarea></code> is still considered valid unless you also have the <code>required</code> attribute set.</p> +</div> +<h3 id="example_using_placeholder">Example using "placeholder"</h3> +<div class="section-content"> +<p>This example has a placeholder set. Notice how it disappears when you start typing into the box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="c8BLjCrmL4EJU3QGFI05qXHW6ARUF3NZsaGZ/Pk11MI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> + <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> + <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comment text.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title='Example using "placeholder" sample' id="frame_example_using_placeholder" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=example_using_placeholder" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Placeholders should only be used to show an example of the type of data that should be entered into a form; they are <em>not</em> a substitute for a proper <a href="label"><code><label></code></a> element tied to the input. See <a href="input#labels"><code><input></code> labels</a> for a full explanation.</p> </div> +</div> +<h3 id="disabled_and_readonly">Disabled and readonly</h3> +<div class="section-content"> +<p>This example shows two <code><textarea></code>s — one of which is <code>disabled</code>, and one of which is <code>readonly</code>. Have a play with both and you'll see the difference in behavior — the <code>disabled</code> element is not selectable in any way (and its value is not submitted), whereas the <code>readonly</code> element is selectable and its contents copyable (and its value is submitted); you just can't edit the contents.</p> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> In browsers other than Firefox, such as chrome, the <code>disabled</code> textarea content may be selectable and copyable.</p> </div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="pPF6CDzabHrLb4EVAO8xnop4FGYhaJHn5zO0Qxsl2Bo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span> +I am a disabled textarea. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textarea<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span><span class="token punctuation">></span></span> +I am a read-only textarea. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Disabled and readonly sample" id="frame_disabled_and_readonly" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/textarea/runner.html?id=disabled_and_readonly" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">Interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, <a href="../content_categories#form_resettable">resettable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_">form-associated</a> element. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>Text</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</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/form-elements.html#the-textarea-element">HTML Standard <br><small># the-textarea-element</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>textarea</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>["Before Firefox 6, when a <code><textarea></code> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <code><textarea></code> elements, which can be disabled using <code>background-image: none</code>.", "Before Firefox 89, manipulating the content of <code><textarea></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>)."]</details></td> +<td class="bc-supports-yes">Yes</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"><details><summary>4</summary>["Before Firefox 6, when a <code><textarea></code> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.", "A default background-image gradient is applied to all <code><textarea></code> elements, which can be disabled using <code>background-image: none</code>.", "Before Firefox 89, manipulating the content of <code><textarea></code> elements using <code>Document.execCommand()</code> commands requires workarounds (see <a href="https://bugzil.la/1220696">bug 1220696</a>)."]</details></td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes"><details><summary>≤3</summary>Unlike other major browsers, a default style of <code>opacity: 0.4</code> is applied to disabled <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">9.1</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">59</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>cols</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> +<tr> +<th><code>dirname</code></th> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">116</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>disabled</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> +<tr> +<th><code>form</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> +<tr> +<th><code>maxlength</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>minlength</code></th> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">27</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>name</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> +<tr> +<th><code>placeholder</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<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> +<tr> +<th><code>required</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">≤37</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">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rows</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> +<tr> +<th><code>spellcheck</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.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">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>wrap</code></th> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤6</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</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">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"> +<p>Other form-related elements:</p> <ul> <li><a href="form"><code><form></code></a></li> <li><a href="button"><code><button></code></a></li> <li><a href="datalist"><code><datalist></code></a></li> <li><a href="legend"><code><legend></code></a></li> <li><a href="label"><code><label></code></a></li> <li><a href="select"><code><select></code></a></li> <li><a href="optgroup"><code><optgroup></code></a></li> <li><a href="option"><code><option></code></a></li> <li><a href="input"><code><input></code></a></li> <li><a href="fieldset"><code><fieldset></code></a></li> <li><a href="output"><code><output></code></a></li> <li><a href="progress"><code><progress></code></a></li> <li><a href="meter"><code><meter></code></a></li> </ul> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/textarea" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftfoot.html b/devdocs/html/element%2Ftfoot.html new file mode 100644 index 00000000..689c1b51 --- /dev/null +++ b/devdocs/html/element%2Ftfoot.html @@ -0,0 +1,160 @@ +<header><h1><tfoot>: The Table Foot element</h1></header><div class="section-content"><p>The <code><tfoot></code> <a href="../index">HTML</a> element defines a set of rows summarizing the columns of the table.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/tfoot.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:</p> <ul> <li> +<code>left</code>, aligning the content to the left of the cell</li> <li> +<code>center</code>, centering the content in the cell</li> <li> +<code>right</code>, aligning the content to the right of the cell</li> <li> +<code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> <li> +<code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>If this attribute is not set, the <code>left</code> value is assumed.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong></p> <ul> <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property on it.</li> <li>To achieve the same effect as the <code>char</code> value, in CSS, you can use the value of the <a href="#char"><code>char</code></a> as the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property.</li> </ul> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The background color of the table. It is a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keywords</a> can also be used.</p> <p>To achieve a similar effect, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the alignment of the content in a column to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</p> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the vertical alignment of the text within each row of cells of the table footer. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li> +<code>middle</code>, which will center the text in the cell;</li> <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property on it.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>Please see the <a href="table"><code><table></code></a> page for examples on <code><tfoot></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Zero or more <a href="tr"><code><tr></code></a> elements.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory. The end tag may be omitted if there is no more content in the parent <a href="table"><code><table></code></a> element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="table"><code><table></code></a> element. The <a href="tfoot" aria-current="page"><code><tfoot></code></a> must appear after any <a href="caption"><code><caption></code></a>, <a href="colgroup"><code><colgroup></code></a>, <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, or <a href="tr"><code><tr></code></a> element. Note that this is the requirement in HTML.<br>Originally, in HTML4, the opposite was true: the <a href="tfoot" aria-current="page"><code><tfoot></code></a> element could not be placed after any <a href="tbody"><code><tbody></code></a> or <a href="tr"><code><tr></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role">rowgroup</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</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/tables.html#the-tfoot-element">HTML Standard <br><small># the-tfoot-element</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>tfoot</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">Yes</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> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>Other table-related HTML Elements: <a href="caption"><code><caption></code></a>, <a href="col"><code><col></code></a>, <a href="colgroup"><code><colgroup></code></a>, <a href="table"><code><table></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="td"><code><td></code></a>, <a href="th"><code><th></code></a>, <a href="thead"><code><thead></code></a>, <a href="tr"><code><tr></code></a>;</li> <li>CSS properties and pseudo-classes that may be specially useful to style the <code><tfoot></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pseudo-class to set the alignment on the cells of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to align all cells content on the same character, like '.'.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/tfoot" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot</a> + </p> +</div> diff --git a/devdocs/html/element%2Fth.html b/devdocs/html/element%2Fth.html new file mode 100644 index 00000000..4ddbde10 --- /dev/null +++ b/devdocs/html/element%2Fth.html @@ -0,0 +1,277 @@ +<header><h1><th>: The Table Header element</h1></header><div class="section-content"><p>The <code><th></code> <a href="../index">HTML</a> element defines a cell as the header of a group of table cells. The exact nature of this group is defined by the <a href="#scope"><code>scope</code></a> and <a href="#headers"><code>headers</code></a> attributes.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/th.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="abbr"><a href="#abbr"><code>abbr</code></a></dt> <dd> <p>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.</p> </dd> <dt id="colspan"><a href="#colspan"><code>colspan</code></a></dt> <dd> <p>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</p> </dd> <dt id="headers"><a href="#headers"><code>headers</code></a></dt> <dd> <p>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the <a href="th" aria-current="page"><code><th></code></a> elements that apply to this element.</p> </dd> <dt id="rowspan"><a href="#rowspan"><code>rowspan</code></a></dt> <dd> <p>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section (<a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a>, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</p> </dd> <dt id="scope"><a href="#scope"><code>scope</code></a></dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute defines the cells that the header (defined in the <a href="th" aria-current="page"><code><th></code></a>) element relates to. It may have the following values:</p> <ul> <li> +<code>row</code>: The header relates to all cells of the row it belongs to.</li> <li> +<code>col</code>: The header relates to all cells of the column it belongs to.</li> <li> +<code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells.</li> <li> +<code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li> </ul> <p>If the <code>scope</code> attribute is not specified, or its value is not <code>row</code>, <code>col</code>, or <code>rowgroup</code>, or <code>colgroup</code>, then browsers automatically select the set of cells to which the header cell applies.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:</p> <ul> <li> +<code>left</code>: The content is aligned to the left of the cell.</li> <li> +<code>center</code>: The content is centered in the cell.</li> <li> +<code>right</code>: The content is aligned to the right of the cell.</li> <li> +<code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li> <li> +<code>char</code> (with text only): The content is aligned to a character inside the <code><th></code> element with minimal offset. This character is defined by the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>The default value when this attribute is not specified is <code>left</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard.</p> <ul> <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the element.</li> <li>To achieve the same effect as the <code>char</code> value, give the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property the same value you would use for the <a href="#char"><code>char</code></a>.</li> </ul> </div> </dd> <dt id="axis"> +<a href="#axis"><code>axis</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the <a href="#scope"><code>scope</code></a> attribute instead.</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB" target="_blank">sRGB</a> and is prefixed by '#'.</p> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property.</p> </div> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard.</p> </div> </dd> <dt id="height"> +<a href="#height"><code>height</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to define a recommended cell height.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height"><code>height</code></a> property instead.</p> </div> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>: Positions the text near the bottom of the cell.</li> <li> +<code>middle</code>: Centers the text in the cell.</li> <li>and <code>top</code>: Positions the text near the top of the cell.</li> </ul> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property instead.</p> </div> </dd> <dt id="width"> +<a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to define a recommended cell width. Additional space can be added with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/cellSpacing"><code>cellspacing</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/cellPadding"><code>cellpadding</code></a> properties and the width of the <a href="col"><code><col></code></a> element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width"><code>width</code></a> property instead.</p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="table"><code><table></code></a> for examples on <code><th></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#flow_content">Flow content</a>, but with no header, footer, sectioning content, or heading content descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory.<br>The end tag may be omitted, if it is immediately followed by a <a href="th" aria-current="page"><code><th></code></a> or <a href="td"><code><td></code></a> element or if there are no more data in its parent element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td>A <a href="tr"><code><tr></code></a> element.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role"><code>columnheader</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role"><code>rowheader</code></a> +</td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</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/tables.html#the-th-element">HTML Standard <br><small># the-th-element</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>th</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">Yes</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> +<tr> +<th><code>abbr</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>axis</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>colspan</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>headers</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rowspan</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>scope</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</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">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">4</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>Other table-related HTML Elements: <a href="caption"><code><caption></code></a>, <a href="col"><code><col></code></a>, <a href="colgroup"><code><colgroup></code></a>, <a href="table"><code><table></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="td"><code><td></code></a>, <a href="tfoot"><code><tfoot></code></a>, <a href="thead"><code><thead></code></a>, <a href="tr"><code><tr></code></a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/th" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th</a> + </p> +</div> diff --git a/devdocs/html/element%2Fthead.html b/devdocs/html/element%2Fthead.html new file mode 100644 index 00000000..2c4ce7d3 --- /dev/null +++ b/devdocs/html/element%2Fthead.html @@ -0,0 +1,159 @@ +<header><h1><thead>: The Table Head element</h1></header><div class="section-content"><p>The <code><thead></code> <a href="../index">HTML</a> element defines a set of rows defining the head of the columns of the table.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/thead.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:</p> <ul> <li> +<code>left</code>, aligning the content to the left of the cell</li> <li> +<code>center</code>, centering the content in the cell</li> <li> +<code>right</code>, aligning the content to the right of the cell</li> <li> +<code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> <li> +<code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> attributes.</li> </ul> <p>If this attribute is not set, the <code>left</code> value is assumed.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Do not use this attribute as it is obsolete (not supported) in the latest standard.</p> <ul> <li>To align values, use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property instead.</li> </ul> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute defines the background color of each column cell. It accepts a 6-digit hexadecimal color or a named color. Alpha transparency is not supported.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not use this attribute, as it is non-standard. The <code>thead</code> element should be styled using the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a> property, which can be applied to any element, including the <code>thead</code>, <a href="tr"><code><tr></code></a>, <a href="td"><code><td></code></a> and <a href="th"><code><th></code></a> elements.</p> </div> </dd> <dt id="char"> +<a href="#char"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete (and not supported) in the latest standard.</p> </div> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete (and not supported) in the latest standard.</p> </div> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:</p> <ul> <li> +<code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29" target="_blank">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> <li> +<code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> <li> +<code>middle</code>, which will center the text in the cell;</li> <li> +<code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> </ul> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property on it.</p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="table"><code><table></code></a> for examples on <code><thead></code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Zero or more <a href="tr"><code><tr></code></a> elements.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> The start tag is mandatory. The end tag may be omitted if the <a href="thead" aria-current="page"><code><thead></code></a> element is immediately followed by a <a href="tbody"><code><tbody></code></a> or <a href="tfoot"><code><tfoot></code></a> element. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="table"><code><table></code></a> element. The <a href="thead" aria-current="page"><code><thead></code></a> must appear after any <a href="caption"><code><caption></code></a> or <a href="colgroup"><code><colgroup></code></a> element, even implicitly defined, but before any <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a> and <a href="tr"><code><tr></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role">rowgroup</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</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/tables.html#the-thead-element">HTML Standard <br><small># the-thead-element</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>thead</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">Yes</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes"><details><summary>1</summary>Backgrounds applied to <code><thead></code> elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the <code>background-attachment</code> CSS property to <code>fixed</code>.</details></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"><details><summary>1</summary>Backgrounds applied to <code><thead></code> elements will be applied to each table cell, rather than the entire header. To mimic the behavior of other browsers, set the <code>background-attachment</code> CSS property to <code>fixed</code>.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</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>Other table-related HTML Elements: <a href="caption"><code><caption></code></a>, <a href="col"><code><col></code></a>, <a href="colgroup"><code><colgroup></code></a>, <a href="table"><code><table></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="td"><code><td></code></a>, <a href="tfoot"><code><tfoot></code></a>, <a href="th"><code><th></code></a>, <a href="tr"><code><tr></code></a>;</li> <li>CSS properties and pseudo-classes that may be specially useful to style the <code><thead></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pseudo-class to set the alignment on the cells of the column;</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to align all cells content on the same character, like '.'.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/thead" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftime.html b/devdocs/html/element%2Ftime.html new file mode 100644 index 00000000..abf90bea --- /dev/null +++ b/devdocs/html/element%2Ftime.html @@ -0,0 +1,117 @@ +<header><h1><time>: The (Date) Time element</h1></header><div class="section-content"> +<p>The <code><time></code> <a href="../index">HTML</a> element represents a specific period in time. It may include the <code>datetime</code> attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.</p> <p>It may represent one of the following:</p> <ul> <li>A time on a 24-hour clock.</li> <li>A precise date in the <a href="https://en.wikipedia.org/wiki/Gregorian_calendar" target="_blank">Gregorian calendar</a> (with optional time and timezone information).</li> <li> +<a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-duration-string" target="_blank">A valid time duration</a>.</li> </ul> +</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/time.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="datetime"><a href="#datetime"><code>datetime</code></a></dt> <dd> <p>This attribute indicates the time and/or date of the element and must be in one of the formats described below.</p> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>This element is for presenting dates and times in a machine-readable format. For example, this can help a user agent offer to add an event to a user's calendar.</p> <p>This element should not be used for dates prior to the introduction of the Gregorian calendar (due to complications in calculating those dates).</p> <p>The <em>datetime value</em> (the machine-readable value of the datetime) is the value of the element's <code>datetime</code> attribute, which must be in the proper format (see below). If the element does not have a <code>datetime</code> attribute, <strong>it must not have any element descendants</strong>, and the <em>datetime value</em> is the element's child text content.</p> +</div> +<h3 id="valid_datetime_values">Valid datetime values</h3> +<div class="section-content"><dl> <dt id="a_valid_year_string"><a href="#a_valid_year_string">a valid year string</a></dt> <dd> <p><code>2011</code></p> </dd> <dt id="a_valid_month_string"><a href="#a_valid_month_string">a valid month string</a></dt> <dd> <p><code>2011-11</code></p> </dd> <dt id="a_valid_date_string"><a href="#a_valid_date_string">a valid date string</a></dt> <dd> <p><code>2011-11-18</code></p> </dd> <dt id="a_valid_yearless_date_string"><a href="#a_valid_yearless_date_string">a valid yearless date string</a></dt> <dd> <p><code>11-18</code></p> </dd> <dt id="a_valid_week_string"><a href="#a_valid_week_string">a valid week string</a></dt> <dd> <p><code>2011-W47</code></p> </dd> <dt id="a_valid_time_string"><a href="#a_valid_time_string">a valid time string</a></dt> <dd> <p><code>14:54</code></p> <p><code>14:54:39</code></p> <p><code>14:54:39.929</code></p> </dd> <dt id="a_valid_local_date_and_time_string"><a href="#a_valid_local_date_and_time_string">a valid local date and time string</a></dt> <dd> <p><code>2011-11-18T14:54:39.929</code></p> <p><code>2011-11-18 14:54:39.929</code></p> </dd> <dt id="a_valid_global_date_and_time_string"><a href="#a_valid_global_date_and_time_string">a valid global date and time string</a></dt> <dd> <p><code>2011-11-18T14:54:39.929Z</code></p> <p><code>2011-11-18T14:54:39.929-0400</code></p> <p><code>2011-11-18T14:54:39.929-04:00</code></p> <p><code>2011-11-18 14:54:39.929Z</code></p> <p><code>2011-11-18 14:54:39.929-0400</code></p> <p><code>2011-11-18 14:54:39.929-04:00</code></p> </dd> <dt id="a_valid_duration_string"><a href="#a_valid_duration_string">a valid duration string</a></dt> <dd> <p><code>PT4H18M3S</code></p> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_example">Simple example</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9A96bUiO8BFgtvVlGZYBr+e/tr6MRVBzNdiSOEW5d50=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The concert starts at <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2018-07-07T20:00:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>20:00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="250" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/time/runner.html?id=simple_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="datetime_example"> +<code>datetime</code> example</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="QmL9RorcB8np3iKDnCUh89LHS2dfPF/ns89Y50Le1GE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The concert took place on <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2001-05-15T19:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 15<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="datetime example sample" id="frame_datetime_example" width="250" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/time/runner.html?id=datetime_example" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">time</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTimeElement"><code>HTMLTimeElement</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/text-level-semantics.html#the-time-element">HTML Standard <br><small># the-time-element</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>time</code></th> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4911.5–12</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-yes">4611.5–12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">8.0</td> +</tr> +<tr> +<th><code>datetime</code></th> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">4911.5–12</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">62</td> +<td class="bc-supports-yes">22</td> +<td class="bc-supports-yes">4611.5–12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">8.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The <a href="data"><code><data></code></a> element, allowing to signal other kind of values.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/time" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftitle.html b/devdocs/html/element%2Ftitle.html new file mode 100644 index 00000000..76d7bf4c --- /dev/null +++ b/devdocs/html/element%2Ftitle.html @@ -0,0 +1,94 @@ +<header><h1><title>: The Document Title element</h1></header><div class="section-content"> +<p>The <code><title></code> <a href="../index">HTML</a> element defines the document's title that is shown in a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browser">browser</a>'s title bar or a page's tab. It only contains text; tags within the element are ignored.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="edRg81zzSeEMPE8aOW5jVNIFmQrub1mPG/jF2XRIgJc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Grandma's Heavy Metal Festival Journal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> +</pre> +</div> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> +<a href="../content_categories#metadata_content">Metadata content</a>.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>Text that is not inter-element <a href="https://developer.mozilla.org/en-US/docs/Glossary/Whitespace">whitespace</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> Both opening and closing tags are required. Note that leaving off <code></title></code> should cause the browser to ignore the rest of the page. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> A <a href="head"><code><head></code></a> element that contains no other <a href="title" aria-current="page"><code><title></code></a> element. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted.</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTitleElement"><code>HTMLTitleElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><p>The <code><title></code> element is always used within a page's <a href="head"><code><head></code></a> block.</p></div> +<h3 id="page_titles_and_seo">Page titles and SEO</h3> +<div class="section-content"> +<p>The contents of a page title can have significant implications for search engine optimization (<a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO">SEO</a>). In general, a longer, descriptive title performs better than short or generic titles. The content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search results. Also, the title is the initial "hook" by which you grab the attention of readers glancing at the search results page.</p> <p>A few guidelines and tips for composing good titles:</p> <ul> <li>Avoid one- or two-word titles. Use a descriptive phrase, or a term-definition pairing for glossary or reference-style pages.</li> <li>Search engines typically display about the first 55–60 characters of a page title. Text beyond that may be lost, so try not to have titles longer than that. If you must use a longer title, make sure the important parts come earlier and that nothing critical is in the part of the title that is likely to be dropped.</li> <li>Don't use "keyword blobs." If your title is just a list of words, algorithms often reduce your page's position in the search results.</li> <li>Try to make sure your titles are as unique as possible within your own site. Duplicate—or near-duplicate—titles can contribute to inaccurate search results.</li> </ul> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XI/Y/25/eRguLF4UTRF+Tk0Z3niGh6Fl5659F6//J2s=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Awesome interesting stuff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This example establishes a page whose title (as displayed at the top of the window or in the window's tab) as "Awesome interesting stuff".</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>It is important to provide an accurate and concise title to describe the page's purpose.</p> <p>A common navigation technique for users of assistive technology is to read the page title and infer the content the page contains. This is because navigating into a page to determine its content can be a time-consuming and potentially confusing process. Titles should be unique to every page of a website, ideally surfacing the primary purpose of the page first, followed by the name of the website. Following this pattern will help ensure that the primary purpose of the page is announced by a screen reader first. This provides a far better experience than having to listen to the name of a website before the unique page title, for every page a user navigates to in the same website.</p> +</div> +<h3 id="examples_2">Examples</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Tg7WXTeW2+DNcrDL1awdgLAOR5H0h//QSIH0tfBOZpU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Menu - Blue House Chinese Food - FoodYum: Online takeout today!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If a form submission contains errors and the submission re-renders the current page, the title can be used to help make users aware of any errors with their submission. For instance, update the page <code>title</code> value to reflect significant page state changes (such as form validation problems).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4ojY91Z2/aT2aLQDSY1Azjnxii2Ey8JaJykUF74pDpA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span> + 2 errors - Your order - Sea Food Store - Food: Online takeout today! +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Presently, dynamically updating a page's title will not be automatically announced by screen readers. If you are going to update the page title to reflect significant changes to a page's state, then the use of <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">ARIA Live Regions</a> may be necessary, as well.</p> </div> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%E2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html" target="_blank">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1</a></li> </ul> +</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/semantics.html#the-title-element">HTML Standard <br><small># the-title-element</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>title</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">1</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">4</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>SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title"><code><title></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/title" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftr.html b/devdocs/html/element%2Ftr.html new file mode 100644 index 00000000..b11d6657 --- /dev/null +++ b/devdocs/html/element%2Ftr.html @@ -0,0 +1,400 @@ +<header><h1><tr>: The Table Row element</h1></header><div class="section-content"><p>The <code><tr></code> <a href="../index">HTML</a> element defines a row of cells in a table. The row's cells can then be established using a mix of <a href="td"><code><td></code></a> (data cell) and <a href="th"><code><th></code></a> (header cell) elements.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-taller-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/tr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>To provide additional control over how cells fit into (or span across) columns, both <code><th></code> and <code><td></code> support the <a href="td#colspan"><code>colspan</code></a> attribute, which lets you specify how many columns wide the cell should be, with the default being 1. Similarly, you can use the <a href="td#rowspan"><code>rowspan</code></a> attribute on cells to indicate they should span more than one table row.</p> <p>This can take a little practice to get right when building your tables. We have some <a href="#examples">examples</a> below, but for more examples and an in-depth tutorial, see the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tables</a> series in our <a href="https://developer.mozilla.org/en-US/docs/Learn">Learn web development</a> area, where you'll learn how to use the table elements and their attributes to get just the right layout and formatting for your tabular data.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element includes the <a href="../global_attributes">global attributes</a>. There are also several <a href="#deprecated_attributes">deprecated attributes</a>, which you should avoid but may need to know when reading older code.</p></div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"> +<p>The following attributes may still be implemented in browsers but are no longer part of the HTML specification and may be missing or may not work as expected. They should be avoided.</p> <dl> <dt id="align"> +<a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using <code>align</code> on every cell in the row individually. Possible values are:</p> <dl> <dt id="left"><a href="#left"><code>left</code></a></dt> <dd> <p>Align the content of each cell at its left edge.</p> </dd> <dt id="center"><a href="#center"><code>center</code></a></dt> <dd> <p>Center the contents of each cell between their left and right edges.</p> </dd> <dt id="right"><a href="#right"><code>right</code></a></dt> <dd> <p>Align the content of each cell at its right edge.</p> </dd> <dt id="justify"><a href="#justify"><code>justify</code></a></dt> <dd> <p>Widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification).</p> </dd> <dt id="char"><a href="#char"><code>char</code></a></dt> <dd> <p>Align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). This uses the <a href="#char"><code>char</code></a> and <a href="#charoff"><code>charoff</code></a> to establish the alignment character (typically "." or "," when aligning numerical data) and the number of characters that should follow the alignment character. This alignment type was never widely supported.</p> </dd> </dl> <p>If no value is expressly set for <code>align</code>, the parent node's value is inherited.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Instead of using the obsolete <code>align</code> attribute, you should instead use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to establish <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code> alignment for the row's cells. To apply character-based alignment, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the alignment character (such as <code>"."</code> or <code>","</code>).</p> </div> </dd> <dt id="bgcolor"> +<a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string specifying a color to apply to the backgrounds of each of the row's cells. This can be either a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb">hexadecimal <code>#RRGGBB</code> or <code>#RGB</code> value</a> or a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color">color keyword</a>. Omitting the attribute or setting it to <code>null</code> in JavaScript causes the row's cells to inherit the row's parent element's background color.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The <a href="tr" aria-current="page"><code><tr></code></a> element should be styled using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>. To give a similar effect as the <code>bgcolor</code> attribute, use the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> </div> </dd> <dt id="char_2"> +<a href="#char_2"><code>char</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string that sets the character to align the cells in each row's columns (each row's centering that uses the same character gets aligned with others using the same character. Typical values for this include a period (<code>"."</code>) or comma (<code>","</code>) when attempting to align numbers or monetary values. If <a href="#align"><code>align</code></a> is not set to <code>char</code>, this attribute is ignored.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is obsolete and rarely implemented anyway. To achieve the same effect as the <a href="#char"><code>char</code></a> attribute, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property to the same string you would specify for the <code>char</code> property, such as <code>text-align: "."</code>.</p> </div> </dd> <dt id="charoff"> +<a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string indicating the number of characters on the tail end of the column's data should be displayed after the alignment character specified by the <code>char</code> attribute. For example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is divided into 100 cents), you would typically specify a value of 2, so that in tandem with <code>char</code> being set to <code>"."</code>, the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> This attribute is obsolete, and was never widely supported anyway.</p> </div> </dd> <dt id="valign"> +<a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>A string specifying the vertical alignment of the text within each cell in the row. Possible values for this attribute are:</p> <dl> <dt id="baseline"><a href="#baseline"><code>baseline</code></a></dt> <dd> <p>Aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font sizes by aligning the characters along the <a href="https://en.wikipedia.org/wiki/Baseline" target="_blank">baseline</a> of the font(s) used in the row. If all the characters in the row are the same size, the effect is the same as <code>bottom</code>.</p> </dd> <dt id="bottom"> +<a href="#bottom"><code>bottom</code></a>,</dt> <dd> <p>Draws the text in each of the row's cells as closely as possible to the bottom edge of those cells.</p> </dd> <dt id="middle"><a href="#middle"><code>middle</code></a></dt> <dd> <p>Each cell's text is vertically centered.</p> </dd> <dt id="top"><a href="#top"><code>top</code></a></dt> <dd> <p>Each cell's text is drawn as closely as possible to the top edge of the containing cell.</p> </dd> </dl> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Don't use the obsolete <code>valign</code> attribute. Instead, add the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> property to the row.</p> </div> </dd> </dl> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>See <a href="table"><code><table></code></a> for examples on <code><tr></code>.</p></div> +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>This simple example shows a table listing people's names along with various information about membership in a club or service.</p> <h4 id="html">HTML</h4> <p>This HTML demonstrates the most basic structure of a table. There are no groups, no cells that span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity.</p> <p>There are just four rows (including one header row), each with four columns (including one header column). Not even the table section elements are used; instead, the browser is allowed to determine this automatically. We'll add <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, and <a href="tfoot"><code><tfoot></code></a> in the next example.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3Afj7r6qGe5iU8/P6Eq3Jwo5st8FPk+I8FsGLl7Lqv0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Member Since<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <p>This simple CSS just adds a solid black border around the table and around each of its cells, including those specified using both <a href="th"><code><th></code></a> and <a href="td"><code><td></code></a>. That way, both header and data cells are easily demarcated.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="IITeMLg5/z2gSdD+rFXdUWDdIw9IMkSEL4A5cuMtLnU=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="500" height="125" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="row_and_column_spanning">Row and column spanning</h3> +<div class="section-content"> +<p>Now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "Membership Dates". This involves adding both row and column spans to the table, so that the heading cells can wind up in the right places.</p> <h4 id="result_2">Result</h4> <p>Let's actually look at the output first this time:</p> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Row and column spanning sample" id="frame_row_and_column_spanning" width="500" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=row_and_column_spanning" loading="lazy"></iframe> +</div> <p>Notice how the heading area here is actually two rows, one with "Name", "ID", "Membership Dates", and "Balance" headings, and the other with "Joined" and "Canceled", which are subheadings below "Membership Dates". This is accomplished by:</p> <ul> <li>Having the first row's "Name", "ID", and "Balance" heading cells span two rows using the <a href="#rowspan"><code>rowspan</code></a> attribute, making them each two rows tall.</li> <li>Having the first row's "Membership Dates" heading cell span two columns using the <a href="#colspan"><code>colspan</code></a> attribute, which causes this heading actually to be two columns wide.</li> <li>Having a second row of <a href="th"><code><th></code></a> elements that contains only the "Joined" and "Canceled" headings. Because the other columns are already occupied by first-row cells that span into the second row, these wind up correctly positioned under the "Membership Dates" heading.</li> </ul> <h4 id="html_2">HTML</h4> <p>The HTML is similar to the previous example's, except for the addition of the new column in each data row, and the changes to the header. Those changes make the HTML look like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="0prajK1yjn7B4ErKfVL7Gh/WRPHCxhcLiwM1BEO/QIo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Membership Dates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Joined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Canceled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 8, 2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of <code>rowspan</code> on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of <code>colspan</code> to make the "Membership Dates" header cell span across two columns.</p> <p>The CSS is unchanged from before.</p> +</div> +<h3 id="explicitly_specifying_table_content_groups">Explicitly specifying table content groups</h3> +<div class="section-content"> +<p>Before really getting into styling this table, let's take a moment to add row and column groups to help make our CSS easier.</p> <h4 id="html_3">HTML</h4> <p>The HTML is where the action is here, and the action is pretty simple.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JB/lSbWn11ZcgvTfGmeNOEmxy37V4ocGPtljCFOqgmw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Membership Dates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Balance<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Joined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Canceled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Margaret Nguyen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>427311<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2010-06-03<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>June 3, 2010<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>0.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Edvard Galinski<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>533175<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2011-01-13<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 13, 2011<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-04-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 8, 2017<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>37.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hoshi Nakamura<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>601942<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2012-07-23<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>July 23, 2012<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>n/a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>15.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. Note the use of <code>rowspan</code> on to make the "Name", "ID", and "Balance" headers occupy two rows instead of just one, and the use of <code>colspan</code> to make the "Membership Dates" header cell span across two columns.</p> <p>Once again, we haven't touched the CSS.</p> <h4 id="result_3">Result</h4> <p>The output is entirely unchanged, despite the addition of useful contextual information under the hood:</p> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Explicitly specifying table content groups sample" id="frame_explicitly_specifying_table_content_groups" width="500" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=explicitly_specifying_table_content_groups" loading="lazy"></iframe> +</div> +</div> +<h3 id="basic_styling">Basic styling</h3> +<div class="section-content"> +<p>As is the case with all parts of a table, you can change the appearance of a table row and its contents using CSS. Any styles applied to the <code><tr></code> element will affect the cells within the row unless overridden by styles applied to those cells.</p> <p>Let's apply a basic style to the table to adjust the typeface being used, and add a background color to the header row.</p> <h4 id="result_4">Result</h4> <p>Again, let's take a look at the result first.</p> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Basic styling sample" id="frame_basic_styling" width="500" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=basic_styling" loading="lazy"></iframe> +</div> <h4 id="css_2">CSS</h4> <p>This time, the HTML is unchanged, so let's dive right into the CSS.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="r0fq3NeaOFsHU/r5HWkpia2cJ7f46aV1sFK71XFyc4o=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Helvetica<span class="token punctuation">,</span> + Arial<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 240<span class="token punctuation">,</span> 245<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 4px 6px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>While we add a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font"><code>font</code></a> property to the <a href="table"><code><table></code></a> element here to set a more visually-appealing typeface (or an abominable sans-serif typeface, depending on your personal opinion), the interesting part is the second style here, where we style <code><tr></code> elements located within the <a href="thead"><code><thead></code></a> so they have a light blue background color. This is a way to quickly apply a background color to all the cells in the heading area at once.</p> <p>This does <em>not</em> affect the style of the <a href="th"><code><th></code></a> elements in the first column, though, where we treat the member names as a row heading.</p> +</div> +<h3 id="advanced_styling">Advanced styling</h3> +<div class="section-content"> +<p>Now we'll go all-out, with styles on rows in the header and body areas both, including alternating row colors, cells with different colors depending on position within a row, and so forth.</p> <h4 id="result_5">Result</h4> <p>Here's what the final table will look like:</p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Advanced styling sample" id="frame_advanced_styling" width="500" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tr/runner.html?id=advanced_styling" loading="lazy"></iframe> +</div> <p>There is no change to the HTML again. See what proper preparation of your HTML can do for you?</p> <h4 id="css_3">CSS</h4> <p>The CSS is much more involved this time. It's not complicated, but there's a lot going on. Let's break it down.</p> <h5 id="the_table_and_base_styles">The table and base styles</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="uGpF3ajLVpDbkn0b95KAjEqbl1qDYixsMTiHWFOcF/w=" data-language="css"><span class="token selector">table</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> + 16px <span class="token string">"Open Sans"</span><span class="token punctuation">,</span> + Helvetica<span class="token punctuation">,</span> + Arial<span class="token punctuation">,</span> + sans-serif<span class="token punctuation">;</span> + <span class="token property">border-spacing</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here we've added the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="b6qgK3xcRPap10B90qpXf9Rh6N0Epvt4Hnq7wKZS+5M=" data-language="css"><span class="token selector">th, +td</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 4px 6px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">th</span> <span class="token punctuation">{</span> + <span class="token property">vertical-align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>And here are the default styles for all table cells. Now let's customize!</p> <h5 id="the_top_header_overall">The top header: overall</h5> <p>We're going to look at the top header in two pieces. First, the overall styling of the header:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="XY/fBaruetVRhoVJT4fG2dSdfwiDcKGSjNDc3egIeZo=" data-language="css"><span class="token selector">thead > tr</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>228<span class="token punctuation">,</span> 240<span class="token punctuation">,</span> 245<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr:nth-of-type(2)</span> <span class="token punctuation">{</span> + <span class="token property">border-bottom</span><span class="token punctuation">:</span> 2px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This sets the background color of all <code><tr></code> elements in the table's heading (as specified using <a href="thead"><code><thead></code></a>). Then we set the bottom border of the top header to be a two-pixel wide line. Notice, however, that we're using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type"><code>:nth-of-type</code></a> selector to apply <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> to the <em>second</em> row in the heading. Why? Because the heading is made of two rows that are spanned by some of the cells. That means there are actually two rows there; applying the style to the first row would not give us the expected result.</p> <h5 id="the_joined_and_canceled_headers">The "Joined" and "Canceled" headers</h5> <p>Let's style these two header cells with green and red hues to represent the "good" of a new member and the "bummer" of a canceled membership.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="duELoMZ+xYnZXHAIugE2a3DUVujMu2TUnsMVayv9uRQ=" data-language="css"><span class="token selector">thead > tr:last-of-type > th:nth-of-type(1)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>225<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 225<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">thead > tr:last-of-type > th:nth-of-type(2)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 225<span class="token punctuation">,</span> 225<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here we dig into the last row of the table's header block and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue.</p> <h5 id="color_every_body_other_row_differently">Color every body other row differently</h5> <p>It's common to help improve readability of table data by alternating row colors. Let's add a bit of color to every even row:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="gt58vDxeuAKnbn9plpG/8JLJWtDV+KOr0vhH4j1KcFk=" data-language="css"><span class="token selector">tbody > tr:nth-of-type(even)</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>237<span class="token punctuation">,</span> 238<span class="token punctuation">,</span> 242<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="give_the_left-side_header_some_style">Give the left-side header some style</h5> <p>Since we want the first column to stand out as well, we'll add some custom styling here, too.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="Vc2Hl/9EWVeYHdAc1CwGdvpUJGKbq7t92Jff6wMPl5Q=" data-language="css"><span class="token selector">tbody > tr > th:first-of-type</span> <span class="token punctuation">{</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>225<span class="token punctuation">,</span> 229<span class="token punctuation">,</span> 244<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This styles the first header cell in each row of the table's body with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> to left-justify the member names, and with a somewhat different background color.</p> <h5 id="justify_the_balances">Justify the balances</h5> <p>Finally, since it's standard practice to right-justify currency values in tables, let's do that here.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="iORYTGQpDKN79fQc13AlDkMMfA3jAIjxmyLaTKnZIEU=" data-language="css"><span class="token selector">tbody > tr > td:last-of-type</span> <span class="token punctuation">{</span> + <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This just sets the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align"><code>text-align</code></a> property for the last <a href="td"><code><td></code></a> in each body row to <code>"right"</code>.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None</td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="td"><code><td></code></a> and/or <a href="th"><code><th></code></a> elements; <a href="https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element">script-supporting elements</a> (<a href="script"><code><script></code></a> and <a href="template"><code><template></code></a>) are also allowed </td> </tr> <tr> <th scope="row">Tag omission</th> <td> Start tag is mandatory. End tag may be omitted if the <a href="tr" aria-current="page"><code><tr></code></a> element is immediately followed by a <a href="tr" aria-current="page"><code><tr></code></a> element, or if the row is the last element in its parent table group (<a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a> or <a href="tfoot"><code><tfoot></code></a>) element </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> <a href="table"><code><table></code></a> (only if the table has no child <a href="tbody"><code><tbody></code></a> element, and even then only after any <a href="caption"><code><caption></code></a>, <a href="colgroup"><code><colgroup></code></a>, and <a href="thead"><code><thead></code></a> elements); otherwise, the parent must be <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a> or <a href="tfoot"><code><tfoot></code></a> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role">row</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</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/tables.html#the-tr-element">HTML Standard <br><small># the-tr-element</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>tr</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">Yes</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> +<tr> +<th><code>align</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>bgcolor</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">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">4</td> +<td class="bc-supports-yes">≤14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>char</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>charoff</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>valign</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</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="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Learning area: HTML tables</a>: An introduction to using tables, including <code><tr></code>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a>: the interface on which <code><tr></code> is based.</li> <li>Other table-related elements: <ul> <li> +<a href="table"><code><table></code></a>, <a href="thead"><code><thead></code></a>, <a href="tbody"><code><tbody></code></a>, <a href="tfoot"><code><tfoot></code></a>, <a href="td"><code><td></code></a>, <a href="th"><code><th></code></a>, <a href="caption"><code><caption></code></a>, <a href="col"><code><col></code></a>, and <a href="colgroup"><code><colgroup></code></a> +</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/tr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftrack.html b/devdocs/html/element%2Ftrack.html new file mode 100644 index 00000000..4063ab96 --- /dev/null +++ b/devdocs/html/element%2Ftrack.html @@ -0,0 +1,182 @@ +<header><h1><track>: The Embed Text Track element</h1></header><div class="section-content"><p>The <code><track></code> <a href="../index">HTML</a> element is used as a child of the media elements, <a href="audio"><code><audio></code></a> and <a href="video"><code><video></code></a>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT format</a> (<code>.vtt</code> files) — Web Video Text Tracks.</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/track.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td> As it is a void element, the start tag must be present and the end tag must not be present. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> <p> A media element, <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a>. </p> </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="default"><a href="#default"><code>default</code></a></dt> <dd> <p>This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one <code>track</code> element per media element.</p> </dd> <dt id="kind"><a href="#kind"><code>kind</code></a></dt> <dd> <p>How the text track is meant to be used. If omitted the default kind is <code>subtitles</code>. If the attribute contains an invalid value, it will use <code>metadata</code> (Versions of Chrome earlier than 52 treated an invalid value as <code>subtitles</code>). The following keywords are allowed:</p> <ul> <li> +<code>subtitles</code> <ul> <li>Subtitles provide translation of content that cannot be understood by the viewer. For example speech or text that is not English in an English language film.</li> <li>Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.</li> </ul> </li> <li> +<code>captions</code> <ul> <li>Closed captions provide a transcription and possibly a translation of audio.</li> <li>It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).</li> <li>Suitable for users who are deaf or when the sound is muted.</li> </ul> </li> <li> +<code>descriptions</code> <ul> <li>Textual description of the video content.</li> <li>Suitable for users who are blind or where the video cannot be seen.</li> </ul> </li> <li> +<code>chapters</code> <ul> <li>Chapter titles are intended to be used when the user is navigating the media resource.</li> </ul> </li> <li> +<code>metadata</code> <ul> <li>Tracks used by scripts. Not visible to the user.</li> </ul> </li> </ul> </dd> <dt id="label"><a href="#label"><code>label</code></a></dt> <dd> <p>A user-readable title of the text track which is used by the browser when listing available text tracks.</p> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>Address of the track (<code>.vtt</code> file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> parent element of the <code>track</code> element has a <a href="../attributes/crossorigin"><code>crossorigin</code></a> attribute.</p> </dd> <dt id="srclang"><a href="#srclang"><code>srclang</code></a></dt> <dd> <p>Language of the track text data. It must be a valid <a href="https://r12a.github.io/app-subtags/" target="_blank">BCP 47</a> language tag. If the <code>kind</code> attribute is set to <code>subtitles</code>, then <code>srclang</code> must be defined.</p> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="track_data_types">Track data types</h3> +<div class="section-content"> +<p>The type of data that <code>track</code> adds to the media is set in the <code>kind</code> attribute, which can take values of <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> or <code>metadata</code>. The element points to a source file containing timed text that the browser exposes when the user requests additional data.</p> <p>A media element cannot have more than one <code>track</code> with the same <code>kind</code>, <code>srclang</code>, and <code>label</code>.</p> +</div> +<h3 id="detecting_cue_changes">Detecting cue changes</h3> +<div class="section-content"> +<p>The underlying <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrack"><code>TextTrack</code></a>, indicated by the <a class="page-not-created"><code>track</code></a> property, receives a <code>cuechange</code> event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.</p> <p>If the track <em>is</em> associated with a media element, using the <a href="track" aria-current="page"><code><track></code></a> element as a child of the <a href="audio"><code><audio></code></a> or <a href="video"><code><video></code></a> element, the <code>cuechange</code> event is also sent to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a>.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="67EKowfAlq7TgNHfEdB8agM11XlfU8ZhSWymmTwPLKs=" data-language="js"><span class="token keyword">let</span> textTrackElem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"texttrack"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +textTrackElem<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"cuechange"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">let</span> cues <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>track<span class="token punctuation">.</span>activeCues<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bKQXYBuqH7YaVmBlgHrYOrXmYVHrlUhDCPQIWXo0ykg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span> <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/images/sample.gif<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sample.mp4<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>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sample.ogv<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>video/ogv<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>captions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleCaptions.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>descriptions<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleDescriptions.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chapters<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleChapters.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleSubtitles_de.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleSubtitles_en.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleSubtitles_ja.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ja<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>subtitles<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sampleSubtitles_oz.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oz<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>metadata<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyStage1.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Key Stage 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>metadata<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyStage2.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Key Stage 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>track</span> <span class="token attr-name">kind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>metadata<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyStage3.vtt<span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Key Stage 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token comment"><!-- Fallback --></span> + … +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</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/media.html#the-track-element">HTML Standard <br><small># the-track-element</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>track</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Doesn't work for fullscreen video.</details></td> +<td class="bc-supports-yes"><details><summary>25</summary>Doesn't work for fullscreen video.</details></td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>1.5</summary>Doesn't work for fullscreen video.</details></td> +</tr> +<tr> +<th><code>default</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>kind</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>label</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>src</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>srclang</code></th> +<td class="bc-supports-yes">23</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT text track format</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/track" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track</a> + </p> +</div> diff --git a/devdocs/html/element%2Ftt.html b/devdocs/html/element%2Ftt.html new file mode 100644 index 00000000..268ffe9e --- /dev/null +++ b/devdocs/html/element%2Ftt.html @@ -0,0 +1,106 @@ +<header><h1><tt>: The Teletype Text element</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> <p>The <code><tt></code> <a href="../index">HTML</a> element creates inline text which is presented using the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.</p> <p>The terms <strong>non-proportional</strong>, <strong>monotype</strong>, and <strong>monospace</strong> are used interchangeably and have the same general meaning: they describe a typeface whose characters are all the same number of pixels wide.</p> <p>This element is obsolete, however. You should use the more semantically helpful <a href="code"><code><code></code></a>, <a href="kbd"><code><kbd></code></a>, <a href="samp"><code><samp></code></a>, or <a href="var"><code><var></code></a> elements for inline text that needs to be presented in monospace type, or the <a href="pre"><code><pre></code></a> tag for content that should be presented as a separate block.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> If none of the semantic elements are appropriate for your use case (for example, if you need to show some content in a non-proportional font), you should consider using the <a href="span"><code><span></code></a> element, styling it as desired using CSS. The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> property is a good place to start.</p> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a></p></div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>This example uses <code><tt></code> to show text entered into, and output by, a terminal application.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SkOBCEMA/Pl5YLzCZfhZpLwNeBgY+a6f+9wfcJkafM4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Enter the following at the telnet command prompt: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>set localecho<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + + The telnet client should display: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tt</span><span class="token punctuation">></span></span>Local Echo is on<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tt</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tt/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="overriding_the_default_font">Overriding the default font</h3> +<div class="section-content"> +<p>You can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using CSS:</p> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="A4r8jLJpokBOYbHBlvFZi1RqVieAqeAPH8cmKZa/npU=" data-language="css"><span class="token selector">tt</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lucida Console"</span><span class="token punctuation">,</span> <span class="token string">"Menlo"</span><span class="token punctuation">,</span> <span class="token string">"Monaco"</span><span class="token punctuation">,</span> <span class="token string">"Courier"</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SkOBCEMA/Pl5YLzCZfhZpLwNeBgY+a6f+9wfcJkafM4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Enter the following at the telnet command prompt: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>set localecho<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + + The telnet client should display: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tt</span><span class="token punctuation">></span></span>Local Echo is on<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tt</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Overriding the default font sample" id="frame_overriding_the_default_font" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/tt/runner.html?id=overriding_the_default_font" loading="lazy"></iframe> +</div> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>The <code><tt></code> element is, by default, rendered using the browser's default non-proportional font. You can override this using CSS by creating a rule using the <code>tt</code> selector, as seen in the example <a href="#overriding_the_default_font">Overriding the default font</a> above.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> User-configured changes to the default monospace font setting may take precedence over your CSS.</p> </div> <p>Although this element wasn't officially deprecated in HTML 4.01, its use was discouraged in favor of the semantic elements and/or CSS. The <code><tt></code> element is obsolete in HTML 5.</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> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/obsolete.html#tt">HTML Standard <br><small># tt</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>tt</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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"><details><summary>4</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</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>The semantic <a href="code"><code><code></code></a>, <a href="var"><code><var></code></a>, <a href="kbd"><code><kbd></code></a>, and <a href="samp"><code><samp></code></a> elements</li> <li>The <a href="pre"><code><pre></code></a> element for displaying preformatted text blocks</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/tt" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt</a> + </p> +</div> diff --git a/devdocs/html/element%2Fu.html b/devdocs/html/element%2Fu.html new file mode 100644 index 00000000..d7114445 --- /dev/null +++ b/devdocs/html/element%2Fu.html @@ -0,0 +1,145 @@ +<header><h1><u>: The Unarticulated Annotation (Underline) element</h1></header><div class="section-content"> +<p>The <code><u></code> <a href="../index">HTML</a> element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> This element used to be called the "Underline" element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>underline</code>.</p> </div> +</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/u.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>See the <a href="#usage_notes">Usage notes</a> section for further details on when it's appropriate to use <code><u></code> and when it isn't.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Along with other pure styling elements, the original HTML Underline (<code><u></code>) element was deprecated in HTML 4; however, <code><u></code> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code><u></code> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.</p> </div> +</div> +<h3 id="use_cases">Use cases</h3> +<div class="section-content"> +<p>Valid use cases for the <code><u></code> element include annotating spelling errors, applying a <a href="https://en.wikipedia.org/wiki/Proper_name_mark" target="_blank">proper name mark</a> to denote proper names in Chinese text, and other forms of annotation.</p> <p>You should <em>not</em> use <code><u></code> to underline text for presentation purposes, or to denote titles of books.</p> +</div> +<h3 id="other_elements_to_consider_using">Other elements to consider using</h3> +<div class="section-content"> +<p>In most cases, you should use an element other than <code><u></code>, such as:</p> <ul> <li> +<a href="em"><code><em></code></a> to denote stress emphasis</li> <li> +<a href="b"><code><b></code></a> to draw attention to text</li> <li> +<a href="mark"><code><mark></code></a> to mark key words or phrases</li> <li> +<a href="strong"><code><strong></code></a> to indicate that text has strong importance</li> <li> +<a href="cite"><code><cite></code></a> to mark the titles of books or other publications</li> <li> +<a href="i"><code><i></code></a> to denote technical terms, transliterations, thoughts, or names of vessels in Western texts</li> </ul> <p>To provide textual annotations (as opposed to the non-textual annotations created with <code><u></code>), use the <a href="ruby"><code><ruby></code></a> element.</p> <p>To apply an underlined appearance without any semantic meaning, use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property's value <code>underline</code>.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="indicating_a_spelling_error">Indicating a spelling error</h3> +<div class="section-content"> +<p>This example uses the <code><u></code> element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JYfqiR5W3qppbN5ulAJs3FVGHbMT9jxksTSiMceyVEE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>This paragraph includes a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>u</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>spelling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>wrnogly<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>u</span><span class="token punctuation">></span></span> spelled word.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>In the HTML, we see the use of <code><u></code> with a class, <code>spelling</code>, which is used to indicate the misspelling of the word "wrongly".</p> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="dKcteSUJM1HU1FcZqhqAJkYjKSuMX+gr9Jt3bHTSWHI=" data-language="css"><span class="token selector">u.spelling</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> red wavy underline<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>This CSS indicates that when the <code><u></code> element is styled with the class <code>spelling</code>, it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using <code>red dashed underline</code>.</p> <h4 id="result">Result</h4> <p>The result should be familiar to anyone who has used any of the more popular word processors available today.</p> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Indicating a spelling error sample" id="frame_indicating_a_spelling_error" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=indicating_a_spelling_error" loading="lazy"></iframe> +</div> +</div> +<h3 id="avoiding_u">Avoiding <u></h3> +<div class="section-content"> +<p>Most of the time, you actually don't want to use <code><u></code>. Here are some examples that show what you should do instead in several cases.</p> <h4 id="non-semantic_underlines">Non-semantic underlines</h4> <p>To underline text without implying any semantic meaning, use a <a href="span"><code><span></code></a> element with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property set to <code>"underline"</code>, as shown below.</p> <h5 id="html_2">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="9XcB15mQ8LktEFzDTS/pHleaGVi1POMKlUzF95qnK38=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Today's Special<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> +Chicken Noodle Soup With Carrots +</pre> +</div> <h5 id="css_2">CSS</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="lhjHvumCvagO0Wocf88gqstu9IJJa8ICORUDDKkqpbs=" data-language="css"><span class="token selector">.underline</span> <span class="token punctuation">{</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="result_2">Result</h5> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Non-semantic underlines sample" id="frame_non-semantic_underlines" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=non-semantic_underlines" loading="lazy"></iframe> +</div> <h4 id="presenting_a_book_title">Presenting a book title</h4> <p>Book titles should be presented using the <a href="cite"><code><cite></code></a> element instead of <code><u></code> or even <code><i></code>.</p> <h5 id="using_the_cite_element">Using the cite element</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Using the cite element sample" id="frame_using_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=using_the_cite_element" loading="lazy"></iframe> +</div> <h5 id="styling_the_cite_element">Styling the cite element</h5> <p>The default styling for the <code><cite></code> element renders the text in italics. You can override that using CSS:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="IvAbWaSpyzx2PfuOIlRUZE586Uu0qCCEghIgmYP9un4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The class read <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>Moby Dick<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span> in the first term.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="KOazMaZHLmsqODOwqfdrIpKB0RsMGpSDYiXqA8AAy3Q=" data-language="css"><span class="token selector">cite</span> <span class="token punctuation">{</span> + <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> + <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Styling the cite element sample" id="frame_styling_the_cite_element" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/u/runner.html?id=styling_the_cite_element" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role">generic</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-u-element">HTML Standard <br><small># the-u-element</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>u</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="span"><code><span></code></a>, <a href="i"><code><i></code></a>, <a href="em"><code><em></code></a>, <a href="b"><code><b></code></a>, and <a href="cite"><code><cite></code></a> elements should usually be used instead.</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> property should be used for non-semantic underlining.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/u" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u</a> + </p> +</div> diff --git a/devdocs/html/element%2Ful.html b/devdocs/html/element%2Ful.html new file mode 100644 index 00000000..b1817f46 --- /dev/null +++ b/devdocs/html/element%2Ful.html @@ -0,0 +1,179 @@ +<header><h1><ul>: The Unordered List element</h1></header><div class="section-content"><p>The <code><ul></code> <a href="../index">HTML</a> element represents an unordered list of items, typically rendered as a bulleted list.</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/ul.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="compact"> +<a href="#compact"><code>compact</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>, and it doesn't work in all browsers.</p> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Do not use this attribute, as it has been deprecated: use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> instead. To give a similar effect as the <code>compact</code> attribute, the CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> can be used with a value of <code>80%</code>.</p> </div> </dd> <dt id="type"> +<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:</p> <ul> <li><code>circle</code></li> <li><code>disc</code></li> <li><code>square</code></li> </ul> <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle</code>.</p> <p>If not present and if no <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> Do not use this attribute, as it has been deprecated; use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property instead.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"><ul> <li>The <code><ul></code> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> property.</li> <li>The <code><ul></code> and <a href="ol"><code><ol></code></a> elements may be nested as deeply as desired. Moreover, the nested lists may alternate between <code><ol></code> and <code><ul></code> without restriction.</li> <li>The <a href="ol"><code><ol></code></a> and <code><ul></code> elements both represent a list of items. They differ in that, with the <a href="ol"><code><ol></code></a> element, the order is meaningful. To determine which one to use, try changing the order of the list items; if the meaning is changed, the <a href="ol"><code><ol></code></a> element should be used, otherwise you can use <code><ul></code>.</li> </ul></div> +<h2 id="examples">Examples</h2> + +<h3 id="simple_example">Simple example</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="n7kxjao4feyxWliQCMdrMcy8RxCttlQhOI9lg8Od7fc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="400" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=simple_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="nesting_a_list">Nesting a list</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Ef2xrtueYGdwFrkYsNih7qpMDxieHEhLc8zNyPC6pKU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + second item + <span class="token comment"><!-- Look, the closing </li> tag is not placed here! --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + second item second subitem + <span class="token comment"><!-- Same for the second nested unordered list! --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem first sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem second sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem third sub-subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Closing </li> tag for the li that + contains the third unordered list --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Here is the closing </li> tag --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Nesting a list sample" id="frame_nesting_a_list" width="400" height="340" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=nesting_a_list" loading="lazy"></iframe> +</div> +</div> +<h3 id="ordered_list_inside_unordered_list">Ordered list inside unordered list</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="y5o6lzTwRMBraQs976S7Wkpb7WHu4FJ2B/4onFdPcc4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>first item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + second item + <span class="token comment"><!-- Look, the closing </li> tag is not placed here! --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item first subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item second subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>second item third subitem<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- Here is the closing </li> tag --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>third item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Ordered list inside unordered list sample" id="frame_ordered_list_inside_unordered_list" width="400" height="190" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/ul/runner.html?id=ordered_list_inside_unordered_list" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, and if the <code><ul></code> element's children include at least one <a href="li"><code><li></code></a> element, <a href="../content_categories#palpable_content">palpable content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="li"><code><li></code></a>, <a href="script"><code><script></code></a> and <a href="template"><code><template></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#flow_content">flow content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/list_role">list</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/directory_role"><code>directory</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role"><code>group</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role"><code>menubar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/none_role"><code>none</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role"><code>presentation</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role"><code>radiogroup</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role"><code>tablist</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role"><code>toolbar</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role"><code>tree</code></a> </td> </tr> <tr> <th scope="row">DOM Interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</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/grouping-content.html#the-ul-element">HTML Standard <br><small># the-ul-element</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>ul</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>compact</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">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</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">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>type</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>Other list-related HTML Elements: <a href="ol"><code><ol></code></a>, <a href="li"><code><li></code></a>, <a href="menu"><code><menu></code></a> +</li> <li>CSS properties that may be specially useful to style the <code><ul></code> element: <ul> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style"><code>list-style</code></a> property, to choose the way the ordinal displays.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters">CSS counters</a>, to handle complex nested lists.</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"><code>line-height</code></a> property, to simulate the deprecated <a href="#compact"><code>compact</code></a> attribute.</li> <li>the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a> property, to control the list indentation.</li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/ul" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul</a> + </p> +</div> diff --git a/devdocs/html/element%2Fvar.html b/devdocs/html/element%2Fvar.html new file mode 100644 index 00000000..c1c01bbd --- /dev/null +++ b/devdocs/html/element%2Fvar.html @@ -0,0 +1,115 @@ +<header><h1><var>: The Variable element</h1></header><div class="section-content"><p>The <code><var></code> <a href="../index">HTML</a> element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.</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/var.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="related_elements">Related elements</h3> +<div class="section-content"> +<p>Other elements that are used in contexts in which <code><var></code> is commonly used include:</p> <ul> <li> +<a href="code"><code><code></code></a>: The HTML Code element</li> <li> +<a href="kbd"><code><kbd></code></a>: The HTML Keyboard input element</li> <li> +<a href="samp"><code><samp></code></a>: The HTML Sample Output element</li> </ul> <p>If you encounter code that is mistakenly using <code><var></code> for style purposes rather than semantic purposes, you should either use a <a href="span"><code><span></code></a> with appropriate CSS or, an appropriate semantic element among the following:</p> <ul> <li><a href="em"><code><em></code></a></li> <li><a href="i"><code><i></code></a></li> <li><a href="q"><code><q></code></a></li> </ul> +</div> +<h3 id="default_style">Default style</h3> +<div class="section-content"> +<p>Most browsers apply <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style"><code>font-style</code></a> to <code>"italic"</code> when rendering <code><var></code>. This can be overridden in CSS, like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="ooDCnAfPzSn74y40bqmjyc49gE3Ng9SrzwFS01bQorU=" data-language="css"><span class="token selector">var</span> <span class="token punctuation">{</span> + <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_example">Basic example</h3> +<div class="section-content"> +<p>Here's a simple example, using <code><var></code> to denote variable names in a mathematical equation.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SPY8TiR6LQslieJgDUA+lAn/aZlX4aH+zNwIAY20Nic=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>A simple equation: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>x<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> = <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> + 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Basic example sample" id="frame_basic_example" width="650" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/var/runner.html?id=basic_example" loading="lazy"></iframe> +</div> +</div> +<h3 id="overriding_the_default_style">Overriding the default style</h3> +<div class="section-content"> +<p>Using CSS, you can override the default style for the <code><var></code> element. In this example, variable names are rendered using bold Courier if it's available, otherwise it falls back to the default monospace font.</p> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="eMzwureY2MmO3vFSVx7d6aZJFB1YB0AdLWORvivgdd8=" data-language="css"><span class="token selector">var</span> <span class="token punctuation">{</span> + <span class="token property">font</span><span class="token punctuation">:</span> + bold 15px <span class="token string">"Courier"</span><span class="token punctuation">,</span> + <span class="token string">"Courier New"</span><span class="token punctuation">,</span> + monospace<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="RedQ7E9Z7ECjbf9ggcbiAUSJKZSFMtKTwq+CdNFjSAs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + The variables <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>minSpeed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>var</span><span class="token punctuation">></span></span>maxSpeed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>var</span><span class="token punctuation">></span></span> control the minimum + and maximum speed of the apparatus in revolutions per minute (RPM). +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This HTML uses <code><var></code> to enclose the names of two variables.</p> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Overriding the default style sample" id="frame_overriding_the_default_style" width="650" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/var/runner.html?id=overriding_the_default_style" loading="lazy"></iframe> +</div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> +<a href="../content_categories#phrasing_content">Phrasing content</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-var-element">HTML Standard <br><small># the-var-element</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>var</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/var" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var</a> + </p> +</div> diff --git a/devdocs/html/element%2Fvideo.html b/devdocs/html/element%2Fvideo.html new file mode 100644 index 00000000..4acc9a75 --- /dev/null +++ b/devdocs/html/element%2Fvideo.html @@ -0,0 +1,369 @@ +<header><h1><video>: The Video Embed element</h1></header><div class="section-content"><p>The <code><video></code> <a href="../index">HTML</a> element embeds a media player which supports video playback into the document. You can use <code><video></code> for audio content as well, but the <a href="audio"><code><audio></code></a> element may provide a more appropriate user experience.</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/video.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example shows simple usage of the <code><video></code> element. In a similar manner to the <a href="img"><code><img></code></a> element, we include a path to the media we want to display inside the <code>src</code> attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.</p> <p>The content inside the opening and closing <code><video></video></code> tags is shown as a fallback in browsers that don't support the element.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>Like all other HTML elements, this element supports the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autoplay"><a href="#autoplay"><code>autoplay</code></a></dt> <dd> <p>A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a> for additional information about how to properly use autoplay.</p> </div> <p>To disable video autoplay, <code>autoplay="false"</code> will not work; the video will autoplay if the attribute is there in the <code><video></code> tag at all. To remove autoplay, the attribute needs to be removed altogether.</p> <p>In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no <code>muted</code> attribute is present.</p> </dd> <dt id="controls"><a href="#controls"><code>controls</code></a></dt> <dd> <p>If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.</p> </dd> <dt id="controlslist"> +<a href="#controlslist"><code>controlslist</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr><abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr> +</dt> <dd> <p>The <a href="https://wicg.github.io/controls-list/explainer.html" target="_blank"><code>controlslist</code></a> attribute, when specified, helps the browser select what controls to show for the <code>video</code> element whenever the browser shows its own set of controls (that is, when the <code>controls</code> attribute is specified).</p> <p>The allowed values are <code>nodownload</code>, <code>nofullscreen</code> and <code>noremoteplayback</code>.</p> <p>Use the <a href="#disablepictureinpicture"><code>disablepictureinpicture</code></a> attribute if you want to disable the Picture-In-Picture mode (and the control).</p> </dd> <dt id="crossorigin"><a href="#crossorigin"><code>crossorigin</code></a></dt> <dd> <p>This <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicates whether to use CORS to fetch the related video. <a href="../cors_enabled_image">CORS-enabled resources</a> can be reused in the <a href="canvas"><code><canvas></code></a> element without being <em>tainted</em>. The allowed values are:</p> <dl> <dt id="anonymous"><a href="#anonymous"><code>anonymous</code></a></dt> <dd> <p>Sends a cross-origin request without a credential. In other words, it sends the <code>Origin:</code> HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the resource will be <em>tainted</em>, and its usage restricted.</p> </dd> <dt id="use-credentials"><a href="#use-credentials"><code>use-credentials</code></a></dt> <dd> <p>Sends a cross-origin request with a credential. In other words, it sends the <code>Origin:</code> HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the resource will be <em>tainted</em> and its usage restricted.</p> </dd> </dl> <p>When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted use in <a href="canvas"><code><canvas></code></a> elements. If invalid, it is handled as if the enumerated keyword <code>anonymous</code> was used. See <a href="../attributes/crossorigin">CORS settings attributes</a> for additional information.</p> </dd> <dt id="disablepictureinpicture"> +<a href="#disablepictureinpicture"><code>disablepictureinpicture</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.</p> </dd> <dt id="disableremoteplayback"> +<a href="#disableremoteplayback"><code>disableremoteplayback</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.).</p> <p>In Safari, you can use <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html" target="_blank"><code>x-webkit-airplay="deny"</code></a> as a fallback.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>The height of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes" target="_blank">no percentages</a>).</p> </dd> <dt id="loop"><a href="#loop"><code>loop</code></a></dt> <dd> <p>A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.</p> </dd> <dt id="muted"><a href="#muted"><code>muted</code></a></dt> <dd> <p>A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is <code>false</code>, meaning that the audio will be played when the video is played.</p> </dd> <dt id="playsinline"><a href="#playsinline"><code>playsinline</code></a></dt> <dd> <p>A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute <em>does not</em> imply that the video will always be played in fullscreen.</p> </dd> <dt id="poster"><a href="#poster"><code>poster</code></a></dt> <dd> <p>A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.</p> </dd> <dt id="preload"><a href="#preload"><code>preload</code></a></dt> <dd> <p>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. It may have one of the following values:</p> <ul> <li> +<code>none</code>: Indicates that the video should not be preloaded.</li> <li> +<code>metadata</code>: Indicates that only video metadata (e.g. length) is fetched.</li> <li> +<code>auto</code>: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.</li> <li> +<em>empty string</em>: Synonym of the <code>auto</code> value.</li> </ul> <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the video for playback.</li> <li>The specification does not force the browser to follow the value of this attribute; it is a mere hint.</li> </ul> </div> </dd> <dt id="src"><a href="#src"><code>src</code></a></dt> <dd> <p>The URL of the video to embed. This is optional; you may instead use the <a href="source"><code><source></code></a> element within the video block to specify the video to embed.</p> </dd> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>The width of the video's display area, in <a href="https://drafts.csswg.org/css-values/#px" target="_blank">CSS pixels</a> (absolute values only; <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes" target="_blank">no percentages</a>).</p> </dd> </dl> +</div> +<h2 id="events">Events</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="no-markdown"> <thead> <tr> <th scope="col">Event Name</th> <th scope="col">Fired When</th> </tr> </thead> <tbody> <tr> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event"><code>audioprocess</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</td> <td> The input buffer of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode"><code>ScriptProcessorNode</code></a> is ready to be processed. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event"><code>canplay</code></a></td> <td> The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event"><code>canplaythrough</code></a></td> <td> The browser estimates it can play the media up to its end without stopping for content buffering. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event"><code>complete</code></a></td> <td> The rendering of an <a href="https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext"><code>OfflineAudioContext</code></a> is terminated. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event"><code>durationchange</code></a></td> <td>The <code>duration</code> attribute has been updated.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event"><code>emptied</code></a></td> <td> The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> method is called to reload it. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event"><code>ended</code></a></td> <td>Playback has stopped because the end of the media was reached.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event"><code>error</code></a></td> <td> An error occurred while fetching the media data, or the type of the resource is not a supported media format. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event"><code>loadeddata</code></a></td> <td>The first frame of the media has finished loading.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event"><code>loadedmetadata</code></a></td> <td>The metadata has been loaded.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event"><code>loadstart</code></a></td> <td>Fired when the browser has started to load the resource.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event"><code>pause</code></a></td> <td>Playback has been paused.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event"><code>play</code></a></td> <td>Playback has begun.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event"><code>playing </code></a></td> <td> Playback is ready to start after having been paused or delayed due to lack of data. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event"><code>progress</code></a></td> <td>Fired periodically as the browser loads a resource.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event"><code>ratechange</code></a></td> <td>The playback rate has changed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event"><code>seeked</code></a></td> <td>A <em>seek</em> operation completed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event"><code>seeking</code></a></td> <td>A <em>seek</em> operation began.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event"><code>stalled</code></a></td> <td> The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event"><code>suspend</code></a></td> <td>Media data loading has been suspended.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event"><code>timeupdate</code></a></td> <td> The time indicated by the <code>currentTime</code> attribute has been updated. </td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event"><code>volumechange</code></a></td> <td>The volume has changed.</td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event"><code>waiting</code></a></td> <td>Playback has stopped because of a temporary lack of data.</td> </tr> </tbody> </table></div></figure></div> +<h2 id="usage_notes">Usage notes</h2> +<div class="section-content"> +<p>Browsers don't all support the same video formats; you can provide multiple sources inside nested <a href="source"><code><source></code></a> elements, and the browser will then use the first one it understands.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="mCju5VvpFFVY1pIvMFUv4y82OMWccxnVrQNPUHbLNAI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myVideo.webm<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>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myVideo.mp4<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>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Your browser doesn't support HTML video. Here is a + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myVideo.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>link to the video<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> instead. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</div> <p>We offer a substantive and thorough <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">guide to media file types</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">guide to the codecs supported for video</a>. Also available is a guide to <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs that can be used with them</a>.</p> <p>Other usage notes:</p> <ul> <li>If you don't specify the <code>controls</code> attribute, the video won't include the browser's default controls; you can create your own custom controls using JavaScript and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> API. See <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a> for more details.</li> <li>To allow precise control over your video (and audio) content, <code>HTMLMediaElement</code>s fire many different <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events">events</a>. In addition to providing controllability, these events let you monitor the progress of both download and playback of the media, as well as the playback state and position.</li> <li>You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> property to adjust the positioning of the video within the element's frame, and the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> property to control how the video's size is adjusted to fit within the frame.</li> <li>To show subtitles/captions along with your video, you can use some JavaScript along with the <a href="track"><code><track></code></a> element and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> format. See <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML video</a> for more information.</li> <li>You can play audio files using a <code><video></code> element. This can be useful if, for example, you need to perform audio with a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT</a> transcript, since the <a href="audio"><code><audio></code></a> element doesn't allow captions using WebVTT.</li> <li>To test the fallback content on browsers that support the element, you can replace <code><video></code> with a non-existing element like <code><notavideo></code>.</li> </ul> <p>A good general source of information on using HTML <code><video></code> is the <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p> +</div> +<h3 id="styling_with_css">Styling with CSS</h3> +<div class="section-content"> +<p>The <code><video></code> element is a replaced element — its <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> value is <code>inline</code> by default, but its default width and height in the viewport is defined by the video being embedded.</p> <p>There are no special considerations for styling <code><video></code>; a common strategy is to give it a <code>display</code> value of <code>block</code> to make it easier to position, size, etc., and then provide styling and layout information as required. <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques.</p> +</div> +<h3 id="detecting_track_addition_and_removal">Detecting track addition and removal</h3> +<div class="section-content"> +<p>You can detect when tracks are added to and removed from a <code><video></code> element using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event"><code>addtrack</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event"><code>removetrack</code></a> events. However, these events aren't sent directly to the <code><video></code> element itself. Instead, they're sent to the track list object within the <code><video></code> element's <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> that corresponds to the type of track that was added to the element:</p> <dl> <dt id="sect3"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks"><code>HTMLMediaElement.audioTracks</code></a></dt> <dd> <p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a> containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</p> </dd> <dt id="sect4"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks"><code>HTMLMediaElement.videoTracks</code></a></dt> <dd> <p>Add an <code>addtrack</code> listener to this <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a> object to be informed when video tracks are added to the element.</p> </dd> <dt id="sect5"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></dt> <dd> <p>Add an <code>addtrack</code> event listener to this <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> to be notified when new text tracks are added to the element.</p> </dd> </dl> <p>For example, to detect when audio tracks are added to or removed from a <code><video></code> element, you can use code like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="P1adpaWeLeJpUywZ67D+U+xhFJnNqeKt09kAHkaso4c=" data-language="js"><span class="token keyword">const</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"video"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +elem<span class="token punctuation">.</span>audioTracks<span class="token punctuation">.</span><span class="token function-variable function">onaddtrack</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + trackEditor<span class="token punctuation">.</span><span class="token function">addTrack</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>track<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> + +elem<span class="token punctuation">.</span>audioTracks<span class="token punctuation">.</span><span class="token function-variable function">onremovetrack</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + trackEditor<span class="token punctuation">.</span><span class="token function">removeTrack</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>track<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p> <p>You can also use <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> to listen for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event"><code>addtrack</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event"><code>removetrack</code></a> events.</p> +</div> +<h3 id="server_support_for_video">Server support for video</h3> +<div class="section-content"> +<p>If the MIME type for the video is not set correctly on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).</p> <p>If you use Apache Web Server to serve Ogg Theora videos, you can fix this problem by adding the video file type extensions to "video/ogg" MIME type. The most common video file type extensions are ".ogm", ".ogv", or ".ogg". To do this, edit the "mime.types" file in "/etc/apache" or use the <code>"AddType"</code> configuration directive in <code>httpd.conf</code>.</p> <pre data-language="plain">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> <p>If you serve your videos as WebM, you can fix this problem for the Apache Web Server by adding the extension used by your video files (".webm" is the most common one) to the MIME type "video/webm" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in <code>httpd.conf</code>.</p> <pre data-language="plain">AddType video/webm .webm +</pre> <p>Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="single_source">Single source</h3> +<div class="section-content"> +<p>This example plays a video when activated, providing the user with the browser's default video controls to control playback.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="w9j9w9v6znMZNPHCXUvp5XjIjZ6oNzBi9clDzDwBT+Y=" data-language="html"><span class="token comment"><!-- Simple video example --></span> +<span class="token comment"><!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --></span> +<span class="token comment"><!-- Poster from peach.blender.org --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> + <span class="token attr-name">controls</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4<span class="token punctuation">"</span></span> + <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>620<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Sorry, your browser doesn't support embedded videos, but don't worry, you can + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/details/BigBuckBunny_124<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>download it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + and watch it with your favorite video player! +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Single source sample" id="frame_single_source" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/video/runner.html?id=single_source" loading="lazy"></iframe> +</div> <p>Until the video starts playing, the image provided in the <code>poster</code> attribute is displayed in its place. If the browser doesn't support video playback, the fallback text is displayed.</p> +</div> +<h3 id="multiple_sources">Multiple sources</h3> +<div class="section-content"> +<p>This example builds on the last one, offering three different sources for the media; this allows the video to be watched regardless of which video codecs are supported by the browser.</p> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="63xmYMO3MubFVlij4Mr8w2cuUqJ9+T/U3hQD/e0QHTw=" data-language="html"><span class="token comment"><!-- Using multiple sources as fallbacks for a video tag --></span> +<span class="token comment"><!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --></span> +<span class="token comment"><!-- Poster hosted by Wikimedia --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>620<span class="token punctuation">"</span></span> + <span class="token attr-name">controls</span> + <span class="token attr-name">poster</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/download/ElephantsDream/ed_hd.ogv<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>video/ogg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/download/ElephantsDream/ed_hd.avi<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>video/avi<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4<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>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + Sorry, your browser doesn't support embedded videos, but don't worry, you can + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + download the MP4 + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + and watch it with your favorite video player! +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Multiple sources sample" id="frame_multiple_sources" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/video/runner.html?id=multiple_sources" loading="lazy"></iframe> +</div> <p>First <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#ogg">Ogg</a> is tried. If that can't be played, then AVI is tried. Finally, <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#mpeg-4_mp4">MP4</a> is tried. A fallback message is displayed if the video element isn't supported, but not if all sources fail.</p> <p>Some media file types let you provide more specific information using the <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter"><code>codecs</code></a> parameter as part of the file's type string. A relatively simple example is <code>video/webm; codecs="vp8, vorbis"</code>, which says that the file is a <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers#webm">WebM</a> video using <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs#vp8">VP8</a> for its video and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs#vorbis">Vorbis</a> for audio.</p> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Videos should provide both captions and transcripts that accurately describe its content (see <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML video</a> for more information on how to implement these). Captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfortable for them.</p> <p>It's worth noting that while you can caption audio-only media, you can only do so when playing audio in a <a href="video" aria-current="page"><code><video></code></a> element, since the video region of the element is used to present the captions. This is one of the special scenarios in which it's useful to play audio in a video element.</p> <p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source video.</p> <p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:</p> <pre data-language="plain">14 +00:03:14 --> 00:03:18 +[Dramatic rock music] + +15 +00:03:19 --> 00:03:21 +[whispering] What's that off in the distance? + +16 +00:03:22 --> 00:03:24 +It's… it's a… + +16 00:03:25 --> 00:03:32 +[Loud thumping] +[Dishes clattering] +</pre> <p>Captions should not obstruct the main subject of the video. They can be positioned using <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#cue_settings">the <code>align</code> VTT cue setting</a>.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> <li><a href="https://webaim.org/techniques/captions/" target="_blank">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_%E2%80%94_providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html" target="_blank">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html" target="_blank">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, phrasing content, embedded content. If it has a <a href="video#controls" aria-current="page"><code>controls</code></a> attribute: interactive content and palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <p> If the element has a <a href="video#src" aria-current="page"><code>src</code></a> attribute: zero or more <a href="track"><code><track></code></a> elements, followed by transparent content that contains no media elements–that is no <a href="audio"><code><audio></code></a> or <a href="video" aria-current="page"><code><video></code></a>. </p> <p> Else: zero or more <a href="source"><code><source></code></a> elements, followed by zero or more <a href="track"><code><track></code></a> elements, followed by transparent content that contains no media elements–that is no <a href="audio"><code><audio></code></a> or <a href="video" aria-current="page"><code><video></code></a>. </p> </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td>Any element that accepts embedded content.</td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/application_role"><code>application</code></a></td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</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/media.html#the-video-element">HTML Standard <br><small># the-video-element</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>video</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>aspect_ratio_computed_from_attributes</code></th> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">71</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>autoplay</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes"><details><summary>10</summary>Only available for videos that have <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html">no sound or have the audio track disabled</a>.</details></td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>controls</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>crossorigin</code></th> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">74<details><summary>12–74</summary>With <code>crossorigin="use-credentials"</code>, cookies aren't sent during seek. See <a href="https://bugzil.la/1532722">bug 1532722</a>.</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">4.4.3</td> +<td class="bc-supports-yes">33</td> +<td class="bc-supports-yes">79<details><summary>14–79</summary>With <code>crossorigin="use-credentials"</code>, cookies aren't sent during seek. See <a href="https://bugzil.la/1532722">bug 1532722</a>.</details> +</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>height</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>loop</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>muted</code></th> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">2.0</td> +</tr> +<tr> +<th><code>poster</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.6</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>preload</code></th> +<td class="bc-supports-yes"><details><summary>3</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Defaults to <code>metadata</code> in Opera 51.</details></td> +<td class="bc-supports-yes">3.1</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Defaults to <code>metadata</code> in Chrome 64.</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Defaults to <code>metadata</code> in Opera 51.</details></td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes"><details><summary>Yes</summary>Defaults to <code>metadata</code> in Samsung Internet 9.0.</details></td> +</tr> +<tr> +<th><code>src</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>width</code></th> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3.5</td> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">10.5</td> +<td class="bc-supports-yes">3.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">14</td> +<td class="bc-supports-yes">3</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="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></li> </ul> </li> <li>Positioning and sizing the picture within its frame: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"><code>object-fit</code></a> +</li> <li><a href="audio"><code><audio></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using HTML audio and video</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/video" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video</a> + </p> +</div> diff --git a/devdocs/html/element%2Fwbr.html b/devdocs/html/element%2Fwbr.html new file mode 100644 index 00000000..2d4b2e6b --- /dev/null +++ b/devdocs/html/element%2Fwbr.html @@ -0,0 +1,78 @@ +<header><h1><wbr>: The Line Break Opportunity element</h1></header><div class="section-content"><p>The <code><wbr></code> <a href="../index">HTML</a> element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.</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/wbr.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element only includes the <a href="../global_attributes">global attributes</a>.</p></div> +<h2 id="notes">Notes</h2> +<div class="section-content"> +<p>On UTF-8 encoded pages, <code><wbr></code> behaves like the <code>U+200B ZERO-WIDTH SPACE</code> code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on <a href="https://developer.mozilla.org/en-US/docs/Glossary/BiDi">bidi</a>-ordering: <code><div dir=rtl>123,<wbr>456</div></code> displays, when not broken on two lines, <code>123,456</code> and not <code>456,123</code>.</p> <p>For the same reason, the <code><wbr></code> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (<code>&shy;</code>) instead.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p><em><a href="https://web.archive.org/web/20121014054923/http://styleguide.yahoo.com/" target="_blank">The Yahoo Style Guide</a></em> recommends <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses" target="_blank">breaking a URL <em>before</em> punctuation</a>, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="4s7hWl5kN2nPA0+IC1dvaua6h1SuMOc3rJlCmECm5yU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + http://this<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.is<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.a<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.really<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.long<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.example<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>.com/With<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/deeper<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/level<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/pages<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/deeper<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/level<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/pages<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/deeper<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/level<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/pages<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/deeper<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/level<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/pages<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/deeper<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/level<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wbr</span> <span class="token punctuation">/></span></span>/pages +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Examples" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/wbr/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Permitted content</th> <td>Empty</td> </tr> <tr> <th scope="row">Tag omission</th> <td> It is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>; it must have a start tag, but must not have an end tag. </td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank">No corresponding role</a></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</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/text-level-semantics.html#the-wbr-element">HTML Standard <br><small># the-wbr-element</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>wbr</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">5.5–7</td> +<td class="bc-supports-yes">11.6</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</td> +<td class="bc-supports-yes">3.2</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="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap"><code>overflow-wrap</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break"><code>word-break</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens"><code>hyphens</code></a></li> <li>The <a href="br"><code><br></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/wbr" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr</a> + </p> +</div> diff --git a/devdocs/html/element%2Fxmp.html b/devdocs/html/element%2Fxmp.html new file mode 100644 index 00000000..829cf18d --- /dev/null +++ b/devdocs/html/element%2Fxmp.html @@ -0,0 +1,61 @@ +<header><h1><xmp></h1></header><div class="section-content"><div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div></div> +<h2 id="summary">Summary</h2> +<div class="section-content"> +<p>The <code><xmp></code> <a href="../index">HTML</a> element renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Do not use this element.</p> <ul> <li>It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from current HTML.</li> <li>Use the <a href="pre"><code><pre></code></a> element or, if semantically adequate, the <a href="code"><code><code></code></a> element instead. Note that you will need to escape the '<code><</code>' character as '<code>&lt;</code>' and the '<code>&</code>' character as '<code>&amp;</code>' to make sure they are not interpreted as markup.</li> <li>A monospaced font can also be obtained on any element, by applying an adequate <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> style using <code>monospace</code> as the generic-font value for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family"><code>font-family</code></a> property.</li> </ul> </div> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"><p>This element has no other attributes than the <a href="../global_attributes">global attributes</a>, common to all elements.</p></div> +<h2 id="dom_interface">DOM interface</h2> +<div class="section-content"><p>This element implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface.</p></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/obsolete.html#xmp">HTML Standard <br><small># xmp</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>xmp</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>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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"><details><summary>4</summary>Before Firefox 4, this element implemented the <code>HTMLSpanElement</code> interface instead of the standard <code>HTMLElement</code> interface.</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">≤3.2</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>The <a href="pre"><code><pre></code></a> and <a href="code"><code><code></code></a> elements to be used instead.</li> <li>The <a href="plaintext"><code><plaintext></code></a> element, similar to <a href="xmp" aria-current="page"><code><xmp></code></a> but also obsolete.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/xmp" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp</a> + </p> +</div> diff --git a/devdocs/html/element.html b/devdocs/html/element.html new file mode 100644 index 00000000..e0a66740 --- /dev/null +++ b/devdocs/html/element.html @@ -0,0 +1,73 @@ +<header><h1>HTML elements reference</h1></header><div class="section-content"> +<p>This page lists all the <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elements</a>, which are created using <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tag">tags</a>.</p> <p>They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> For more information about the basics of HTML elements and attributes, see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p> </div> +</div> +<h2 id="main_root">Main root</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/html"><code><html></code></a></td> <td>Represents the root (top-level element) of an HTML document, so it is also referred to as the <em>root element</em>. All other elements must be descendants of this element.</td> </tr> </tbody> </table></div></figure></div> +<h2 id="document_metadata">Document metadata</h2> +<div class="section-content"> +<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software (<a href="https://developer.mozilla.org/en-US/docs/Glossary/Search_engine">search engines</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browser">browsers</a>, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or linked to another file that has the information.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/base"><code><base></code></a></td> <td>Specifies the base URL to use for all relative URLs in a document. There can be only one such element in a document.</td> </tr> <tr> <td><a href="element/head"><code><head></code></a></td> <td>Contains machine-readable information (metadata) about the document, like its <a href="element/title">title</a>, <a href="element/script">scripts</a>, and <a href="element/style">style sheets</a>.</td> </tr> <tr> <td><a href="element/link"><code><link></code></a></td> <td>Specifies relationships between the current document and an external resource. This element is most commonly used to link to CSS but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.</td> </tr> <tr> <td><a href="element/meta"><code><meta></code></a></td> <td>Represents <a href="https://developer.mozilla.org/en-US/docs/Glossary/Metadata">metadata</a> that cannot be represented by other HTML meta-related elements, like <a href="element/base"><code><base></code></a>, <a href="element/link"><code><link></code></a>, <a href="element/script"><code><script></code></a>, <a href="element/style"><code><style></code></a> and <a href="element/title"><code><title></code></a>.</td> </tr> <tr> <td><a href="element/style"><code><style></code></a></td> <td>Contains style information for a document or part of a document. It contains CSS, which is applied to the contents of the document containing this element.</td> </tr> <tr> <td><a href="element/title"><code><title></code></a></td> <td>Defines the document's title that is shown in a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Browser">browser</a>'s title bar or a page's tab. It only contains text; tags within the element are ignored.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="sectioning_root">Sectioning root</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/body"><code><body></code></a></td> <td>represents the content of an HTML document. There can be only one such element in a document.</td> </tr> </tbody> </table></div></figure></div> +<h2 id="content_sectioning">Content sectioning</h2> +<div class="section-content"> +<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/address"><code><address></code></a></td> <td>Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.</td> </tr> <tr> <td><a href="element/article"><code><article></code></a></td> <td>Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.</td> </tr> <tr> <td><a href="element/aside"><code><aside></code></a></td> <td>Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.</td> </tr> <tr> <td><a href="element/footer"><code><footer></code></a></td> <td>Represents a footer for its nearest ancestor <a href="content_categories#sectioning_content">sectioning content</a> or <a href="element/heading_elements">sectioning root</a> element. A <code><footer></code> typically contains information about the author of the section, copyright data, or links to related documents.</td> </tr> <tr> <td><a href="element/header"><code><header></code></a></td> <td>Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.</td> </tr> <tr> <td> +<a href="element/heading_elements"><code><h1></code></a>, <a href="element/heading_elements"><code><h2></code></a>, <a href="element/heading_elements"><code><h3></code></a>, <a href="element/heading_elements"><code><h4></code></a>, <a href="element/heading_elements"><code><h5></code></a>, <a href="element/heading_elements"><code><h6></code></a> +</td> <td>Represent six levels of section headings. <code><h1></code> is the highest section level and <code><h6></code> is the lowest.</td> </tr> <tr> <td><a href="element/hgroup"><code><hgroup></code></a></td> <td>Represents a heading grouped with any secondary content, such as subheadings, an alternative title, or a tagline.</td> </tr> <tr> <td><a href="element/main"><code><main></code></a></td> <td>Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.</td> </tr> <tr> <td><a href="element/nav"><code><nav></code></a></td> <td>Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.</td> </tr> <tr> <td><a href="element/section"><code><section></code></a></td> <td>Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.</td> </tr> <tr> <td><a href="element/search"><code><search></code></a></td> <td>Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="text_content">Text content</h2> +<div class="section-content"> +<p>Use HTML text content elements to organize blocks or sections of content placed between the opening <a href="element/body"><code><body></code></a> and closing <code></body></code> tags. Important for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility">accessibility</a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO">SEO</a>, these elements identify the purpose or structure of that content.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/blockquote"><code><blockquote></code></a></td> <td>Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the <code>cite</code> attribute, while a text representation of the source can be given using the <a href="element/cite"><code><cite></code></a> element.</td> </tr> <tr> <td><a href="element/dd"><code><dd></code></a></td> <td>Provides the description, definition, or value for the preceding term (<a href="element/dt"><code><dt></code></a>) in a description list (<a href="element/dl"><code><dl></code></a>).</td> </tr> <tr> <td><a href="element/div"><code><div></code></a></td> <td>The generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g., styling is directly applied to it, or some kind of layout model like <a href="https://developer.mozilla.org/en-US/docs/Glossary/Flexbox">flexbox</a> is applied to its parent element).</td> </tr> <tr> <td><a href="element/dl"><code><dl></code></a></td> <td>Represents a description list. The element encloses a list of groups of terms (specified using the <a href="element/dt"><code><dt></code></a> element) and descriptions (provided by <a href="element/dd"><code><dd></code></a> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).</td> </tr> <tr> <td><a href="element/dt"><code><dt></code></a></td> <td>Specifies a term in a description or definition list, and as such must be used inside a <a href="element/dl"><code><dl></code></a> element. It is usually followed by a <a href="element/dd"><code><dd></code></a> element; however, multiple <code><dt></code> elements in a row indicate several terms that are all defined by the immediate next <a href="element/dd"><code><dd></code></a> element.</td> </tr> <tr> <td><a href="element/figcaption"><code><figcaption></code></a></td> <td>Represents a caption or legend describing the rest of the contents of its parent <a href="element/figure"><code><figure></code></a> element.</td> </tr> <tr> <td><a href="element/figure"><code><figure></code></a></td> <td>Represents self-contained content, potentially with an optional caption, which is specified using the <a href="element/figcaption"><code><figcaption></code></a> element. The figure, its caption, and its contents are referenced as a single unit.</td> </tr> <tr> <td><a href="element/hr"><code><hr></code></a></td> <td>Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.</td> </tr> <tr> <td><a href="element/li"><code><li></code></a></td> <td>Represents an item in a list. It must be contained in a parent element: an ordered list (<a href="element/ol"><code><ol></code></a>), an unordered list (<a href="element/ul"><code><ul></code></a>), or a menu (<a href="element/menu"><code><menu></code></a>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.</td> </tr> <tr> <td><a href="element/menu"><code><menu></code></a></td> <td>A semantic alternative to <a href="element/ul"><code><ul></code></a>, but treated by browsers (and exposed through the accessibility tree) as no different than <a href="element/ul"><code><ul></code></a>. It represents an unordered list of items (which are represented by <a href="element/li"><code><li></code></a> elements).</td> </tr> <tr> <td><a href="element/ol"><code><ol></code></a></td> <td>Represents an ordered list of items — typically rendered as a numbered list.</td> </tr> <tr> <td><a href="element/p"><code><p></code></a></td> <td>Represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.</td> </tr> <tr> <td><a href="element/pre"><code><pre></code></a></td> <td>Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or <a href="https://en.wikipedia.org/wiki/Monospaced_font" target="_blank">monospaced</a>, font. Whitespace inside this element is displayed as written.</td> </tr> <tr> <td><a href="element/ul"><code><ul></code></a></td> <td>Represents an unordered list of items, typically rendered as a bulleted list.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="inline_text_semantics">Inline text semantics</h2> +<div class="section-content"> +<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/a"><code><a></code></a></td> <td>Together with its <code>href</code> attribute, creates a hyperlink to web pages, files, email addresses, locations within the current page, or anything else a URL can address.</td> </tr> <tr> <td><a href="element/abbr"><code><abbr></code></a></td> <td>Represents an abbreviation or acronym.</td> </tr> <tr> <td><a href="element/b"><code><b></code></a></td> <td>Used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <code><b></code> for styling text or granting importance. If you wish to create boldface text, you should use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a> property. If you wish to indicate an element is of special importance, you should use the strong element.</td> </tr> <tr> <td><a href="element/bdi"><code><bdi></code></a></td> <td>Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. It's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted.</td> </tr> <tr> <td><a href="element/bdo"><code><bdo></code></a></td> <td>Overrides the current directionality of text, so that the text within is rendered in a different direction.</td> </tr> <tr> <td><a href="element/br"><code><br></code></a></td> <td>Produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.</td> </tr> <tr> <td><a href="element/cite"><code><cite></code></a></td> <td>Used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.</td> </tr> <tr> <td><a href="element/code"><code><code></code></a></td> <td>Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.</td> </tr> <tr> <td><a href="element/data"><code><data></code></a></td> <td>Links a given piece of content with a machine-readable translation. If the content is time- or date-related, the<code><time></code> element must be used.</td> </tr> <tr> <td><a href="element/dfn"><code><dfn></code></a></td> <td>Used to indicate the term being defined within the context of a definition phrase or sentence. The ancestor <a href="element/p"><code><p></code></a> element, the <a href="element/dt"><code><dt></code></a>/<a href="element/dd"><code><dd></code></a> pairing, or the nearest section ancestor of the <code><dfn></code> element, is considered to be the definition of the term.</td> </tr> <tr> <td><a href="element/em"><code><em></code></a></td> <td>Marks text that has stress emphasis. The <code><em></code> element can be nested, with each nesting level indicating a greater degree of emphasis.</td> </tr> <tr> <td><a href="element/i"><code><i></code></a></td> <td>Represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, and taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <code><i></code> naming of this element.</td> </tr> <tr> <td><a href="element/kbd"><code><kbd></code></a></td> <td>Represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a <code><kbd></code> element using its default monospace font, although this is not mandated by the HTML standard.</td> </tr> <tr> <td><a href="element/mark"><code><mark></code></a></td> <td>Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.</td> </tr> <tr> <td><a href="element/q"><code><q></code></a></td> <td>Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <a href="element/blockquote"><code><blockquote></code></a> element.</td> </tr> <tr> <td><a href="element/rp"><code><rp></code></a></td> <td>Used to provide fall-back parentheses for browsers that do not support the display of ruby annotations using the <a href="element/ruby"><code><ruby></code></a> element. One <code><rp></code> element should enclose each of the opening and closing parentheses that wrap the <a href="element/rt"><code><rt></code></a> element that contains the annotation's text.</td> </tr> <tr> <td><a href="element/rt"><code><rt></code></a></td> <td>Specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The <code><rt></code> element must always be contained within a <a href="element/ruby"><code><ruby></code></a> element.</td> </tr> <tr> <td><a href="element/ruby"><code><ruby></code></a></td> <td>Represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.</td> </tr> <tr> <td><a href="element/s"><code><s></code></a></td> <td>Renders text with a strikethrough, or a line through it. Use the <code><s></code> element to represent things that are no longer relevant or no longer accurate. However, <code><s></code> is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.</td> </tr> <tr> <td><a href="element/samp"><code><samp></code></a></td> <td>Used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as <a href="https://en.wikipedia.org/wiki/Courier_(typeface)" target="_blank">Courier</a> or Lucida Console).</td> </tr> <tr> <td><a href="element/small"><code><small></code></a></td> <td>Represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font size smaller, such as from <code>small</code> to <code>x-small</code>.</td> </tr> <tr> <td><a href="element/span"><code><span></code></a></td> <td>A generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the <code>class</code> or <code>id</code> attributes), or because they share attribute values, such as <code>lang</code>. It should be used only when no other semantic element is appropriate. <code><span></code> is very much like a div element, but div is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level element</a> whereas a <code><span></code> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline-level element</a>.</td> </tr> <tr> <td><a href="element/strong"><code><strong></code></a></td> <td>Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.</td> </tr> <tr> <td><a href="element/sub"><code><sub></code></a></td> <td>Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.</td> </tr> <tr> <td><a href="element/sup"><code><sup></code></a></td> <td>Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.</td> </tr> <tr> <td><a href="element/time"><code><time></code></a></td> <td>Represents a specific period in time. It may include the <code>datetime</code> attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.</td> </tr> <tr> <td><a href="element/u"><code><u></code></a></td> <td>Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline but may be altered using CSS.</td> </tr> <tr> <td><a href="element/var"><code><var></code></a></td> <td>Represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.</td> </tr> <tr> <td><a href="element/wbr"><code><wbr></code></a></td> <td>Represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="image_and_multimedia">Image and multimedia</h2> +<div class="section-content"> +<p>HTML supports various multimedia resources such as images, audio, and video.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/area"><code><area></code></a></td> <td>Defines an area inside an image map that has predefined clickable areas. An <em>image map</em> allows geometric areas on an image to be associated with <a href="https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink">hyperlink</a>.</td> </tr> <tr> <td><a href="element/audio"><code><audio></code></a></td> <td>Used to embed sound content in documents. It may contain one or more audio sources, represented using the <code>src</code> attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</td> </tr> <tr> <td><a href="element/img"><code><img></code></a></td> <td>Embeds an image into the document.</td> </tr> <tr> <td><a href="element/map"><code><map></code></a></td> <td>Used with <a href="element/area"><code><area></code></a> elements to define an image map (a clickable link area).</td> </tr> <tr> <td><a href="element/track"><code><track></code></a></td> <td>Used as a child of the media elements, audio and video. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT format</a> (<code>.vtt</code> files)—Web Video Text Tracks.</td> </tr> <tr> <td><a href="element/video"><code><video></code></a></td> <td>Embeds a media player which supports video playback into the document. You can also use <code><video></code> for audio content, but the audio element may provide a more appropriate user experience.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="embedded_content">Embedded content</h2> +<div class="section-content"> +<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/embed"><code><embed></code></a></td> <td>Embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.</td> </tr> <tr> <td><a href="element/iframe"><code><iframe></code></a></td> <td>Represents a nested browsing context, embedding another HTML page into the current one.</td> </tr> <tr> <td><a href="element/object"><code><object></code></a></td> <td>Represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.</td> </tr> <tr> <td><a href="element/picture"><code><picture></code></a></td> <td>Contains zero or more <a href="element/source"><code><source></code></a> elements and one <a href="element/img"><code><img></code></a> element to offer alternative versions of an image for different display/device scenarios.</td> </tr> <tr> <td><a href="element/portal"><code><portal></code></a></td> <td>Enables the embedding of another HTML page into the current one to enable smoother navigation into new pages.</td> </tr> <tr> <td><a href="element/source"><code><source></code></a></td> <td>Specifies multiple media resources for the picture, the audio element, or the video element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types">image file formats</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">media file formats</a>.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="svg_and_mathml">SVG and MathML</h2> +<div class="section-content"> +<p>You can embed <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/MathML">MathML</a> content directly into HTML documents, using the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code> elements.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><code><svg></code></a></td> <td>Container defining a new coordinate system and <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox">viewport</a>. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.</td> </tr> <tr> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math"><math></a></code></td> <td>The top-level element in MathML. Every valid MathML instance must be wrapped in it. In addition, you must not nest a second <code><math></code> element in another, but you can have an arbitrary number of other child elements in it.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="scripting">Scripting</h2> +<div class="section-content"> +<p>To create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/canvas"><code><canvas></code></a></td> <td>Container element to use with either the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">canvas scripting API</a> or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL API</a> to draw graphics and animations.</td> </tr> <tr> <td><a href="element/noscript"><code><noscript></code></a></td> <td>Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.</td> </tr> <tr> <td><a href="element/script"><code><script></code></a></td> <td>Used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <code><script></code> element can also be used with other languages, such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>'s GLSL shader programming language and <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON">JSON</a>.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="demarcating_edits">Demarcating edits</h2> +<div class="section-content"> +<p>These elements let you provide indications that specific parts of the text have been altered.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/del"><code><del></code></a></td> <td>Represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The <code><ins></code> element can be used for the opposite purpose: to indicate text that has been added to the document.</td> </tr> <tr> <td><a href="element/ins"><code><ins></code></a></td> <td>Represents a range of text that has been added to a document. You can use the <code><del></code> element to similarly represent a range of text that has been deleted from the document.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="table_content">Table content</h2> +<div class="section-content"> +<p>The elements here are used to create and handle tabular data.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/caption"><code><caption></code></a></td> <td>Specifies the caption (or title) of a table.</td> </tr> <tr> <td><a href="element/col"><code><col></code></a></td> <td>Defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <a href="element/colgroup"><code><colgroup></code></a> element.</td> </tr> <tr> <td><a href="element/colgroup"><code><colgroup></code></a></td> <td>Defines a group of columns within a table.</td> </tr> <tr> <td><a href="element/table"><code><table></code></a></td> <td>Represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.</td> </tr> <tr> <td><a href="element/tbody"><code><tbody></code></a></td> <td>Encapsulates a set of table rows (<a href="element/tr"><code><tr></code></a> elements), indicating that they comprise the body of the table (<a href="element/table"><code><table></code></a>).</td> </tr> <tr> <td><a href="element/td"><code><td></code></a></td> <td>Defines a cell of a table that contains data. It participates in the <em>table model</em>.</td> </tr> <tr> <td><a href="element/tfoot"><code><tfoot></code></a></td> <td>Defines a set of rows summarizing the columns of the table.</td> </tr> <tr> <td><a href="element/th"><code><th></code></a></td> <td>Defines a cell as a header of a group of table cells. The exact nature of this group is defined by the <code>scope</code> and <code>headers</code> attributes.</td> </tr> <tr> <td><a href="element/thead"><code><thead></code></a></td> <td>Defines a set of rows defining the head of the columns of the table.</td> </tr> <tr> <td><a href="element/tr"><code><tr></code></a></td> <td>Defines a row of cells in a table. The row's cells can then be established using a mix of <a href="element/td"><code><td></code></a> (data cell) and <a href="element/th"><code><th></code></a> (header cell) elements.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="forms">Forms</h2> +<div class="section-content"> +<p>HTML provides several elements that can be used together to create forms that the user can fill out and submit to the website or application. Further information about this available in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a>.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/button"><code><button></code></a></td> <td>An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it performs an action, such as submitting a <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">form</a> or opening a dialog.</td> </tr> <tr> <td><a href="element/datalist"><code><datalist></code></a></td> <td>Contains a set of <a href="element/option"><code><option></code></a> elements that represent the permissible or recommended options available to choose from within other controls.</td> </tr> <tr> <td><a href="element/fieldset"><code><fieldset></code></a></td> <td>Used to group several controls as well as labels (<a href="element/label"><code><label></code></a>) within a web form.</td> </tr> <tr> <td><a href="element/form"><code><form></code></a></td> <td>Represents a document section containing interactive controls for submitting information.</td> </tr> <tr> <td><a href="element/input"><code><input></code></a></td> <td>Used to create interactive controls for web-based forms to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <code><input></code> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.</td> </tr> <tr> <td><a href="element/label"><code><label></code></a></td> <td>Represents a caption for an item in a user interface.</td> </tr> <tr> <td><a href="element/legend"><code><legend></code></a></td> <td>Represents a caption for the content of its parent <a href="element/fieldset"><code><fieldset></code></a>.</td> </tr> <tr> <td><a href="element/meter"><code><meter></code></a></td> <td>Represents either a scalar value within a known range or a fractional value.</td> </tr> <tr> <td><a href="element/optgroup"><code><optgroup></code></a></td> <td>Creates a grouping of options within a <a href="element/select"><code><select></code></a> element.</td> </tr> <tr> <td><a href="element/option"><code><option></code></a></td> <td>Used to define an item contained in a select, an <a href="element/optgroup"><code><optgroup></code></a>, or a <a href="element/datalist"><code><datalist></code></a> element. As such, <code><option></code> can represent menu items in popups and other lists of items in an HTML document.</td> </tr> <tr> <td><a href="element/output"><code><output></code></a></td> <td>Container element into which a site or app can inject the results of a calculation or the outcome of a user action.</td> </tr> <tr> <td><a href="element/progress"><code><progress></code></a></td> <td>Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.</td> </tr> <tr> <td><a href="element/select"><code><select></code></a></td> <td>Represents a control that provides a menu of options.</td> </tr> <tr> <td><a href="element/textarea"><code><textarea></code></a></td> <td>Represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="interactive_elements">Interactive elements</h2> +<div class="section-content"> +<p>HTML offers a selection of elements that help to create interactive user interface objects.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/details"><code><details></code></a></td> <td>Creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <a href="element/summary"><code><summary></code></a> element.</td> </tr> <tr> <td><a href="element/dialog"><code><dialog></code></a></td> <td>Represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.</td> </tr> <tr> <td><a href="element/summary"><code><summary></code></a></td> <td>Specifies a summary, caption, or legend for a details element's disclosure box. Clicking the <code><summary></code> element toggles the state of the parent <a href="element/details"><code><details></code></a> element open and closed.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="web_components">Web Components</h2> +<div class="section-content"> +<p>Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/slot"><code><slot></code></a></td> <td>Part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> technology suite, this element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.</td> </tr> <tr> <td><a href="element/template"><code><template></code></a></td> <td>A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> +<div class="section-content"> +<div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> These are old HTML elements that are deprecated and should not be used. <strong>You should never use them in new projects, and you should replace them in old projects as soon as you can.</strong> They are listed here for completeness only.</p> </div> <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Element</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="element/acronym"><code><acronym></code></a></td> <td>Allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.</td> </tr> <tr> <td><a href="element/big"><code><big></code></a></td> <td>Renders the enclosed text at a font size one level larger than the surrounding text (<code>medium</code> becomes <code>large</code>, for example). The size is capped at the browser's maximum permitted font size.</td> </tr> <tr> <td><a href="element/center"><code><center></code></a></td> <td>Displays its block-level or inline contents centered horizontally within its containing element.</td> </tr> <tr> <td><code><content></code></td> <td>An obsolete part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> suite of technologies—was used inside of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">Shadow DOM</a> as an insertion point, and wasn't meant to be used in ordinary HTML. It has now been replaced by the <a href="element/slot"><code><slot></code></a> element, which creates a point in the DOM at which a shadow DOM can be inserted. Consider using <a href="element/slot"><code><slot></code></a> instead.</td> </tr> <tr> <td><a href="element/dir"><code><dir></code></a></td> <td>Container for a directory of files and/or folders, potentially with styles and icons applied by the user agent. Do not use this obsolete element; instead, you should use the <a href="element/ul"><code><ul></code></a> element for lists, including lists of files.</td> </tr> <tr> <td><a href="element/font"><code><font></code></a></td> <td>Defines the font size, color and face for its content.</td> </tr> <tr> <td><a href="element/frame"><code><frame></code></a></td> <td>Defines a particular area in which another HTML document can be displayed. A frame should be used within a <a href="element/frameset"><code><frameset></code></a>.</td> </tr> <tr> <td><a href="element/frameset"><code><frameset></code></a></td> <td>Used to contain <a href="element/frame"><code><frame></code></a> elements.</td> </tr> <tr> <td><a href="element/image"><code><image></code></a></td> <td>An ancient and poorly supported precursor to the <a href="element/img"><code><img></code></a> element. It should not be used.</td> </tr> <tr> <td><a href="element/marquee"><code><marquee></code></a></td> <td>Used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.</td> </tr> <tr> <td><a href="element/menuitem"><code><menuitem></code></a></td> <td>Represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.</td> </tr> <tr> <td><a href="element/nobr"><code><nobr></code></a></td> <td>Prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.</td> </tr> <tr> <td><a href="element/noembed"><code><noembed></code></a></td> <td>An obsolete, non-standard way to provide alternative, or "fallback", content for browsers that do not support the embed element or do not support the type of <a href="content_categories#embedded_content">embedded content</a> an author wishes to use. This element was deprecated in HTML 4.01 and above in favor of placing fallback content between the opening and closing tags of an <a href="element/object"><code><object></code></a> element.</td> </tr> <tr> <td><a href="element/noframes"><code><noframes></code></a></td> <td>Provides content to be presented in browsers that don't support (or have disabled support for) the <a href="element/frame"><code><frame></code></a> element. Although most commonly-used browsers support frames, there are exceptions, including certain special-use browsers including some mobile browsers, as well as text-mode browsers.</td> </tr> <tr> <td><a href="element/param"><code><param></code></a></td> <td>Defines parameters for an <a href="element/object"><code><object></code></a> element.</td> </tr> <tr> <td><a href="element/plaintext"><code><plaintext></code></a></td> <td>Renders everything following the start tag as raw text, ignoring any following HTML. There is no closing tag, since everything after it is considered raw text.</td> </tr> <tr> <td><a href="element/rb"><code><rb></code></a></td> <td>Used to delimit the base text component of a ruby annotation, i.e. the text that is being annotated. One <code><rb></code> element should wrap each separate atomic segment of the base text.</td> </tr> <tr> <td><a href="element/rtc"><code><rtc></code></a></td> <td>Embraces semantic annotations of characters presented in a ruby of <a href="element/rb"><code><rb></code></a> elements used inside of <a href="element/ruby"><code><ruby></code></a> element. <a href="element/rb"><code><rb></code></a> elements can have both pronunciation (<a href="element/rt"><code><rt></code></a>) and semantic (<a href="element/rtc"><code><rtc></code></a>) annotations.</td> </tr> <tr> <td><code><shadow></code></td> <td>An obsolete part of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a> technology suite that was intended to be used as a shadow DOM insertion point. You might have used it if you have created multiple shadow roots under a shadow host. Consider using <a href="element/slot"><code><slot></code></a> instead.</td> </tr> <tr> <td><a href="element/strike"><code><strike></code></a></td> <td>Places a strikethrough (horizontal line) over text.</td> </tr> <tr> <td><a href="element/tt"><code><tt></code></a></td> <td>Creates inline text which is presented using the user agent default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.</td> </tr> <tr> <td><a href="element/xmp"><code><xmp></code></a></td> <td>Renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.</td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element"><code>Element</code></a> interface</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Faccesskey.html b/devdocs/html/global_attributes%2Faccesskey.html new file mode 100644 index 00000000..3abfc940 --- /dev/null +++ b/devdocs/html/global_attributes%2Faccesskey.html @@ -0,0 +1,74 @@ +<header><h1>accesskey</h1></header><div class="section-content"><p>The <code>accesskey</code> <a href="../global_attributes">global attribute</a> provides a hint for generating a keyboard shortcut for the current element. The attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard).</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-accesskey.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> In the WHATWG spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. However, this does not work in most browsers. IE/Edge uses the first one it supports without problems, provided there are no conflicts with other commands.</p> </div> <p>The way to activate the accesskey depends on the browser and its platform:</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <th></th> <th>Windows</th> <th>Linux</th> <th>Mac</th> </tr> <tr> <th>Firefox</th> <td colspan="2"> +<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd> +</td> <td> <ul> <li> Firefox 57+: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> or <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd> </li> <li> Firefox 14-56: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd> </li> <li> Firefox 13 or older: <kbd>Control</kbd> + <kbd><em>key</em></kbd> </li> </ul> </td> </tr> <tr> <th>Edge</th> <td rowspan="2"> +<kbd>Alt</kbd> + <kbd><em>key</em></kbd> +</td> <td rowspan="2"> <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br>or <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd> </td> <td>n/a</td> </tr> <tr> <th>Google Chrome</th> <td> +<kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> +</td> </tr> <tr> <th>Safari</th> <td colspan="2">n/a</td> <td> +<kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> +</td> </tr> <tr> <th>Opera 15+</th> <td colspan="2"> +<kbd>Alt</kbd> + <kbd><em>key</em></kbd> +</td> <td> +<kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd> +</td> </tr> <tr> <th>Opera 12</th> <td colspan="3"> <kbd>Shift</kbd> + <kbd>Esc</kbd> opens a list of available accesskeys. Choose an item from the list by pressing the <kbd><em>key</em></kbd>. </td> </tr> </tbody> </table></div></figure> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>In addition to poor browser support, there are numerous concerns with the <code>accesskey</code> attribute:</p> <ul> <li>An <code>accesskey</code> value can conflict with a system or browser keyboard shortcut, or assistive technology functionality. What may work for one combination of operating system, assistive technology, and browser may not work with other combinations.</li> <li>Certain <code>accesskey</code> values may not be present on certain keyboards, especially when internationalization is a concern. So adapting to specific languages could cause further problems.</li> <li> +<code>accesskey</code> values that rely on numbers may be confusing to individuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.</li> <li>Informing the user that <code>accesskey</code>s are present, so that they are aware of the functionality. If the system lacks a method of notifying the user about this feature, the user might accidentally activate <code>accesskey</code>s.</li> </ul> <p>Because of these issues, it is generally advised not to use <code>accesskey</code>s for most general-purpose websites and web apps.</p> <ul> <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec" target="_blank">WebAIM: Keyboard Accessibility - Accesskey</a></li> </ul> +</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/interaction.html#the-accesskey-attribute">HTML Standard <br><small># the-accesskey-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>accesskey</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKey"><code>HTMLElement.accessKey</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/accessKeyLabel"><code>HTMLElement.accessKeyLabel</code></a></li> <li>All <a href="../global_attributes">global attributes</a>.</li> <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts" target="_blank"><code>aria-keyshortcuts</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/accesskey" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fautocapitalize.html b/devdocs/html/global_attributes%2Fautocapitalize.html new file mode 100644 index 00000000..6bc875f8 --- /dev/null +++ b/devdocs/html/global_attributes%2Fautocapitalize.html @@ -0,0 +1,57 @@ +<header><h1>autocapitalize</h1></header><div class="section-content"> +<p>The <code>autocapitalize</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.</p> <p>The attribute must take one of the following values:</p> <ul> <li> +<code>off</code> or <code>none</code>: No autocapitalization is applied (all letters default to lowercase)</li> <li> +<code>on</code> or <code>sentences</code>: The first letter of each sentence defaults to a capital letter; all other letters default to lowercase</li> <li> +<code>words</code>: The first letter of each word defaults to a capital letter; all other letters default to lowercase</li> <li> +<code>characters</code>: All letters should default to uppercase</li> </ul> <p>The <code>autocapitalize</code> attribute doesn't affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input. The behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. The <code>autocapitalize</code> attribute enables authors to override that behavior per-element.</p> <p>The <code>autocapitalize</code> attribute never causes autocapitalization to be enabled for an <a href="../element/input"><code><input></code></a> element with a <a href="../element/input#type"><code>type</code></a> attribute whose value is <code>url</code>, <code>email</code>, or <code>password</code>.</p> +</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/interaction.html#attr-autocapitalize">HTML Standard <br><small># attr-autocapitalize</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>autocapitalize</code></th> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.0</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/autocapitalize" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fautofocus.html b/devdocs/html/global_attributes%2Fautofocus.html new file mode 100644 index 00000000..e7b5c5b0 --- /dev/null +++ b/devdocs/html/global_attributes%2Fautofocus.html @@ -0,0 +1,68 @@ +<header><h1>autofocus</h1></header><div class="section-content"> +<p>The <code>autofocus</code> <a href="../global_attributes">global attribute</a> is a Boolean attribute indicating that an element should be focused on page load, or when the <a href="../element/dialog"><code><dialog></code></a> that it is part of is displayed.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="amYlInUO+/VG9gclExnWwHUIb8Trq8dDc150BeZ2rKw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>q<span class="token punctuation">"</span></span> <span class="token attr-name">autofocus</span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>autofocus</code> attribute applies to all elements, not just form controls. For example, it might be used on a <a href="contenteditable">contenteditable</a> area.</p> </div> +</div> +<h2 id="accessibility_considerations">Accessibility considerations</h2> +<div class="section-content"> +<p>Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p> <p>Use careful consideration for accessibility when applying the <code>autofocus</code> attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.</p> +</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/interaction.html#dom-fe-autofocus">HTML Standard <br><small># dom-fe-autofocus</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>autofocus</code></th> +<td class="bc-supports-yes">79<details><summary>1–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes">79<details><summary>12–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>1</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes"><details><summary>10</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">66<details><summary>≤12.1–66</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>4</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">79<details><summary>≤37–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes">79<details><summary>18–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>4</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">57<details><summary>≤12.1–57</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>3.2</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">12.0<details><summary>1.0–12.0</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +</tr></tbody> +</table></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/autofocus" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fclass.html b/devdocs/html/global_attributes%2Fclass.html new file mode 100644 index 00000000..26a5c529 --- /dev/null +++ b/devdocs/html/global_attributes%2Fclass.html @@ -0,0 +1,57 @@ +<header><h1>class</h1></header><div class="section-content"><p>The <code>class</code> <a href="../global_attributes">global attribute</a> is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the DOM method <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName"><code>document.getElementsByClassName</code></a>.</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/attribute-class.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>Though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. For example, <em>attribute</em> to describe an attribute rather than <em>italics</em>, although an element of this class may be presented by <em>italics</em>. Semantic names remain logical even if the presentation of the page changes.</p> +</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/dom.html#global-attributes:classes-2">HTML Standard <br><small># global-attributes:classes-2</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>class</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>All <a href="../global_attributes">global attributes</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/className"><code>element.className</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList"><code>element.classList</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">Introduction to CSS</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/class" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fcontenteditable.html b/devdocs/html/global_attributes%2Fcontenteditable.html new file mode 100644 index 00000000..b12e08ee --- /dev/null +++ b/devdocs/html/global_attributes%2Fcontenteditable.html @@ -0,0 +1,80 @@ +<header><h1>contenteditable</h1></header><div class="section-content"><p>The <code>contenteditable</code> <a href="../global_attributes">global attribute</a> is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.</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-contenteditable.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The attribute must take one of the following values:</p> <ul> <li> +<code>true</code> or an <em>empty string</em>, which indicates that the element is editable.</li> <li> +<code>false</code>, which indicates that the element is not editable.</li> <li> +<code>plaintext-only</code>, which indicates that the element's raw text is editable, but rich text formatting is disabled.</li> </ul> <p>If the attribute is given without a value, like <code><label contenteditable>Example Label</label></code>, its value is treated as an empty string.</p> <p>If this attribute is missing or its value is invalid, its value is <em>inherited</em> from its parent element: so the element is editable if its parent is editable.</p> <p>Note that although its allowed values include <code>true</code> and <code>false</code>, this attribute is an <em><a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a></em> one and not a <em>Boolean</em> one.</p> <p>You can set the color used to draw the text insertion <a href="https://developer.mozilla.org/en-US/docs/Glossary/Caret">caret</a> with the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color"><code>caret-color</code></a> property.</p> <p>Elements that are made editable, and therefore interactive, by using the <code>contenteditable</code> attribute can be focused. They participate in sequential keyboard navigation. However, elements with the <code>contenteditable</code> attribute nested within other <code>contenteditable</code> elements are not added to the tabbing sequence by default. You can add the nested <code>contenteditable</code> elements to the keyboard navigation sequence by specifying the <code>tabindex</code> value (<a href="tabindex"><code>tabindex="0"</code></a>).</p> +</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/interaction.html#attr-contenteditable">HTML Standard <br><small># attr-contenteditable</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>contenteditable</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">5.5</td> +<td class="bc-supports-yes">9</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>plaintext-only</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">5.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a> +</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable"><code>HTMLElement.contentEditable</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/isContentEditable"><code>HTMLElement.isContentEditable</code></a> +</li> <li>The CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color"><code>caret-color</code></a> property</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event">HTMLElement <code>input</code> event</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/contenteditable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fcontextmenu.html b/devdocs/html/global_attributes%2Fcontextmenu.html new file mode 100644 index 00000000..c817dc6d --- /dev/null +++ b/devdocs/html/global_attributes%2Fcontextmenu.html @@ -0,0 +1,131 @@ +<header><h1>contextmenu</h1></header><div class="section-content"> +<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div> +<div class="notecard nonstandard" id="sect2"><p><strong>Non-standard:</strong> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p></div> <p>The <code>contextmenu</code> <a href="../global_attributes">global attribute</a> is the <a href="id"><strong>id</strong></a> of a <a href="../element/menu"><code><menu></code></a> to use as the contextual menu for this element.</p> <p>A <em>context menu</em> is a menu that appears upon user interaction, such as a right-click. HTML now allows us to customize this menu. Here are some implementation examples, including nested menus.</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="QhNyPy22A0r9KkMfsZ0fR00iPiQhCuOV6HckH/8HFw0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</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>context<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>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>share<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Twitter<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">shareViaTwitter</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Facebook<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">shareViaFacebook</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + Anywhere in the example you can share the page on Twitter and Facebook + using the Share menu from your context menu. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeFont<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>fontSizing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + On this specific list element, you can change the size of the text by + using the "Increase/Decrease font" actions from your context menu + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</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>context<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>changeFont<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Increase Font<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">incFont</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Decrease Font<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">decFont</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ChangeImage<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>changeImage<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + On the image below, you can fire the "Change Image" action in your Context + Menu.<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>promobutton_mdn5.png<span class="token punctuation">"</span></span> + <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ChangeImage<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>promoButton<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Better CSS Docs for a better web<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menu</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>context<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>ChangeImage<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>menuitem</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Change Image<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menuitem</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>menu</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="QhqRoqG+VaPDfOF0ZkIvRNC5ZcHciTll9eKqKjxf3xY=" data-language="js"><span class="token keyword">function</span> <span class="token function">shareViaTwitter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span> + <span class="token string">"https://twitter.com/intent/tweet?text="</span> <span class="token operator">+</span> + <span class="token string">"Hurray! I am learning ContextMenu from MDN via Mozilla"</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">shareViaFacebook</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span> + <span class="token string">"https://facebook.com/sharer/sharer.php?u="</span> <span class="token operator">+</span> + <span class="token string">"https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">incFont</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"fontSizing"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token string">"larger"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">decFont</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"fontSizing"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token string">"smaller"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">changeImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> index <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">39</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + document<span class="token punctuation">.</span>images<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.png</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</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" width="100%" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/contextmenu/runner.html?id=example" loading="lazy"></iframe> +</div></div> +<h2 id="specifications">Specifications</h2> +<div class="section-content"><p>The <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu" target="_blank">contextmenu attribute is obsolete</a> and will be removed from all browsers.</p></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>contextmenu</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">9–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>32–56</summary>Support for the <code>contextmenu</code> attribute has been removed from Firefox for Android (See <a href="https://bugzil.la/1424252">bug 1424252</a>).</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/contextmenu" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fdata-%2A.html b/devdocs/html/global_attributes%2Fdata-%2A.html new file mode 100644 index 00000000..33aee82d --- /dev/null +++ b/devdocs/html/global_attributes%2Fdata-%2A.html @@ -0,0 +1,74 @@ +<header><h1>data-*</h1></header><div class="section-content"><p>The <code>data-*</code> <a href="../global_attributes">global attributes</a> form a class of attributes called <strong>custom data attributes</strong>, that allow proprietary information to be exchanged between the <a href="../index">HTML</a> and its <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a> representation by scripts.</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/attribute-data.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p> All such custom data are available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface of the element the attribute is set on. The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a> property gives access to them. The <code>*</code> may be replaced by any name following <a href="https://www.w3.org/TR/REC-xml/#NT-Name" target="_blank">the production rule of XML names</a> which includes the following recommendations: </p> <ul> <li>The name should not start with <code>xml</code> (case-insensitive), as it's reserved for future XML specifications.</li> <li>The name should not contain any colon characters (<code>:</code>), as XML assigns meaning to such names.</li> <li>The name should not contain any capital letters, as XML is all lowercase.</li> </ul> <p>These are recommendations. If these naming recommendations are not followed, no errors will occur. The attributes will still be matched using CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">attribute selectors</a>, with the attribute being case insensitive and any attribute value being case-sensitive. Attributes not conforming to these three recommendations will also still be recognized by the JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a> property and user-agents will include the attribute in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMStringMap"><code>DOMStringMap</code></a> containing all the custom data attributes for an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> <p>If you plan to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a>, the portion of the attribute name following the <code>data-</code> can only include characters allowed in JavaScript property names (and hyphens, which will be removed). The <code>dataset</code> version of the attribute name removes the "data-" prefix and converts the rest of the name from <a href="https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case">kebab-case</a> to camelCase. For example, <code>element.getAttribute("data-test")</code> is equivalent to <code>element.dataset.test</code> and <code>data-test-abc</code> will be accessible as <code>HTMLElement.dataset.testAbc</code> (or by <code>HTMLElement.dataset["testAbc"]</code>). Avoid non-alphabetic characters following a hyphen, such as <code>data-test-1</code> or <code>data--test</code>, as they will not be recognized by <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a>.</p> +</div> +<h3 id="usage">Usage</h3> +<div class="section-content"> +<p>By adding <code>data-*</code> attributes, even ordinary HTML elements can become rather complex and powerful program-objects. For example, a space-ship "<a href="https://en.wikipedia.org/wiki/Sprite_(computer_graphics)" target="_blank">sprite</a><em>"</em> in a game could be a simple <a href="../element/img"><code><img></code></a> element with a <a href="class"><code>class</code></a> attribute and several <code>data-*</code> attributes:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="a1qPQkSymHZrc1ikVb3riZH1wdTVj2cS0/1v256K3Bg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>spaceship cruiserX3<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shipX3.png<span class="token punctuation">"</span></span> + <span class="token attr-name">data-ship-id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>324<span class="token punctuation">"</span></span> + <span class="token attr-name">data-weapons</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>laserI laserII<span class="token punctuation">"</span></span> + <span class="token attr-name">data-shields</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>72%<span class="token punctuation">"</span></span> + <span class="token attr-name">data-x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>414354<span class="token punctuation">"</span></span> + <span class="token attr-name">data-y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>85160<span class="token punctuation">"</span></span> + <span class="token attr-name">data-z</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>31940<span class="token punctuation">"</span></span> + <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript">spaceships<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>shipId<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">blasted</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>For a more in-depth tutorial about using HTML data attributes, see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a>.</p> +</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/dom.html#attr-data-*">HTML Standard <br><small># attr-data-*</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>data-*</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</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>All <a href="../global_attributes">global attributes</a>.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a> property that allows to access and modify these values.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/data-*" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fdir.html b/devdocs/html/global_attributes%2Fdir.html new file mode 100644 index 00000000..4f4bc342 --- /dev/null +++ b/devdocs/html/global_attributes%2Fdir.html @@ -0,0 +1,61 @@ +<header><h1>dir</h1></header><div class="section-content"><p>The <code>dir</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that indicates the directionality of the element's text.</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/attribute-dir.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It can have the following values:</p> <ul> <li> +<code>ltr</code>, which means <em>left to right</em> and is to be used for languages that are written from the left to the right (like English);</li> <li> +<code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> <li> +<code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This attribute is mandatory for the <a href="../element/bdo"><code><bdo></code></a> element where it has a different semantic meaning.</p> <ul> <li>This attribute is <em>not</em> inherited by the <a href="../element/bdi"><code><bdi></code></a> element. If not set, its value is <code>auto</code>.</li> <li>This attribute can be overridden by the CSS properties <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction"><code>direction</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a>, if a CSS page is active and the element supports these properties.</li> <li>As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.</li> <li>The <code>auto</code> value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.</li> </ul> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Browsers might allow users to change the directionality of <a href="../element/input"><code><input></code></a> and <a href="../element/textarea"><code><textarea></code></a>s in order to assist with authoring content. Chrome and Safari provide a directionality option in the contextual menu of input fields while Legacy Edge uses the key combinations <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> and <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd>. Firefox uses <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> but does NOT update the <code>dir</code> attribute value.</p> </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/dom.html#the-dir-attribute">HTML Standard <br><small># the-dir-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>dir</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>All <a href="../global_attributes">global attributes</a>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir"><code>HTMLElement.dir</code></a> that reflects this attribute.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/dir" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fdraggable.html b/devdocs/html/global_attributes%2Fdraggable.html new file mode 100644 index 00000000..cd4f8b99 --- /dev/null +++ b/devdocs/html/global_attributes%2Fdraggable.html @@ -0,0 +1,57 @@ +<header><h1>draggable</h1></header><div class="section-content"> +<p>The <code>draggable</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that indicates whether the element can be dragged, either with native browser behavior or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a>.</p> <p> The <code>draggable</code> attribute may be applied to elements that strictly fall under the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Namespace">HTML namespace</a>, which means that it cannot be applied to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVGs</a>. For more information about what namespace declarations look like, and what they do, see <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course">Namespace crash course</a>. </p> <p><code>draggable</code> can have the following values:</p> <ul> <li> +<code>true</code>: the element can be dragged.</li> <li> +<code>false</code>: the element cannot be dragged.</li> </ul> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> This attribute is <em><a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a></em> and not <em>Boolean</em>. A value of <code>true</code> or <code>false</code> is mandatory, and shorthand like <code><img draggable></code> is forbidden. The correct usage is <code><img draggable="false"></code>.</p> </div> <p>If this attribute is not set, its default value is <code>auto</code>, which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. For other elements, the event <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event"><code>ondragstart</code></a> must be set for drag and drop to work, as shown in this <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">comprehensive example</a>.</p> +</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/dnd.html#the-draggable-attribute">HTML Standard <br><small># the-draggable-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>draggable</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">5</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">14</td> +<td class="bc-supports-yes">4.2</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>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/draggable" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fenterkeyhint.html b/devdocs/html/global_attributes%2Fenterkeyhint.html new file mode 100644 index 00000000..83e0237c --- /dev/null +++ b/devdocs/html/global_attributes%2Fenterkeyhint.html @@ -0,0 +1,66 @@ +<header><h1>enterkeyhint</h1></header><div class="section-content"><p> The <code>enterkeyhint</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute defining what action label (or icon) to present for the enter key on virtual keyboards. </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-enterkeyhint.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">Form controls</a> (such as <a href="../element/textarea"><code><textarea></code></a> or <a href="../element/input"><code><input></code></a> elements) or elements using <a href="contenteditable"><code>contenteditable</code></a> can specify an <a href="inputmode"><code>inputmode</code></a> attribute to control what kind of virtual keyboard will be used. To further improve the user's experience, the enter key can be customized specifically by providing an <code>enterkeyhint</code> attribute indicating how the enter key should be labeled (or which icon should be shown). The enter key usually represents what the user should do next; typical actions are: sending text, inserting a new line, or searching. </p> <p> If no <code>enterkeyhint</code> attribute is provided, the user agent might use contextual information from the <a href="inputmode"><code>inputmode</code></a>, <a href="../element/input#input_types"><code>type</code></a>, or <a href="../element/input#pattern"><code>pattern</code></a> attributes to display a suitable enter key label (or icon). </p> +</div> +<h3 id="values">Values</h3> +<div class="section-content"> +<p>The <code>enterkeyhint</code> attribute is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute and only accepts the following values:</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <thead> <tr> <th>Value</th> <th>Description</th> <th>Example label (depends on user agent and user language)</th> </tr> </thead> <tbody> <tr> <td><code>enterkeyhint="enter"</code></td> <td>Typically inserting a new line.</td> <td><kbd>↵</kbd></td> </tr> <tr> <td><code>enterkeyhint="done"</code></td> <td> Typically meaning there is nothing more to input and the input method editor (IME) will be closed. </td> <td><kbd>Done</kbd></td> </tr> <tr> <td><code>enterkeyhint="go"</code></td> <td>Typically meaning to take the user to the target of the text they typed.</td> <td><kbd>Open</kbd></td> </tr> <tr> <td><code>enterkeyhint="next"</code></td> <td>Typically taking the user to the next field that will accept text.</td> <td><kbd>Next</kbd></td> </tr> <tr> <td><code>enterkeyhint="previous"</code></td> <td>Typically taking the user to the previous field that will accept text.</td> <td><kbd>Previous</kbd></td> </tr> <tr> <td><code>enterkeyhint="search"</code></td> <td> Typically taking the user to the results of searching for the text they have typed. </td> <td><kbd>Search</kbd></td> </tr> <tr> <td><code>enterkeyhint="send"</code></td> <td>Typically delivering the text to its target.</td> <td><kbd>Send</kbd></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/interaction.html#attr-enterkeyhint">HTML Standard <br><small># attr-enterkeyhint</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>enterkeyhint</code></th> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">12.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint"><code>HTMLElement.enterKeyHint</code></a> property reflecting this attribute</li> <li> +<a href="inputmode"><code>inputmode</code></a> global attribute</li> <li> +<a href="contenteditable"><code>contenteditable</code></a> global attribute</li> <li> <a href="../element/input#input_types"><code>type</code></a> and <a href="../element/input#pattern"><code>pattern</code></a> attributes on <a href="../element/input"><code><input></code></a> elements </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/enterkeyhint" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fexportparts.html b/devdocs/html/global_attributes%2Fexportparts.html new file mode 100644 index 00000000..cbb80f48 --- /dev/null +++ b/devdocs/html/global_attributes%2Fexportparts.html @@ -0,0 +1,55 @@ +<header><h1>exportparts</h1></header><div class="section-content"> +<p>The <code>exportparts</code> <a href="../global_attributes">global attribute</a> allows you to select and style elements existing in nested <a href="https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree">shadow trees</a>, by exporting their <code>part</code> names.</p> <p> The shadow tree is an isolated structure where identifiers, classes, and styles cannot be reached by selectors or queries belonging to a regular DOM. To apply a style to an element living in a shadow tree, by CSS rule created outside of it, <a href="../global_attributes#part"><code>part</code></a> global attribute has to be used. It has to be assigned to an element present in Shadow Tree, and its value should be some identifier. Rules present outside of the shadow tree, must use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part</code></a> pseudo-element, containing the same identifier as the argument. </p> <p>The global attribute <a href="../global_attributes#part"><code>part</code></a> makes the element visible on just a single level of depth. When the shadow tree is nested, parts will be visible only to the parent of the shadow tree but not to its ancestor. Exporting parts further down is exactly what <code>exportparts</code> attribute is for.</p> <p>Attribute <code>exportparts</code> must be placed on a <em>shadow Host</em>, which is the element to which the <em>shadow tree</em> is attached. The value of the attribute should be a comma-separated list of part names present in the shadow tree and which should be made available via a DOM outside of the current structure.</p> +</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://drafts.csswg.org/css-shadow-parts/#element-attrdef-html-global-exportparts">CSS Shadow Parts <br><small># element-attrdef-html-global-exportparts</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>exportparts</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td>?</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">11.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/exportparts" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fhidden.html b/devdocs/html/global_attributes%2Fhidden.html new file mode 100644 index 00000000..7ab5cf9a --- /dev/null +++ b/devdocs/html/global_attributes%2Fhidden.html @@ -0,0 +1,140 @@ +<header><h1>hidden</h1></header><div class="section-content"><p>The <code>hidden</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicating that the browser should not render the contents of the element. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.</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-hidden.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p>The <code>hidden</code> attribute is used to indicate that the content of an element should not be presented to the user. This attribute can take any one of the following values:</p> <ul> <li>an empty string</li> <li>the keyword <code>hidden</code> +</li> <li>the keyword <code>until-found</code> +</li> </ul> <p>There are two states associated with the <code>hidden</code> attribute: the <em>hidden</em> state and the <em>hidden until found</em> state.</p> <ul> <li>An empty string, or the keyword <code>hidden</code>, set the element to the <em>hidden</em> state. Additionally, invalid values set the element to the <em>hidden</em> state.</li> <li>The keyword <code>until-found</code> sets the element to the <em>hidden until found</em> state.</li> </ul> <p>Thus, all the following set the element to the <a href="#the_hidden_state"><em>hidden</em></a> state:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="F6QSeMMmMzhH/YQwuFZG+tGfuv+WJ96PBn5zxBy93zg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token punctuation">></span></span>I'm hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm also hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>something else<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm hidden too!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The following sets the element to the <a href="#the_hidden_until_found_state"><em>hidden until found</em></a> state:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="arjxHMT0xZ28pDKZEfA6hIwFAX5UgUgITFKUufM7IQQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>until-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm hidden until found<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The <code>hidden</code> attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.</p> <p>Hidden elements shouldn't be linked from non-hidden elements. For example, it would be incorrect to use the <code>href</code> attribute to link to a section marked with the <code>hidden</code> attribute. If the content is not applicable or relevant, then there is no reason to link to it.</p> <p>It would be fine, however, to use the ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a> attribute to refer to descriptions that are themselves hidden. While hiding the descriptions implies that they are not useful on their own, they could be written in such a way that they are useful in the specific context of being referenced from the element that they describe.</p> <p>Similarly, a canvas element with the <code>hidden</code> attribute could be used by a scripted graphics engine as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.</p> <p>Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.</p> +</div> +<h3 id="the_hidden_state">The hidden state</h3> +<div class="section-content"> +<p>The <em>hidden</em> state indicates that the element is not currently relevant to the page, or that it is being used to declare content for reuse by other parts of the page and should not be directly presented to the user. The browser will not render elements that are in the <em>hidden</em> state.</p> <p>Web browsers may implement the <em>hidden</em> state using <code>display: none</code>, in which case the element will not participate in page layout. This also means that changing the value of the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code>display</code></a> property on an element in the <em>hidden</em> state will override the state. For instance, elements styled <code>display: block</code> will be displayed despite the <code>hidden</code> attribute's presence.</p> +</div> +<h3 id="the_hidden_until_found_state">The hidden until found state</h3> +<div class="section-content"> +<p>In the <em>hidden until found</em> state, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a <em>hidden until found</em> subtree, the browser will:</p> <ul> <li>fire a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event"><code>beforematch</code></a> event on the hidden element</li> <li>remove the <code>hidden</code> attribute from the element</li> <li>scroll to the element</li> </ul> <p>This enables a developer to collapse a section of content, but make it searchable and accessible via fragment navigation.</p> <p>Note that browsers typically implement <em>hidden until found</em> using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility"><code>content-visibility: hidden</code></a>. This means that unlike elements in the <em>hidden</em> state, elements in the <em>hidden until found</em> state will have generated boxes, meaning that:</p> <ul> <li>the element will participate in page layout</li> <li>margin, borders, padding, and background for the element will be rendered.</li> </ul> <p>Also, the element needs to be affected by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment">layout containment</a> in order to be revealed. This means that if the element in the <em>hidden until found</em> state has a <code>display</code> value of <code>none</code>, <code>contents</code>, or <code>inline</code>, then the element will not be revealed by find in page or fragment navigation.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="using_until-found">Using until-found</h3> +<div class="section-content"> +<p>In this example we have:</p> <ul> <li>Three <a href="../element/div"><code><div></code></a> elements. The first and the third are not hidden, while the second has <code>hidden="until-found"</code>and <code>id="until-found-box"</code> attributes.</li> <li>A link whose target is the <code>"until-found-box"</code> fragment.</li> </ul> <p>The hidden until found element has a dotted red border and a gray background.</p> <p>We also have some JavaScript that listens for the <code>beforematch</code> event firing on the hidden until found element. The event handler changes the text content of the box.</p> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Nm2LZ7wqgBvDiABN7iDpXhwSzmpuHx+2TEPF5NlSgKU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#until-found-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to hidden content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>I'm not hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>until-found-box<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>until-found<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hidden until found<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>I'm not hidden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="QUGQfj/+IUu+NKbU0+1TXJuDk9Iae8xvJjdYm/RH7hs=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 5px dashed black<span class="token punctuation">;</span> + <span class="token property">margin</span><span class="token punctuation">:</span> 1rem 0<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div#until-found-box</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 5px dotted red<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> lightgray<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="b8swrc4z2/GmaZzeCCtA+4mjq1wx9NfpkCElqlqR/9w=" data-language="js"><span class="token keyword">const</span> untilFound <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#until-found-box"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +untilFound<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"beforematch"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>untilFound<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">"I've been revealed!"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result">Result</h4> <p>Note that although the content of the element is hidden, the element still has a generated box, occupying space in the layout and with background and borders rendered.</p> <p>Clicking the "Go to hidden content" button navigates to the hidden until found element. The <code>beforematch</code> event fires, the text content is updated, and the element content is displayed.</p> <p>To run the example again, click "Reset".</p> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Using until-found sample" id="frame_using_until-found" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/hidden/runner.html?id=using_until-found" 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/interaction.html#the-hidden-attribute">HTML Standard <br><small># the-hidden-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>hidden</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>until-found_value</code></th> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">19.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden"><code>HTMLElement.hidden</code></a></li> <li>All <a href="../global_attributes">global attributes</a> +</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden"><code>aria-hidden</code></a> attribute</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/beforematch_event"><code>beforematch</code></a> event</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/hidden" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fid.html b/devdocs/html/global_attributes%2Fid.html new file mode 100644 index 00000000..4c25a489 --- /dev/null +++ b/devdocs/html/global_attributes%2Fid.html @@ -0,0 +1,61 @@ +<header><h1>id</h1></header><div class="section-content"><p>The <code>id</code> <a href="../global_attributes">global attribute</a> defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment">fragment identifier</a>), scripting, or styling (with <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a>).</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-id.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> This attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your IDs somewhat human-readable can be useful for code comprehension, e.g. consider <code>ticket-18659</code> versus <code>r45tgfe-freds&$@</code>).</p> </div> <p>An <code>id</code>'s value must not contain <a href="https://developer.mozilla.org/en-US/docs/Glossary/Whitespace">whitespace</a> (spaces, tabs, etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the <a href="../global_attributes#class"><code>class</code></a> attribute, which allows space-separated values, elements can only have one single ID value.</p> <p>Technically, the value for an <code>id</code> attribute may contain any character, except <a href="https://developer.mozilla.org/en-US/docs/Glossary/Whitespace">whitespace</a> characters. However, to avoid inadvertent errors, only <a href="https://developer.mozilla.org/en-US/docs/Glossary/ASCII">ASCII</a> letters, digits, <code>'_'</code>, and <code>'-'</code> should be used, and the value for an <code>id</code> attribute should start with a letter.</p> <p>For example, <code>.</code> has a special meaning in CSS (it starts a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">class selector</a>). While valid, unless you are careful to escape it when used as part of a CSS selector, it won't be recognized as part of the element's <code>id</code>. The same applies to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"><code>querySelector()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll"><code>querySelectorAll()</code></a> parameters, which use the same selector syntax. It is easy to forget to do this, resulting in bugs in your code that could be hard to detect.</p> <p>Similarly, an <code>id</code> starting with a digit (E.g., <code>1234-322-678</code>) or a hyphen followed by a digit (E.g., <code>-123</code>), though valid in HTML, may lead to problems when used in CSS, JavaScript, and Web APIs:</p> <ul> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors">ID selectors</a> accept any CSS identifier. If the <code>id</code> starts with a digit or one hyphen immediately followed by a digit, both the hyphen and digit must be escaped in CSS. For example, while <code>id="544-383-3388"</code> and <code>id="-3Pi"</code> are valid in HTML, the <code>id</code> selectors must be escaped. The element with these <code>id</code> values can be targeted in CSS with <code>#\35 44-383-3388</code> and <code>#\2D \33 pi</code>.</li> <li>Any valid HTML <code>id</code> value is valid as an attribute selector in CSS and JavaScript. The selectors <code>[id="544-383-3388"]</code> and <code>[id="-3Pi"]</code> are valid.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> and similar methods using CSS-selector-style queries will not find them unless you escape them. (See this <a href="https://codepen.io/estelle/pen/jOvzbgb" target="_blank">page</a> for an example.)</li> <li>Such an <code>id</code> is not a valid JavaScript identifier. <a href="https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties" target="_blank">Elements with IDs become global properties</a>, but you cannot use non-identifier global properties as global variables — <code>1234</code> is not a global variable, and you have to use <code>window[1234]</code> instead to get the element with <code>id="1234"</code>. This is slightly inconvenient as you have to create the variable with an extra step: <code>const element = window[1234]</code>.</li> </ul> +</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/dom.html#global-attributes:the-id-attribute-2">HTML Standard <br><small># global-attributes:the-id-attribute-2</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>id</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">32<details><summary>1–32</summary><code>id</code> is a true global attribute only since Firefox 32.</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">32<details><summary>4–32</summary><code>id</code> is a true global attribute only since Firefox 32.</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>All <a href="../global_attributes">global attributes</a>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>Element.id</code></a> that reflects this attribute.</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById"><code>Document.getElementById</code></a> method.</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors">ID selectors</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/id" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Finert.html b/devdocs/html/global_attributes%2Finert.html new file mode 100644 index 00000000..c416cb3a --- /dev/null +++ b/devdocs/html/global_attributes%2Finert.html @@ -0,0 +1,66 @@ +<header><h1>inert</h1></header><div class="section-content"> +<p>The <code>inert</code> <a href="../global_attributes">global attribute</a> is a Boolean attribute indicating that the browser will ignore the element. With the <code>inert</code> attribute, all of the element's flat tree descendants (such as modal <a href="../element/dialog"><code><dialog></code></a>s) that don't otherwise escape inertness are ignored. The <code>inert</code> attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.</p> <p>Specifically, <code>inert</code> does the following:</p> <ul> <li>Prevents the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event from being fired when the user clicks on the element.</li> <li>Prevents the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event"><code>focus</code></a> event from being raised by preventing the element from gaining focus.</li> <li>Hides the element and its content from assistive technologies by excluding them from the accessibility tree.</li> </ul> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Sy0vG9jUe76GIEXhlR7TLm+FSdd8YNAAi/KHJ1BpY4o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">inert</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- content --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The <code>inert</code> attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.</p> <p>The <code>inert</code> attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> While <code>inert</code> is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the <a href="../attributes/disabled"><code>disabled</code></a> attribute, along with CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled"><code>:disabled</code></a> styles, instead.</p> </div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Use careful consideration for accessibility when applying the <code>inert</code> attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.</p> <p>While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.</p> +</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/interaction.html#the-inert-attribute">HTML Standard <br><small># the-inert-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>inert</code></th> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">112</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">15.5</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">112</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-yes">15.5</td> +<td class="bc-supports-yes">19.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>HTML <a href="../element/dialog"><code><dialog></code></a> element</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"><code>HTMLElement.inert</code></a> HTML DOM property</li> <li><a href="https://developer.chrome.com/articles/inert/" target="_blank">Introducing inert</a></li> <li><a href="https://www.stefanjudis.com/blog/the-inert-attribute-is-finally-coming-to-the-web/" target="_blank">The "inert" attribute is finally coming to the web</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/inert" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Finputmode.html b/devdocs/html/global_attributes%2Finputmode.html new file mode 100644 index 00000000..8cfc1cd3 --- /dev/null +++ b/devdocs/html/global_attributes%2Finputmode.html @@ -0,0 +1,61 @@ +<header><h1>inputmode</h1></header><div class="section-content"> +<p> The <code>inputmode</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. </p> <p>It is used primarily on <a href="../element/input"><code><input></code></a> elements, but is usable on any element in <a href="../global_attributes#contenteditable"><code>contenteditable</code></a> mode.</p> <p>It's important to understand that the <code>inputmode</code> attribute doesn't cause any validity requirements to be enforced on input. To require that input conforms to a particular data type, choose an appropriate <a href="../element/input#input_types"><code><input> element type</code></a>. For specific guidance on choosing <a href="../element/input"><code><input></code></a> types, see the <a href="#values">Values</a> section.</p> +</div> +<h2 id="values">Values</h2> +<div class="section-content"> +<p>The attribute can have any of the following values:</p> <dl> <dt id="none"><a href="#none"><code>none</code></a></dt> <dd> <p> No virtual keyboard. For when the page implements its own keyboard input control. </p> </dd> <dt id="text"> +<a href="#text"><code>text</code></a> (default value)</dt> <dd> <p>Standard input keyboard for the user's current locale.</p> </dd> <dt id="decimal"><a href="#decimal"><code>decimal</code></a></dt> <dd> <p> Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically <kbd>.</kbd> or <kbd>,</kbd>). Devices may or may not show a minus key (<kbd>-</kbd>). </p> </dd> <dt id="numeric"><a href="#numeric"><code>numeric</code></a></dt> <dd> <p> Numeric input keyboard, but only requires the digits 0–9. Devices may or may not show a minus key. </p> </dd> <dt id="tel"><a href="#tel"><code>tel</code></a></dt> <dd> <p> A telephone keypad input, including the digits 0–9, the asterisk (<kbd>*</kbd>), and the pound (<kbd>#</kbd>) key. Inputs that *require* a telephone number should typically use <code><a href="../element/input/tel"><input type="tel"></a></code> instead. </p> </dd> <dt id="search"><a href="#search"><code>search</code></a></dt> <dd> <p> A virtual keyboard optimized for search input. For instance, the <a href="https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute" target="_blank">return/submit key</a> may be labeled "Search", along with possible other optimizations. Inputs that <em>require</em> a search query should typically use <code><a href="../element/input/search"><input type="search"></a></code> instead. </p> </dd> <dt id="email"><a href="#email"><code>email</code></a></dt> <dd> <p> A virtual keyboard optimized for entering email addresses. Typically includes the <kbd>@</kbd>character as well as other optimizations. Inputs that <em>require</em> email addresses should typically use <code><a href="../element/input/email"><input type="email"></a></code> instead. </p> </dd> <dt id="url"><a href="#url"><code>url</code></a></dt> <dd> <p> A keypad optimized for entering URLs. This may have the <kbd>/</kbd> key more prominent, for example. Enhanced features could include history access and so on. Inputs that <em>require</em> a URL should typically use <code><a href="../element/input/url"><input type="url"></a></code> instead. </p> </dd> </dl> +</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/interaction.html#attr-inputmode">HTML Standard <br><small># attr-inputmode</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>inputmode</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">9517–23</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">9.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li> +<a href="enterkeyhint"><code>enterkeyhint</code></a> global attribute</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/inputmode" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fis.html b/devdocs/html/global_attributes%2Fis.html new file mode 100644 index 00000000..dab03631 --- /dev/null +++ b/devdocs/html/global_attributes%2Fis.html @@ -0,0 +1,79 @@ +<header><h1>is</h1></header><div class="section-content"> +<p>The <code>is</code> <a href="../global_attributes">global attribute</a> allows you to specify that a standard HTML element should behave like a defined custom built-in element (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements">Using custom elements</a> for more details).</p> <p>This attribute can only be used if the specified custom element name has been successfully <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> in the current document, and extends the element type it is being applied to.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/main/word-count-web-component" target="_blank">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/" target="_blank">see it live also</a>).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="jVc95/umnT02cy/WQ+QXP/GX79Q/NzKV4VzHQjCaIMo=" data-language="js"><span class="token comment">// Create a class for the element</span> +<span class="token keyword">class</span> <span class="token class-name">WordCount</span> <span class="token keyword">extends</span> <span class="token class-name">HTMLParagraphElement</span> <span class="token punctuation">{</span> + <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Always call super first in constructor</span> + <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Constructor contents omitted for brevity</span> + <span class="token comment">// …</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +<span class="token comment">// Define the new element</span> +customElements<span class="token punctuation">.</span><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">"word-count"</span><span class="token punctuation">,</span> WordCount<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token string">"p"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="2HWc9XXr7N6633Peud0V5KO5Agg7fFBZQXZH96uYCqM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>word-count<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</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/custom-elements.html#attr-is">HTML Standard <br><small># attr-is</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>is</code></th> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">48</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">9.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/is" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fitemid.html b/devdocs/html/global_attributes%2Fitemid.html new file mode 100644 index 00000000..700a484b --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemid.html @@ -0,0 +1,81 @@ +<header><h1>itemid</h1></header><div class="section-content"> +<p>The <code>itemid</code> <a href="../global_attributes">global attribute</a> provides microdata in the form of a unique, global identifier of an item.</p> <p>An <code>itemid</code> attribute can only be specified for an element that has both <a href="itemscope"><code>itemscope</code></a> and <a href="itemtype"><code>itemtype</code></a> attributes. Also, <code>itemid</code> can only be specified on elements that possess an <code>itemscope</code> attribute whose corresponding <code>itemtype</code> refers to or defines a vocabulary that supports global identifiers.</p> <p>The exact meaning of an <code>itemtype</code>'s global identifier is provided by the definition of that identifier within the specified vocabulary. The vocabulary defines whether several items with the same global identifier can coexist and, if so, how items with the same identifier are handled.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> definition specifies that an <code>itemid</code> must be a <a href="https://developer.mozilla.org/en-US/docs/Glossary/URL">URL</a>. However, the following example correctly illustrates that a <a href="https://developer.mozilla.org/en-US/docs/Glossary/URN">URN</a> may also be used. This inconsistency may reflect the incomplete nature of the Microdata specification.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="representing_structured_data_for_a_book">Representing structured data for a book</h3> +<div class="section-content"> +<p>This example uses microdata attributes to represent the following structured data:</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="4">itemscope</td> <td>itemtype: itemid</td> <td colspan="2">https://schema.org/Book: urn:isbn:0-374-22848-5</td> </tr> <tr> <td>itemprop</td> <td>title</td> <td>Owls of the Eastern Ice</td> </tr> <tr> <td>itemprop</td> <td>author</td> <td>Jonathan C Slaght</td> </tr> <tr> <td>itemprop</td> <td>datePublished</td> <td>2020-08-04</td> </tr> </tbody> </table></div></figure> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="f12VTKQeCXMR126kL8ngzeBgfzbt2oDvxayU86J8AAI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Book<span class="token punctuation">"</span></span> + <span class="token attr-name">itemid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>urn:isbn:0-374-22848-5<<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Owls of the Eastern Ice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Author<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jonathan C Slaght<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Publication date<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datePublished<span class="token punctuation">"</span></span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-08-04<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 4 2020<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Representing structured data for a book sample" id="frame_representing_structured_data_for_a_book" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/itemid/runner.html?id=representing_structured_data_for_a_book" 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/microdata.html#attr-itemid">HTML Standard <br><small># attr-itemid</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>itemid</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li>Other microdata related global attributes: <ul> <li><a href="itemprop"><code>itemprop</code></a></li> <li><a href="itemref"><code>itemref</code></a></li> <li><a href="itemscope"><code>itemscope</code></a></li> <li><a href="itemtype"><code>itemtype</code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/itemid" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fitemprop.html b/devdocs/html/global_attributes%2Fitemprop.html new file mode 100644 index 00000000..8d2500aa --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemprop.html @@ -0,0 +1,292 @@ +<header><h1>itemprop</h1></header><div class="section-content"><p>The <code>itemprop</code> <a href="../global_attributes">global attribute</a> is used to add properties to an item. Every HTML element can have an <code>itemprop</code> attribute specified, and an <code>itemprop</code> consists of a name-value pair. Each name-value pair is called a <strong>property</strong>, and a group of one or more properties forms an <strong>item</strong>. Property values are either a string or a URL and can be associated with a very wide range of elements including <a href="../element/audio"><code><audio></code></a>, <a href="../element/embed"><code><embed></code></a>, <a href="../element/iframe"><code><iframe></code></a>, <a href="../element/img"><code><img></code></a>, <a href="../element/link"><code><link></code></a>, <a href="../element/object"><code><object></code></a>, <a href="../element/source"><code><source></code></a>, <a href="../element/track"><code><track></code></a>, and <a href="../element/video"><code><video></code></a>.</p></div> +<h2 id="examples">Examples</h2> +<div class="section-content"><p>The example below shows the source for a set of elements marked up with <code>itemprop</code> attributes, followed by a table showing the resulting structured data.</p></div> +<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="4fuEhewfYMp+3G7M8XVB6uclEuXkZu9JMHb8FeS6W7Y=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/Movie<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Avatar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + Director: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>director<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>James Cameron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + (born August 16, 1954) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>genre<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Science fiction<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../movies/avatar-theatrical-trailer.html<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trailer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Trailer + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="structured_data">Structured data</h3> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="2"></td> <th colspan="2"><strong>Item</strong></th> </tr> <tr> <th><strong>itemprop name</strong></th> <th><strong>itemprop value</strong></th> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Avatar</td> </tr> <tr> <td>itemprop</td> <td>director</td> <td>James Cameron</td> </tr> <tr> <td>itemprop</td> <td>genre</td> <td>Science fiction</td> </tr> <tr> <td>itemprop</td> <td>trailer</td> <td>../movies/avatar-theatrical-trailer.html</td> </tr> </tbody> </table></div></figure></div> +<h2 id="properties">Properties</h2> +<div class="section-content"><p>Properties have values that are either a string or a URL. When a string value is a URL, it is expressed using the <a href="../element/a"><code><a></code></a> element and its <a href="../element/a#href"><code>href</code></a> attribute, the <a href="../element/img"><code><img></code></a> element and its <a href="../element/img#src"><code>src</code></a> attribute, or other elements that link to or embed external resources.</p></div> +<h3 id="three_properties_with_values_that_are_strings">Three properties with values that are strings</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7CpSR2jQhdqT8T1cVJbFJuqi3EjPdT+65hjcTxoGvao=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>My name is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neil<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>My band is called <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>band<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Four Parts Water<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>I am <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nationality<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>British<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="one_property_image_whose_value_is_a_url">One property, "image", whose value is a URL</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="VMW0F1UxX+d/26dePnZsAR56t+VujRwCg7jESb5ku6A=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>google-logo.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Google<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>When a string value can't be easily read and understood by a person (e.g., a long string of numbers and letters), it can be displayed using the value attribute of the data element, with the more easily-understood-by-a human-version given in the element's contents (which is not part of the structured data - see example below).</p> +</div> +<h3 id="an_item_with_a_property_whose_value_is_a_product_id">An item with a property whose value is a product ID</h3> +<div class="section-content"> +<p>The ID is not human-friendly, so the product's name is used instead.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="BRvMnyrFG+L13D1acTXYX/N/kFoy2hI+jZaLy62RSUY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>data</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>product-id<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>9678AOU879<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The Instigator 2000<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>data</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +</pre> +</div> <p>For numeric data, the meter element and its value attribute can be used.</p> +</div> +<h3 id="a_meter_element">A meter element</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="An1ZhPBlng5iXkcIm2kTsBw9TeDmAr75137WES5DWlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/Product<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Panasonic White 60L Refrigerator<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panasonic-fridge-60l-white.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aggregateRating<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/AggregateRating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meter</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingValue<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<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>3.5<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Rated 3.5/5 + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>meter</span><span class="token punctuation">></span></span> + (based on <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reviewCount<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>11<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + customer reviews) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Similarly, for date- and time-related data, the time element and its datetime attribute can be used.</p> +</div> +<h3 id="an_item_with_one_property_birthday_whose_value_is_a_date">An item with one property, "birthday", whose value is a date</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DhjGMgjX0HCrnaEbQrOYT1Iot1KZvXbbCXxfN+4VuBo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + I was born on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>birthday<span class="token punctuation">"</span></span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1984-05-10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 10th 1984<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Properties can also be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property. Each value is either a string or a group of name-value pairs (i.e. an item).</p> +</div> +<h3 id="an_outer_item_representing_a_person_and_an_inner_one_representing_a_band">An outer item representing a person, and an inner one representing a band</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Y2XVKZR1OjKcoOBOcB+g+xl51P48HpA0MpXuGI+pizU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Amanda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Band: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>band<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jazz Band<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + (<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> players) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The outer item above has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12". The outer item in this example is a top-level microdata item. Items that are not part of others are called top-level microdata items.</p> +</div> +<h3 id="all_the_properties_separated_from_their_items">All the properties separated from their items</h3> +<div class="section-content"> +<p>This example is the same as the previous one, but all the properties are separated from their items.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EBplAOAbZOTJ5Lh3KSWI2ONHEuuszvP29DjQ2DF8giI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</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>amanda<span class="token punctuation">"</span></span> <span class="token attr-name">itemref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Amanda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>b<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>band<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Band: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jazz Band<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Size: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> players<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".</p> <p>An item can have multiple properties with the same name and different values.</p> +</div> +<h3 id="ice_cream_with_two_flavors">Ice cream with two flavors</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="qYOFkSpFyZhIskxvtcVszptf3YtWQuLmTxecvh29mdU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Flavors in my favorite ice cream:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flavor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lemon sorbet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flavor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Apricot sorbet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>This results in an item with two properties, both with the name "flavor" and having the values "Lemon sorbet" and "Apricot sorbet".</p> <p>An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.</p> +</div> +<h3 id="an_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange">An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="dmOoDllG+lhLl6KHvWbk37PxXpcRVbehXXfkQa7tpbc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favorite-color + favorite-fruit<span class="token punctuation">"</span></span> + <span class="token punctuation">></span></span>orange + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> There is no relationship between the microdata and the content of the document where the microdata is marked up.</p> </div> +</div> +<h3 id="same_structured_data_marked_up_in_two_different_ways">Same structured data marked up in two different ways</h3> +<div class="section-content"> +<p>There is no semantic difference between the following two examples</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="DmljQtPRP07RmRxNp9VdamudRlGT4pbyDLBkXPWhx0U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>castle.jpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The Castle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> (1986) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="GTRWXkDpmrOZK2601BooMYzFKoYBc9D1/N1DlhJ9ZfE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The Castle<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>castle.jpeg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>The Castle (1986)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Both have a figure with a caption, and both, completely unrelated to the figure, have an item with a name-value pair with the name "name" and the value "The Castle". The only difference is that if the user drags the figcaption out of the document, the item will be included in the drag-and-drop data. The image associated with the item won't be included.</p> +</div> +<h2 id="names_and_values">Names and values</h2> +<div class="section-content"><p>A property is an unordered set of unique tokens that are case-sensitive and represent the name-value pairs. The property value must have at least one token. In the example below, each data cell is a token.</p></div> +<h3 id="names_examples">Names examples</h3> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="standard-table"> <thead> <tr> <th rowspan="2" scope="col"></th> <th colspan="2" scope="col">Item</th> </tr> <tr> <th scope="col">itemprop <strong>name</strong> +</th> <th scope="col">itemprop <strong>value</strong> +</th> </tr> </thead> <tbody> <tr> <th>itemprop</th> <td>country</td> <td>Ireland</td> </tr> <tr> <th>itemprop</th> <td>Option</td> <td>2</td> </tr> <tr> <th>itemprop</th> <td>https://www.flickr.com/photos/nlireland/6992065114/</td> <td>Ring of Kerry</td> </tr> <tr> <th>itemprop</th> <td>img</td> <td>https://www.flickr.com/photos/nlireland/6992065114/</td> </tr> <tr> <th>itemprop</th> <td>website</td> <td>flickr</td> </tr> <tr> <th>itemprop</th> <td>(token)</td> <td>(token)</td> </tr> </tbody> </table></div></figure> <p><strong>Tokens</strong> are either strings or URL's. An item is called a <strong>typed item</strong> if it is a URL. Otherwise, it is a string. Strings cannot contain a period or a colon (see below).</p> <ol> <li>If the item is a typed item it must be either: <ol> <li>A defined property name, or</li> <li>A valid URL, which refers to the vocabulary definition, or</li> <li>A valid URL that is used as a proprietary item property name (i.e. one not defined in a public specification), or</li> </ol> </li> <li>If the item is not a typed item it must be: <ol> <li>A string that contains no "<code>.</code>" (U+002E FULL STOP) characters and no "<code>:</code>" characters (U+003A COLON) and is used as a proprietary item property name (again, one not defined in a public specification).</li> </ol> </li> </ol> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> The rules above disallow ":" characters in non-URL values because otherwise they could not be distinguished from URLs. Values with "." characters are reserved for future extensions. Space characters are disallowed because otherwise the values would be parsed as multiple tokens.</p> </div> +</div> +<h2 id="values">Values</h2> +<div class="section-content"> +<p>The property value of a name-value pair is as given for the first matching case in the following list:</p> <ul> <li>If the element has an <code>itemscope</code> attribute <ul> <li>The value is the <strong>item</strong> created by the element</li> </ul> </li> <li>If the element is a <code>meta</code> element <ul> <li>The value is the value of the element's <code>content</code> attribute</li> </ul> </li> <li>If the element is an <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>source</code>, <code>track</code>, or <code>video</code> element <ul> <li>The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the <a href="../microdata">Microdata DOM API</a>) of the element at the time the attribute is set</li> </ul> </li> <li>If the element is an <code>a</code>, <code>area</code>, or <code>link</code> element <ul> <li>The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set</li> </ul> </li> <li>If the element is an <code>object</code> element <ul> <li>The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set</li> </ul> </li> <li>If the element is a <code>data</code> element <ul> <li>The value is the value of the element's value attribute</li> </ul> </li> <li>If the element is a <code>meter</code> element <ul> <li>The value is the value of the element's <code>value</code> attribute</li> </ul> </li> <li>If the element is a <code>time</code> element <ul> <li>The value is the element's <code>datetime</code> value</li> </ul> </li> </ul> <p>Otherwise</p> <ul> <li>The value is the element's <em>textContent</em>.</li> </ul> <p>If a property's value is a <code>URL</code>, the property must be specified using a URL property element. The URL property elements are the <code>a</code>, <code>area</code>, <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>link</code>, <code>object</code>, <code>source</code>, <code>track</code>, and <code>video</code> elements.</p> +</div> +<h3 id="name_order">Name order</h3> +<div class="section-content"> +<p>Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p> <p>In the following example, the "a" property has the values "1" and "2", <em>in that order</em>, but whether the "a" property comes before the "b" property or not is not important.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="xFEqWjkjo6ilJyJ9W5e8BGTubU7PaQ3/I6tUAichAb4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here are several equivalent examples:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5oJkjkkRVdfIindRa1uY2M7971unAirwKKALwl0KTtA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="JZ+bX5t1B7XvrGwvNGoW/Ezsp55AO1dxmjjX9pSO6G0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="u9HP93CW5GobFWZWWWQsD0UfiwjQ8IRW5iRKdpVbGlU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>x<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="representing_structured_data_for_a_book">Representing structured data for a book</h3> +<div class="section-content"> +<p>This example uses microdata attributes to represent the following structured data:</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="4">itemscope</td> <td>itemtype: itemid</td> <td colspan="2">https://schema.org/Book: urn:isbn:0-374-22848-5</td> </tr> <tr> <td>itemprop</td> <td>title</td> <td>Owls of the Eastern Ice</td> </tr> <tr> <td>itemprop</td> <td>author</td> <td>Jonathan C Slaght</td> </tr> <tr> <td>itemprop</td> <td>datePublished</td> <td>2020-08-04</td> </tr> </tbody> </table></div></figure> <h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="f12VTKQeCXMR126kL8ngzeBgfzbt2oDvxayU86J8AAI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Book<span class="token punctuation">"</span></span> + <span class="token attr-name">itemid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>urn:isbn:0-374-22848-5<<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Owls of the Eastern Ice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Author<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jonathan C Slaght<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Publication date<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datePublished<span class="token punctuation">"</span></span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-08-04<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 4 2020<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Representing structured data for a book sample" id="frame_representing_structured_data_for_a_book" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/itemprop/runner.html?id=representing_structured_data_for_a_book" 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/microdata.html#names:-the-itemprop-attribute">HTML Standard <br><small># names:-the-itemprop-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>itemprop</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../global_attributes">Other different global attributes</a></li> <li>Other microdata related global attributes: <ul> <li><a href="itemid"><code>itemid</code></a></li> <li><a href="itemref"><code>itemref</code></a></li> <li><a href="itemscope"><code>itemscope</code></a></li> <li><a href="itemtype"><code>itemtype</code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/itemprop" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fitemref.html b/devdocs/html/global_attributes%2Fitemref.html new file mode 100644 index 00000000..1e6eda9e --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemref.html @@ -0,0 +1,87 @@ +<header><h1>itemref</h1></header><div class="section-content"> +<p>Properties that are not descendants of an element with the <a href="itemscope"><code>itemscope</code></a> attribute can be associated with an item using the <a href="../global_attributes">global attribute</a> <code>itemref</code>.</p> <p><code>itemref</code> provides a list of element IDs (not <code>itemid</code>s) elsewhere in the document, with additional properties</p> <p>The <code>itemref</code> attribute can only be specified on elements that have an <code>itemscope</code> attribute specified.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>itemref</code> attribute is not part of the microdata data model. It is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. For example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells.</p> </div> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="representing_structured_data_for_a_band">Representing structured data for a band</h3> +<div class="section-content"> +<p>This example uses microdata attributes to represent the following structured data (in <a href="https://json-ld.org/" target="_blank">JSON-LD</a> format):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">json</span></p> +<pre data-signature="5jNQMtf3O3MRZQx7fZ9yYG5u9+qWyZHWHMU1biaoWz0=" data-language="json"><span class="token punctuation">{</span> + <span class="token property">"@id"</span><span class="token operator">:</span> <span class="token string">"amanda"</span><span class="token punctuation">,</span> + <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Amanda"</span><span class="token punctuation">,</span> + <span class="token property">"band"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@id"</span><span class="token operator">:</span> <span class="token string">"b"</span><span class="token punctuation">,</span> + <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jazz Band"</span><span class="token punctuation">,</span> + <span class="token property">"size"</span><span class="token operator">:</span> <span class="token number">12</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="EBplAOAbZOTJ5Lh3KSWI2ONHEuuszvP29DjQ2DF8giI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</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>amanda<span class="token punctuation">"</span></span> <span class="token attr-name">itemref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a b<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</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>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Name: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Amanda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>b<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>band<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>c<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Band: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jazz Band<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Size: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> players<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Representing structured data for a band sample" id="frame_representing_structured_data_for_a_band" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/itemref/runner.html?id=representing_structured_data_for_a_band" 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/microdata.html#attr-itemref">HTML Standard <br><small># attr-itemref</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>itemref</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../global_attributes">Other different global attributes</a></li> <li>Other microdata related global attributes: <ul> <li><a href="itemid"><code>itemid</code></a></li> <li><a href="itemprop"><code>itemprop</code></a></li> <li><a href="itemscope"><code>itemscope</code></a></li> <li><a href="itemtype"><code>itemtype</code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/itemref" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fitemscope.html b/devdocs/html/global_attributes%2Fitemscope.html new file mode 100644 index 00000000..4e514030 --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemscope.html @@ -0,0 +1,146 @@ +<header><h1>itemscope</h1></header><div class="section-content"> +<p><code>itemscope</code> is a boolean <a href="../global_attributes">global attribute</a> that defines the scope of associated metadata. Specifying the <code>itemscope</code> attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element.</p> <p>A related attribute, <a href="itemtype"><code>itemtype</code></a>, is used to specify the valid URL of a vocabulary (such as <a href="https://schema.org/" target="_blank">schema.org</a>) that describes the item and its properties context. In each of the following examples, the vocabulary is from <a href="https://schema.org/" target="_blank">schema.org</a>.</p> <p>Every HTML element may have an <code>itemscope</code> attribute specified. An <code>itemscope</code> element that does not have an associated <code>itemtype</code> must have an associated <code>itemref</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Find more about <code>itemtype</code> attributes at <a href="https://schema.org/Thing" target="_blank">https://schema.org/Thing</a></p> </div> +</div> +<h3 id="itemscope_id_attributes">itemscope id attributes</h3> +<div class="section-content"><p>When you specify the <code>itemscope</code> attribute for an element, a new item is created. The item consists of a group of name-value pairs. For elements with an <code>itemscope</code> attribute and an <code>itemtype</code> attribute, you may also specify an <a href="../global_attributes#id"><code>id</code></a> attribute. You can use the <code>id</code> attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.</p></div> +<h2 id="examples">Examples</h2> + +<h3 id="representing_structured_data_for_a_movie">Representing structured data for a movie</h3> +<div class="section-content"> +<p>The following example specifies the <code>itemtype</code> as "<a href="https://schema.org/Movie" target="_blank">http://schema.org/Movie</a>", and specifies four related <code>itemprop</code> attributes.</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="6">itemscope</td> <td>Itemtype</td> <td colspan="2">Movie</td> </tr> <tr> <td>itemprop</td> <td>(itemprop name)</td> <td>(itemprop value)</td> </tr> <tr> <td>itemprop</td> <td>director</td> <td>James Cameron</td> </tr> <tr> <td>itemprop</td> <td>genre</td> <td>Science Fiction</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Avatar</td> </tr> <tr> <td>itemprop</td> <td>Trailer</td> <td>https://youtu.be/0AY1XIkX7bY</td> </tr> </tbody> </table></div></figure> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/jnmuaB40gNQHsxKvvBlo9HFqLfh1j4lgexitkqw0Ek=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Movie<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Avatar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + Director: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>director<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>James Cameron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> (born August 16, + 1954) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>genre<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Science fiction<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://youtu.be/0AY1XIkX7bY<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trailer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Trailer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> +</div> +<h3 id="representing_structured_data_for_a_recipe">Representing structured data for a recipe</h3> +<div class="section-content"> +<p>There are four <code>itemscope</code> attributes in the following example. Each <code>itemscope</code> attribute sets the scope of its corresponding <code>itemtype</code> attribute. The <code>itemtype</code>s, <code>Recipe</code>, <code>AggregateRating</code>, and <code>NutritionInformation</code> in the following example are part of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/www.schema.org">schema.org</a> structured data for a recipe, as specified by the first <code>itemtype</code>, <code>http://schema.org/Recipe</code>.</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="14">itemscope</td> <td>itemtype</td> <td colspan="2">Recipe</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Grandma's Holiday Apple Pie</td> </tr> <tr> <td>itemprop</td> <td>image</td> <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> </tr> <tr> <td>itemprop</td> <td>datePublished</td> <td>2022-11-05</td> </tr> <tr> <td>itemprop</td> <td>description</td> <td> This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. </td> </tr> <tr> <td>itemprop</td> <td>prepTime</td> <td>PT30M</td> </tr> <tr> <td>itemprop</td> <td>cookTime</td> <td>PT1H</td> </tr> <tr> <td>itemprop</td> <td>totalTime</td> <td>PT1H30M</td> </tr> <tr> <td>itemprop</td> <td>recipeYield</td> <td>1 9" pie (8 servings)</td> </tr> <tr> <td>itemprop</td> <td>recipeIngredient</td> <td>Thinly-sliced apples: 6 cups</td> </tr> <tr> <td>itemprop</td> <td>recipeIngredient</td> <td>White sugar: 3/4 cup</td> </tr> <tr> <td>itemprop</td> <td>recipeInstructions</td> <td> 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples. </td> </tr> <tr> <td>itemprop</td> <td colspan="2">author [Person]</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Carol Smith</td> </tr> <tr> <td rowspan="3">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">aggregateRating [AggregateRating]</td> </tr> <tr> <td>itemprop</td> <td>ratingValue</td> <td>4.0</td> </tr> <tr> <td>itemprop</td> <td>reviewCount</td> <td>35</td> </tr> <tr> <td rowspan="4">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">nutrition [NutritionInformation]</td> </tr> <tr> <td>itemprop</td> <td>servingSize</td> <td>1 medium slice</td> </tr> <tr> <td>itemprop</td> <td>calories</td> <td>250 cal</td> </tr> <tr> <td>itemprop</td> <td>fatContent</td> <td>12 g</td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> A handy tool for extracting microdata structures from HTML is Google's <a href="https://search.google.com/test/rich-results" target="_blank">Rich Results Testing Tool</a>. Try it on the HTML shown here.</p> </div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Nc5+66S0COEP5o5spiAEVMIRBcVtEnRhgAXJYhcguxg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Recipe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Grandma's Holiday Apple Pie<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + By + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Person<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Carol Smith<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Published: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-11-05<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datePublished<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + November 5, 20022 + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aggregateRating<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/AggregateRating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4.0<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> stars based on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reviewCount<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>35<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> reviews + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Prep time: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>PT30M<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prepTime<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>30 min<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Cook time: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>PT1H<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cookTime<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1 hour<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Total time: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>PT1H30M<span class="token punctuation">"</span></span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>totalTime<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1 hour 30 min<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Yield: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>recipeYield<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1 9" pie (8 servings)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nutrition<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/NutritionInformation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Serving size: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>servingSize<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1 medium slice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Calories per serving: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>calories<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>250 cal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Fat per serving: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fatContent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>12 g<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Ingredients:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>recipeIngredient<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Thinly-sliced apples: 6 cups<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>recipeIngredient<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>White sugar: 3/4 cup<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + … + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + Directions: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>recipeInstructions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + 1. Cut and peel apples<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + … + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Representing structured data for a recipe sample" id="frame_representing_structured_data_for_a_recipe" height="550" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/itemscope/runner.html?id=representing_structured_data_for_a_recipe" 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/microdata.html#attr-itemscope">HTML Standard <br><small># attr-itemscope</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>itemscope</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../global_attributes">Other different global attributes</a></li> <li>Other microdata related global attributes: <ul> <li><a href="itemid"><code>itemid</code></a></li> <li><a href="itemprop"><code>itemprop</code></a></li> <li><a href="itemref"><code>itemref</code></a></li> <li><a href="itemtype"><code>itemtype</code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/itemscope" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fitemtype.html b/devdocs/html/global_attributes%2Fitemtype.html new file mode 100644 index 00000000..545af42d --- /dev/null +++ b/devdocs/html/global_attributes%2Fitemtype.html @@ -0,0 +1,117 @@ +<header><h1>itemtype</h1></header><div class="section-content"> +<p>The <a href="../global_attributes">global attribute</a> <code>itemtype</code> specifies the URL of the vocabulary that will be used to define <code>itemprop</code>'s (item properties) in the data structure.</p> <p><a href="itemscope"><code>itemscope</code></a> is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</p> <p>Google and other major search engines support the <a href="https://schema.org/" target="_blank">schema.org</a> vocabulary for structured data. This vocabulary defines a standard set of type names and property names. For example, <code>MusicEvent</code> indicates a concert performance, with <a href="https://schema.org/startDate" target="_blank"><code>startDate</code></a> and <a href="https://schema.org/location" target="_blank"><code>location</code></a> properties specifying the concert's key details. In this case, <a href="https://schema.org/MusicEvent" target="_blank"><code>MusicEvent</code></a> would be the URL used by <code>itemtype</code>, with <code>startDate</code> and location as <code>itemprop</code>'s which <a href="https://schema.org/MusicEvent" target="_blank"><code>MusicEvent</code></a> defines.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> More about <code>itemtype</code> attributes can be found at <a href="https://schema.org/Thing" target="_blank">https://schema.org/Thing</a></p> </div> <ul> <li>The <strong>itemtype</strong> attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a valid and absolute URL, and all defined to use the same vocabulary. The attribute's value must have at least one token.</li> <li>The item types must all be types defined in applicable specifications (such as <a href="https://schema.org/" target="_blank">schema.org</a>), and must all be defined to use the same vocabulary.</li> <li>The itemtype attribute can only be specified on elements which have an itemscope attribute specified.</li> <li>The itemid attribute can only be specified on elements which have both an itemscope attribute and an itemtype attribute specified. They must only be specified on elements with an itemscope attribute, whose itemtype attribute specifies a vocabulary not supporting global identifiers for items, as defined by that vocabulary's specification.</li> <li>The exact meaning of a global identifier is determined by the vocabulary's specification. It is left to such specifications to define whether multiple items of the same global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same ID.</li> </ul> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="representing_structured_data_for_a_product">Representing structured data for a product</h3> +<div class="section-content"> +<p>This example uses microdata attributes to represent structured data for a product, as follows:</p> <figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="7">itemscope</td> <td>itemtype</td> <td colspan="2">Product (http://schema.org/Product)</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Executive Anvil</td> </tr> <tr> <td>itemprop</td> <td>image</td> <td>https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png</td> </tr> <tr> <td>itemprop</td> <td>description</td> <td> Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height. </td> </tr> <tr> <td>itemprop</td> <td>mpn</td> <td>925872</td> </tr> <tr> <td>itemprop</td> <td>brand [Thing]</td> <td></td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>ACME</td> </tr> <tr> <td rowspan="9">itemscope</td> <td>itemprop[itemtype]</td> <td>aggregateRating[AggregateRating]</td> <td></td> </tr> <tr> <td>itemprop</td> <td>ratingValue</td> <td>4.4</td> </tr> <tr> <td>itemprop</td> <td>reviewCount</td> <td>89</td> </tr> <tr> <td>itemprop</td> <td>offers [Offer]</td> <td>http://schema.org/Offer</td> </tr> <tr> <td>itemprop</td> <td>priceCurrency</td> <td>USD</td> </tr> <tr> <td>itemprop</td> <td>price</td> <td>119.99</td> </tr> <tr> <td>itemprop</td> <td>priceValidUntil</td> <td>2020-11-05</td> </tr> <tr> <td>itemprop</td> <td>itemCondition</td> <td>http://schema.org/UsedCondition</td> </tr> <tr> <td>itemprop</td> <td>availability</td> <td>http://schema.org/InStock</td> </tr> <tr> <td rowspan="2">itemscope</td> <td>itemprop[itemtype]</td> <td>seller [Organization]</td> <td>http://schema.org/Organization</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Executive Objects</td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> A handy tool for extracting microdata structures from HTML is Google's <a href="https://developers.google.com/search/docs/advanced/structured-data" target="_blank">Structured Data Testing Tool</a>. Try it on the HTML shown here.</p> </div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="xs0NtuqHCCP+Qfk487VHIXmN3tnXyemKldYW3YZ2MMA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/Product<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>brand<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ACME<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Executive Anvil<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png<span class="token punctuation">"</span></span> + <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> + <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> + <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Executive Anvil logo<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the + business traveler looking for something to drop from a height. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + + Product #: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mpn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>925872<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aggregateRating<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/AggregateRating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Rating: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4.4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> stars, based on + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>reviewCount<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>89 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> reviews + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>offers<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/Offer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Regular price: $179.99<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>priceCurrency<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>price<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sale price: $119.99<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + (Sale ends + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>priceValidUntil<span class="token punctuation">"</span></span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-11-05<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5 November!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>) + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + Available from: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seller<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/Organization<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Executive Objects<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + Condition: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>itemCondition<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/UsedCondition<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Previously owned, in excellent + condition<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>availability<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/InStock<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>In stock! + Order now! + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Representing structured data for a product sample" id="frame_representing_structured_data_for_a_product" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/itemtype/runner.html?id=representing_structured_data_for_a_product" 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/microdata.html#attr-itemtype">HTML Standard <br><small># attr-itemtype</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>itemtype</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="../global_attributes">Other different global attributes</a></li> <li>Other microdata related global attributes: <ul> <li><a href="itemid"><code>itemid</code></a></li> <li><a href="itemprop"><code>itemprop</code></a></li> <li><a href="itemref"><code>itemref</code></a></li> <li><a href="itemscope"><code>itemscope</code></a></li> </ul> </li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/itemtype" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Flang.html b/devdocs/html/global_attributes%2Flang.html new file mode 100644 index 00000000..81c5959c --- /dev/null +++ b/devdocs/html/global_attributes%2Flang.html @@ -0,0 +1,152 @@ +<header><h1>lang</h1></header><div class="section-content"> +<p>The <code>lang</code> <a href="../global_attributes">global attribute</a> helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in <a href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank">RFC 5646: Tags for Identifying Languages (also known as BCP 47)</a>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The default value of <code>lang</code> is <code>unknown</code>, therefore it is recommended to always specify this attribute with the appropriate value.</p> </div> +</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-lang.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If the attribute value is the <em>empty string</em> (<code>lang=""</code>), the language is set to <em>unknown</em>; if the language tag is not valid according to BCP47, it is set to <em>invalid</em>.</p> <p>Even if the <strong>lang</strong> attribute is set, it may not be taken into account, as the <a href="../global_attributes#lang"><strong>xml:lang</strong></a> attribute has priority.</p> <p>For the CSS pseudo-class <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code>:lang</code></a>, two invalid language names are different if their names are different. So while <code>:lang(es)</code> matches both <code>lang="es-ES"</code> and <code>lang="es-419"</code>, <code>:lang(xyzzy)</code> would <em>not</em> match <code>lang="xyzzy-Zorp!"</code>.</p> +</div> +<h2 id="language_tag_syntax">Language tag syntax</h2> +<div class="section-content"> +<p>The full BCP47 syntax is in-depth enough to mark extremely specific language dialects, but most usage is much simpler.</p> <p>A language tag is made of hyphen-separated <em>language subtags</em>, where each subtag indicates a certain property of the language. The 3 most common subtags are:</p> <dl> <dt id="language_subtag"><a href="#language_subtag">Language subtag</a></dt> <dd> <p>Required. A 2-or-3-character code that defines the basic language, typically written in all lowercase. For example, the language code for English is <code>en</code>, and the code for Badeshi is <code>bdz</code>.</p> </dd> <dt id="script_subtag"><a href="#script_subtag">Script subtag</a></dt> <dd> <p>Optional. This subtag defines the writing system used for the language, and is always 4 characters long, with the first letter capitalized. For example, French-in-Braille is <code>fr-Brai</code> and <code>ja-Kana</code> is Japanese written with the Katakana alphabet. If the language is written in a highly typical way, like English in the Latin alphabet, there is no need to use this subtag.</p> </dd> <dt id="region_subtag"><a href="#region_subtag">Region subtag</a></dt> <dd> <p>Optional. This subtag defines a dialect of the base language from a particular location, and is either 2 letters in ALLCAPS matching a country code, or 3 numbers matching a non-country area. For example, <code>es-ES</code> is for Spanish as spoken in Spain, and <code>es-013</code> is Spanish as spoken in Central America. "International Spanish" would just be <code>es</code>.</p> </dd> </dl> <p>The script subtag precedes the region subtag if both are present — <code>ru-Cyrl-BY</code> is Russian, written in the Cyrillic alphabet, as spoken in Belarus.</p> <p>To find the correct subtag codes for a language, try <a href="https://r12a.github.io/app-subtags/" target="_blank">the Language Subtag Lookup</a>.</p> +</div> +<h2 id="accessibility">Accessibility</h2> +<div class="section-content"> +<p>WCAG Success Criterion 3.1.1 <strong>requires</strong> that a page language is specified in a way which may be 'programmatically determined' (i.e. via the <code>lang</code> attribute).</p> <p>WCAG Success Criterion 3.1.2 requires that pages with <strong>parts</strong> in different languages have the languages of those parts specified too. Again, the <code>lang</code> attribute is the correct mechanism for this.</p> <p>The purpose of these requirements is primarily to allow assistive technologies such as screen readers to invoke the correct pronunciation.</p> <p>For example, the language menu on this site (MDN) includes a <code>lang</code> attribute for each entry:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="y3yB1x93uZAsGHTTxMVv0dvFg5QHO1ARkAS4SB5LaSQ=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>dropdown-container language-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>header-language-menu<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>button<span class="token punctuation">"</span></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>dropdown-menu-label<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-haspopup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-owns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>language-menu<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Current language is English. Choose your preferred language.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + English + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>dropdown-arrow-down<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>▼<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>language-menu<span class="token punctuation">"</span></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>dropdown-menu-items right show<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> + <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ca<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/ca/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Catalan<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Català<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/de/docs/Web/HTML/Globale_Attribute/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>German<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Deutsch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>es<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/es/docs/Web/HTML/Atributos_Globales/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Spanish<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Español<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fr<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fr/docs/Web/HTML/Attributs_universels/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>French<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Français<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ja<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/ja/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Japanese<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>日本語<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ko<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/ko/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Korean<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>한국어<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pt-BR<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/pt-BR/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Portuguese (Brazilian)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Português (do<span class="token entity named-entity">&nbsp;</span>Brasil)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/ru/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Russian<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Русский<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>uk<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Ukrainian<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>Українська<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-Hans<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menuitem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/zh-CN/docs/Web/HTML/Global_attributes/lang<span class="token punctuation">"</span></span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Chinese (Simplified)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>bdi</span><span class="token punctuation">></span></span>中文 (简体)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>bdi</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/en-US/docs/Web/HTML/Global_attributes/lang$locales<span class="token punctuation">"</span></span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nofollow<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>translations-add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Add a translation + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</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/dom.html#attr-lang">HTML Standard <br><small># attr-lang</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>lang</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>All <a href="../global_attributes">global attributes</a>.</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP Header</a></li> <li>HTML <a href="../global_attributes#translate"><code>translate</code></a> attribute</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/lang" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fnonce.html b/devdocs/html/global_attributes%2Fnonce.html new file mode 100644 index 00000000..82cdea4a --- /dev/null +++ b/devdocs/html/global_attributes%2Fnonce.html @@ -0,0 +1,113 @@ +<header><h1>nonce</h1></header><div class="section-content"><p> The <code>nonce</code> <a href="../global_attributes">global attribute</a> is a content attribute defining a cryptographic nonce ("number used once") which can be used by <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> to determine whether or not a given fetch will be allowed to proceed for a given element. </p></div> +<h2 id="description">Description</h2> +<div class="section-content"> +<p> The <code>nonce</code> attribute is useful to allowlist specific elements, such as a particular inline script or style elements. It can help you to avoid using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a> <code>unsafe-inline</code> directive, which would allowlist <em>all</em> inline scripts or styles. </p> <div class="notecard note" id="sect1"> <p> <strong>Note:</strong> Only use <code>nonce</code> for cases where you have no way around using unsafe inline script or style contents. If you don't need <code>nonce</code>, don't use it. If your script is static, you could also use a CSP hash instead. (See usage notes on <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script">unsafe inline script</a>.) Always try to take full advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">CSP</a> protections and avoid nonces or unsafe inline scripts whenever possible. </p> </div> +</div> +<h3 id="using_nonce_to_allowlist_a_script_element">Using nonce to allowlist a <script> element</h3> +<div class="section-content"> +<p>There are a few steps involved to allowlist an inline script using the nonce mechanism:</p> <h4 id="generating_values">Generating values</h4> <p> From your web server, generate a random base64-encoded string of at least 128 bits of data from a cryptographically secure random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="zB67V+cco1wa0pAli8kumuOzdGYLWKCjHlP3XEjixdI=" data-language="js"><span class="token keyword">const</span> crypto <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"crypto"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +crypto<span class="token punctuation">.</span><span class="token function">randomBytes</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token string">"base64"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token comment">// '8IBTHwOdqNKAWeKl7plt8g=='</span> +</pre> +</div> <h4 id="allowlisting_inline_script">Allowlisting inline script</h4> <p>The nonce generated on your backend code should now be used for the inline script that you'd like to allowlist:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/tbYLnfwT3nAHyAmZ34j2NeBASwkbHO17OIz1j7dww4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">nonce</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8IBTHwOdqNKAWeKl7plt8g==<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token comment">// …</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="sending_a_nonce_with_a_csp_header">Sending a nonce with a CSP header</h4> <p> Finally, you'll need to send the nonce value in a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> header (prepend <code>nonce-</code>): </p> <div class="code-example"> +<p class="example-header"><span class="language-name">http</span></p> +<pre data-signature="ofiWNqhGUZPyuFmL6RH8FcJ7x2+/Hsm19dtZhn6HaiI=" data-language="http"><span class="token header"><span class="token header-name keyword">Content-Security-Policy</span><span class="token punctuation">:</span> <span class="token header-value csp languages-csp">script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='</span></span> +</pre> +</div> +</div> +<h3 id="accessing_nonces_and_nonce_hiding">Accessing nonces and nonce hiding</h3> +<div class="section-content"> +<p>For security reasons, the <code>nonce</code> content attribute is hidden (an empty string will be returned).</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="vcL61plJ0VvPNb64YjMBAJFNGZ0iWWKVDIv9+S1GId0=" data-language="js">script<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"nonce"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// returns empty string</span> +</pre> +</div> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce"><code>nonce</code></a> property is the only way to access nonces:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="Z7QBT2SqRQcL8xBxFXe2jZUxiSa4amxUPgiIShO37ro=" data-language="js">script<span class="token punctuation">.</span>nonce<span class="token punctuation">;</span> <span class="token comment">// returns nonce value</span> +</pre> +</div> <p> Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="7jcEtfhRt2s3WYAb5vuVO2C3mmcrN89eUhPgKa1r8QI=" data-language="css"><span class="token selector">script[nonce~="whatever"]</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"https://evil.com/nonce?whatever"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</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/urls-and-fetching.html#attr-nonce">HTML Standard <br><small># attr-nonce</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>nonce</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>nonce_hiding</code></th> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">75</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">48</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">61</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">45</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">8.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce"><code>HTMLElement.nonce</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a></li> <li>CSP: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/nonce" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fpart.html b/devdocs/html/global_attributes%2Fpart.html new file mode 100644 index 00000000..d036bcfe --- /dev/null +++ b/devdocs/html/global_attributes%2Fpart.html @@ -0,0 +1,55 @@ +<header><h1>part</h1></header><div class="section-content"> +<p>The <code>part</code> <a href="../global_attributes">global attribute</a> contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part</code></a> pseudo-element.</p> <p>See our <a href="https://mdn.github.io/web-components-examples/shadow-part/" target="_blank">Shadow part example</a> for a usage example.</p> +</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://drafts.csswg.org/css-shadow-parts/#part-attr">CSS Shadow Parts <br><small># part-attr</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>part</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">11.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/part" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fpopover.html b/devdocs/html/global_attributes%2Fpopover.html new file mode 100644 index 00000000..f2a8c05c --- /dev/null +++ b/devdocs/html/global_attributes%2Fpopover.html @@ -0,0 +1,65 @@ +<header><h1>popover</h1></header><div class="section-content"> +<p>The <code>popover</code> <a href="../global_attributes">global attribute</a> is used to designate an element as a popover element.</p> <p>Popover elements are hidden via <code>display: none</code> until opened via an invoking/control element (i.e. a <code><button></code> or <code><input type="button"></code> with a <a href="../element/button#popovertarget"><code>popovertarget</code></a> attribute) or a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover"><code>HTMLElement.showPopover()</code></a> call.</p> <p>When open, popover elements will appear above all other elements in the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Top_layer">top layer</a>, and won't be influenced by parent elements' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position"><code>position</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow"><code>overflow</code></a> styling.</p> <p> A popover attribute can have values <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#auto_state_and_light_dismiss"><code>"auto"</code></a> (default) or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#using_manual_popover_state"><code>"manual"</code></a>. Popovers that have the <code>auto</code> state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, <code>manual</code> popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus. </p> <p>For detailed information on usage, see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> landing page.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>The following will render a button which will open a popover element.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="7v3uh3jeL5lI4RisD3HJLrDXuIM+pPMWtwYF7G3ml10=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">popovertarget</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-popover<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Open Popover<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">popover</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>my-popover<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Greetings, one and all!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> See our <a href="https://mdn.github.io/dom-examples/popover-api/" target="_blank">Popover API examples landing page</a> to access the full collection of MDN popover examples.</p> </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/popover.html#the-popover-attribute">HTML Standard <br><small># the-popover-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>popover</code></th> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">100</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-no">No</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/popover" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fslot.html b/devdocs/html/global_attributes%2Fslot.html new file mode 100644 index 00000000..93ce3bdb --- /dev/null +++ b/devdocs/html/global_attributes%2Fslot.html @@ -0,0 +1,60 @@ +<header><h1>slot</h1></header><div class="section-content"> +<p>The <code>slot</code> <a href="../global_attributes">global attribute</a> assigns a slot in a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the <a href="../element/slot"><code><slot></code></a> element whose <a href="../element/slot#name"><code>name</code></a> attribute's value matches that <code>slot</code> attribute's value.</p> <p>For examples, see our <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots">Using templates and slots</a> guide.</p> +</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/dom.html#attr-slot">HTML Standard <br><small># attr-slot</small></a></td></tr> +<tr><td><a href="#">DOM Standard <br><small># ref-for-dom-element-slot①</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>slot</code></th> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">6.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>HTML <a href="../global_attributes">global attributes</a> +</li> <li>HTML <a href="../element/slot"><code><slot></code></a> element</li> <li>HTML <a href="../element/template"><code><template></code></a> element</li> <li>CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted"><code>::slotted</code></a> pseudo-element</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scoping">CSS scoping</a> module</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web components</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/slot" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fspellcheck.html b/devdocs/html/global_attributes%2Fspellcheck.html new file mode 100644 index 00000000..43756684 --- /dev/null +++ b/devdocs/html/global_attributes%2Fspellcheck.html @@ -0,0 +1,62 @@ +<header><h1>spellcheck</h1></header><div class="section-content"><p>The <code>spellcheck</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that defines whether the element may be checked for spelling errors.</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-spellcheck.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It may have the following values:</p> <ul> <li>empty string or <code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> <li> +<code>false</code>, which indicates that the element should not be checked for spelling errors.</li> </ul> <p>If this attribute is not set, its default value is element-type and browser-defined. This default value may also be <em>inherited</em>, which means that the element content will be checked for spelling errors only if its nearest ancestor has a <em>spellcheck</em> state of <code>true</code>.</p> <p>This attribute is merely a hint for the browser: browsers are not required to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the <code>spellcheck</code> attribute is set to <code>true</code> and the browser supports spellchecking.</p> +</div> +<h2 id="security_and_privacy_concerns">Security and privacy concerns</h2> +<div class="section-content"> +<p> Using spellchecking can have consequences for users' security and privacy. The specification does not regulate <em>how</em> spellchecking is done and the content of the element may be sent to a third party for spellchecking results (see <a href="https://www.otto-js.com/news/article/chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords" target="_blank">enhanced spellchecking and "spell-jacking"</a>). </p> <p>You should consider setting <code>spellcheck</code> to <code>false</code> for elements that can contain sensitive information.</p> +</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/interaction.html#attr-spellcheck">HTML Standard <br><small># attr-spellcheck</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>spellcheck</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">5.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/spellcheck" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fstyle.html b/devdocs/html/global_attributes%2Fstyle.html new file mode 100644 index 00000000..607bd37e --- /dev/null +++ b/devdocs/html/global_attributes%2Fstyle.html @@ -0,0 +1,57 @@ +<header><h1>style</h1></header><div class="section-content"><p>The <code>style</code> <a href="../global_attributes">global attribute</a> contains <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <a href="../element/style"><code><style></code></a> element have mainly the purpose of allowing for quick styling, for example for testing purposes.</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-style.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the <a href="hidden"><code>hidden</code></a> attribute.</p> </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/dom.html#the-style-attribute">HTML Standard <br><small># the-style-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>style</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">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">4</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"><p>All <a href="../global_attributes">global attributes</a>.</p></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/style" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Ftabindex.html b/devdocs/html/global_attributes%2Ftabindex.html new file mode 100644 index 00000000..7d3abad8 --- /dev/null +++ b/devdocs/html/global_attributes%2Ftabindex.html @@ -0,0 +1,64 @@ +<header><h1>tabindex</h1></header><div class="section-content"><p>The <code>tabindex</code> <a href="../global_attributes">global attribute</a> allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the <kbd>Tab</kbd> key, hence the name) and determine their relative ordering for sequential focus navigation.</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/attribute-tabindex.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It accepts an integer as a value, with different results depending on the integer's value:</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If an HTML element renders and has <code>tabindex</code> attribute with any valid integer value, the element can be focused with JavaScript (by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus"><code>focus()</code></a> method) or visually by clicking with the mouse. The particular <code>tabindex</code> value controls whether the element is <code>tabbable</code> (i.e. reachable via sequential keyboard navigation, usually with the <kbd>Tab</kbd> key).</p> </div> <ul> <li>A <em>negative value</em> (the exact negative value doesn't actually matter, usually <code>tabindex="-1"</code>) means that the element is not reachable via sequential keyboard navigation. <div class="notecard note" id="sect2"> <p><strong>Note:</strong> <code>tabindex="-1"</code> may be useful for elements that should not be navigated to directly using the <kbd>Tab</kbd> key, but need to have keyboard focus set to them. Examples include an off-screen modal window that should be focused when it comes into view, or a form submission error message that should be immediately focused when an errant form is submitted.</p> </div> </li> <li> +<code>tabindex="0"</code> means that the element should be focusable in sequential keyboard navigation, after any positive <code>tabindex</code> values. The focus navigation order of these elements is defined by their order in the document source.</li> <li>A <em>positive value</em> means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, <code>tabindex="4"</code> is focused before <code>tabindex="5"</code> and <code>tabindex="0"</code>, but after <code>tabindex="3"</code>. If multiple elements share the same positive <code>tabindex</code> value, their order relative to each other follows their position in the document source. The maximum value for <code>tabindex</code> is 32767.</li> <li>If the <code>tabindex</code> attribute is included with no value set, whether the element is focusable is determined by the user agent. <div class="notecard warning" id="sect3"> <p><strong>Warning:</strong> You are recommended to only use <code>0</code> and <code>-1</code> as <code>tabindex</code> values. Avoid using <code>tabindex</code> values greater than <code>0</code> and CSS properties that can change the order of focusable HTML elements (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items">Ordering flex items</a>). Doing so makes it difficult for people who rely on using keyboard for navigation or assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.</p> </div> </li> </ul> <p>Some focusable HTML elements have a default <code>tabindex</code> value of <code>0</code> set under the hood by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. These elements are an <a href="../element/a"><code><a></code></a> or <a href="../element/area"><code><area></code></a> with <code>href</code> attribute, <a href="../element/button"><code><button></code></a>, <a href="../element/frame"><code><frame></code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>, <a href="../element/iframe"><code><iframe></code></a>, <a href="../element/input"><code><input></code></a>, <a href="../element/object"><code><object></code></a>, <a href="../element/select"><code><select></code></a>, <a href="../element/textarea"><code><textarea></code></a>, and SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a"><code><a></code></a> element, or a <a href="../element/summary"><code><summary></code></a> element that provides summary for a <a href="../element/details"><code><details></code></a> element. Developers shouldn't add the <code>tabindex</code> attribute to these elements unless it changes the default behavior (for example, including a negative value will remove the element from the focus navigation order).</p> <div class="notecard warning" id="sect4"> <p><strong>Warning:</strong> The tabindex attribute must not be used on the <a href="../element/dialog"><code><dialog></code></a> element.</p> </div> +</div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Avoid using the <code>tabindex</code> attribute in conjunction with non-<a href="../content_categories#interactive_content">interactive content</a> to make something intended to be interactive focusable by keyboard input. An example of this would be using a <a href="../element/div"><code><div></code></a> element to describe a button, instead of the <a href="../element/button"><code><button></code></a> element.</p> <p>Interactive components authored using non-interactive elements are not listed in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">accessibility tree</a>. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (<a href="../element/a"><code><a></code></a>, <a href="../element/button"><code><button></code></a>, <a href="../element/details"><code><details></code></a>, <a href="../element/input"><code><input></code></a>, <a href="../element/select"><code><select></code></a>, <a href="../element/textarea"><code><textarea></code></a>, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a>.</p> <ul> <li><a href="https://www.tpgi.com/using-the-tabindex-attribute/" target="_blank">Using the tabindex attribute | The Paciello Group</a></li> </ul> +</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/interaction.html#attr-tabindex">HTML Standard <br><small># attr-tabindex</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>tabindex</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1.5</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</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>All <a href="../global_attributes">global attributes</a> +</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex"><code>HTMLElement.tabIndex</code></a> that reflects this attribute</li> <li>Accessibility problems with <code>tabindex</code>: see <a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" target="_blank">Don't Use Tabindex Greater than 0</a> by Adrian Roselli</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/tabindex" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Ftitle.html b/devdocs/html/global_attributes%2Ftitle.html new file mode 100644 index 00000000..c8e5d27d --- /dev/null +++ b/devdocs/html/global_attributes%2Ftitle.html @@ -0,0 +1,130 @@ +<header><h1>title</h1></header><div class="section-content"><p>The <code>title</code> <a href="../global_attributes">global attribute</a> contains text representing advisory information related to the element it belongs to.</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-title.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The main use of the <code>title</code> attribute is to label <a href="../element/iframe"><code><iframe></code></a> elements for assistive technology.</p> <p>The <code>title</code> attribute may also be used to label controls in <a href="../element/table">data tables</a>.</p> <p>The <code>title</code> attribute, when added to <a href="../element/link"><code><link rel="stylesheet"></code></a>, creates an alternate stylesheet. When defining an alternative style sheet with <code><link rel="alternate"></code> the attribute is required and must be set to a non-empty string.</p> <p>If included on the <a href="../element/abbr"><code><abbr></code></a> opening tag, the <code>title</code> must be a full expansion of the abbreviation or acronym. Instead of using <code>title</code>, when possible, provide an expansion of the abbreviation or acronym in plain text on first use, using the <code><abbr></code> to mark up the abbreviation. This enables all users know what name or term the abbreviation or acronym shortens while providing a hint to user agents on how to announce the content.</p> <p>While <code>title</code> can be used to provide a programmatically associated label for an <a href="../element/input"><code><input></code></a> element, this is not good practice. Use a <a href="../element/label"><code><label></code></a> instead.</p> +</div> +<h2 id="multiline_titles">Multiline titles</h2> +<div class="section-content"><p>The <code>title</code> attribute may contain several lines. Each <code>U+000A LINE FEED</code> (<code>LF</code>) character represents a line break. Some caution must be taken, as this means the following renders across two lines:</p></div> +<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="rZFoecw5DBZN3D/B8wU0SXjFWo0dXWZT+mKsh8OCdWg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Newlines in <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> should be taken into account. This + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> + <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a +multiline title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + example span + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + has a title a attribute with a newline. +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</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>output<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>We can query the <code>title</code> attribute and display it in the empty <code><pre></code> element as follows:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="2sHnmckLz36QaQ/uho1UXgjKK93qj9sT+TaqWr7bLh0=" data-language="js"><span class="token keyword">const</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> output <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#output"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +output<span class="token punctuation">.</span>textContent <span class="token operator">=</span> span<span class="token punctuation">.</span>title<span class="token punctuation">;</span> +</pre> +</div> +</div> +<h3 id="result">Result</h3> +<div class="section-content"><div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Multiline titles sample" id="frame_multiline_titles" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/title/runner.html?id=multiline_titles" loading="lazy"></iframe> +</div></div> +<h2 id="title_attribute_inheritance">Title attribute inheritance</h2> +<div class="section-content"> +<p>If an element has no <code>title</code> attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.</p> <p>If this attribute is set to the empty string, it means its ancestors' <code>title</code>s are irrelevant and shouldn't be used in the tooltip for this element.</p> +</div> +<h3 id="html_2">HTML</h3> +<div class="section-content"><div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="XhoqRzoi2iLZ/Gv9+XVusZ4VYTtjKOddw8ult7y4U1I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CoolTip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Hovering here will show "CoolTip".<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hovering here will show nothing.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="result_2">Result</h3> +<div class="section-content"><div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Title attribute inheritance sample" id="frame_title_attribute_inheritance" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Global_attributes/title/runner.html?id=title_attribute_inheritance" loading="lazy"></iframe> +</div></div> +<h2 id="accessibility_concerns">Accessibility concerns</h2> +<div class="section-content"> +<p>Use of the <code>title</code> attribute is highly problematic for:</p> <ul> <li>People using touch-only devices</li> <li>People navigating with keyboards</li> <li>People navigating with assistive technology such as screen readers or magnifiers</li> <li>People experiencing fine motor control impairment</li> <li>People with cognitive concerns</li> </ul> <p>This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to <a href="https://inclusive-components.design/tooltips-toggletips/" target="_blank">use a more accessible technique</a> that can be accessed with the above browsing methods.</p> <ul> <li><a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute" target="_blank">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> <li><a href="https://www.tpgi.com/using-the-html-title-attribute-updated/" target="_blank">Using the HTML title attribute – updated | The Paciello Group</a></li> <li><a href="https://inclusive-components.design/tooltips-toggletips/" target="_blank">Tooltips & Toggletips - Inclusive Components</a></li> <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/" target="_blank">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li> </ul> +</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/dom.html#the-title-attribute">HTML Standard <br><small># the-title-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>title</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>multi-line-support</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title"><code>HTMLElement.title</code></a> that reflects this attribute.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/title" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Ftranslate.html b/devdocs/html/global_attributes%2Ftranslate.html new file mode 100644 index 00000000..c9a58da7 --- /dev/null +++ b/devdocs/html/global_attributes%2Ftranslate.html @@ -0,0 +1,67 @@ +<header><h1>translate</h1></header><div class="section-content"> +<p>The <code>translate</code> <a href="../global_attributes">global attribute</a> is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute that is used to specify whether an element's <em>translatable attribute</em> values and its <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text"><code>Text</code></a> node children should be translated when the page is localized, or whether to leave them unchanged.</p> <p>It can have the following values:</p> <ul> <li>empty string or <code>yes</code>, which indicates that the element should be translated when the page is localized.</li> <li> +<code>no</code>, which indicates that the element must not be translated.</li> </ul> <p>Although not all browsers recognize this attribute, it is respected by automatic translation systems such as Google Translate, and may also be respected by tools used by human translators. As such it's important that web authors use this attribute to mark content that should not be translated.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>In this example, the <code>translate</code> attribute is used to ask translation tools not to translate the company's brand name in the footer.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YUR8JX+HWnFFzd5xwMM0gCS0CxT53hVfauSW2dh1TGM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>© 2020 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">translate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>BrandName<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> +</pre> +</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/dom.html#attr-translate">HTML Standard <br><small># attr-translate</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>translate</code></th> +<td class="bc-supports-yes">19</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>.</li> <li>The <a class="page-not-created"><code>HTMLElement.translate</code></a> property that reflects this attribute.</li> <li> +<a href="https://www.w3.org/International/questions/qa-translate-flag" target="_blank">Using HTML's translate attribute</a>.</li> <li>HTML <a href="../global_attributes#lang"><code>lang</code></a> attribute</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/translate" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate</a> + </p> +</div> diff --git a/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html b/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html new file mode 100644 index 00000000..03158320 --- /dev/null +++ b/devdocs/html/global_attributes%2Fvirtualkeyboardpolicy.html @@ -0,0 +1,60 @@ +<header><h1>virtualkeyboardpolicy</h1></header><div class="section-content"> +<div class="notecard experimental" id="sect1"><p><strong>Experimental:</strong> <strong>This is an <a href="https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental">experimental technology</a></strong><br>Check the <a href="#browser_compatibility">Browser compatibility table</a> carefully before using this in production.</p></div> <p>The <code>virtualkeyboardpolicy</code> <a href="../global_attributes">global attribute</a> is an enumerated attribute. When specified on an element that also uses the <a href="../global_attributes#contenteditable"><code>contenteditable</code></a> attribute, it controls the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.</p> <p>The attribute must take one of the following values:</p> <ul> <li> +<code>auto</code> or an <em>empty string</em>, which automatically shows the virtual keyboard when the element is focused or tapped.</li> <li> +<code>manual</code>, which decouples focus and tap on the element from the virtual keyboard's state.</li> </ul> +</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://w3c.github.io/virtual-keyboard/#dom-elementcontenteditable-virtualkeyboardpolicy">VirtualKeyboard API <br><small># dom-elementcontenteditable-virtualkeyboardpolicy</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>virtualkeyboardpolicy</code></th> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a> +</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable"><code>HTMLElement.contentEditable</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/isContentEditable"><code>HTMLElement.isContentEditable</code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API">The VirtualKeyboard API</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes/virtualkeyboardpolicy" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy</a> + </p> +</div> diff --git a/devdocs/html/global_attributes.html b/devdocs/html/global_attributes.html new file mode 100644 index 00000000..f84d2a96 --- /dev/null +++ b/devdocs/html/global_attributes.html @@ -0,0 +1,638 @@ +<header><h1>Global attributes</h1></header><div class="section-content"> +<p><strong>Global attributes</strong> are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.</p> <p>Global attributes may be specified on all <a href="element">HTML elements</a>, <em>even those not specified in the standard</em>. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <code><foo hidden>…</foo></code>, even though <code><foo></code> is not a valid HTML element.</p> <p>In addition to the basic HTML global attributes, the following global attributes also exist:</p> <ul> <li> +<code>xml:lang</code> and <code>xml:base</code> — these are inherited from the XHTML specifications and deprecated, but kept for compatibility purposes.</li> <li>The ARIA <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"><code>role</code></a> attribute and the multiple <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes"><code>aria-*</code></a> states and properties, used for ensuring accessibility.</li> <li>The <a href="attributes#event_handler_attributes">event handler</a> attributes: <code>onabort</code>, <code>onautocomplete</code>, <code>onautocompleteerror</code>, <code>onblur</code>, <code>oncancel</code>, <code>oncanplay</code>, <code>oncanplaythrough</code>, <code>onchange</code>, <code>onclick</code>, <code>onclose</code>, <code>oncontextmenu</code>, <code>oncuechange</code>, <code>ondblclick</code>, <code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onerror</code>, <code>onfocus</code>, <code>oninput</code>, <code>oninvalid</code>, <code>onkeydown</code>, <code>onkeypress</code>, <code>onkeyup</code>, <code>onload</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onmousedown</code>, <code>onmouseenter</code>, <code>onmouseleave</code>, <code>onmousemove</code>, <code>onmouseout</code>, <code>onmouseover</code>, <code>onmouseup</code>, <code>onmousewheel</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onreset</code>, <code>onresize</code>, <code>onscroll</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onselect</code>, <code>onshow</code>, <code>onsort</code>, <code>onstalled</code>, <code>onsubmit</code>, <code>onsuspend</code>, <code>ontimeupdate</code>, <code>ontoggle</code>, <code>onvolumechange</code>, <code>onwaiting</code>.</li> </ul> +</div> +<h2 id="list_of_global_attributes">List of global attributes</h2> +<div class="section-content"> +<dl> <dt id="sect1"><a href="global_attributes/accesskey"><code>accesskey</code></a></dt> <dd> <p>Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout.</p> </dd> <dt id="sect2"><a href="global_attributes/autocapitalize"><code>autocapitalize</code></a></dt> <dd> <p>Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values:</p> <ul> <li> +<code>off</code> or <code>none</code>, no autocapitalization is applied (all letters default to lowercase)</li> <li> +<code>on</code> or <code>sentences</code>, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase</li> <li> +<code>words</code>, the first letter of each word defaults to a capital letter; all other letters default to lowercase</li> <li> +<code>characters</code>, all letters should default to uppercase</li> </ul> </dd> <dt id="sect3"><a href="global_attributes/autofocus"><code>autofocus</code></a></dt> <dd> <p>Indicates that an element is to be focused on page load, or as soon as the <a href="element/dialog"><code><dialog></code></a> it is part of is displayed. This attribute is a boolean, initially false.</p> </dd> <dt id="sect4"><a href="global_attributes/class"><code>class</code></a></dt> <dd> <p>A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">class selectors</a> or functions like the method <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName"><code>Document.getElementsByClassName()</code></a>.</p> </dd> <dt id="sect5"><a href="global_attributes/contenteditable"><code>contenteditable</code></a></dt> <dd> <p>An <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:</p> <ul> <li> +<code>true</code> or the <em>empty string</em>, which indicates that the element must be editable;</li> <li> +<code>false</code>, which indicates that the element must not be editable.</li> </ul> </dd> <dt id="sect6"> +<a href="global_attributes/contextmenu"><code>contextmenu</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The <a href="#id"><code>id</code></a> of a <a href="element/menu"><code><menu></code></a> to use as the contextual menu for this element.</p> </dd> <dt id="sect7"><a href="global_attributes/data-*"><code>data-*</code></a></dt> <dd> <p>Forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the <a href="index">HTML</a> and its <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a> representation that may be used by scripts. All such custom data are available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> interface of the element the attribute is set on. The <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset"><code>HTMLElement.dataset</code></a> property gives access to them.</p> </dd> <dt id="sect8"><a href="global_attributes/dir"><code>dir</code></a></dt> <dd> <p>An enumerated attribute indicating the directionality of the element's text. It can have the following values:</p> <ul> <li> +<code>ltr</code>, which means <em>left to right</em> and is to be used for languages that are written from the left to the right (like English);</li> <li> +<code>rtl</code>, which means <em>right to left</em> and is to be used for languages that are written from the right to the left (like Arabic);</li> <li> +<code>auto</code>, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element.</li> </ul> </dd> <dt id="sect9"><a href="global_attributes/draggable"><code>draggable</code></a></dt> <dd> <p>An enumerated attribute indicating whether the element can be dragged, using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and Drop API</a>. It can have the following values:</p> <ul> <li> +<code>true</code>, which indicates that the element may be dragged</li> <li> +<code>false</code>, which indicates that the element may not be dragged.</li> </ul> </dd> <dt id="sect10"><a href="global_attributes/enterkeyhint"><code>enterkeyhint</code></a></dt> <dd> <p>Hints what action label (or icon) to present for the enter key on virtual keyboards.</p> </dd> <dt id="sect11"> +<a href="global_attributes/exportparts"><code>exportparts</code></a> <abbr class="icon icon-experimental" title="Experimental. Expect behavior to change in the future."> <span class="visually-hidden">Experimental</span> </abbr> +</dt> <dd> <p>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</p> </dd> <dt id="sect12"><a href="global_attributes/hidden"><code>hidden</code></a></dt> <dd> <p>An enumerated attribute indicating that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</p> </dd> <dt id="sect13"><a href="global_attributes/id"><code>id</code></a></dt> <dd> <p>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</p> </dd> <dt id="sect14"><a href="global_attributes/inert"><code>inert</code></a></dt> <dd> <p>A boolean value that makes the browser disregard user input events for the element. Useful when click events are present.</p> </dd> <dt id="sect15"><a href="global_attributes/inputmode"><code>inputmode</code></a></dt> <dd> <p>Provides a hint to browsers about the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on <a href="element/input"><code><input></code></a> elements, but is usable on any element while in <a href="#contenteditable"><code>contenteditable</code></a> mode.</p> </dd> <dt id="sect16"><a href="global_attributes/is"><code>is</code></a></dt> <dd> <p>Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements">Using custom elements</a> for more details).</p> </dd> </dl> <div class="notecard note" id="sect17"> <p><strong>Note:</strong> The <code>item*</code> attributes are part of the <a href="https://html.spec.whatwg.org/multipage/microdata.html#microdata" target="_blank">WHATWG HTML Microdata feature</a>.</p> </div> <dl> <dt id="sect18"><a href="global_attributes/itemid"><code>itemid</code></a></dt> <dd> <p>The unique, global identifier of an item.</p> </dd> <dt id="sect19"><a href="global_attributes/itemprop"><code>itemprop</code></a></dt> <dd> <p>Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</p> </dd> <dt id="sect20"><a href="global_attributes/itemref"><code>itemref</code></a></dt> <dd> <p>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <code>itemref</code>. It provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</p> </dd> <dt id="sect21"><a href="global_attributes/itemscope"><code>itemscope</code></a></dt> <dd> <p><code>itemscope</code> (usually) works along with <a href="global_attributes/itemtype"><code>itemtype</code></a> to specify that the HTML contained in a block is about a particular item. <code>itemscope</code> creates the Item and defines the scope of the <code>itemtype</code> associated with it. <code>itemtype</code> is a valid URL of a vocabulary (such as <a href="https://schema.org/" target="_blank">schema.org</a>) that describes the item and its properties context.</p> </dd> <dt id="sect22"><a href="global_attributes/itemtype"><code>itemtype</code></a></dt> <dd> <p>Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>s (item properties) in the data structure. <a href="global_attributes/itemscope"><code>itemscope</code></a> is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</p> </dd> <dt id="sect23"><a href="global_attributes/lang"><code>lang</code></a></dt> <dd> <p>Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one "language tag" (made of hyphen-separated "language subtags") in the format defined in <a href="https://datatracker.ietf.org/doc/html/rfc5646" target="_blank">RFC 5646: Tags for Identifying Languages (also known as BCP 47)</a>. <code>xml:lang</code> has priority over it.</p> </dd> <dt id="sect24"><a href="global_attributes/nonce"><code>nonce</code></a></dt> <dd> <p>A cryptographic nonce ("number used once") which can be used by <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> to determine whether or not a given fetch will be allowed to proceed.</p> </dd> <dt id="sect25"><a href="global_attributes/part"><code>part</code></a></dt> <dd> <p>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part"><code>::part</code></a> pseudo-element.</p> </dd> <dt id="sect26"><a href="global_attributes/popover"><code>popover</code></a></dt> <dd> <p>Used to designate an element as a popover element (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a>). Popover elements are hidden via <code>display: none</code> until opened via an invoking/control element (i.e. a <code><button></code> or <code><input type="button"></code> with a <a href="element/button#popovertarget"><code>popovertarget</code></a> attribute) or a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover"><code>HTMLElement.showPopover()</code></a> call.</p> </dd> <dt id="sect27"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"><code>role</code></a></dt> <dd> <p>Roles define the semantic meaning of content, allowing screen readers and other tools to present and support interaction with an object in a way that is consistent with user expectations of that type of object. <code>roles</code> are added to HTML elements using <code>role="role_type"</code>, where <code>role_type</code> is the name of a role in the ARIA specification.</p> </dd> <dt id="sect28"><a href="global_attributes/slot"><code>slot</code></a></dt> <dd> <p>Assigns a slot in a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code> attribute is assigned to the slot created by the <a href="element/slot"><code><slot></code></a> element whose <a href="element/slot#name"><code>name</code></a> attribute's value matches that <code>slot</code> attribute's value.</p> </dd> <dt id="sect29"><a href="global_attributes/spellcheck"><code>spellcheck</code></a></dt> <dd> <p>An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:</p> <ul> <li>empty string or <code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> <li> +<code>false</code>, which indicates that the element should not be checked for spelling errors.</li> </ul> </dd> <dt id="sect30"><a href="global_attributes/style"><code>style</code></a></dt> <dd> <p>Contains <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <a href="element/style"><code><style></code></a> element have mainly the purpose of allowing for quick styling, for example for testing purposes.</p> </dd> <dt id="sect31"><a href="global_attributes/tabindex"><code>tabindex</code></a></dt> <dd> <p>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:</p> <ul> <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> <li> +<code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="#tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> </ul> </dd> <dt id="sect32"><a href="global_attributes/title"><code>title</code></a></dt> <dd> <p>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</p> </dd> <dt id="sect33"><a href="global_attributes/translate"><code>translate</code></a></dt> <dd> <p>An enumerated attribute that is used to specify whether an element's attribute values and the values of its <a href="https://developer.mozilla.org/en-US/docs/Web/API/Text"><code>Text</code></a> node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values:</p> <ul> <li>empty string or <code>yes</code>, which indicates that the element will be translated.</li> <li> +<code>no</code>, which indicates that the element will not be translated.</li> </ul> </dd> <dt id="sect34"><a href="global_attributes/virtualkeyboardpolicy"><code>virtualkeyboardpolicy</code></a></dt> <dd> <p>An <a href="https://developer.mozilla.org/en-US/docs/Glossary/Enumerated">enumerated</a> attribute used to control the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available for elements that also uses the <a href="#contenteditable"><code>contenteditable</code></a> attribute.</p> <ul> <li> +<code>auto</code> or an <em>empty string</em>, which automatically shows the virtual keyboard when the element is focused or tapped.</li> <li> +<code>manual</code>, which decouples focus and tap on the element from the virtual keyboard's state.</li> </ul> </dd> </dl> +</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/interaction.html#the-accesskey-attribute">HTML Standard <br><small># the-accesskey-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-autocapitalize">HTML Standard <br><small># attr-autocapitalize</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete">HTML Standard <br><small># attr-fe-autocomplete</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#dom-fe-autofocus">HTML Standard <br><small># dom-fe-autofocus</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes:classes-2">HTML Standard <br><small># global-attributes:classes-2</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable">HTML Standard <br><small># attr-contenteditable</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#attr-data-*">HTML Standard <br><small># attr-data-*</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute">HTML Standard <br><small># the-dir-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dnd.html#the-draggable-attribute">HTML Standard <br><small># the-draggable-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-enterkeyhint">HTML Standard <br><small># attr-enterkeyhint</small></a></td></tr> +<tr><td><a href="https://drafts.csswg.org/css-shadow-parts/#element-attrdef-html-global-exportparts">CSS Shadow Parts <br><small># element-attrdef-html-global-exportparts</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">HTML Standard <br><small># the-hidden-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#global-attributes:the-id-attribute-2">HTML Standard <br><small># global-attributes:the-id-attribute-2</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute">HTML Standard <br><small># the-inert-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">HTML Standard <br><small># attr-inputmode</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is">HTML Standard <br><small># attr-is</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemid">HTML Standard <br><small># attr-itemid</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute">HTML Standard <br><small># names:-the-itemprop-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemref">HTML Standard <br><small># attr-itemref</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemscope">HTML Standard <br><small># attr-itemscope</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/microdata.html#attr-itemtype">HTML Standard <br><small># attr-itemtype</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#attr-lang">HTML Standard <br><small># attr-lang</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#attr-nonce">HTML Standard <br><small># attr-nonce</small></a></td></tr> +<tr><td><a href="https://drafts.csswg.org/css-shadow-parts/#part-attr">CSS Shadow Parts <br><small># part-attr</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute">HTML Standard <br><small># the-popover-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/popover.html#attr-popovertarget">HTML Standard <br><small># attr-popovertarget</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/popover.html#attr-popovertargetaction">HTML Standard <br><small># attr-popovertargetaction</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#attr-slot">HTML Standard <br><small># attr-slot</small></a></td></tr> +<tr><td><a href="#">DOM Standard <br><small># ref-for-dom-element-slot①</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-spellcheck">HTML Standard <br><small># attr-spellcheck</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#the-style-attribute">HTML Standard <br><small># the-style-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex">HTML Standard <br><small># attr-tabindex</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">HTML Standard <br><small># the-title-attribute</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/dom.html#attr-translate">HTML Standard <br><small># attr-translate</small></a></td></tr> +<tr><td><a href="https://w3c.github.io/virtual-keyboard/#dom-elementcontenteditable-virtualkeyboardpolicy">VirtualKeyboard API <br><small># dom-elementcontenteditable-virtualkeyboardpolicy</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>accesskey</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>autocapitalize</code></th> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">43</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">30</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">4.0</td> +</tr> +<tr> +<th><code>autocomplete</code></th> +<td class="bc-supports-yes"><details><summary>14</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>["In Chrome 66, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Chrome does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">≤12.1</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>["In Samsung Internet 9.0, support was added for the <code><textarea></code> and <code><select></code> elements.", "Originally only supported on the <code><input></code> element.", "Samsung Internet does not accept <code>off</code> as a value. See <a href="https://crbug.com/587466">bug 587466</a>."]</details></td> +</tr> +<tr> +<th><code>autofocus</code></th> +<td class="bc-supports-yes">79<details><summary>1–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes">79<details><summary>12–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>1</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes"><details><summary>10</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">66<details><summary>≤12.1–66</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>4</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">79<details><summary>≤37–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes">79<details><summary>18–79</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>4</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">57<details><summary>≤12.1–57</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +<td class="bc-supports-yes"><details><summary>3.2</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details></td> +<td class="bc-supports-yes">12.0<details><summary>1.0–12.0</summary>Supported for the <code><button></code>, <code><input></code>, <code><select></code>, and <code><textarea></code> elements.</details> +</td> +</tr> +<tr> +<th><code>class</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>contenteditable</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">5.5</td> +<td class="bc-supports-yes">9</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>contextmenu</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">9–85</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>32–56</summary>Support for the <code>contextmenu</code> attribute has been removed from Firefox for Android (See <a href="https://bugzil.la/1424252">bug 1424252</a>).</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>data_attributes</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>dir</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>draggable</code></th> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">5</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">14</td> +<td class="bc-supports-yes">4.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>enterkeyhint</code></th> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">77</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">12.0</td> +</tr> +<tr> +<th><code>exportparts</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td>?</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>hidden</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>id</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">32<details><summary>1–32</summary><code>id</code> is a true global attribute only since Firefox 32.</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">32<details><summary>4–32</summary><code>id</code> is a true global attribute only since Firefox 32.</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> +<tr> +<th><code>inert</code></th> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">112</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">15.5</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">102</td> +<td class="bc-supports-yes">112</td> +<td class="bc-supports-yes">70</td> +<td class="bc-supports-yes">15.5</td> +<td class="bc-supports-yes">19.0</td> +</tr> +<tr> +<th><code>inputmode</code></th> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">9517–23</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>is</code></th> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">54</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">48</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">9.0</td> +</tr> +<tr> +<th><code>itemid</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>itemprop</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>itemref</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>itemscope</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>itemtype</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>lang</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>nonce</code></th> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">31</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +</tr> +<tr> +<th><code>part</code></th> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">72</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">60</td> +<td class="bc-supports-yes">13.1</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">73</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">52</td> +<td class="bc-supports-yes">13.4</td> +<td class="bc-supports-yes">11.0</td> +</tr> +<tr> +<th><code>popover</code></th> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">100</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>popovertarget</code></th> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">100</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>popovertargetaction</code></th> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">100</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-yes">114</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>slot</code></th> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">≤79</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">40</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">53</td> +<td class="bc-supports-yes">63</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">6.0</td> +</tr> +<tr> +<th><code>spellcheck</code></th> +<td class="bc-supports-yes">9</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">47</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-yes">9.3</td> +<td class="bc-supports-yes">5.0</td> +</tr> +<tr> +<th><code>style</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">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">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>tabindex</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1.5</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>title</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">Yes</td> +<td class="bc-supports-yes">15</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">14</td> +<td class="bc-supports-yes">≤3.2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>translate</code></th> +<td class="bc-supports-yes">19</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">111</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.5</td> +</tr> +<tr> +<th><code>virtualkeyboardpolicy</code></th> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-yes">94</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">66</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">17.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element"><code>Element</code></a> interface that allows querying most global attributes.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Global_attributes" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes</a> + </p> +</div> diff --git a/devdocs/html/index b/devdocs/html/index new file mode 100644 index 00000000..72ff309e --- /dev/null +++ b/devdocs/html/index @@ -0,0 +1 @@ +((pages . ["index" "element/head" "element/header" "element/body" "element/footer" "element/article" "element/div" "element/datalist" "element/nav" "element/title" "element/section" "element/progress" "element/p" "element/canvas" "element/details" "element/embed" "element/span" "element/img" "element/aside" "element/audio" "element/search" "element/output" "element/video" "element/ul" "element/ol" "element/li" "reference" "cors_enabled_image" "attributes/crossorigin" "attributes/rel/preload" "element/link" "attributes" "global_attributes" "element" "content_categories" "quirks_mode_and_standards_mode" "element/script" "element/style" "element/iframe" "element/html" "element/base" "element/meta" "element/noscript" "element/template" "element/meter" "element/label" "element/heading_elements" "element/main" "element/address" "element/hgroup" "element/time" "element/blockquote" "element/dl" "element/fieldset" "element/figcaption" "element/figure" "element/form" "element/hr" "element/menu" "element/pre" "element/table" "element/del" "element/a" "element/ins" "element/map" "element/br" "element/dt" "element/dd" "element/button" "element/input" "element/option" "global_attributes/id" "element/input/text" "element/input/search" "element/input/url" "element/input/tel" "element/input/email" "element/input/number" "element/input/month" "element/input/date" "element/input/datetime-local" "element/input/week" "element/input/time" "element/input/range" "element/input/color" "element/input/password" "element/summary" "global_attributes/title" "element/object" "element/picture" "attributes/elementtiming" "element/source" "element/track" "element/dir" "date_and_time_formats" "element/image" "attributes/rel" "element/frame" "attributes/rel/modulepreload" "attributes/accept" "global_attributes/itemprop" "global_attributes/accesskey" "element/caption" "element/col" "element/colgroup" "element/tbody" "element/td" "element/tfoot" "element/th" "element/thead" "element/tr" "element/area" "global_attributes/autocapitalize" "attributes/autocomplete" "element/select" "element/textarea" "element/marquee" "attributes/capture" "element/q" "global_attributes/class" "element/font" "global_attributes/contenteditable" "global_attributes/contextmenu" "global_attributes/data-*" "global_attributes/dir" "attributes/dirname" "attributes/disabled" "element/optgroup" "global_attributes/draggable" "attributes/for" "global_attributes/hidden" "global_attributes/inputmode" "global_attributes/lang" "attributes/minlength" "attributes/min" "attributes/multiple" "attributes/max" "attributes/maxlength" "element/param" "element/dialog" "attributes/pattern" "attributes/placeholder" "attributes/readonly" "attributes/required" "attributes/size" "global_attributes/slot" "global_attributes/spellcheck" "attributes/step" "global_attributes/style" "global_attributes/tabindex" "global_attributes/translate" "element/data" "global_attributes/autofocus" "global_attributes/enterkeyhint" "global_attributes/exportparts" "global_attributes/inert" "global_attributes/is" "global_attributes/itemid" "global_attributes/itemref" "global_attributes/itemscope" "global_attributes/itemtype" "global_attributes/nonce" "global_attributes/part" "global_attributes/popover" "element/slot" "global_attributes/virtualkeyboardpolicy" "element/cite" "element/abbr" "element/b" "element/bdi" "element/bdo" "element/code" "element/dfn" "element/em" "element/i" "element/kbd" "element/mark" "element/rp" "element/ruby" "element/rt" "element/s" "element/samp" "element/small" "element/strong" "element/sub" "element/sup" "element/u" "element/var" "element/wbr" "element/portal" "element/legend" "element/acronym" "element/big" "element/center" "element/frameset" "element/menuitem" "element/nobr" "element/noembed" "element/noframes" "element/plaintext" "element/rb" "element/rtc" "element/strike" "element/tt" "element/xmp" "element/script/type" "element/script/type/importmap" "element/script/type/speculationrules" "element/meta/name" "viewport_meta_tag" "microdata" "element/input/submit" "element/input/image" "attributes/rel/noopener" "attributes/rel/noreferrer" "element/input/reset" "element/input/button" "element/input/checkbox" "element/input/hidden" "element/input/file" "element/input/radio" "constraint_validation" "attributes/rel/preconnect" "attributes/rel/dns-prefetch" "attributes/rel/prerender" "attributes/rel/manifest" "attributes/rel/me" "attributes/rel/prefetch" "element/meta/name/theme-color"]) (entries . [((name . "a") (path . "element/a") (type . "Elements")) ((name . "abbr") (path . "element/abbr") (type . "Elements")) ((name . "accept (attribute)") (path . "attributes#accept-attribute") (type . "Attributes")) ((name . "accept-charset (attribute)") (path . "attributes#accept-charset-attribute") (type . "Attributes")) ((name . "accesskey (attribute)") (path . "global_attributes/accesskey") (type . "Attributes")) ((name . "acronym") (path . "element/acronym") (type . "Obsolete")) ((name . "action (attribute)") (path . "attributes#action-attribute") (type . "Attributes")) ((name . "address") (path . "element/address") (type . "Elements")) ((name . "align (attribute)") (path . "attributes#align-attribute") (type . "Attributes")) ((name . "allow (attribute)") (path . "attributes#allow-attribute") (type . "Attributes")) ((name . "alt (attribute)") (path . "attributes#alt-attribute") (type . "Attributes")) ((name . "area") (path . "element/area") (type . "Elements")) ((name . "article") (path . "element/article") (type . "Elements")) ((name . "aside") (path . "element/aside") (type . "Elements")) ((name . "async (attribute)") (path . "attributes#async-attribute") (type . "Attributes")) ((name . "Attributes") (path . "attributes") (type . "Miscellaneous")) ((name . "Attributes.accept") (path . "attributes/accept") (type . "Miscellaneous")) ((name . "Attributes.autocomplete") (path . "attributes/autocomplete") (type . "Miscellaneous")) ((name . "Attributes.capture") (path . "attributes/capture") (type . "Miscellaneous")) ((name . "Attributes.crossorigin") (path . "attributes/crossorigin") (type . "Miscellaneous")) ((name . "Attributes.dirname") (path . "attributes/dirname") (type . "Miscellaneous")) ((name . "Attributes.disabled") (path . "attributes/disabled") (type . "Miscellaneous")) ((name . "Attributes.elementtiming") (path . "attributes/elementtiming") (type . "Miscellaneous")) ((name . "Attributes.for") (path . "attributes/for") (type . "Miscellaneous")) ((name . "Attributes.max") (path . "attributes/max") (type . "Miscellaneous")) ((name . "Attributes.maxlength") (path . "attributes/maxlength") (type . "Miscellaneous")) ((name . "Attributes.min") (path . "attributes/min") (type . "Miscellaneous")) ((name . "Attributes.minlength") (path . "attributes/minlength") (type . "Miscellaneous")) ((name . "Attributes.multiple") (path . "attributes/multiple") (type . "Miscellaneous")) ((name . "Attributes.pattern") (path . "attributes/pattern") (type . "Miscellaneous")) ((name . "Attributes.placeholder") (path . "attributes/placeholder") (type . "Miscellaneous")) ((name . "Attributes.readonly") (path . "attributes/readonly") (type . "Miscellaneous")) ((name . "Attributes.rel") (path . "attributes/rel") (type . "Miscellaneous")) ((name . "Attributes.rel.dns-prefetch") (path . "attributes/rel/dns-prefetch") (type . "Miscellaneous")) ((name . "Attributes.rel.manifest") (path . "attributes/rel/manifest") (type . "Miscellaneous")) ((name . "Attributes.rel.me") (path . "attributes/rel/me") (type . "Miscellaneous")) ((name . "Attributes.rel.modulepreload") (path . "attributes/rel/modulepreload") (type . "Miscellaneous")) ((name . "Attributes.rel.noopener") (path . "attributes/rel/noopener") (type . "Miscellaneous")) ((name . "Attributes.rel.noreferrer") (path . "attributes/rel/noreferrer") (type . "Miscellaneous")) ((name . "Attributes.rel.preconnect") (path . "attributes/rel/preconnect") (type . "Miscellaneous")) ((name . "Attributes.rel.prefetch") (path . "attributes/rel/prefetch") (type . "Miscellaneous")) ((name . "Attributes.rel.preload") (path . "attributes/rel/preload") (type . "Miscellaneous")) ((name . "Attributes.rel.prerender") (path . "attributes/rel/prerender") (type . "Obsolete")) ((name . "Attributes.required") (path . "attributes/required") (type . "Miscellaneous")) ((name . "Attributes.size") (path . "attributes/size") (type . "Miscellaneous")) ((name . "Attributes.step") (path . "attributes/step") (type . "Miscellaneous")) ((name . "audio") (path . "element/audio") (type . "Elements")) ((name . "autocapitalize (attribute)") (path . "global_attributes/autocapitalize") (type . "Attributes")) ((name . "autocomplete (attribute)") (path . "attributes#autocomplete-attribute") (type . "Attributes")) ((name . "autofocus (attribute)") (path . "global_attributes/autofocus") (type . "Attributes")) ((name . "autoplay (attribute)") (path . "attributes#autoplay-attribute") (type . "Attributes")) ((name . "b") (path . "element/b") (type . "Elements")) ((name . "background (attribute)") (path . "attributes#background-attribute") (type . "Attributes")) ((name . "base") (path . "element/base") (type . "Elements")) ((name . "bdi") (path . "element/bdi") (type . "Elements")) ((name . "bdo") (path . "element/bdo") (type . "Elements")) ((name . "bgcolor (attribute)") (path . "attributes#bgcolor-attribute") (type . "Attributes")) ((name . "big") (path . "element/big") (type . "Obsolete")) ((name . "blockquote") (path . "element/blockquote") (type . "Elements")) ((name . "body") (path . "element/body") (type . "Elements")) ((name . "border (attribute)") (path . "attributes#border-attribute") (type . "Attributes")) ((name . "br") (path . "element/br") (type . "Elements")) ((name . "buffered (attribute)") (path . "attributes#buffered-attribute") (type . "Attributes")) ((name . "button") (path . "element/button") (type . "Elements")) ((name . "canvas") (path . "element/canvas") (type . "Elements")) ((name . "caption") (path . "element/caption") (type . "Elements")) ((name . "capture (attribute)") (path . "attributes#capture-attribute") (type . "Attributes")) ((name . "center") (path . "element/center") (type . "Obsolete")) ((name . "charset (attribute)") (path . "attributes#charset-attribute") (type . "Attributes")) ((name . "checked (attribute)") (path . "attributes#checked-attribute") (type . "Attributes")) ((name . "cite") (path . "element/cite") (type . "Elements")) ((name . "cite (attribute)") (path . "attributes#cite-attribute") (type . "Attributes")) ((name . "class (attribute)") (path . "global_attributes/class") (type . "Attributes")) ((name . "code") (path . "element/code") (type . "Elements")) ((name . "col") (path . "element/col") (type . "Elements")) ((name . "colgroup") (path . "element/colgroup") (type . "Elements")) ((name . "color (attribute)") (path . "attributes#color-attribute") (type . "Attributes")) ((name . "cols (attribute)") (path . "attributes#cols-attribute") (type . "Attributes")) ((name . "colspan (attribute)") (path . "attributes#colspan-attribute") (type . "Attributes")) ((name . "Constraint validation") (path . "constraint_validation") (type . "Miscellaneous")) ((name . "content (attribute)") (path . "attributes#content-attribute") (type . "Attributes")) ((name . "Content categories") (path . "content_categories") (type . "Miscellaneous")) ((name . "contenteditable (attribute)") (path . "global_attributes/contenteditable") (type . "Attributes")) ((name . "contextmenu (attribute)") (path . "global_attributes/contextmenu") (type . "Obsolete")) ((name . "controls (attribute)") (path . "attributes#controls-attribute") (type . "Attributes")) ((name . "coords (attribute)") (path . "attributes#coords-attribute") (type . "Attributes")) ((name . "CORS enabled image") (path . "cors_enabled_image") (type . "Miscellaneous")) ((name . "crossorigin (attribute)") (path . "attributes#crossorigin-attribute") (type . "Attributes")) ((name . "csp (attribute)") (path . "attributes#csp-attribute") (type . "Attributes")) ((name . "data") (path . "element/data") (type . "Elements")) ((name . "data (attribute)") (path . "attributes#data-attribute") (type . "Attributes")) ((name . "data-* (attribute)") (path . "global_attributes/data-*") (type . "Attributes")) ((name . "datalist") (path . "element/datalist") (type . "Elements")) ((name . "Date and time formats") (path . "date_and_time_formats") (type . "Miscellaneous")) ((name . "datetime (attribute)") (path . "attributes#datetime-attribute") (type . "Attributes")) ((name . "dd") (path . "element/dd") (type . "Elements")) ((name . "decoding (attribute)") (path . "attributes#decoding-attribute") (type . "Attributes")) ((name . "default (attribute)") (path . "attributes#default-attribute") (type . "Attributes")) ((name . "defer (attribute)") (path . "attributes#defer-attribute") (type . "Attributes")) ((name . "del") (path . "element/del") (type . "Elements")) ((name . "details") (path . "element/details") (type . "Elements")) ((name . "dfn") (path . "element/dfn") (type . "Elements")) ((name . "dialog") (path . "element/dialog") (type . "Elements")) ((name . "dir") (path . "element/dir") (type . "Obsolete")) ((name . "dir (attribute)") (path . "global_attributes/dir") (type . "Attributes")) ((name . "dirname (attribute)") (path . "attributes#dirname-attribute") (type . "Attributes")) ((name . "disabled (attribute)") (path . "attributes#disabled-attribute") (type . "Attributes")) ((name . "div") (path . "element/div") (type . "Elements")) ((name . "dl") (path . "element/dl") (type . "Elements")) ((name . "download (attribute)") (path . "attributes#download-attribute") (type . "Attributes")) ((name . "draggable (attribute)") (path . "global_attributes/draggable") (type . "Attributes")) ((name . "dt") (path . "element/dt") (type . "Elements")) ((name . "Element") (path . "element") (type . "Miscellaneous")) ((name . "em") (path . "element/em") (type . "Elements")) ((name . "embed") (path . "element/embed") (type . "Elements")) ((name . "enctype (attribute)") (path . "attributes#enctype-attribute") (type . "Attributes")) ((name . "enterkeyhint (attribute)") (path . "attributes#enterkeyhint-attribute") (type . "Attributes")) ((name . "enterkeyhint (attribute)") (path . "global_attributes/enterkeyhint") (type . "Attributes")) ((name . "exportparts (attribute)") (path . "global_attributes/exportparts") (type . "Attributes")) ((name . "fieldset") (path . "element/fieldset") (type . "Elements")) ((name . "figcaption") (path . "element/figcaption") (type . "Elements")) ((name . "figure") (path . "element/figure") (type . "Elements")) ((name . "font") (path . "element/font") (type . "Obsolete")) ((name . "footer") (path . "element/footer") (type . "Elements")) ((name . "for (attribute)") (path . "attributes#for-attribute") (type . "Attributes")) ((name . "form") (path . "element/form") (type . "Elements")) ((name . "form (attribute)") (path . "attributes#form-attribute") (type . "Attributes")) ((name . "formaction (attribute)") (path . "attributes#formaction-attribute") (type . "Attributes")) ((name . "formenctype (attribute)") (path . "attributes#formenctype-attribute") (type . "Attributes")) ((name . "formmethod (attribute)") (path . "attributes#formmethod-attribute") (type . "Attributes")) ((name . "formnovalidate (attribute)") (path . "attributes#formnovalidate-attribute") (type . "Attributes")) ((name . "formtarget (attribute)") (path . "attributes#formtarget-attribute") (type . "Attributes")) ((name . "frame") (path . "element/frame") (type . "Obsolete")) ((name . "frameset") (path . "element/frameset") (type . "Obsolete")) ((name . "Global attributes") (path . "global_attributes") (type . "Attributes")) ((name . "h1") (path . "element/heading_elements") (type . "Elements")) ((name . "h2") (path . "element/heading_elements") (type . "Elements")) ((name . "h3") (path . "element/heading_elements") (type . "Elements")) ((name . "h4") (path . "element/heading_elements") (type . "Elements")) ((name . "h5") (path . "element/heading_elements") (type . "Elements")) ((name . "h6") (path . "element/heading_elements") (type . "Elements")) ((name . "head") (path . "element/head") (type . "Elements")) ((name . "header") (path . "element/header") (type . "Elements")) ((name . "headers (attribute)") (path . "attributes#headers-attribute") (type . "Attributes")) ((name . "height (attribute)") (path . "attributes#height-attribute") (type . "Attributes")) ((name . "hgroup") (path . "element/hgroup") (type . "Elements")) ((name . "hidden (attribute)") (path . "global_attributes/hidden") (type . "Attributes")) ((name . "high (attribute)") (path . "attributes#high-attribute") (type . "Attributes")) ((name . "hr") (path . "element/hr") (type . "Elements")) ((name . "href (attribute)") (path . "attributes#href-attribute") (type . "Attributes")) ((name . "hreflang (attribute)") (path . "attributes#hreflang-attribute") (type . "Attributes")) ((name . "html") (path . "element/html") (type . "Elements")) ((name . "http-equiv (attribute)") (path . "attributes#http-equiv-attribute") (type . "Attributes")) ((name . "i") (path . "element/i") (type . "Elements")) ((name . "id (attribute)") (path . "global_attributes/id") (type . "Attributes")) ((name . "iframe") (path . "element/iframe") (type . "Elements")) ((name . "image") (path . "element/image") (type . "Obsolete")) ((name . "img") (path . "element/img") (type . "Elements")) ((name . "inert (attribute)") (path . "global_attributes/inert") (type . "Attributes")) ((name . "input") (path . "element/input") (type . "Elements")) ((name . "input type=\"button\"") (path . "element/input/button") (type . "Elements")) ((name . "input type=\"checkbox\"") (path . "element/input/checkbox") (type . "Elements")) ((name . "input type=\"color\"") (path . "element/input/color") (type . "Elements")) ((name . "input type=\"date\"") (path . "element/input/date") (type . "Elements")) ((name . "input type=\"datetime-local\"") (path . "element/input/datetime-local") (type . "Elements")) ((name . "input type=\"email\"") (path . "element/input/email") (type . "Elements")) ((name . "input type=\"file\"") (path . "element/input/file") (type . "Elements")) ((name . "input type=\"hidden\"") (path . "element/input/hidden") (type . "Elements")) ((name . "input type=\"image\"") (path . "element/input/image") (type . "Elements")) ((name . "input type=\"month\"") (path . "element/input/month") (type . "Elements")) ((name . "input type=\"number\"") (path . "element/input/number") (type . "Elements")) ((name . "input type=\"password\"") (path . "element/input/password") (type . "Elements")) ((name . "input type=\"radio\"") (path . "element/input/radio") (type . "Elements")) ((name . "input type=\"range\"") (path . "element/input/range") (type . "Elements")) ((name . "input type=\"reset\"") (path . "element/input/reset") (type . "Elements")) ((name . "input type=\"search\"") (path . "element/input/search") (type . "Elements")) ((name . "input type=\"submit\"") (path . "element/input/submit") (type . "Elements")) ((name . "input type=\"tel\"") (path . "element/input/tel") (type . "Elements")) ((name . "input type=\"text\"") (path . "element/input/text") (type . "Elements")) ((name . "input type=\"time\"") (path . "element/input/time") (type . "Elements")) ((name . "input type=\"url\"") (path . "element/input/url") (type . "Elements")) ((name . "input type=\"week\"") (path . "element/input/week") (type . "Elements")) ((name . "inputmode (attribute)") (path . "attributes#inputmode-attribute") (type . "Attributes")) ((name . "inputmode (attribute)") (path . "global_attributes/inputmode") (type . "Attributes")) ((name . "ins") (path . "element/ins") (type . "Elements")) ((name . "integrity (attribute)") (path . "attributes#integrity-attribute") (type . "Attributes")) ((name . "intrinsicsize (attribute)") (path . "attributes#intrinsicsize-attribute") (type . "Attributes")) ((name . "is (attribute)") (path . "global_attributes/is") (type . "Attributes")) ((name . "ismap (attribute)") (path . "attributes#ismap-attribute") (type . "Attributes")) ((name . "itemid (attribute)") (path . "global_attributes/itemid") (type . "Attributes")) ((name . "itemprop (attribute)") (path . "global_attributes/itemprop") (type . "Attributes")) ((name . "itemref (attribute)") (path . "global_attributes/itemref") (type . "Attributes")) ((name . "itemscope (attribute)") (path . "global_attributes/itemscope") (type . "Attributes")) ((name . "itemtype (attribute)") (path . "global_attributes/itemtype") (type . "Attributes")) ((name . "kbd") (path . "element/kbd") (type . "Elements")) ((name . "kind (attribute)") (path . "attributes#kind-attribute") (type . "Attributes")) ((name . "label") (path . "element/label") (type . "Elements")) ((name . "label (attribute)") (path . "attributes#label-attribute") (type . "Attributes")) ((name . "lang (attribute)") (path . "global_attributes/lang") (type . "Attributes")) ((name . "language (attribute)") (path . "attributes#language-attribute") (type . "Attributes")) ((name . "legend") (path . "element/legend") (type . "Elements")) ((name . "li") (path . "element/li") (type . "Elements")) ((name . "link") (path . "element/link") (type . "Elements")) ((name . "list (attribute)") (path . "attributes#list-attribute") (type . "Attributes")) ((name . "loading (attribute)") (path . "attributes#loading-attribute") (type . "Attributes")) ((name . "loop (attribute)") (path . "attributes#loop-attribute") (type . "Attributes")) ((name . "low (attribute)") (path . "attributes#low-attribute") (type . "Attributes")) ((name . "main") (path . "element/main") (type . "Elements")) ((name . "manifest (attribute)") (path . "attributes#manifest-attribute") (type . "Attributes")) ((name . "map") (path . "element/map") (type . "Elements")) ((name . "mark") (path . "element/mark") (type . "Elements")) ((name . "marquee") (path . "element/marquee") (type . "Obsolete")) ((name . "max (attribute)") (path . "attributes#max-attribute") (type . "Attributes")) ((name . "maxlength (attribute)") (path . "attributes#maxlength-attribute") (type . "Attributes")) ((name . "media (attribute)") (path . "attributes#media-attribute") (type . "Attributes")) ((name . "menu") (path . "element/menu") (type . "Elements")) ((name . "menuitem") (path . "element/menuitem") (type . "Obsolete")) ((name . "meta") (path . "element/meta") (type . "Elements")) ((name . "meta.name") (path . "element/meta/name") (type . "Elements")) ((name . "meta.name.theme-color") (path . "element/meta/name/theme-color") (type . "Elements")) ((name . "meter") (path . "element/meter") (type . "Elements")) ((name . "method (attribute)") (path . "attributes#method-attribute") (type . "Attributes")) ((name . "Microdata") (path . "microdata") (type . "Miscellaneous")) ((name . "min (attribute)") (path . "attributes#min-attribute") (type . "Attributes")) ((name . "minlength (attribute)") (path . "attributes#minlength-attribute") (type . "Attributes")) ((name . "multiple (attribute)") (path . "attributes#multiple-attribute") (type . "Attributes")) ((name . "muted (attribute)") (path . "attributes#muted-attribute") (type . "Attributes")) ((name . "name (attribute)") (path . "attributes#name-attribute") (type . "Attributes")) ((name . "nav") (path . "element/nav") (type . "Elements")) ((name . "nobr") (path . "element/nobr") (type . "Obsolete")) ((name . "noembed") (path . "element/noembed") (type . "Obsolete")) ((name . "noframes") (path . "element/noframes") (type . "Obsolete")) ((name . "nonce (attribute)") (path . "global_attributes/nonce") (type . "Attributes")) ((name . "noscript") (path . "element/noscript") (type . "Elements")) ((name . "novalidate (attribute)") (path . "attributes#novalidate-attribute") (type . "Attributes")) ((name . "object") (path . "element/object") (type . "Elements")) ((name . "ol") (path . "element/ol") (type . "Elements")) ((name . "open (attribute)") (path . "attributes#open-attribute") (type . "Attributes")) ((name . "optgroup") (path . "element/optgroup") (type . "Elements")) ((name . "optimum (attribute)") (path . "attributes#optimum-attribute") (type . "Attributes")) ((name . "option") (path . "element/option") (type . "Elements")) ((name . "output") (path . "element/output") (type . "Elements")) ((name . "p") (path . "element/p") (type . "Elements")) ((name . "param") (path . "element/param") (type . "Obsolete")) ((name . "part (attribute)") (path . "global_attributes/part") (type . "Attributes")) ((name . "pattern (attribute)") (path . "attributes#pattern-attribute") (type . "Attributes")) ((name . "picture") (path . "element/picture") (type . "Elements")) ((name . "ping (attribute)") (path . "attributes#ping-attribute") (type . "Attributes")) ((name . "placeholder (attribute)") (path . "attributes#placeholder-attribute") (type . "Attributes")) ((name . "plaintext") (path . "element/plaintext") (type . "Obsolete")) ((name . "playsinline (attribute)") (path . "attributes#playsinline-attribute") (type . "Attributes")) ((name . "popover (attribute)") (path . "global_attributes/popover") (type . "Attributes")) ((name . "portal") (path . "element/portal") (type . "Elements")) ((name . "poster (attribute)") (path . "attributes#poster-attribute") (type . "Attributes")) ((name . "pre") (path . "element/pre") (type . "Elements")) ((name . "preload (attribute)") (path . "attributes#preload-attribute") (type . "Attributes")) ((name . "progress") (path . "element/progress") (type . "Elements")) ((name . "q") (path . "element/q") (type . "Elements")) ((name . "Quirks Mode and Standards Mode") (path . "quirks_mode_and_standards_mode") (type . "Miscellaneous")) ((name . "rb") (path . "element/rb") (type . "Obsolete")) ((name . "readonly (attribute)") (path . "attributes#readonly-attribute") (type . "Attributes")) ((name . "Reference") (path . "reference") (type . "Miscellaneous")) ((name . "referrerpolicy (attribute)") (path . "attributes#referrerpolicy-attribute") (type . "Attributes")) ((name . "rel (attribute)") (path . "attributes#rel-attribute") (type . "Attributes")) ((name . "required (attribute)") (path . "attributes#required-attribute") (type . "Attributes")) ((name . "reversed (attribute)") (path . "attributes#reversed-attribute") (type . "Attributes")) ((name . "rows (attribute)") (path . "attributes#rows-attribute") (type . "Attributes")) ((name . "rowspan (attribute)") (path . "attributes#rowspan-attribute") (type . "Attributes")) ((name . "rp") (path . "element/rp") (type . "Elements")) ((name . "rt") (path . "element/rt") (type . "Elements")) ((name . "rtc") (path . "element/rtc") (type . "Obsolete")) ((name . "ruby") (path . "element/ruby") (type . "Elements")) ((name . "s") (path . "element/s") (type . "Elements")) ((name . "samp") (path . "element/samp") (type . "Elements")) ((name . "sandbox (attribute)") (path . "attributes#sandbox-attribute") (type . "Attributes")) ((name . "scope (attribute)") (path . "attributes#scope-attribute") (type . "Attributes")) ((name . "scoped (attribute)") (path . "attributes#scoped-attribute") (type . "Attributes")) ((name . "script") (path . "element/script") (type . "Elements")) ((name . "script.type") (path . "element/script/type") (type . "Elements")) ((name . "script.type.importmap") (path . "element/script/type/importmap") (type . "Elements")) ((name . "script.type.speculationrules") (path . "element/script/type/speculationrules") (type . "Elements")) ((name . "search") (path . "element/search") (type . "Elements")) ((name . "section") (path . "element/section") (type . "Elements")) ((name . "select") (path . "element/select") (type . "Elements")) ((name . "selected (attribute)") (path . "attributes#selected-attribute") (type . "Attributes")) ((name . "shape (attribute)") (path . "attributes#shape-attribute") (type . "Attributes")) ((name . "size (attribute)") (path . "attributes#size-attribute") (type . "Attributes")) ((name . "sizes (attribute)") (path . "attributes#sizes-attribute") (type . "Attributes")) ((name . "slot") (path . "element/slot") (type . "Elements")) ((name . "slot (attribute)") (path . "global_attributes/slot") (type . "Attributes")) ((name . "small") (path . "element/small") (type . "Elements")) ((name . "source") (path . "element/source") (type . "Elements")) ((name . "span") (path . "element/span") (type . "Elements")) ((name . "span (attribute)") (path . "attributes#span-attribute") (type . "Attributes")) ((name . "spellcheck (attribute)") (path . "global_attributes/spellcheck") (type . "Attributes")) ((name . "src (attribute)") (path . "attributes#src-attribute") (type . "Attributes")) ((name . "srcdoc (attribute)") (path . "attributes#srcdoc-attribute") (type . "Attributes")) ((name . "srclang (attribute)") (path . "attributes#srclang-attribute") (type . "Attributes")) ((name . "srcset (attribute)") (path . "attributes#srcset-attribute") (type . "Attributes")) ((name . "start (attribute)") (path . "attributes#start-attribute") (type . "Attributes")) ((name . "step (attribute)") (path . "attributes#step-attribute") (type . "Attributes")) ((name . "strike") (path . "element/strike") (type . "Obsolete")) ((name . "strong") (path . "element/strong") (type . "Elements")) ((name . "style") (path . "element/style") (type . "Elements")) ((name . "style (attribute)") (path . "global_attributes/style") (type . "Attributes")) ((name . "sub") (path . "element/sub") (type . "Elements")) ((name . "summary") (path . "element/summary") (type . "Elements")) ((name . "summary (attribute)") (path . "attributes#summary-attribute") (type . "Attributes")) ((name . "sup") (path . "element/sup") (type . "Elements")) ((name . "tabindex (attribute)") (path . "global_attributes/tabindex") (type . "Attributes")) ((name . "table") (path . "element/table") (type . "Elements")) ((name . "target (attribute)") (path . "attributes#target-attribute") (type . "Attributes")) ((name . "tbody") (path . "element/tbody") (type . "Elements")) ((name . "td") (path . "element/td") (type . "Elements")) ((name . "template") (path . "element/template") (type . "Elements")) ((name . "textarea") (path . "element/textarea") (type . "Elements")) ((name . "tfoot") (path . "element/tfoot") (type . "Elements")) ((name . "th") (path . "element/th") (type . "Elements")) ((name . "thead") (path . "element/thead") (type . "Elements")) ((name . "time") (path . "element/time") (type . "Elements")) ((name . "title") (path . "element/title") (type . "Elements")) ((name . "title (attribute)") (path . "global_attributes/title") (type . "Attributes")) ((name . "tr") (path . "element/tr") (type . "Elements")) ((name . "track") (path . "element/track") (type . "Elements")) ((name . "translate (attribute)") (path . "global_attributes/translate") (type . "Attributes")) ((name . "tt") (path . "element/tt") (type . "Obsolete")) ((name . "type (attribute)") (path . "attributes#type-attribute") (type . "Attributes")) ((name . "u") (path . "element/u") (type . "Elements")) ((name . "ul") (path . "element/ul") (type . "Elements")) ((name . "usemap (attribute)") (path . "attributes#usemap-attribute") (type . "Attributes")) ((name . "value (attribute)") (path . "attributes#value-attribute") (type . "Attributes")) ((name . "var") (path . "element/var") (type . "Elements")) ((name . "video") (path . "element/video") (type . "Elements")) ((name . "Viewport meta tag") (path . "viewport_meta_tag") (type . "Miscellaneous")) ((name . "virtualkeyboardpolicy (attribute)") (path . "global_attributes/virtualkeyboardpolicy") (type . "Attributes")) ((name . "wbr") (path . "element/wbr") (type . "Elements")) ((name . "width (attribute)") (path . "attributes#width-attribute") (type . "Attributes")) ((name . "wrap (attribute)") (path . "attributes#wrap-attribute") (type . "Attributes")) ((name . "xmp") (path . "element/xmp") (type . "Obsolete"))]) (types . [((name . "Attributes") (count . 138) (slug . "attributes")) ((name . "Elements") (count . 140) (slug . "elements")) ((name . "Miscellaneous") (count . 39) (slug . "miscellaneous")) ((name . "Obsolete") (count . 22) (slug . "obsolete"))]))
\ No newline at end of file diff --git a/devdocs/html/index.html b/devdocs/html/index.html new file mode 100644 index 00000000..581632a9 --- /dev/null +++ b/devdocs/html/index.html @@ -0,0 +1,24 @@ +<header><h1>HTML: HyperText Markup Language</h1></header><div class="section-content"> +<p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a>).</p> <p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p> <p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <a href="element/head"><code><head></code></a>, <a href="element/title"><code><title></code></a>, <a href="element/body"><code><body></code></a>, <a href="element/header"><code><header></code></a>, <a href="element/footer"><code><footer></code></a>, <a href="element/article"><code><article></code></a>, <a href="element/section"><code><section></code></a>, <a href="element/p"><code><p></code></a>, <a href="element/div"><code><div></code></a>, <a href="element/span"><code><span></code></a>, <a href="element/img"><code><img></code></a>, <a href="element/aside"><code><aside></code></a>, <a href="element/audio"><code><audio></code></a>, <a href="element/canvas"><code><canvas></code></a>, <a href="element/datalist"><code><datalist></code></a>, <a href="element/details"><code><details></code></a>, <a href="element/embed"><code><embed></code></a>, <a href="element/nav"><code><nav></code></a>, <a href="element/search"><code><search></code></a>, <a href="element/output"><code><output></code></a>, <a href="element/progress"><code><progress></code></a>, <a href="element/video"><code><video></code></a>, <a href="element/ul"><code><ul></code></a>, <a href="element/ol"><code><ol></code></a>, <a href="element/li"><code><li></code></a> and many others.</p> <p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<code><</code>" and "<code>></code>". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way. However, the convention and recommended practice is to write tags in lowercase.</p> <p>The articles below can help you learn more about HTML.</p> +</div> +<h2 id="key_resources">Key resources</h2> +<div class="section-content"> +<dl> <dt id="html_introduction"><a href="#html_introduction">HTML Introduction</a></dt> <dd> <p>If you're new to web development, be sure to read our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Basics</a> article to learn what HTML is and how to use it.</p> </dd> <dt id="html_tutorials"><a href="#html_tutorials">HTML Tutorials</a></dt> <dd> <p>For articles about how to use HTML, as well as tutorials and complete examples, check out our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML Learning Area</a>.</p> </dd> <dt id="html_reference"><a href="#html_reference">HTML Reference</a></dt> <dd> <p>In our extensive <a href="reference">HTML reference</a> section, you'll find the details about every element and attribute in HTML.</p> </dd> </dl> <div class="callout" id="sect1"> <h4 id="looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h4> <p> We have put together a course that includes all the essential information you need to work towards your goal. </p> <p><a href="https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer"><strong>Get started</strong></a></p> </div> +</div> +<h2 id="beginners_tutorials">Beginner's tutorials</h2> +<div class="section-content"> +<p>Our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML Learning Area</a> features multiple modules that teach HTML from the ground up — no previous knowledge required.</p> <dl> <dt id="sect2"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> <dd> <p>This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.</p> </dd> <dt id="sect3"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> <dd> <p>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</p> </dd> <dt id="sect4"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">HTML tables</a></dt> <dd> <p>Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</p> </dd> <dt id="sect5"><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms</a></dt> <dd> <p>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.</p> </dd> <dt id="sect6"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></dt> <dd> <p>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> </dd> </dl> +</div> +<h2 id="advanced_topics">Advanced topics</h2> +<div class="section-content"><dl> <dt id="sect7"><a href="cors_enabled_image">CORS enabled image</a></dt> <dd> <p>The <a href="element/img#crossorigin"><code>crossorigin</code></a> attribute, in combination with an appropriate <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> header, allows images defined by the <a href="element/img"><code><img></code></a> element to be loaded from foreign origins and used in a <a href="element/canvas"><code><canvas></code></a> element as if they were being loaded from the current origin.</p> </dd> <dt id="sect8"><a href="attributes/crossorigin">CORS settings attributes</a></dt> <dd> <p>Some HTML elements that provide support for <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>, such as <a href="element/img"><code><img></code></a> or <a href="element/video"><code><video></code></a>, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</p> </dd> <dt id="sect9"><a href="attributes/rel/preload">Preloading content with rel="preload"</a></dt> <dd> <p>The <code>preload</code> value of the <a href="element/link"><code><link></code></a> element's <a href="element/link#rel"><code>rel</code></a> attribute allows you to write declarative fetch requests in your HTML <a href="element/head"><code><head></code></a>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</p> </dd> </dl></div> +<h2 id="reference">Reference</h2> +<div class="section-content"><dl> <dt id="sect10"><a href="reference">HTML reference</a></dt> <dd> <p>HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <strong>links</strong>.</p> </dd> <dt id="sect11"><a href="element">HTML element reference</a></dt> <dd> <p>Browse a list of all <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elements</a>.</p> </dd> <dt id="sect12"><a href="attributes">HTML attribute reference</a></dt> <dd> <p>Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</p> </dd> <dt id="sect13"><a href="global_attributes">Global attributes</a></dt> <dd> <p>Global attributes may be specified on all <a href="element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</p> </dd> <dt id="sect14"> +<a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">Inline-level elements</a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content">block-level elements</a> +</dt> <dd> <p>HTML elements are usually "inline-level" or "block-level" elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block box".</p> </dd> <dt id="sect15"><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt> <dd> <p>The <a href="element/audio"><code><audio></code></a> and <a href="element/video"><code><video></code></a> elements allow you to play audio and video media natively within your content without the need for external software support.</p> </dd> <dt id="sect16"><a href="content_categories">HTML content categories</a></dt> <dd> <p>HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.</p> </dd> <dt id="sect17"><a href="quirks_mode_and_standards_mode">Quirks mode and standards mode</a></dt> <dd> <p>Historical information on quirks mode and standards mode.</p> </dd> </dl></div> +<h2 id="related_topics">Related topics</h2> +<div class="section-content"><dl> <dt id="sect18"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Applying_color">Applying color to HTML elements using CSS</a></dt> <dd> <p>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.</p> </dd> </dl></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML</a> + </p> +</div> diff --git a/devdocs/html/metadata b/devdocs/html/metadata new file mode 100644 index 00000000..044186ef --- /dev/null +++ b/devdocs/html/metadata @@ -0,0 +1,2 @@ +(1 (name . "HTML") (slug . "html") (type . "mdn") (links (home . "https://developer.mozilla.org/en-US/docs/Web/HTML") (code . "https://github.com/mdn/content/tree/main/files/en-us/web/html")) (mtime . 1698162724) (db_size . 5207458) (attribution . "© 2005–2023 MDN contributors.<br> + Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later."))
\ No newline at end of file diff --git a/devdocs/html/microdata.html b/devdocs/html/microdata.html new file mode 100644 index 00000000..c305d97b --- /dev/null +++ b/devdocs/html/microdata.html @@ -0,0 +1,69 @@ +<header><h1>Microdata</h1></header><div class="section-content"> +<p>Microdata is part of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and classic microformats.</p> <p>At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.</p> <ul> <li>To create an item, the <code>itemscope</code> attribute is used.</li> <li>To add a property to an item, the <code>itemprop</code> attribute is used on one of the item's descendants.</li> </ul> +</div> +<h2 id="vocabularies">Vocabularies</h2> +<div class="section-content"> +<p>Google and other major search engines support the <a href="https://schema.org" target="_blank">Schema.org</a> vocabulary for structured data. This vocabulary defines a standard set of type names and property names, for example, <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> indicates a concert performance, with <a href="https://schema.org/startDate" target="_blank"><code>startDate</code></a> and <a href="https://schema.org/location" target="_blank"><code>location</code></a> properties to specify the concert's key details. In this case, <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> would be the URL used by <code>itemtype</code> and <code>startDate</code> and location would be <code>itemprop</code>'s that <a href="https://schema.org/MusicEvent" target="_blank">Schema.org Music Event</a> defines.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> More about itemtype attributes can be found at <a href="https://schema.org/Thing" target="_blank">https://schema.org/Thing</a>.</p> </div> <p>Microdata vocabularies provide the semantics or meaning of an <em><code>Item</code></em>. Web developers can design a custom vocabulary or use vocabularies available on the web, such as the widely used <a href="https://schema.org" target="_blank">schema.org</a> vocabulary. A collection of commonly used markup vocabularies are provided by Schema.org.</p> <p>Commonly used vocabularies:</p> <ul> <li>Creative works: <a href="https://schema.org/CreativeWork" target="_blank">CreativeWork</a>, <a href="https://schema.org/Book" target="_blank">Book</a>, <a href="https://schema.org/Movie" target="_blank">Movie</a>, <a href="https://schema.org/MusicRecording" target="_blank">MusicRecording</a>, <a href="https://schema.org/Recipe" target="_blank">Recipe</a>, <a href="https://schema.org/TVSeries" target="_blank">TVSeries</a> +</li> <li>Embedded non-text objects: <a href="https://schema.org/AudioObject" target="_blank">AudioObject</a>, <a href="https://schema.org/ImageObject" target="_blank">ImageObject</a>, <a href="https://schema.org/VideoObject" target="_blank">VideoObject</a> +</li> <li><a href="https://schema.org/Event" target="_blank"><code>Event</code></a></li> <li> +<a href="https://schema.org/docs/meddocs.html" target="_blank">Health and medical types</a>: Notes on the health and medical types under <a href="https://schema.org/MedicalEntity" target="_blank">MedicalEntity</a> +</li> <li><a href="https://schema.org/Organization" target="_blank"><code>Organization</code></a></li> <li><a href="https://schema.org/Person" target="_blank"><code>Person</code></a></li> <li> +<a href="https://schema.org/Place" target="_blank"><code>Place</code></a>, <a href="https://schema.org/LocalBusiness" target="_blank">LocalBusiness</a>, <a href="https://schema.org/Restaurant" target="_blank">Restaurant</a> +</li> <li> +<a href="https://schema.org/Product" target="_blank"><code>Product</code></a>, <a href="https://schema.org/Offer" target="_blank">Offer</a>, <a href="https://schema.org/AggregateOffer" target="_blank">AggregateOffer</a> +</li> <li> +<a href="https://schema.org/Review" target="_blank"><code>Review</code></a>, <a href="https://schema.org/AggregateRating" target="_blank">AggregateRating</a> +</li> <li><a href="https://schema.org/Action" target="_blank"><code>Action</code></a></li> <li><a href="https://schema.org/Thing" target="_blank"><code>Thing</code></a></li> <li><a href="https://schema.org/Intangible" target="_blank"><code>Intangible</code></a></li> </ul> <p>Major search engine operators like Google, Microsoft, and Yahoo! rely on the <a href="https://schema.org/" target="_blank">schema.org</a> vocabulary to improve search results. For some purposes, an ad hoc vocabulary is adequate. For others, a vocabulary will need to be designed. Where possible, authors are encouraged to re-use existing vocabularies, as this makes content re-use easier.</p> +</div> +<h2 id="localization">Localization</h2> +<div class="section-content"><p>In some cases, search engines covering specific regions may provide locally-specific extensions of microdata. For example, <a href="https://yandex.com/" target="_blank">Yandex</a>, a major search engine in Russia, supports microformats such as <code>hCard</code> (company contact information), <code>hRecipe</code> (food recipe), <code>hReview</code> (market reviews) and <code>hProduct</code> (product data) and provides its own format for the definition of the terms and encyclopedic articles. This extension was made to solve transliteration problems between the Cyrillic and Latin alphabets. Due to the implementation of additional marking parameters of Schema's vocabulary, the indexation of information in Russian-language web-pages became considerably more successful.</p></div> +<h2 id="global_attributes">Global attributes</h2> +<div class="section-content"> +<p><a href="global_attributes/itemid"><code>itemid</code></a> – The unique, global identifier of an item.</p> <p><a href="global_attributes/itemprop"><code>itemprop</code></a> – Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</p> <p><a href="global_attributes/itemref"><code>itemref</code></a> – Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <strong>itemref</strong>. <code>itemref</code> provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</p> <p><a href="global_attributes/itemscope"><code>itemscope</code></a> – The <code>itemscope</code> attribute (usually) works along with <a href="global_attributes/itemtype"><code>itemtype</code></a> to specify that the HTML contained in a block is about a particular item. The <code>itemscope</code> attribute creates the <em><code>Item</code></em> and defines the scope of the itemtype associated with it. The <code>itemtype</code> attribute is a valid URL of a vocabulary (such as <a href="https://schema.org/" target="_blank">schema.org</a>) that describes the item and its properties context.</p> <p><a href="global_attributes/itemtype"><code>itemtype</code></a> – Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>'s (item properties) in the data structure. The <a href="global_attributes/itemscope"><code>itemscope</code></a> attribute is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</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="Ai8NwsrfDCmuLxRS+UVZfScghNaShUWGeBEb5Ltc+Ow=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/SoftwareApplication<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Angry Birds<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> - REQUIRES + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>operatingSystem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ANDROID<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>applicationCategory<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/GameApplication<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> + <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aggregateRating<span class="token punctuation">"</span></span> + <span class="token attr-name">itemscope</span> + <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/AggregateRating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + RATING: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4.6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ( + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ratingCount<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>8864<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ratings ) + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>offers<span class="token punctuation">"</span></span> <span class="token attr-name">itemscope</span> <span class="token attr-name">itemtype</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://schema.org/Offer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Price: $<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>price<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1.00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">itemprop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>priceCurrency<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</pre> +</div></div> +<h3 id="structured_data">Structured data</h3> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="standard-table"> <tbody> <tr> <td rowspan="4">itemscope</td> <td>itemtype</td> <td colspan="2">SoftwareApplication (https://schema.org/SoftwareApplication)</td> </tr> <tr> <td>itemprop</td> <td>name</td> <td>Angry Birds</td> </tr> <tr> <td>itemprop</td> <td>operatingSystem</td> <td>ANDROID</td> </tr> <tr> <td>itemprop</td> <td>applicationCategory</td> <td>GameApplication (https://schema.org/GameApplication)</td> </tr> <tr> <td rowspan="3">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">aggregateRating [AggregateRating]</td> </tr> <tr> <td>itemprop</td> <td>ratingValue</td> <td>4.6</td> </tr> <tr> <td>itemprop</td> <td>ratingCount</td> <td>8864</td> </tr> <tr> <td rowspan="3">itemscope</td> <td>itemprop[itemtype]</td> <td colspan="2">offers [Offer]</td> </tr> <tr> <td>itemprop</td> <td>price</td> <td>1.00</td> </tr> <tr> <td>itemprop</td> <td>priceCurrency</td> <td>USD</td> </tr> </tbody> </table></div></figure></div> +<h3 id="result">Result</h3> +<div class="section-content"> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="HTML sample" id="frame_html" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Microdata/runner.html?id=html" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> A handy tool for extracting microdata structures from HTML is Google's <a href="https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data" target="_blank">Structured Data Testing Tool</a>. Try it on the HTML shown above.</p> </div> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="section-content"><p>Supported in Firefox 16. Removed in Firefox 49.</p></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="global_attributes">Global Attributes</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Microdata" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata</a> + </p> +</div> diff --git a/devdocs/html/quirks_mode_and_standards_mode.html b/devdocs/html/quirks_mode_and_standards_mode.html new file mode 100644 index 00000000..79b3b975 --- /dev/null +++ b/devdocs/html/quirks_mode_and_standards_mode.html @@ -0,0 +1,31 @@ +<header><h1>Quirks Mode</h1></header><div class="section-content"> +<p>In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.</p> <p>There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In <strong>quirks mode</strong>, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In <strong>no-quirks mode</strong>, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In <strong>limited-quirks mode</strong>, there are only a very small number of quirks implemented.</p> <p>The limited-quirks and no-quirks modes used to be called "almost-standards" mode and "full standards" mode, respectively. These names have been changed as the behavior is now standardized.</p> +</div> +<h2 id="how_do_browsers_determine_which_mode_to_use">How do browsers determine which mode to use?</h2> +<div class="section-content"> +<p>For <a href="index">HTML</a> documents, browsers use a DOCTYPE in the beginning of the document to decide whether to handle it in quirks mode or standards mode. To ensure that your page uses full standards mode, make sure that your page has a DOCTYPE like in this example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3OY6XTzvWzwYUFWv3IWyburN8Ao9COtytNgW65UOoz0=" data-language="html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Hello World!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The DOCTYPE shown in the example, <code><!DOCTYPE html></code>, is the simplest possible, and the one recommended by current HTML standards. Earlier versions of the HTML standard recommended other variants, but all existing browsers today will use full standards mode for this DOCTYPE, even the dated Internet Explorer 6. There are no valid reasons to use a more complicated DOCTYPE. If you do use another DOCTYPE, you may risk choosing one which triggers almost standards mode or quirks mode.</p> <p>Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.</p> <p>The only purpose of <code><!DOCTYPE html></code> is to activate no-quirks mode. Older versions of HTML standard DOCTYPEs provided additional meaning, but no browser ever used the DOCTYPE for anything other than switching between render modes.</p> <p>See also a detailed description of <a href="https://hsivonen.fi/doctype/" target="_blank">when different browsers choose various modes</a>.</p> +</div> +<h3 id="xhtml">XHTML</h3> +<div class="section-content"> +<p>If you serve your page as <a href="https://developer.mozilla.org/en-US/docs/Glossary/XHTML">XHTML</a> using the <code>application/xhtml+xml</code> MIME type in the <code>Content-Type</code> HTTP header, you do not need a DOCTYPE to enable standards mode, as such documents always use 'full standards mode'. Note however that serving your pages as <code>application/xhtml+xml</code> will cause Internet Explorer 8 to show a download dialog box for an unknown format instead of displaying your page, as the first version of Internet Explorer with support for XHTML is Internet Explorer 9.</p> <p>If you serve XHTML-like content using the <code>text/html</code> MIME type, browsers will read it as HTML, and you will need the DOCTYPE to use standards mode.</p> +</div> +<h2 id="how_do_i_see_which_mode_is_used">How do I see which mode is used?</h2> +<div class="section-content"> +<p>If the page is rendered in quirks or limited-quirks mode, Firefox will log a warning to the console tab in the developer tools. If this warning is not shown, Firefox is using no-quirks mode.</p> <p>The value of <code>document.compatMode</code> in JavaScript will show whether or not the document is in quirks mode. If its value is <code>"BackCompat"</code>, the document is in quirks mode. If it isn't, it will have value <code>"CSS1Compat"</code>.</p> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Quirks_Mode_and_Standards_Mode" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode</a> + </p> +</div> diff --git a/devdocs/html/reference.html b/devdocs/html/reference.html new file mode 100644 index 00000000..c2c5cf09 --- /dev/null +++ b/devdocs/html/reference.html @@ -0,0 +1,8 @@ +<header><h1>HTML reference</h1></header><div class="section-content"> +<p>This <a href="index">HTML</a> reference describes all <strong>elements</strong> and <strong>attributes</strong> of HTML, including <strong>global attributes</strong> that apply to all elements.</p> <dl> <dt id="sect1"><a href="element">HTML element reference</a></dt> <dd> <p>This page lists all the HTML elements, which are created using tags.</p> </dd> <dt id="sect2"><a href="attributes">HTML attribute reference</a></dt> <dd> <p>Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.</p> </dd> <dt id="sect3"><a href="global_attributes">Global attributes</a></dt> <dd> <p>Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.</p> </dd> <dt id="sect4"><a href="content_categories">Content categories</a></dt> <dd> <p>Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics.</p> </dd> <dt id="sect5"><a href="date_and_time_formats">Date and time formats used in HTML</a></dt> <dd> <p>Certain HTML elements allow you to specify dates and/or times as the value or as the value of an attribute. These include the date and time variations of the <a href="element/input"><code><input></code></a> element as well as the <a href="element/ins"><code><ins></code></a> and <a href="element/del"><code><del></code></a> elements.</p> </dd> </dl> +</div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Reference" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference</a> + </p> +</div> diff --git a/devdocs/html/viewport_meta_tag.html b/devdocs/html/viewport_meta_tag.html new file mode 100644 index 00000000..d24854fd --- /dev/null +++ b/devdocs/html/viewport_meta_tag.html @@ -0,0 +1,44 @@ +<header><h1>Viewport meta tag</h1></header><div class="section-content"><p>This article describes how to use the "viewport" <code><meta></code> tag to control the viewport's size and shape.</p></div> +<h2 id="background">Background</h2> +<div class="section-content"> +<p>The browser's <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.</p> <p>Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.</p> <p>This is done because not all pages are optimized for mobile and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.</p> <p>However, this mechanism is not so good for pages that are optimized for narrow screens using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries">media queries</a> — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. The viewport meta tag mitigates this problem of virtual viewport on narrow screen devices.</p> +</div> +<h2 id="viewport_basics">Viewport basics</h2> +<div class="section-content"> +<p>A typical mobile-optimized site contains something like the following:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="pacaL8jB54Cy0DeIstuaL79bGk5j+arOulqPlLs19cc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Not all devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.</p> <p>The basic properties of the "viewport" <code><meta></code> tag include:</p> <dl> <dt id="width"><a href="#width"><code>width</code></a></dt> <dd> <p>Controls the size of the viewport. It can be set to a specific number of pixels like <code>width=600</code> or to the special value <code>device-width</code>, which is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport">100vw</a>, or 100% of the viewport width. Minimum: <code>1</code>. Maximum: <code>10000</code>. Negative values: ignored.</p> </dd> <dt id="height"><a href="#height"><code>height</code></a></dt> <dd> <p>Controls the size of the viewport. It can be set to a specific number of pixels like <code>height=400</code> or to the special value <code>device-height</code>, which is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh">100vh</a>, or 100% of the viewport height. Minimum: <code>1</code>. Maximum: <code>10000</code>. Negative values: ignored.</p> </dd> <dt id="initial-scale"><a href="#initial-scale"><code>initial-scale</code></a></dt> <dd> <p>Controls the zoom level when the page is first loaded. Minimum: <code>0.1</code>. Maximum: <code>10</code>. Default: <code>1</code>. Negative values: ignored.</p> </dd> <dt id="minimum-scale"><a href="#minimum-scale"><code>minimum-scale</code></a></dt> <dd> <p>Controls how much zoom out is allowed on the page. Minimum: <code>0.1</code>. Maximum: <code>10</code>. Default: <code>0.1</code>. Negative values: ignored.</p> </dd> <dt id="maximum-scale"><a href="#maximum-scale"><code>maximum-scale</code></a></dt> <dd> <p>Controls how much zoom in is allowed on the page. Any value less than 3 fails accessibility. Minimum: <code>0.1</code>. Maximum: <code>10</code>. Default: <code>10</code>. Negative values: ignored.</p> </dd> <dt id="user-scalable"><a href="#user-scalable"><code>user-scalable</code></a></dt> <dd> <p>Controls whether zoom in and zoom out actions are allowed on the page. Valid values: <code>0</code>, <code>1</code>, <code>yes</code>, or <code>no</code>. Default: <code>1</code>, which is the same as <code>yes</code>. Setting the value to <code>0</code>, which is the same as <code>no</code>, is against Web Content Accessibility Guidelines (WCAG).</p> </dd> <dt id="interactive-widget"><a href="#interactive-widget"><code>interactive-widget</code></a></dt> <dd> <p>Specifies the effect that interactive UI widgets, such as a virtual keyboard, have on the page's viewports. Valid values: <code>resizes-visual</code>, <code>resizes-content</code>, or <code>overlays-content</code>. Default: <code>resizes-visual</code>.</p> </dd> </dl> <div class="notecard warning" id="sect1"> <p><strong>Warning:</strong> Usage of <code>user-scalable=no</code> can cause accessibility issues to users with visual impairments such as low vision. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">WCAG</a> requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.</p> </div> +</div> +<h2 id="screen_density">Screen density</h2> +<div class="section-content"> +<p>Screen resolutions have risen to the size that individual pixels are indistinguishable by the human eye. For example, smartphones often have small screens with resolutions upwards of 1920–1080 pixels (≈400dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially, this caused usability and readability problems on many touch-optimized websites.</p> <p>On high dpi screens, pages with <code>initial-scale=1</code> will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images may not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties.</p> <p>The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor (<em>density</em>/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.</p> +</div> +<h2 id="viewport_width_and_screen_width">Viewport width and screen width</h2> +<div class="section-content"> +<p>Sites can set their viewport to a specific size. For example, the definition <code>"width=320, initial-scale=1"</code> can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser renders a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices.</p> <p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PenxMObVVCNqlS2qewj3iyCnw2+Iuve216qWi0Zoc1U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=500, initial-scale=1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Other <a href="element/meta#attributes">attributes</a> that are available are <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> +</div> +<h2 id="the_effect_of_interactive_ui_widgets">The effect of interactive UI widgets</h2> +<div class="section-content"> +<p>Interactive UI widgets of the browser can influence the size of the page's viewports. The most common such UI widget is a virtual keyboard. To control which resize behavior the browser should use, set the <code>interactive-widget</code> property.</p> <p>Allowed values are:</p> <dl> <dt id="resizes-visual"><a href="#resizes-visual"><code>resizes-visual</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport">visual viewport</a> gets resized by the interactive widget.</p> </dd> <dt id="resizes-content"><a href="#resizes-content"><code>resizes-content</code></a></dt> <dd> <p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> gets resized by the interactive widget.</p> </dd> <dt id="overlays-content"><a href="#overlays-content"><code>overlays-content</code></a></dt> <dd> <p>Neither the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> nor the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport">visual viewport</a> gets resized by the interactive widget.</p> </dd> </dl> <p>When the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a> gets resized, the initial <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">containing block</a> also gets resized, thereby affecting the computed size of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#viewport-percentage_lengths">viewport units</a>.</p> +</div> +<h2 id="common_viewport_sizes_for_mobile_and_tablet_devices">Common viewport sizes for mobile and tablet devices</h2> +<div class="section-content"><p>If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html" target="_blank">mobile and tablet viewport sizes here</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p></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://drafts.csswg.org/css-viewport/#viewport-meta">CSS Viewport Module Level 1 <br><small># viewport-meta</small></a></td></tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Article: <a href="https://developer.chrome.com/blog/viewport-resize-behavior/" target="_blank">Prepare for viewport resize behavior changes coming to Chrome on Android</a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/Viewport_meta_tag" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag</a> + </p> +</div> |