Latest revision as of 22:43, 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)
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

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.

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

@@ Line 1: / Line 1: @@
+= Overview =
 [[Image:FormElements.pdf]]
 == Exercises ==
-# Connect the rendered form elements (on the left) to the line of code that creates them.
+* 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.
+* 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.
+* 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 =
-In 1997, [http://www.webheaven.co.yu/b_shul.htm Alexei Shulgin] created [http://www.c3.hu/collection/form/ 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]
-= Other Resources =
+= Default Values =
-* http://www.yourhtmlsource.com/forms/basicforms.html
+"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 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.
+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.

Form Elements: Difference between revisions