YouTip

# HTML autofocus Attribute The `autofocus` attribute is a boolean attribute used in HTML5 to automatically focus an input element when the page loads. This allows users to start typing immediately without having to click or tap on the input field first, significantly improving the user experience for search bars, login screens, and forms. --- ## Definition and Usage The `autofocus` attribute specifies that an `` element should automatically get focus when the page finishes loading. * **Attribute Type:** Boolean (presence of the attribute implies it is `true`). * **Introduced in:** HTML5. * **Common Use Cases:** Search inputs on homepages, the first input field of a login or registration form, and modal dialog inputs. --- ## Syntax In standard HTML, you can write the attribute as a minimized boolean attribute: ```html ``` ### HTML vs. XHTML Difference In XHTML, attribute minimization is forbidden. Therefore, the `autofocus` attribute must be defined with its value explicitly set: ```xml ``` --- ## Code Examples ### Basic Example The following example demonstrates how to automatically set focus on the "First name" input field when the page loads: ```html

First name:
Last name:

``` --- ## Browser Support The `autofocus` attribute is highly supported across all modern web browsers: | Browser | Supported Version | | :--- | :--- | | **Google Chrome** | Yes | | **Mozilla Firefox** | Yes | | **Microsoft Edge / Internet Explorer** | IE 10+ / Edge | | **Safari** | Yes | | **Opera** | Yes | > **Note:** Internet Explorer 9 and earlier versions do not support the `autofocus` attribute. --- ## Important Considerations & Best Practices While the `autofocus` attribute is highly convenient, developers should keep the following best practices in mind: 1. **Only One Autofocus per Page:** You should only apply the `autofocus` attribute to a single element per page. If multiple elements have the `autofocus` attribute, the browser will typically focus the first one it encounters, but this behavior can vary and is considered invalid HTML. 2. **Accessibility (a11y) Impact:** Use this attribute with caution. Automatically focusing an input can confuse screen reader users, as it may skip past important introductory content or headers on the page. 3. **Mobile Device Behavior:** On some mobile browsers, autofocusing an input field will automatically open the virtual on-screen keyboard, which can obstruct a significant portion of the screen and disrupt the user's initial viewing experience.