Form Elements: Difference between revisions

From XPUB & Lens-Based wiki
Line 25: Line 25:
= Form Auto-Focus =
= Form Auto-Focus =


It is possible, with a little JavaScript, to automatically set the "focus" (selected element) of a page when the page loads. This is particularly useful when presenting the user with a small form, such as a user login, and you would like that the user can immediately start typing in a field.
It is possible, with a little JavaScript, to automatically set the "focus" (selected element) of a page when the page loads. This is particularly useful when presenting the user with a small form, such as a user login where you would like that any typing gets immediately entered into a text field.


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.
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.

Revision as of 21:45, 19 January 2009

Overview

File:FormElements.pdf

Exercises

  • Draw a line to connect the rendered form elements (on the left) to the line of code that defines them.
  • Check the resulting URL when the form gets submitted & see if you can see the results of the form in the "query string". Note in particular what clicking on the image does.
  • Experiment with adding default values.
  • Add an "onload" hook to auto-focus this form (see auto-focus)

Form Art

In 1997, Alexei Shulgin created form art. Form Art Competition.

Other Resources

Default Values

"Default values" (values that are selected / already entered when the page is first loaded) can be set in different ways, depending on the type of element:

  • For a text input, by adding a "value" attribute to.
  • For a checkbox, by adding checked="checked" as an attibute / value.
  • For a radiobutton or option element, by adding selected="selected" as an attibute / value.
  • For a textarea, by simply typing / pasting the text between the element's open and close tags (simply use the tag as markup, as in a p element).

Form Auto-Focus

It is possible, with a little JavaScript, to automatically set the "focus" (selected element) of a page when the page loads. This is particularly useful when presenting the user with a small form, such as a user login where you would like that any typing gets immediately entered into a text field.

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>