An HTML element with the autofocus attribute indicates the focus of the attribute or tag as soon as the page loads. When a control is in focus, then text input is directed towards autofocus. A page can only have one autofocus element. The <textarea>, <button>, <select>, and the autofocus function supports <input> elements. A page can only have one focused element. Consequently, the autofocus attribute is only applied to one element per page.
Syntax
The code snippet below demonstrates the use of the "autofocus" attribute within the user interaction tag.
<input type = "text" autofucus>
Note :We can use autofocus for the user interaction for the important elements.
Examples
Below are examples demonstrating the autofocus feature applied to various form elements.
Example 1:
Below is a demonstration illustrating the implementation of the autofocus attribute within an input tag. This attribute enables setting the focus on the initial element of a form.
<!DOCTYPE html>
<html>
<head>
<title> The autofocus attribute using HTML </title>
<style>
input{
border: 1px solid red;
}
</style>
</head>
<body style="background-color:aqua;">
<center>
<h2> The autofocus attribute using HTML </h2>
<h3> We can use autofocus for the input text field in the form </h3>
<form action = "/action_demo.php">
<label for = "firstname"> First name: </label>
<input type = "text" id = "firstname" name = "firstname" autofocus>
<br><br>
<label for = "lastname"> Last name: </label>
<input type = "text" id = "lastname" name = "lastname">
<br><br>
<input type = "submit">
</form>
</center>
</body>
</html>
Output
The result displays the HTML element for setting autofocus attributes.
Example 2:
The subsequent instance demonstrates the implementation of the autofocus attribute across all input elements. The autofocus functionality is applicable to both text and date input types within a form. Notably, autofocus is effective solely on the initial input element of the form and is not retained for subsequent elements.
<!DOCTYPE html>
<html>
<head>
<title> The autofocus attribute using HTML </title>
<style>
input{
border: 1px solid red;
}
</style>
</head>
<body style="background-color:aqua;">
<center>
<h2> The autofocus attribute using HTML </h2>
<h3> We can use autofocus for the available input field in the form </h3>
<form action = "/action_demo.php">
<label for = "firstname"> First name: </label>
<input type = "text" id = "firstname" name = "firstname" autofocus>
<br><br>
<label for = "lastname"> Last name: </label>
<input type = "text" id = "lastname" name = "lastname" autofocus>
<br><br>
<label for = "date"> Birtdate: </label>
<input type = "date" id = "date" name = "date" autofocus>
<br><br>
<input type = "submit">
</form>
</center>
</body>
</html>
Output
The result displays the HTML element attributes for autofocus.
Example 3:
In the demonstration below, the autofocus attribute is applied to the textarea tag. It is important to note that the autofocus attribute cannot be utilized with the input and date elements within the form.
<!DOCTYPE html>
<html>
<head>
<title> The autofocus attribute using HTML </title>
<style>
textarea, input{
border: 1px solid red;
}
</style>
</head>
<body style="background-color:aqua;">
<center>
<h2> The autofocus attribute using HTML </h2>
<h3> We can use autofocus for the textarea field in the form </h3>
<form action = "/action_demo.php">
<label for = "firstname"> First name: </label>
<input type = "text" id = "firstname" name = "firstname">
<br><br>
<label for = "date"> Birtdate: </label>
<input type = "date" id = "date" name = "date">
<br><br>
<label for = "message"> Message: </label>
<textarea type = "text" id = "message" name = "message" autofocus> </textarea>
<br><br>
<input type = "submit">
</form>
</center>
</body>
</html>
Output
The output displays the HTML element for setting focus using the autofocus attribute.
Example 4:
Below is a demonstration illustrating the implementation of the autofocus attribute on an input submit button. This attribute can be utilized to automatically focus on the final element within a form.
<!DOCTYPE html>
<html>
<head>
<title> The autofocus attribute using HTML </title>
<style>
textarea, input{
border: 1px solid red;
}
</style>
</head>
<body style="background-color:aqua;">
<center>
<h2> The autofocus attribute using HTML </h2>
<h3> We can use autofocus for the submit button in the form </h3>
<form action = "/action_demo.php">
<label for = "firstname"> First name: </label>
<input type = "text" id = "firstname" name = "firstname">
<br><br>
<label for = "date"> Birtdate: </label>
<input type = "date" id = "date" name = "date">
<br><br>
<label for = "message"> Message: </label>
<textarea type = "text" id = "message" name = "message"> </textarea>
<br><br>
<input type = "submit" autofocus>
</form>
</center>
</body>
</html>
Output
The result displays the HTML element with the autofocus attribute.
Conclusion
The autofocus attribute enhances the visual appeal of an HTML form, allowing for the creation of stylish and visually appealing forms to engage users effectively.