Form Elements: Difference between revisions
(New page: = Other Resources = * http://www.yourhtmlsource.com/forms/basicforms.html) |
No edit summary |
||
| Line 1: | Line 1: | ||
= Other Resources = | = Other Resources = | ||
* http://www.yourhtmlsource.com/forms/basicforms.html | * http://www.yourhtmlsource.com/forms/basicforms.html | ||
= Form Auto-Focus = | |||
It is possible, with a small bit of JavaScript, for a page to automatically set the "focus" of a page on a particular form element when the page loads. This is particularly useful when presenting the user with a small form, such as a user login, that the user may often come across and thus where every extra click slows down what might be an otherwise quick process. Most "power users" know that by pressing the "tab" key, the browser will then shift focus to a next form element, if possible, which makes filling in a simple form something that can be done only with the keyboard. | |||
This is achieved by adding a single command to the page's "onload hook" (a function that gets called one time, when the page has finised loading. The command, here, uses the document getElementById function to retrieve a particular form element with a particular id, and then calls it's focus method. | |||
<source lang="html4strict"> | |||
<body onload="document.getElementById('username').focus()"> | |||
<form action="" method="get"> | |||
name: <input type="text" id="username" name="username" value="" /><br /> | |||
password: <input type="password" name="userpassword" value="" /><br /> | |||
<input type="submit" name="thebutton" value="login" /> | |||
</form> | |||
</body> | |||
</source> | |||
Revision as of 16:10, 19 January 2009
Other Resources
Form Auto-Focus
It is possible, with a small bit of JavaScript, for a page to automatically set the "focus" of a page on a particular form element when the page loads. This is particularly useful when presenting the user with a small form, such as a user login, that the user may often come across and thus where every extra click slows down what might be an otherwise quick process. Most "power users" know that by pressing the "tab" key, the browser will then shift focus to a next form element, if possible, which makes filling in a simple form something that can be done only with the keyboard.
This is achieved by adding a single command to the page's "onload hook" (a function that gets called one time, when the page has finised loading. The command, here, uses the document getElementById function to retrieve a particular form element with a particular id, and then calls it's focus method.
<body onload="document.getElementById('username').focus()">
<form action="" method="get">
name: <input type="text" id="username" name="username" value="" /><br />
password: <input type="password" name="userpassword" value="" /><br />
<input type="submit" name="thebutton" value="login" />
</form>
</body>