Syntax Diagram for <input>
"<input>" allows the user to input data into a <form> and submit it to a CGI script for
See also the <form> tag, as well as <textarea> and <select>.
- Specifies the name of the field, so the handling script can associate the
field name and its value.
- Specifies the type of input field you desire. Options are:
- text (default)
- A single line of text.
- Identical to type text, except that each character in the
field is visually (not actually) replaced by a bullet or
asterisk, depending on what platform and/or browser you're running.
The most obvious use for this is entering passwords, where text must
be entered, but you don't want to risk someone accidentally seeing
- An on/off selector; the user either does or does not want some option.
- Another kind of on/off selector, but this one is grouped into two or
more associated selectors, only one of which can be on at a
time--turning one of them on automatically turns off the selector
that was previously on. (The name comes from car-radio
station-selecting pushbuttons: selecting one station automatically
deselects the previous one.)
- An XY valuator, where the values passed to the input-handling CGI
script represent the location of the mouse within the specified
image at the time of clicking.
- A button that causes the form's contents to be sent to the script for
processing. Multiple submit buttons are allowed; interrogating their
values allows the processing script to behave differently, based on
which Submit button was used.
- A button that causes all fields to revert to their default values.
- Specifies the visual length of the text field; i.e., this does not limit
the number of characters you can enter; just the number of
characters you can see at any one time--other characters scroll
off the ends but are still sent to the processing script. Applies only
to types text and password.
- Specifies the maximum logical length of the field contents.
Attempting to enter more characters than specified in the
maxlength parameter results only in beeps. Applies only to
types text and password.
- Specifies whether or not a particular selector is on by default. Applies
only to types checkbox and radio.
- width, height, hspace, vspace,
border, src, lowsrc, alt,
- These apply only to input of type "image", and the usage of
these parameters is identical to that of the <img> tag.
Example: Single-Line Text Input
. . .causes the following results. Depending on your browser and computer
type, you may notice from the garish button color that in forms, both the
background and bgcolor parameters may be significant in the
<body> tag: the background color
sometimes shows up around button edges. For a memorable example, the
bgcolor for this page is red.
Example: Checkbox Input
. . .causes the following results:
Example: Radio-Button Input
. . .causes the following results:
Example: Image Input
This markup (note that there is no "Submit" button, since the mouse-click
does the same thing):
. . .causes the following results (click somewhere in the image):
Clicking in an image used as an input field generates two variables whose
names are the "name" attribute of the image, followed by a period,
and an "x" or a "y", which represent the distance, in
pixels, of the location of the mouse when clicked, relative to the upper-left
corner of the image. So, in the example above, the image's name is
"Instr", and thus the two variables generated and passed to the CGI
script when you click in the image are "Instr.x" and
"Instr.y". Note that most programming languages used for CGI scripts
(e.g., Perl, C, Korn Shell, etc.) cannot tolerate a period within a variable
name, so it should be changed to a character that is allowed within a variable
name (for example, an underscore) before processing the variables
programmatically; this is shown in the variable names on the page generated by
clicking on the above picture.