Form Elements: Difference between revisions
No edit summary |
|||
| (4 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
* 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. | * 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 | default values]]. | * Experiment with adding [[#Default Values | default values]]. | ||
* Add an "onload" hook to auto-focus this form (see [[#Form Auto-Focus]]) | * Add an "onload" hook to auto-focus this form (see [[#Form Auto-Focus | auto-focus]]) | ||
* Try changing an input element from text to "hidden" -- make sure this element has a default value (a value attribute set), reload the page, then submit & observe the effect. Hidden values are very common in forms to transmit information that isn't necessarily shown on the screen, often to "carry over" information in the case of a series of forms presented one after the other. | |||
= Form Art = | = Form Art = | ||
| Line 12: | Line 13: | ||
In 1997, [http://www.webheaven.co.yu/b_shul.htm Alexei Shulgin] created [http://www.c3.hu/collection/form/ form art]. [http://easylife.org/form/competition/competition.html Form Art Competition]. | In 1997, [http://www.webheaven.co.yu/b_shul.htm Alexei Shulgin] created [http://www.c3.hu/collection/form/ form art]. [http://easylife.org/form/competition/competition.html Form Art Competition]. | ||
= | = Resources = | ||
* http://www. | * [http://www.w3.org/TR/html401/interact/forms.html W3C/HTML4 form documentation] | ||
= Default Values = | = Default Values = | ||
| Line 25: | Line 26: | ||
= Form Auto-Focus = | = Form Auto-Focus = | ||
It is possible, with a | 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. | ||
Latest revision as of 22:43, 19 January 2009
Overview
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)
- Try changing an input element from text to "hidden" -- make sure this element has a default value (a value attribute set), reload the page, then submit & observe the effect. Hidden values are very common in forms to transmit information that isn't necessarily shown on the screen, often to "carry over" information in the case of a series of forms presented one after the other.
Form Art
In 1997, Alexei Shulgin created form art. Form Art Competition.
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>