<input> tags are placed within a form,
and need to have a name in
order for their values to be passed in the query string.
Equivalent query results can be obtained using a select
list.
type=checkbox
Looks like a box. If the box is checked,
the name=value pair will be in the query string. If the box is not
checked, its name will NOT
be in the query
string at all. Clicking on a checked
box will un-check it.
It is possible to have several checkboxes with the same
name, in this case they should have different values! They can still be
checked or unchecked independently. PHP
users note, the name should end in [] so multiple values will be
retained.
type=radio
Looks like this: , and uses the same attributes as
checkbox.
However, the intended use is for a GROUP of radio buttons having the
same name (and distinct values). Users can only check one of the group.
Named after the tuning buttons on some radios, where pressing a button
brings in a new station, cancelling the previous selection. Note: Once some button is checked, it is
not possible to un-check all buttons, save by RESET of the form.
(see checked attribute below).
The
following attributes apply to both checkbox and radio:
value=
Defaults to "on". Since radio buttons normally occur in groups, each
will need a different value.
checked
If present, the item is initally checked, and will be so on reset. For
radio buttons, this creates a default value (and guarantees the name
will be in the query string.) However, doing this would bias a survey
result.
Examples:
<form action="/~jensen/echo.php"> <div class="ex half"> <input name="a[]" value="1" type="checkbox"> First choice<br> <input name="a[]" value="2" type="checkbox" checked> Second choice<br> <input name="a[]" value="3" type="checkbox"> Third choice<br> <input name="a[]" value="4" type="checkbox"> Last choice<br> </div> <div class="ex half"> <input name="r" value="1" type="radio"> First choice<br> <input name="r" value="2" type="radio"> Second choice<br> <input name="r" value="3" type="radio"> Third choice<br> <input type="submit"> <input type="reset"> </div> </form>