HTML Autofocus and Autocomplete

Form inputs aren’t just about collecting data — they’re about creating a smooth and intuitive experience. Two often-overlooked attributes, autofocus and autocomplete, help users interact faster, smarter, and with less friction.

The autofocus attribute automatically focuses an input field as soon as the page loads. It’s perfect for login forms, search bars, or any scenario where you want the user to start typing immediately.

Basic Syntax:

<input type="text" name="fruit" placeholder="Type a fruit" autofocus>

[ cursor is automatically placed here when the page loads ]

Tip: Only one element in a document should have autofocus — browsers ignore duplicates.

autocomplete allows the browser to remember and suggest previously entered values for a given input. It speeds up form filling and reduces typing errors — especially for returning users.

Syntax with Options:

<input type="text" name="fruit" autocomplete="on">

You can also set it to off to prevent suggestions:

<input type="text" name="fruit" autocomplete="off">

Common autocomplete values for input types:

Use these values with sensitive or common input types for better autofill behavior.

<form action="/submit-fruit" method="post">

  <label for="fruit">Favorite Fruit:</label><br>
  <input type="text" id="fruit" name="fruit" placeholder="Apple, Banana..." 
          autofocus autocomplete="on" required><br><br>

  <label for="email">Your Email:</label><br>
  <input type="email" id="email" name="email" autocomplete="email" required><br><br>

  <input type="submit" value="Send Feedback">

</form>

Favorite Fruit: [ cursor starts here ]  
Your Email:     [ saved suggestions show on focus ]  
[Send Feedback]

This form is intuitive from the moment it appears: the cursor is placed in the first field, and returning users are greeted with remembered data.

• Use autofocus for key starting fields (like search or username)
• Leverage autocomplete values to help users autofill correctly
• Avoid overusing autofocus — only one per page
• Turn off autocomplete when dealing with sensitive or temporary data

Both attributes are widely supported in all modern browsers. Some mobile browsers may auto-trigger virtual keyboards when autofocus is used — test your form accordingly.

autofocus and autocomplete enhance your forms without adding complexity. You’ve now learned to:

• Set initial focus for faster interaction
• Control how browsers suggest previously entered values
• Apply meaningful autocomplete hints for different input types

Choose the option that lists all and only the correct statements.

1. on
2. off
3. yes
4. disable

Choose the option that lists all and only the correct statements.

1. Student Name input field (autofocus)
2. Aadhaar number (autocomplete off)
3. Mobile number field (autocomplete on)
4. OTP field (autocomplete on)

Now that your form flows beautifully, let's explore Form Validation — guiding users to enter clean, complete, and correct data every time.