Article Categories

Selected Reading

Place autofocus in the text box when a page gets loaded without JavaScript support in HTML?

HTML Web Development Front End Technology

The autofocus attribute is a boolean HTML attribute that automatically focuses on a specific input element when a page loads, eliminating the need for JavaScript. When present on an <input>, <textarea>, or <button> element, the browser automatically places the cursor in that field, making it ready for user input immediately upon page load.

Syntax

Following is the syntax for the autofocus attribute −

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

Alternatively, you can use the explicit boolean syntax −

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

Basic Autofocus Example

Following example demonstrates how the autofocus attribute works with a simple form −

<!DOCTYPE html>
<html>
<head>
   <title>Autofocus Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>User Registration Form</h2>
   <form action="/new.php">
      First Name: <input type="text" name="fname" autofocus><br><br>
      Last Name: <input type="text" name="lname"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

When the page loads, the cursor automatically appears in the "First Name" field, ready for user input −

User Registration Form

First Name: [cursor blinking here]
Last Name: [empty field]
[Submit]

Autofocus with Different Input Types

The autofocus attribute works with various HTML form elements including text inputs, textareas, select dropdowns, and buttons.

Example − Autofocus on Textarea

<!DOCTYPE html>
<html>
<head>
   <title>Textarea Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Contact Form</h2>
   <form action="/contact.php">
      Name: <input type="text" name="name"><br><br>
      Message: <br>
      <textarea name="message" rows="4" cols="50" autofocus placeholder="Enter your message here..."></textarea><br><br>
      <input type="submit" value="Send Message">
   </form>
</body>
</html>

The cursor automatically focuses on the textarea field when the page loads, making it ready for message input.

Example − Autofocus on Search Field

<!DOCTYPE html>
<html>
<head>
   <title>Search with Autofocus</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
   <h1>TutorialsPoint Search</h1>
   <form action="/search.php">
      <input type="search" name="query" placeholder="Search tutorials..." autofocus style="padding: 10px; width: 300px; font-size: 16px;">
      <input type="submit" value="Search" style="padding: 10px 20px; font-size: 16px;">
   </form>
</body>
</html>

This creates a search page where users can immediately start typing their search query without clicking on the search box first.

Important Rules and Limitations

When using the autofocus attribute, keep the following rules in mind −

Only one element per page − Only one form element should have the autofocus attribute. If multiple elements have autofocus, the first one in the document order receives focus.
Browser support − The autofocus attribute is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+.
Accessibility considerations − Autofocus can be disruptive for screen reader users and should be used thoughtfully in accessible designs.
User preference − Some browsers allow users to disable autofocus behavior in their settings.

Example − Multiple Autofocus (Only First Works)

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Autofocus Test</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Login Form</h2>
   <form action="/login.php">
      Username: <input type="text" name="username" autofocus><br><br>
      Password: <input type="password" name="password" autofocus><br><br>
      <input type="submit" value="Login">
   </form>
   <p><em>Note: Only the first field (Username) will receive focus.</em></p>
</body>
</html>

Even though both fields have autofocus, only the Username field receives focus when the page loads, as it appears first in the document.

Browser Compatibility

The autofocus attribute has excellent browser support across all modern browsers −

Browser	Version Support
Chrome	5.0+
Firefox	4.0+
Safari	5.0+
Internet Explorer	10.0+
Edge	All versions
Opera	9.6+

Conclusion

The autofocus attribute provides a simple, JavaScript-free way to automatically focus on form elements when a page loads. Use it thoughtfully on the most important input field of your form, such as search boxes or the first field in registration forms, to improve user experience and reduce the need for manual clicking.

George John

Updated on: 2026-03-16T21:38:53+05:30

203 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next