Form Elements: Difference between revisions
(New page: = Other Resources = * http://www.yourhtmlsource.com/forms/basicforms.html) |
|||
| (13 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
= | = Overview = | ||
* http://www. | [[Image: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 | default values]]. | |||
* 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 = | |||
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.w3.org/TR/html401/interact/forms.html W3C/HTML4 form documentation] | |||
= 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. | |||
<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> | |||
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>