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