You've already seen the textbox in action. Now let's look at a
couple of other form elements that will come in handy, starting with "hidden."
This code ...
<form action="nextpage3.html" method="get" name="form2">
<input type="hidden" name="hiddenvalue" value="hiddenstuff"><br>
<input type="Checkbox" name="check1" value="yup" checked>
<b>Checkbox 1 here</b><br><input type="Checkbox" name="check2" value="yup">
<b>Checkbox 2 here</b><br><input type="Submit" value="Take a Look" align="MIDDLE">
</form>
... produces this form:
Notice that after you click Take a Look,
the name and value of the hidden element are passed to the querystring. The users have no knowledge of the
presence of the hidden values (unless they View Source), and they have no
control over the value of the hidden element.
The checkbox is a different story. If the checkbox is checked, the name
and value of the checkbox are passed on to the querystring. If the checkbox isn't checked, nothing
is passed along. Include the word "checked" in the element to make the checkbox default to being checked.
The checkbox is great for yes/no decisions. Yes, the box is checked. No,
it's not. But what if there are more than two choices? There are a couple
of ways to go about this: radio buttons or a pulldown list.
In the code below, notice that I have three elements with the type radio, and each of these elements has the same
name (radios). We could add as many radios as we wanted to this list. If
you want one of the values to be preselected, insert checked into the tag.
The code:
<form action="nextpage3.html" method="get" name="form3">
<input type="radio" name="radios" value="radio1" checked><b>This is radio button 1</b><br>
<input type="radio" name="radios" value="radio2"><b>This is radio button 2</b><br>
<input type="radio" name="radios" value="radio3"><b>This is radio button 3</b><br>
<input type="Submit" value="Take a Look" align="MIDDLE">
</form>
The form:
With a pulldown box, we need to surround the options in <select>
tags. A quick look at the code below should tell you how this works. Note
that the text that appears to the user has nothing to do with the value
passed to the querystring. As always, it's the
value attribute that gets passed.
The code:
<form>
<select name="pulldown">
<option value="1">pulldown item 1</option>
<option value="2">pulldown item 2</option>
</select><br>
<input type="Submit" value="Take a Look" align="MIDDLE">
</form>
The form:
And if you don't like the look and feel of what I've shown so far,
you can always use a menu, which looks a little something like this:
And here's the code that makes this thing tick:
<form action="nextpage3.html" method="get" name="form3">
<select name="menu" size="3" multiple>
<option value="1">menu item 1</option>
<option value="2">menu item 2</option>
<option value="3">menu item 3</option>
<option value="4">menu item 4</option>
</select>
<input type="Submit" value="Take a Look" align="MIDDLE"><br>
</form>
At this point, I'm sure you understand pretty much everything that's
going on here. There are only a couple of things we should go over. First
is the size attribute in the select element,
which indicates the number of options that will be visible within the box. The user will have to use the scroll bars to get to the other options. By
including the word multiple in the select tag, we enable the user to select
more than one option. (To select more than one option, users just
hold down the Control key on PCs or the Command key on Macs when they click
on multiple listings.) If we didn't add the word multiple, users could
select only one item at a time.
next page»
