The HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads.
Syntax:
<input type="text" autofocus> Note: This attribute is boolean, meaning it can either be present or absent.
Supported Tags
- Button: Automatically focuses the button when the page loads.
- Input: Automatically focuses the input field when the page loads.
- Select: Automatically focuses the select dropdown when the page loads.
- Textarea: Automatically focuses the textarea when the page loads.
Note: It is important to note that only one element per document can effectively have the autofocus attribute. If multiple elements include autofocus, the first one in the DOM (Document Object Model) will receive focus
HTML autofocus Attribute Examples
Example 1: Focusing on the First Name "Input text Field" on Page Load
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML autofocus Attribute</title>
</head>
<body>
<h2>HTML autofocus Attribute</h2>
<!--Driver Code Ends-->
<form>
<label>First Name:
<input type="text"
autofocus placeholder="Enter Name" />
</label>
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: Autofocus on a textarea Field
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML autofocus Attribute</title>
</head>
<!--Driver Code Ends-->
<body>
<h2>HTML autofocus Attribute</h2>
<textarea rows="3" cols="30" autofocus>
A computer science portal for geeks.
</textarea>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->