How to pre-select an input element when the page loads in HTML5?
In this article, we are going to pre-select an input element when the page loads i.e. the user doesn’t have to click the first text box to start writing on it. When the page is loaded the input is to be pre-selected and the user can start typing directly. This can be done by using the autofocus attribute. It is a boolean attribute which brings element into focus and supports <button>, <input>, <select> and <textarea> elements.
Approach:
- Create a div for the HTML form.
- We will make input elements inside a form of type text and adding autofocus to the username.
- On page load, we will see that username will be in focus, and we can directly start typing.
Syntax :
<input type="text" autofocus>
Example:
HTML
<!DOCTYPE html> <html lang="en"> <body> <h1> pre-select an input element </h1> <form> <label>Username:</label><br> <input type="text" name="username" autofocus> <br> <label>Email id:</label><br> <input type="text" name="email_id"> <br><br> <input type="submit" value="Submit"> </form> </body> </html> |
Output:
Pre-select input element
Please Login to comment...