The simplest way
to create
inputs on a web site is through the use of forms. The syntax of form is
<form
id=”name”>
…
controls to be included as part of the form …
</form>
The id field is
used to name
the form. A form is primarily a grouping
mechanism.
Within the form,
controls
are used to define the input elements.
There are 5 key types of controls:
Button: let’s
the
user click on the button. a binary
input: on or off
Text: allows
the
user to type text. There are actually
two forms – one that limits input to a single line and one that allows
multiple
lines. We’ll limit ourselves to the
single line version.
Radio buttons:
allows the user to select just one of a list of items
Checkbox: allows
the user to select as many as wanted
Select: provides a list for the user to
choose from. Can let the user choose one
or more than one.
The first 4 of these is
defined with the input tag. The last
uses the select button.
Button
<input
value="name
to display"
onclick="what
to do when the button is clicked"
type="button">
There are a lot
of different
options on when an action should be performed, such as when there’s a
mouse-over.
Text
<input
type="text">
The tag itself
does not put
any text on the screen…just the box. You
need to explicitly write out any text that you want.
Radio
<input
name=”name-for-all-associated-radio-buttons” type=”radio”>
The name here is
critical
because radio buttons need to be grouped to identify the set that only
allow
one response.
Checkbox
<input
type=”checkbox”>
The tag itself
does not put
any text on the screen…just the box to be checked.
You need to explicitly write out any text
that you want.
Lists
A list to select
from is
identified with the select tag and a
list of the options. The form of the
select tag is
<select
multiple=”multiple”
size=”number of entries to show”>
…
options to be displayed …
</select>
Use multiple if
you want the
user to be able to select multiple values from the list.
If you want to limit it to one entry, do not
use the attribute. Size indicates how
many entries are to be shown.
Note that slide
bars are
automatically entered for you.
<option
selected=”selected”>
Text
to be displayed
</option>
Use the selected
attribute
if you want the entry to be marked as the default selection. If you don’t want the entry selected, do not
use the attribute. Do not mark more than
one entry as selected unless the select indicated multiple.