HTML autofocus Attribute

The autofocus attribute on an HTML element specifies that the element immediately receives focus when the page is loaded. Only one element on a page can have autofocus. Elements that accept this attribute include <input>, <select>, <textarea>, and <button>.

Example

#

An autofocus attribute on an <input> element.
This control gets focus when this page is loaded and displays the blinking text entry 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.


Using autofocus

The autofocus attribute specifies that an element receives focus once the page is loaded.

Only one element on a page can have the autofocus attribute.


Syntax

<tagname autofocus>

Elements that accept 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

<select> with autofocus

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.


<textarea> with autofocus

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.


The <button> autofocus Attribute

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.


Browser support

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

You may also like



Guides