YouTip

## HTML `` autofocus Attribute The `autofocus` attribute is a boolean attribute used to specify that a `` element should automatically receive focus when the web page loads. --- ## Definition and Usage When a page loads, the browser typically requires the user to click or tab to an element to interact with it. By applying the `autofocus` attribute to a ``, you instruct the browser to automatically focus on that button as soon as the page is fully loaded. This allows users to immediately interact with the button (e.g., by pressing the `Enter` or `Space` key) without needing to use a mouse or manually tab to it. - **Attribute Type:** Boolean (presence of the attribute indicates it is active). - **HTML5 Feature:** This attribute is a new addition in HTML5. --- ## Syntax In standard HTML, you can write the attribute in its minimized form: ```html Click Me! ``` ### XHTML Compatibility In XHTML, attribute minimization is forbidden. The `autofocus` attribute must be explicitly defined with its value: ```xml Click Me! ``` --- ## Code Example Below is a basic implementation of a button that automatically receives focus when the page loads: ```html

Autofocus Attribute Example

When this page loads, the button below will automatically be focused.

Click Me! ``` --- ## Browser Support The `autofocus` attribute is widely supported across modern web browsers: | Browser | Supported Version | | :--- | :--- | | **Google Chrome** | Yes | | **Mozilla Firefox** | Yes | | **Safari** | Yes | | **Microsoft Edge** | Yes | | **Internet Explorer** | Supported from IE 10+ (IE 9 and earlier do not support it) | --- ## Important Considerations and Best Practices While the `autofocus` attribute is highly convenient, it should be used with care to maintain a good user experience and accessibility: 1. **Single Instance Per Page:** Only **one** element per page should have the `autofocus` attribute. If multiple elements have `autofocus`, the browser will typically focus on the first one it encounters, or behavior may become unpredictable. 2. **Accessibility (a11y) Impact:** Automatically moving focus can confuse screen reader users, as they may be placed directly onto a button without understanding the context of the rest of the page. Use this attribute only when the primary, expected action of the page is to click that specific button (e.g., a search page or a modal dialog). 3. **Mobile Devices:** On some mobile browsers, autofocusing an input or button might automatically trigger the virtual keyboard or cause unexpected page scrolling, which can disrupt the user experience.