Form Elements: Difference between revisions
| Line 12: | Line 12: | ||
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 = | ||
Revision as of 22:12, 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)
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>