HTML <textarea> tabindex Attribute

The tabindex attribute on a <textarea> tag specifies the keyboard tab order of the textarea relative to the other controls on the page. The tabindex attribute indicates when its textarea can be focused.

Example

#

A <textarea> and other controls with tabindex values. Place the focus on the first field and tab a few times. Focused elements have a  gold  background.





<form action="/tutorial/action.html">
  <input type="text" tabindex="1" placeholder="First name" name="firstname"><br />
  <input type="text" tabindex="2" placeholder="Last name" name="lastname"><br />
  <input type="text" tabindex="3" placeholder="Subject" name="subject"><br />
  <textarea tabindex="4" rows="5" placeholder="Message" name="message"></textarea><br />
  <input type="submit" tabindex="5" value="Submit">
</form>    

Code explanation

The tabindex attribute assigns a tab sequence number to an textarea.

The actual tabindex numbers are not important. So, 30, 22, and 10 would give the same results.


Using tabindex

The tabindex specifies the focus order of the <input> relative to the other areas or controls on the page.

This attribute indicates the sequential order of elements using the tab key.

With a negative tabindex value, the textarea is not reachable by tabbing but can be accessed by mouse or JavaScript.

The tabindex attribute is a global attribute that can be applies to any element.


Syntax

<textarea tabindex="index">

Values

#

Value Description
index Numeric value indicating the tab order relative to the other controls.

Browser support

Here is when tabindex support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <textarea>
Guides