What is HTML autofocus?

The HTML autofocus is an attribute used to focus on certain elements whenever the page is loaded. Focusing on an element means that the control is directed to that particular element. In other words, when you want to enter some data in an input field, the first thing is to click on that input field so that you can type in something into the field.

The extra step of clicking on the input field is reduced by the autofocus attribute. If the input is provided with an autofocus attribute, then the control will be redirected to the field as soon as the web page is loaded and you can directly type the data into it.

The autofocus attribute in HTML is a boolean attribute that will focus the element if the autofocus attribute is used with it, otherwise not. However, this attribute can focus on only one element of a web page. If it is applied on multiple elements of the same page, then only the first element will get focussed.

Syntax

The syntax of the html autofocus attribute is as follows :

The tagname is the name of the tag or element of HTML that needs to be focussed on.

Example

Let us consider an example of a form that has a Name input field containing the html autofocus attribute and a submit button.

The code for the above example is as follows

Output

As you can see in the above output, as soon as the refresh button is clicked the name field is automatically focused and you can write data into it. This is all because of the html autofocus attribute.

Supported Elements

The HTML autofocus attribute only supports certain elements in HTML.

They are listed below :

• <button> :
  The autofocus attribute when applied on the <button> tag focuses the button whenever the web page is loaded.
• <select> :
  It is used to create a dropdown control that gets focused as soon as the web page is loaded.
• <input> :
  It is used to create an input field that gets focused as soon as a page is loaded when the autofocus attribute is used with it.
• <textarea> :
  It creates a multiline input field that automatically gets focussed as soon as the web page is loaded when the autofocus attribute is used with it.

More Examples

Now, let us discuss some more examples, with other elements as well.

The autofocus Attribute Using the textarea Element

The textarea tag is used to add a multiline input field. Let us see how this tag works with the html autofocus attribute.

Output

As you can see in the code, the textarea element is given the attribute autofocus, therefore, as soon as you press the refresh button and load the page again, the textarea field is focussed.

The autofocus Attribute Using the <button> Element

The button tag is used to create a button in HTML. Let us see how this tag is used with the html autofocus attribute.

Output

As you can see in the above output, the button gets focused as soon as the web page loads.

The autofocus Attribute Using the <select> Element

The select tag is used to create a dropdown that gets focused as soon as the webpage is loaded.

Let us see how the select tag is used with the html autofocus attribute.

Output

As you can see in the output the dropdown menu gets focused as soon as the page loads.

The autofocus Attribute Using the <input> Element

The input tag is used to add an input field in HTML. Let us see how the input tag is used with the html autofocus attribute.

Output

As you can see in the above output, the name field is focused whenever the web page is loaded.

Accessibility Considerations

Automatic focusing on form controls can confuse people who are visually impaired. Since, as soon as an element is assigned an autofocus attribute, the user is redirected to the form control before even warning them.

Since the autofocus attribute redirects its user to the form control, it can also cause people with small devices to miss the contents that were specified above as it does not give any warnings before teleporting its user to the form control. It can cause the page to scroll as soon as it is loaded automatically.

Therefore, proper considerations for accessibility should be used while dealing with the html autofocus attribute.

Supported Browsers

The autofocus attribute in HTML is supported by the following browsers.

• Google Chrome
• Microsoft Edge
• Opera
• Firefox
• Safari

Learn More

You can learn more about the related topics from the articles mentioned below :

• Attributes in HTML
• button Tag in HTML
• Dropdown in HTML.