Framify

Tag: <input>

<input> Syntax

Syntax Diagram for <input>
Open Parameter = Value Close
<input name = "name" >
type = text
password
checkbox
radio
image
submit
reset
value = "text"
size = chars
maxlength
checked
width = pixels
height
hspace
vspace
border
src = url
lowsrc
alt = "text"
align = alignment

<input> Description

"<input>" allows the user to input data into a <form> and submit it to a CGI script for processing.
name
Specifies the name of the field, so the handling script can associate the field name and its value.
type
Specifies the type of input field you desire. Options are:

text (default)
A single line of text.
password
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 it.
checkbox
An on/off selector; the user either does or does not want some option.
radio
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.)
image
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.
submit
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.
reset
A button that causes all fields to revert to their default values.
size
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.
maxlength
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.
checked
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, align
These apply only to input of type "image", and the usage of these parameters is identical to that of the <img> tag.
See also the <form> tag, as well as <textarea> and <select>.

<input> Examples

Example: Single-Line Text Input

This markup: <form method="POST" action="http://www.arnspub.com/QuickRef/QRSingleLine.cgi"> "Vanilla" single-line input: <input name=Vanilla size=15><br> Single-line input with default value: <input name=DefaultVal size=20 value="(default value)"><br> Single-line input with maximum length: <input name=MaxLen size=5 maxlength=5><br> Single-line input with password protection: <input name=Password type=password size=10><br> Single-line input with password protection and default value: <input name=DefaultPassword type=password size=10 value="fred"><br> Hidden-field input: <input name=Hidden type=hidden value="Can't see me."><br> <input value=" Reset Fields " type=reset> <input type=submit name=SubmitBtn value=" Submit Form Here. . . "> <input type=submit name=SubmitBtn value=" . . .or Here "> </form> . . .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.
"Vanilla" single-line input:
Single-line input with default value:
Single-line input with maximum length:
Single-line input with password protection:
Single-line input with password protection and default value:
Hidden-field input:

Example: Checkbox Input

This markup: <form method="POST" action="http://www.arnspub.com/QuickRef/QRCheckBox.cgi"> Areas of Interest:<br> <input name=Astronomy type=checkbox checked> Astronomy<br> <input name=Biology type=checkbox> Biology<br> <input name=Cartography type=checkbox> Cartography<br> <input name=Dermatology type=checkbox checked> Dermatology<br> <input name=Egyptology type=checkbox> Egyptology<br> <input value=" Reset Fields " type=reset> <input type=submit name=SubmitBtn value=" Submit Form"> </form> . . .causes the following results:
Areas of Interest:
Astronomy
Biology
Cartography
Dermatology
Egyptology

Example: Radio-Button Input

This markup: <form method="POST" action="http://www.arnspub.com/QuickRef/QRRadioButton.cgi"> Age:<br> <input name=Age type=radio value="Whippersnapper" checked> &lt;30<br> <input name=Age type=radio value="Precarious"> 30-40<br> <input name=Age type=radio value="Old Fogey"> &gt;40<br> Sex:<br> <input name=Sex type=radio value="Male"> Male<br> <input name=Sex type=radio value="Female"> Female<br> <input value=" Reset Fields " type=reset> <input type=submit name=SubmitBtn value=" Submit Form"> </form> . . .causes the following results:
Age:
<30
30-40
>40
Sex:
Male
Female

Example: Image Input

This markup (note that there is no "Submit" button, since the mouse-click does the same thing): <form method="POST" action="http://www.arnspub.com/QuickRef/QRImage.cgi"> <input type=image src="Instruments.gif" name="Instr" height=172 width=250 hspace=7 border=0> </form> . . .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.
Last Modified: