Set Focus on an HTML Form Field
To place keyboard focus on a form field when a page opens, HTML provides the autofocus attribute. JavaScript can also move focus later with the element's focus() method.
Use automatic focus only when it clearly helps the user. Moving focus unexpectedly can skip page context for keyboard and screen-reader users and may open the on-screen keyboard on mobile devices.
Use the HTML autofocus Attribute Top ↑
For a simple form that genuinely should begin with one field ready for input, autofocus is the shortest solution.
<form action="" method="post">
<label for="userid">User ID</label>
<input type="text" id="userid" name="userid" autofocus>
</form>autofocus is a Boolean attribute, so it does not need a value such as autofocus="true". Use it on at most one element that should receive initial focus.
Set Focus with JavaScript Top ↑
Use JavaScript when focus should move because of application logic, such as after the user opens a form section or clicks a control.
<label for="username">User name</label>
<input type="text" id="username" name="username">
<button type="button" id="focus-user">Focus user name</button>
<script>
const field = document.getElementById("username");
document.getElementById("focus-user").addEventListener("click", () => {
field.focus();
});
</script>The focus() method moves focus to the target element. In modern JavaScript, select the element by id or another DOM selector instead of depending on older form-name shortcuts such as document.f1.userid.
JavaScript Focus After Page Load Top ↑
If JavaScript must set initial focus, wait until the DOM is available. This is preferable to putting JavaScript directly in the <body onload> attribute.
document.addEventListener("DOMContentLoaded", () => {
const field = document.getElementById("userid");
field.focus();
});However, if the only requirement is initial focus on a field, prefer the HTML autofocus attribute and avoid unnecessary JavaScript.
See also running JavaScript when a page loads.
Older body onLoad Pattern Top ↑
Older pages may contain code similar to this:
<body onload="document.f1.userid.focus()">This can still be encountered in legacy code, but it mixes behavior into HTML and relies on named form access. For new code, use autofocus or attach JavaScript with addEventListener().
Example: Login Form Top ↑
A login form may place initial focus on the user ID field so a user who has already reached the form can begin typing immediately.
<form method="post" action="">
<label for="login-id">Login ID</label>
<input type="text" id="login-id" name="userid" autocomplete="username" autofocus>
<label for="password">Password</label>
<input type="password" id="password" name="password" autocomplete="current-password">
<button type="submit">Sign in</button>
</form>Labels remain necessary even when a field receives focus automatically. Focus does not replace an accessible name or other form guidance.
Accessibility and UX Considerations Top ↑
- Do not steal focus without a clear reason. A user may be reading content or navigating with a keyboard or assistive technology.
- Automatic focus can scroll the page. On small screens it may also open the virtual keyboard immediately.
- Keep visible labels. Placeholder text is not a replacement for a label.
- Keep focus visible. Do not remove focus outlines unless you provide an equally clear focus indicator.
- Avoid multiple autofocus targets. Only one element should be the intended initial focus target.
Textbox Attributes Video Top ↑
The existing Plus2net video demonstrates text-input attributes including autofocus, name, value, maxlength, placeholder, readonly and disabled.
Common Focus Mistakes Top ↑
Forcing focus on every page Top ↑
Automatic focus should support a clear task, not be added to every form simply because it is possible.
Using body onload for simple autofocus Top ↑
If one field should receive initial focus, the HTML autofocus attribute is simpler and clearer.
Focusing a field that is hidden or disabled Top ↑
The target must be available and focusable when focus() is called.
Using focus instead of validation Top ↑
Moving focus to an invalid field can help after validation, but it does not replace proper client-side and server-side validation.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
Add the Boolean autofocus attribute to the input when automatic initial focus is appropriate.
Select the element and call its focus() method, for example document.getElementById("userid").focus().
It can work in legacy code, but new pages should usually use autofocus for initial focus or unobtrusive JavaScript with event listeners when focus depends on application logic.
Do not design a page with multiple competing autofocus targets. Only one element should be intended to receive initial focus.
Yes. Automatic focus can move a keyboard or screen-reader user's position unexpectedly, scroll the page, or open a mobile keyboard before the user is ready.
No. Focus only makes the element the current interaction target. Submission and validation are separate behaviors.
Using Buttons to Link Pages Hidden Text Field
Submit Form to a New Window Back to Previous Page
HTML Form
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
| Mauro | 18-11-2014 |
| very good | |
| Pistol | 24-04-2015 |
| Add ";" after () - <body onLoad="document.f1.userid.focus();"> | |
| Catur Widianto | 04-06-2015 |
| Nice Job , Brother :) Thanks for your solution (y) | |