<textarea tabindex=""">
- Attribute of
- HTML5 Textarea Attributes: Here's What You Should Know
- What does
<textarea tabindex=""">do? - Sets the position of a <textarea> element in the tab order.
Code Example
<form>
<textarea tabindex="2" readonly>Click here and press 'tab'.</textarea>
<p>If you don't set the tabindex property, <a href="#">this link</a> will be included as a stop in the tab order.</p>
<textarea tabindex="5" readonly>This box appears second on the page, but is last in the tab index.</textarea>
<textarea tabindex="4" readonly>This is the third textarea in the tabindex order.</textarea>
<textarea tabindex="3" readonly>Tab will move you to this textarea second.</textarea>
</form>Using tabindex to Control Form Flow
If you’re comfortable online–and there’s a good chance you are if you’re visiting this site–then you’re probably used to working way through web forms using the tab key. By default, the tab key will move the cursor from one form element to the next in the order that the elements appear in the HTML document. However, certain other HTML elements, primarily anchor elements, are included in the tab order by default. In addition, the browser won’t rearrange the tab order when you use CSS to position form inputs in a different way than they appear in the HTML document. The tabindex property is the answer to both of these problems. Use it to skip over elements like links that you don’t want the tab order to include and to make sure that tab moves the cursor through form fields in the order you want them to be completed.
