diff options
Diffstat (limited to 'devdocs/html/attributes%2Fdirname.html')
| -rw-r--r-- | devdocs/html/attributes%2Fdirname.html | 159 |
1 files changed, 159 insertions, 0 deletions
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> |