Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML autofocus Attribute
The autofocus attribute in HTML automatically sets focus to a form element when the page loads. This attribute causes the browser to immediately place the cursor in the specified element, making it ready for user input without requiring a mouse click or tab navigation.
The autofocus attribute is a boolean attribute introduced in HTML5 and can be used with various form elements including <input>, <textarea>, <select>, and <button>.
Syntax
Following is the syntax for the autofocus attribute −
<textarea autofocus></textarea>
The autofocus attribute can also be written as −
<textarea autofocus="autofocus"></textarea>
Both forms are valid in HTML5, but the shorter boolean form is preferred.
Autofocus with Textarea Element
When applied to a <textarea> element, the autofocus attribute automatically places the cursor inside the text area when the page loads, making it immediately ready for text input.
Example
Following example demonstrates the autofocus attribute with textarea elements −
<!DOCTYPE html> <html> <head> <title>Textarea Autofocus Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Interview Questions</h2> <p>Why do you want to go for the Technical Writer Job Profile? (100 words)</p> <textarea rows="6" cols="70" autofocus placeholder="Write your answer here..."></textarea> <p>What are your strengths? (50 words)</p> <textarea rows="4" cols="70" placeholder="Write your answer here..."></textarea> </body> </html>
In this example, the first textarea automatically receives focus when the page loads, indicated by a blinking cursor inside the text area.
The first textarea will have a blinking cursor automatically when the page loads. The second textarea will not have focus until clicked or tabbed to.
Autofocus with Input Elements
The autofocus attribute also works with various input types including text, email, password, and search fields.
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Autofocus Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Login Form</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" autofocus style="padding: 5px; margin: 5px 0;"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Login" style="padding: 8px 16px;">
</form>
</body>
</html>
The username input field automatically receives focus when the page loads, allowing users to immediately start typing without clicking the field first.
Username: [cursor blinking here automatically] Password: [Login]
Autofocus with Select Element
The autofocus attribute can also be applied to dropdown select elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Select Autofocus Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Selection</h2>
<form>
<label for="course">Select your course:</label><br>
<select id="course" name="course" autofocus style="padding: 5px; margin: 10px 0; width: 200px;">
<option value="">Choose a course</option>
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
</body>
</html>
The select dropdown automatically receives focus and can be opened immediately using keyboard navigation (arrow keys or spacebar).
Important Notes
Following are important considerations when using the autofocus attribute −
-
Only one element per page − Only one element should have the autofocus attribute. If multiple elements have autofocus, the first one in the DOM order receives focus.
-
Accessibility concerns − Screen readers and assistive technologies may be disrupted by unexpected focus changes. Use autofocus judiciously.
-
Mobile considerations − On mobile devices, autofocus may trigger the on-screen keyboard to appear automatically.
-
User preference − Some users disable autofocus in their browser settings, so always provide alternative ways to access form elements.
Browser Compatibility
The autofocus attribute is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and widely implemented.
| Element | Autofocus Support | Use Case |
|---|---|---|
| <input> | All modern browsers | Login forms, search boxes |
| <textarea> | All modern browsers | Comment boxes, message forms |
| <select> | All modern browsers | Dropdown selections |
| <button> | All modern browsers | Action buttons, submit forms |
Conclusion
The autofocus attribute improves user experience by automatically focusing form elements when a page loads, eliminating the need for users to manually click or tab to the desired input field. Use it sparingly and consider accessibility implications to ensure your forms are usable by all users.
82 Views
