HTML Set focus on load event by using body tag

In a form we can keep the blinking cursor focused in any component at the time of opening of the page. This way the visitor can directly enter the data or make selection without putting extra effort on selecting the form element. Much time we know the first job for the user is to enter the data in a particular field, so by default we can keep the cursor in that so the data can be entered directly. The user always has the option of changing the cursor or focus on different form element based on the requirement.
HTML input textbox and its attributes like name value size maxlength autofocus with examples.

For example let us take the case of a login form where the member has to enter the login id and password. As there are two input fields used for this purpose, generally the user will enter user id first and then move to next field to enter password. Here we can keep our focus to the user id field at the time of page open or load so the member can directly enter ID in the text box. So we have to set our focus to the user id field at the time of page load. We can achieve this by using onload command in the body html tag. Like this
<body onLoad="document.f1.userid.focus()";>
Our form element can be like this
<form method=post action='' name=f1>
<input type=text name='userid'>
<input type=submit value=Submit></form>
The onLoad command inside the body tag will set the focus to the text field of the form.
demo of set focus ( refresh this page )
You can always see the cursor in the above text field every time this page reloads.

autofocus New in HTML5

We can add autofocus attribute to input element to keep the crusher inside it. This will work in HTML 5
DEMO of autofocus
Read on how window.onload function is used in JavaScript to execute codes as soon as the page loads
Using buttons to link different pages Hidden text field
Submit form to a new Window HTML and JavaScript Code for Back to Previous Page
HTML Form

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    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)

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer