When the form is displayed in a web browser, the user can fill it out by making choices and entering text using the interface elements, and then submit the form by clicking a "Submit" button.
Two other kinds of interface elements you can put in a form are selection lists and text areas. Selection lists act as menus and are defined with the SELECT tag. Multi-line text-entry fields are defined with the TEXTAREA tag.
http://hoohoo.ncsa.uiuc.edu:80/cgi/overview.html
<FORM
ACTION="
serverURL
"
ENCTYPE="
encodingType
"
METHOD="GET"|"POST"
NAME="
formName
"
ONRESET="
JScode
"
ONSUBMIT="
JScode
"
TARGET="
windowName
"
>
...
</FORM>
The ACTION attribute is required if any action is to occur when the user presses a "Submit" button in the form.
specifies the URL of the program to be invoked when the form is submitted. The action can also be a mailto: URL if the form results are to be mailed to someone.
specifies the MIME encoding of the data sent:
"application/x-www-form-urlencoded"
(the default), is usually used if the METHOD attribute has the value POST."multipart/form-data"
is used when the form contains a file upload element (INPUT TYPE="FILE").
specifies how information is sent to program invoked by submitting the form.
- GET (the default) appends the input information to the URL which on most receiving systems becomes the value of the environment variable QUERY_STRING.
- POST sends the input information in a data body that is available on stdin with the data length set in the environment variable CONTENT_LENGTH.
specifies the name of the form. The name is not displayed on the form. JavaScript can use the NAME attribute to differentiate different forms if there are multiple forms on a page. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies JavaScript code that executes when a user resets the form by using a RESET button.
specifies JavaScript code that executes when a user submits the form by clicking a "Submit" button.You can use the ONSUBMIT attribute to prevent a form from being submitted; to do so, put a return statement that returns false in the JavaScript code. Any other returned value lets the form submit. If you omit the return statement, the form is submitted.
specifies the window that displays the data returned by the invoked program. See the description of special target values in the "A as link" section for a list of the pre-defined target values. Navigator 2.
<FORM NAME="LoginForm" METHOD=POST ACTION="urltoInvoke">
<P>User name:
<INPUT TYPE="text" NAME="userName" SIZE="10">
<P>Password:
<INPUT TYPE="password" NAME="password" SIZE="12">
<P><INPUT TYPE="submit" VALUE="Log in">
<INPUT TYPE="button" VALUE="Cancel" onClick="window.close()">
</FORM>
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="BUTTON"
NAME="
buttonName"
VALUE="
buttonText"
ONCLICK="
JScode"
>
specifies the name of the button. The name does not appear in the form.
specifies the text to be displayed in the button.
specifies JavaScript code to execute when a user clicks the button. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
<FORM METHOD=POST ACTION="/cgi-bin/example.cgi">
<INPUT TYPE="button" VALUE="Close Window"
onClick="window.close();">
</FORM>
The file forms.htm shows this example in action in a separate window.
<INPUT TYPE="CHECKBOX"
CHECKED
NAME="name"
ONCLICK="JScode"
VALUE="checkboxValue"
>
CHECKED
indicates that the checkbox is displayed with a tick mark to indicate that it is selected.
specifies the name of the input element. This value is the name portion of the name/value pair for this element that is sent to the server when the form is submitted. The name is not displayed on the form.
specifies JavaScript code to execute when a user clicks the checkbox. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies the value to be returned to the server if the checkbox is selected when the form is submitted. The default value is ON, but you can specify a different value if you want. When the form is submitted, only the name/value pairs for selected checkboxes are sent to the invoked CGI program.
<P>Specify your music preferences (check all that apply):</P>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Jazz
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age
The file forms.htm shows this example in action in a separate window.
If a a form contains a file input element, the value of the ENCTYPE attribute of the FORM tag should be "multipart/form-data"
.
<INPUT TYPE="FILE"
NAME="
name"
VALUE="
filename"
>
specifies the name of the input element. This value is used as the name portion of the name/value pair for this element that is sent to the server when the form is submitted. The name is not displayed on the form.
specifies the initial value of the input element.
<FORM ENCTYPE="multipart/form-data"
ACTION="/cgi-bin/example.cgi" METHOD="POST">
<P>File name:
<INPUT TYPE="file">
</FORM>
The file forms.htm shows this example in action in a separate window.This tag provides a mechanism for delivering a value to the CGI program without the user having entered it, but note that it is not very hidden because the user can discover it by viewing the document source.
<INPUT TYPE="HIDDEN"
NAME="
name
"
VALUE="
value
"
>
specifies the name of the input element. This value is the name portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.
specifies the initial value of the input element.
<FORM NAME="LoginForm" METHOD=POST ACTION="/cgi-bin/example.cgi">
<P>Password:
<INPUT TYPE="password" NAME="password" SIZE="12" VALUE="treasure">
<INPUT TYPE="hidden" NAME="DefaultPass" VALUE="treasure">
</FORM>
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="IMAGE"
ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|
"TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"
NAME="
name
"
SRC="
location
"
>
specifies the alignment of the image in relation to the surrounding text. If you do not specify a value for ALIGN, Navigator uses BOTTOM as the default. The possible values are LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE, and BOTTOM. See the section "IMG" for a description of the values. Navigator 1.1
specifies the name of the input element. This value is used as the name portion of the name/value pair for this element that is sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.When Navigator sends the offsets of the image to the server, it sends them asname
.x andname
.y.
specifies the URL of the image to be displayed in the document.
<CENTER><INPUT TYPE="image" SRC="signnow.gif"></CENTER>
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="PASSWORD"
MAXLENGTH="
maxChar
"
NAME="
name
"
ONSELECT="
JScode
"
SIZE="
charLength
"
VALUE="
textValue
"
>
specifies the maximum number of characters a password box can accept.
specifies the name of the input element. This value is used as the name portion of thename/value pair for this element that is sent to the server when the form is submitted. The name is not displayed on the form.
specifies JavaScript code to execute when a user selects some of the text in the text element. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies the length of the input field, in characters. The value should be an integer.
specifies the initial value of the password, if any.
<P>Password:
<INPUT TYPE="password" NAME="password" VALUE="" SIZE="25">
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="RADIO"
CHECKED
NAME="
name
"
ONCLICK="
JScode
"
VALUE="
buttonValue
"
>
indicates that the radio button is selected.
specifies the name of the input element. This value is used as the name portion of the name/value pair for this element that is sent to the invoked CGI program when the form is submitted. The name is not displayed on the form. All radio buttons that have the same name constitute a radio group; only one radio button of a group can be set at one time.
specifies JavaScript code to execute when a user clicks the radio button. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies the value that is returned to the server when the radio button is selected and the form is submitted. Only name/value pairs for radio buttons that are selected are sent to the invoked CGI program. The value defaults to ON.
<P>Category:
<BR><INPUT TYPE="radio" NAME="category" VALUE="liv" CHECKED> Living
<BR><INPUT TYPE="radio" NAME="category" VALUE="din"> Dining
<BR><INPUT TYPE="radio" NAME="category" VALUE="bed"> Bedroom
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="RESET"
NAME="
name
"
ONCLICK="
JScode
"
VALUE="
label
"
>
specifies the name of the input element.
specifies JavaScript code to execute when a user clicks the button. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.
specifies the text to display on the face of the reset button.
<FORM>
<P>State: <INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2">
<P><INPUT TYPE="reset" VALUE="Clear Form">
</FORM>
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="SUBMIT"
NAME="
name
"
VALUE="
label
"
>
specifies the name of the input element. The name is not displayed on the form.
specifies the text to display on the face of the submit button.
<INPUT TYPE="submit" NAME="SubmitButton" VALUE="Done">
The file forms.htm shows this example in action in a separate window.<INPUT TYPE="TEXT"
MAXLENGTH="
maxChars
"
NAME="
name
"
ONBLUR="
Scode
"
ONCHANGE="
JScode
"
ONFOCUS="
Scode
"
ONSELECT="
JScode
"
SIZE="
lengthChars
"
VALUE="
text
"
>
specifies the maximum number of characters a text box can accept.
specifies the name of the input element. This value is used as the name portion of the name/value pair for this element that is sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.
specifies JavaScript code to execute when the text element loses keyboard focus. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference..
specifies JavaScript code to execute when the text element loses focus and its value has been modified.
specifies JavaScript code to execute when a user clicks the text element. See the JavaScript Guide forSee the JavaScript Guide for more information.
specifies JavaScript code to execute when a user selects some of the text in the text element.
specifies the length of the input field, in characters.
specifies the initial value of the text element.
<P>Last name:
<INPUT TYPE="text" NAME="last_name" VALUE="" SIZE="25">
The file forms.htm shows this example in action in a separate window.The SIZE attribute specifies how many options in the list are displayed at one time. For multiple-selection lists, if you do not specify the SIZE attribute, the browser displays some, maybe all, of the options. For single-selection lists, by default Navigator displays the list as a drop-down menu that initially shows only one option. The user can click the list to display the rest of the options. If you specify the SIZE attribute, the list is displayed as a scrolling list that shows the specified number of options, regardless of whether the list allows single or multiple selection..
The SELECT tag should be used between <FORM> and </FORM> tags. Use the OPTION tag to define options in the list.
<SELECT
NAME="
selectName
"
MULTIPLE
ONBLUR="
JScode
"
ONCHANGE="
JScode
"
ONCLICK="
JScode
"
ONFOCUS="
fScode
"
SIZE="
listLength
"
>
<OPTION...>
...
<OPTION ...>
</SELECT>
specifies that multiple items can be selected. If this attribute is omitted, only one item can be selected from the list. If multiple selection is enabled, the user usually needs to hold down the Shift key to select additional items.
specifies the name of the select element. This value is the name portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.
specifies JavaScript code to execute when the select element loses focus. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference..
specifies JavaScript code to execute when the select element loses focus and its value has been modified.
specifies JavaScript code to execute when a user clicks an item in the list.
specifies JavaScript code to execute when the element gets focus.
specifies the number of options visible when the form is displayed. If the list contains more options than specified by size, the list is displayed with scrollbars.
<FORM>
<B>Shipping method:</B><BR>
<SELECT>
<OPTION> Standard
<OPTION SELECTED> 2-day
<OPTION> Overnight
</SELECT>
</FORM>
<FORM>
...
<B>Music types for your free CDs:</B><BR>
<SELECT NAME="music_type_multi" MULTIPLE>
<OPTION> R&B
<OPTION> Jazz
<OPTION> Blues
<OPTION> Reggae
</SELECT>
. </FORM>
<FORM>
<SELECT NAME="fruit_choices" MULTIPLE>
<OPTION>Apples
<OPTION SELECTED>Bananas
<OPTION>Cherries
<OPTION>Oranges
<OPTION>Pineapple
<OPTION>Figs
<OPTION>Guava
</SELECT>
</FORM>
The file forms.htm shows this example in action in a separate window.<OPTION
VALUE="
optionValue
"
SELECTED
>
...
</OPTION>
specifies a value that is returned to the server when the option is selected and the form is submitted. When no VALUE attribute is present, the value returned is the same as the text following the <OPTION> tag.
specifies that the option is selected by default.
You can defines the number of characters per line the text area can accommodate without scrolling by supplying the COLS attribute. You can specify that the number of lines that can appear without scrolling by supplying the ROWS attribute.
<FORM>
<B>Description:</B>
<BR><TEXTAREA NAME="item_description" ROWS="6" COLS="55">
This is the first line.
This is the second line.
This is the last line.
</TEXTAREA>
</FORM>
<TEXTAREA
COLS="
columns
"
NAME="
name
"
ONBLUR="
Scode
"
ONCHANGE="
JScode
"
ONFOCUS="
JScode
"
ONSELECT="
JScode
"
ROWS="
rows
"
WRAP="OFF"|"HARD"|"SOFT"
>
textToDisplay
</TEXTAREA>
defines the width (number of characters per line) the text area can accommodate without scrolling.
specifies the name of the text area element. This value is the name portion of the name/value pair sent to the invoked CGI program when the form is submitted. The name is not displayed on the form.
specifies JavaScript code to execute when the text area element loses focus. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference..
specifies JavaScript code to execute when the text area element loses focus and its value has been modified..
specifies JavaScript code to execute when a text area element receives focus.
specifies JavaScript code to execute when a user selects some of the text in the text area element.
defines the number of lines (number of rows) the text area can accommodate without scrolling.
specifies whether lines longer than the text area's column width wrap to the next line. Navigator 2.0.The value of WRAP can be one of the following:
- OFF disables word wrap. Text the user types is displayed with the exact line breaks that the user types. If the user explicitly inserts a line break, however, the break is included as part of the text area's value. The user has to scroll horizontally to see the ends of lines that do not fit in the text area element.
- HARD causes word wrap, and the line breaks are included when the form is submitted. The text wraps inside the text area element, and that the user does not need to scroll horizontally.
- SOFT causes word wrap, but the line breaks are not included when the form is submitted.
<FORM>
<TEXTAREA NAME="item_description" COLS=40 ROWS="4" WRAP="SOFT">
For faster response, include a full description of your problem,
and tell us what hardware configuration you are using.
Also include your registration number.
</TEXTAREA>
</FORM>
The file forms.htm shows this example in action in a separate window.The public key and challenge string are DER encoded as PublicKeyAndChallenge and then digitally signed with the private key to produce a SignedPublicKeyAndChallenge. The SignedPublicKeyAndChallenge is base64 encoded, and the ASCII data is finally submitted to the server as the value of a name-value pair, where the name is specified by the NAME attribute of the KEYGEN tag.
<KEYGEN
NAME="
name
"
CHALLENGE="
challenge
"
>
The NAME attribute is required
specifies the name for the name/value pair.
specifies the challenge string to be packaged with the public key in the PublicKeyAndChallenge for use in verification of the form submission. If no challenge string is provided, then it is encoded as an IA5STRING of length zero.
<FORM.....>
...
<KEYGEN NAME="somekey" CHALLENGE="1125983021">
...
</FORM>
The intent is that when the user enters text into the text entry field and presses the Return key (or clicks an appropriate button on the browser), the CGI program is invoked again, with the arguments generated from the data in the text field. The browser outputs a new page whose content is determined by what the user entered in the text field.
http://hoohoo.ncsa.uiuc.edu:80/cgi/overview.html
Note that ISINDEX does not require a closing tag.<ISINDEX PROMPT="
text
" >
specifies the text that appears as the search prompt in the browser. Navigator 1.1.
cat << EOF
<HEAD>
<ISINDEX PROMPT="Enter a search keyword:">
</HEAD>
EOF
Last Updated: 01/26/98 21:33:44