HTML Autofocus Attribute

Definition

The autofocus attribute specifies whether the <element> should be auto-focused when the page document loads.

Applicable Elements

The autofocus Attribute can be used with the following elements:

• <button>
• <input>
• <select>
• <textarea>

The autofocus attribute is defined as a Global Attribute in the HTML Living Standard Specification.

HTML <button> autofocus Attribute

The <button> element creates a clickable button and is often used to submit forms and other button functionality.

The autofocus attribute specifies that the <button> should be auto-focused when the page document loads.

Syntax

<button type="button" autofocus>Button Text</button>

Usage

• The autofocus attribute is a boolean. If present on the <button> element, the button will be auto-focused when the page loads.
• There can only be one element on the page with the autofocus attribute.

Values

Values can include:

• autofocus

Examples

The example below shows two buttons. The second button has the autofocus attribute.

<button type="button">Normal Button</button>
<button type="button" autofocus>Focussed Button</button>

HTML <input> autofocus Attribute

The <input> element is a field used in HTML Forms enabling the user input data.

The autofocus attribute specifies that the <input> element should be auto-focused when the page document loads.

Syntax

<input type="text" name="name" id="name" autofocus>

Usage

• The autofocus attribute is a boolean. If present on the <input> element, the input control will be auto-focused when the page loads.
• There can only be one element on the page with the autofocus attribute.

Values

Values can include:

• autofocus

Examples

The example below shows the text <input> element having autofocus.

<form action="" method="get" class="form">
    <label for="name">Name: </label>
    <input type="text" name="name" id="name" autofocus>
</form>

HTML <select> autofocus Attribute

The <select> tag creates a control that enables you to select from a set of options in the form of a drop-down list.

The autofocus attribute specifies that the <select> element should be auto-focused when the page document loads.

Syntax

<select name="song-select" id="song-select" autofocus>

Usage

• The autofocus attribute is a boolean. If present on the <select> element, the select control will be auto-focused when the page loads.
• There can only be one element on the page with the autofocus attribute.

Values

Values can include:

• autofocus

Examples

In this example, the <select> element is auto-focused on page load.

<label for="song-select">Choose a song:</label>
<select name="song-select" size=1 id="song-select" autofocus>
    <optgroup label="Oasis">
        <option>Wonderwall</option>
        <option>Don't look back in anger</option>
        <option>Supersonic</option>
    </optgroup>
    <optgroup label="Beetles">
        <option>Here comes the sun</option>
        <option>Hey Jude</option>
        <option>Let it be</option>
    </optgroup>
</select>

HTML <textarea> autofocus Attribute

The <textarea> element is a multi-line field used in HTML Forms enabling the user input data.

The autofocus attribute specifies that the <textarea> element should be auto-focused when the page document loads.

Syntax

<textarea id="message" name="message" autofocus></textarea>

Usage

• The autofocus attribute is a boolean. If present on the <textarea> element, it will be auto-focussed when the page loads.
• There can only be one element on the page with the autofocus attribute.

Values

Values can include:

• autofocus

Examples

In this example, the <textarea> element is auto-focused on page load.

<label for="message">Leave a message</label>

<textarea id="message"
  autofocus
  name="message" 
  rows="6" 
  placeholder="Feel free to leave a message and we 
  will get back to you as soon as we can."></textarea>

Specification

The autofocus HTML specification is defined as Global Attribute for the Living Standard Specification:

• HTML Living Standard Specification

Browser Support

The autofocus has the following browser support:

Desktop

Mobile