The autofocus attribute on an HTML element specifies that the element has focus once the page is loaded.
Focus means that text input is directed to that control.
Only one element on a page can have autofocus.
An <input> element with autofocus enabled.
This control gets focus when this page is loaded and displays the blinking text cursor.
<form action="/tutorial/action.html">
<input autofocus type="text" name="name" placeholder="Name" ><br /><br />
<input type="submit">
</form>
For additional details see our HTML input autofocus Reference.
Elements that accept autofocus are <input>, <select>, <textarea>, and <button>.
Only a single element on a page can have focus.
Therefore, only one element on a page can have the autofocus attribute.
<tagname autofocus>
These elements accept the autofocus attribute:
| Elements | Description | |
|---|---|---|
| <input> | Specifies an input control -- see example above | |
| <select> | Creates a dropdown control | |
| <textarea> | Creates a multi-line input element | |
| <button> | Defines a clickable button |
A <select> tag with the autofocus attribute.
Note: this page has too many autofocus controls. Click 'Try It live' to see it in action.
<form action="/tutorial/action.html">
<select name="size" autofocus>
<option value="">-- Select Size --</option>
<option value="small"> Small </option>
<option value="medium"> Medium </option>
<option value="large"> Large </option>
</select> <br/>
<button type="submit">Submit</button>
</form>
For additional details see our HTML select autofocus Reference.
A <textarea> tag with the autofocus attribute.
Note: this page has too many autofocus controls. Click 'Try It live' to see it in action.
<form action="/tutorial/action.html">
<textarea autofocus rows="3" cols="50" name="message"
placeholder="Enter your message"></textarea>
<br/><br/>
<input type="submit">
</form>
For additional details see our HTML textarea autofocus Reference.
A <button> tag with the autofocus attribute.
Note: this page has too many autofocus controls. Click 'Try It live' to see it in action.
<button autofocus
onclick="alert('Yes. I have autofocus.')">Confirm</button>
For additional details see our HTML button autofocus Reference.
Here is when autofocus 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 |
