HTML Form Summary

• FORM Element: Fill-in Form
• KEYGEN: Generate Encrypted Keys (Netscape Navigator only)
• INPUT Element: Text Boxes, Checkboxes, and Radio Buttons
• SELECT Element: Select from among Multiple Options
  • OPTION Element: List of Options for SELECT
• TEXTAREA Element: Text Input Region

FORM Element: Fill-in Form

• Attributes: 
  • ACTION="url" (mandatory) Specifies the URL to which the FORM content is to be sent. Usually this is a URL pointing to a program on an HTTP server, since only HTTP servers allow significant interaction between the client and the server. However; the ACTION can specify other URLs. For example, in the case of a mailto URL, the FORM content could be mailed to the indicated address. However, in this case the METHOD must be set to "POST"
  • METHOD="GET" or "POST" (optional) Specifies the METHOD  for sending the data. Default is GET. With GET, the content of the form is then appended to the URL, in a manner similar to query data from an ISINDEX search. With the POST method, the data are sent to the server as a message body and encoded  as specified by the ENCTYPE attribute value. Many current browsers do not support mailto URLs with FORMs.
  • ENCTYPE="MIME_type" (optional) Specifies the MIME_type encoding used for data sent via the POST method. The default value is application/x-www-form-urlencoded. The only other supported value is multipart/form-data.
  • TARGET="string" (optional) (Netscape and Internet Explorer only) Specifies the name of the frame or window to which the data returned by the submitted form should be sent. This attribute is used for the same purpose with the A (anchor); please see the anchor element section for further details. This attribute is supported only by the browsers that support FRAMEs.

• Examples:
  • Example 1: FORM with ACTION=""
  • Example 2: FORM with ACTION="url", SELECT element, INPUT element, and TEXTAREA element

• Example 1: FORM with ACTION=""

<FORM ACTION="">
Data entered into a FORM is sent to a program on the server for processing. If you see a button at
the end of this sentence then your browser supports the HTML FORM element.
--[<INPUTT TYPE="checkbox" NAME="button" VALUE="on">]--. If you do not see a button between the
square brackets go to the <A HREF="Form.htm"> text-only interface </A>
</FORM>

• Example 1 Output:

• Example 2: FORM with ACTION="url", SELECT element, INPUT element, and TEXTAREA element

<FORM ACTION="http://side.edu/cgi-bin/send-note">
    <P> <STRONG> 1) Send this note to: </STRONG>
    <SELECT NAME="mailto_name" >
        <OPTION SELECTED> Martin Grant
        <OPTION> Jack Smith
        <OPTION> Bruce Lee
    </SELECT>

    <P> <STRONG> 2) Give your email address: </STRONG>
    This indicates who sent the letter
    <P> <INPUT TYPE="text" NAME="signature"
    VALUE="[email protected]" SIZE="60">

    <P> <STRONG> 3) Message Body: </STRONG>
    <P> <TEXTAREA COLS="60" ROWS="8" NAME="message_body">
    Delete this message and type your message into this
    textbox. Press the &quot;Send Message&quot; button to send it
    off. You can press the &quot;Reset&quot; button to reset the
    form to the original values.
    </TEXTAREA>

    <P> <INPUT TYPE="submit" VALUE="Send Message"> <INPUT TYPE="reset"> (reset form)
</FORM>

• Example 2 Output:

KEYGEN Element: Generate Encrypted Keys (Netscape Navigator only)

• Attributes: 
  • CHALLENGE="string" (optional) Specifies a challenge string, which is encrypted along with the public key. This is used to verify that the request comes from the appropriate document. The default CHALLENGE value is an empty string.
  • NAME="string" (mandatory) Associates the variable name "string" with the encrypted keystring: The associate value will be the encrypted string calculated by the browser's encryption software.

• Examples:
  • Example 1: FORM with KEYGEN

• Example 1:

<FORM ACTION="http://side.edu/cgi-bin/send-note">
<P> <STRONG> KEYGEN encrypted keys: </STRONG>
<KEYGEN NAME="keygen">

<P> <INPUT TYPE="submit" VALUE="Send Message"> <INPUT TYPE="reset"> (reset form)

</FORM>

• Example 1 Output:

INPUT Element: Text Boxes, Checkboxes, and Radio Buttons

• Attributes: 
  • ACCEPT="string" (optional) (TYPE="file" only) (not widely supported) Specifies a comma-separated list of MIME-types that are acceptable for input by TYPE-"file" input elements. Not widely implemented.
  • ALIGN="bottom", "left", "middle", "right", "top" (optional) (TYPE="image" only) Specifies the alignment of the image with respect to the surrounding text. The meanings are the same as with the ALIGN attribute to the IMG element.
  • CHECKED (optional) (TYPE="checkbox" or TYPE="radio" only) Indicates that a checkbox or radio button is selected (turned on). If TYPE="radio", then only one of the collection of linked radio buttons can be CHECKED.
  • MAXLENGTH="number" (optional) (TYPE="text" or TYPE="password" only) Specifies the length of the character buffer for a text box, where "number" is the buffer length. MAXLENGTH can be larger than the displayed text box, in which case, arrow keys may be used to scroll the text. The default buffer length is unlimited. MAXLENGTH simply restricts the maximum size of the string input by the user. This may also apply to TYPE="file", if the browser presents a type-in field for entering filename information.
  • NAME="string" (mandatory) Associates the variable name "string" with the data content of this INPUT element.
  • SIZE="number" (optional) (TYPE="text" or TYPE="password" only) Specifies, in characters, the actual size of the displayed text input field. This may also apply to TYPE="file", if the browser presents a type-in field for entering filename information.
  • SRC="url" (mandatory with TYPE="image" only) Specifies the URL of the image to be included inline.
  • TYPE="checkbox", "file", "hidden", "image", "password", "radio", "reset", "submit", "text" ("button", Netscape/Microsoft extension) (mandatory) Determines the type of input element.
    • "button": Specifies an INPUT button. The label of the element is obtained from the VALUE attribute value. Button data are never sent when a FORM is submitted--the button type is designed purely as an interface between FORM content and script programs within the HTML document containing the form.
    • "checkbox": The INPUT element is a checkbox. This is a Boolean (on/off) quantity, the default state being off (this is reversed if a CHECKED attribute is also present). VALUE sets the value assigned to an on checkbox. When you submit a FORM, the name/value pair is sent only if the checkbox is on. If there is no VALUE attribute to a TYPE="checkbox" input element, then the browser uses the default value string VALUE="on". Different checkboxes may associate different values with the same variable name.
    •  "file": The INPUT element is a file-selection tool or widget with which the user can select an arbitrary file to be sent to the server, as part of the submitted form data. This type is allowed only when the FORM element specifies ENCTYPE="multipart/form-data". Note that this may cause problems if the ACTION indicates a mailto URL and if the file contains binary data. The encoding make no special provisions for binary data, and such data is often corrupted when sent by e-mail.
    • "hidden": This INPUT element is not displayed to the user, although the content of a "hidden" element (set by the NAME and VALUE attributes) is always sent to the server when the FORM is submitted. This is useful for passing information back and forth between the client and server, and is typically used to record the state of the client-server interaction.
    • "image": The INPUT element is an inline active image (analogous to an ISMAP active IMG element). The SRC attribute specifies the URL of the image to include. Clicking on the image immediately submits the FORM data, including the coordinates of the mouse pointer (measured in pixels from the upper left-hand corner of the image). The coordinates are sent in two name/value pairs. The name is created by taking the NAME attribute and appending the strings ".x" and ".y" to indicate the x or y coordinate. Thus, if NAME="king", then king.x=xval and king.y=yval are sent.
    • "password": The INPUT element is a single-line text field, but the text typed into the field is obscured by asterisks or by some other method. This is used for password entry.
    • "radio": The INPUT element is a radio button. Radio buttons are only meaningful when there are multiple buttons taking the same NAME attribute value. Sharing a common NAME links the buttons together, such that when a user selects or turn on one of the radio buttons, all other buttons associated with the same NAME are automatically turned off. Thus, only one button can be selected at a time. Each radio button must have a VALUE.
    • "reset": The INPUT element is a reset button. When this element is selected, all the fields in the FORM are reset to the values given by their respective VALUE attributes, thereby erasing all the user input. RESET can itself have a VALUE attribute, the value of which is used as the button label. Data from a TYPE="reset" are not sent to the server when the form is submitted.
    • "submit": The INPUT element is a submit button. Pressing the submit button sends the FORM data to the specified URL. A form can have more than one such button, each with different NAME and VALUE attributes; the FORM sends only the name/value pair associated with the pressed submit button. The value is not editable by the client and is displayed as the button label.
    • "text": The INPUT element is a single-line text entry field. The physically displayed size of the input field is set by the SIZE attribute.
  • VALUE="string" (mandatory with TYPE="radio", optional with other TYPEs) Specifies the initial value of the input element. If absent, a null value is assumed.
  • HSPACE="pixels" (optional) (TYPE="image" only) (Netscape only) Specifies the space to be left to the left and right of the image, in pixels.
  • VSPACE="pixels" (optional) (TYPE="image" only) (Netscape only) Specifies the space to be left to the above and below the image, in pixels.

• Examples:
  • Example 1: FORM with INPUTs

• Example 1: FORM with INPUTs

<FORM ACTION="http://www.server.com/cgi-bin/server-program" ENCTYPE="multipart/form-data">
    <P> Button 1 input without <b>VALUE</b>: <INPUT TYPE="button" NAME="button1">
    <P> Button 2 input with <b>VALUE</b>=&quot;button2&quot;: <INPUT TYPE="button" NAME="button2" VALUE="button2">

    <P> Checkbox 1 input without <b>VALUE</b>: <INPUT TYPE="checkbox" NAME="checkbox1">
    <P> Checkbox 2 input with <b>VALUE</b>=&quot;checkbox2&quot;:
        <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox2">
    <P> Checkbox 3 input with <b>VALUE</b>=&quot;checkbox2&quot; <b>CHECKED</b>:
        <INPUT TYPE="checkbox" NAME="checkbox3" VALUE="checkbox3" CHECKED>
    <P> Checkbox with same NAMEs (You may select more than one choice or no choice):<BR>
        Which country have you been visited?
        <INPUT TYPE="checkbox" NAME="country" VALUE="USA"> USA
        <INPUT TYPE="checkbox" NAME="country" VALUE="CANADA"> CANADA
        <INPUT TYPE="checkbox" NAME="country" VALUE="MEXICO"> MEXICO

    <P> INPUT with TYPE=&quot;file&quot; <INPUT TYPE="file" NAME="file" VALUE="URL_filename">
    <P> INPUT with TYPE=&quot;hidden&quot; <INPUT TYPE="hidden" NAME="hidden" VALUE="Hidden_Value">
    <P> INPUT with TYPE=&quot;image&quot; <INPUT TYPE="image" NAME="image" SRC="icons/info.gif">
    <P> INPUT with TYPE=&quot;password&quot; <INPUT TYPE="password" NAME="password" VALUE="Password_Value">
    <P> Radio with same NAMEs (You may select one and only one choice):<BR>
        Which country do you like to visit most?
        <INPUT TYPE="radio" NAME="country" VALUE="USA"> USA
        <INPUT TYPE="radio" NAME="country" VALUE="CANADA"> CANADA
        <INPUT TYPE="radio" NAME="country" VALUE="MEXICO"> MEXICO

     <P> INPUT with TYPE=&quot;text&quot;
        <INPUT TYPE="text" NAME="signature" VALUE="[email protected]" SIZE="60">

    <P> <INPUT TYPE="submit" VALUE="Send Message"> <INPUT TYPE="submit" VALUE="Reject Message"> <INPUT TYPE="reset"> (reset form)

</FORM>

• Example 1 Output:

SELECT Element: Select from among Multiple Options

• Attributes: 
  • MULTIPLE (optional) Allows the user to select multiple items from a single SELECT element. If MULTIPLE is absent, the user can select only a single item.
  • NAME="string" (mandatory) Specifies the variable name associated with the SELECT element.
  • SIZE="number" (optional) (TYPE="text" or TYPE="password" only) Specifies, in characters, the actual size of the displayed text input field. This may also apply to TYPE="file", if the browser presents a type-in field for entering filename information.

• Examples:
  • Example 1: FORM with SELECTs

• Example 1: FORM with SELECTs

<FORM ACTION="http://side.edu/cgi-bin/send-note">
    <P> <STRONG> 1) Single Select (No MULTIPLE select). Send this note to: </STRONG>
    <SELECT NAME="mailto_name1" >
        <OPTION VALUE="1"SELECTED> Martin Grant
        <OPTION VALUE="2"> Jack Smith
        <OPTION VALUE="3"> Bruce Lee
    </SELECT>

    <P> <STRONG> 2) MULTIPLE select. Send this note to: </STRONG></BR>
    <SELECT NAME="mailto_name2" MULTIPLE>
        <OPTION SELECTED> Martin Grant
        <OPTION> Jack Smith
        <OPTION> Bruce Lee
    </SELECT>

    <P> <INPUT TYPE="submit" VALUE="Send Message"> <INPUT TYPE="reset"> (reset form)
</FORM>

• Example 1 Output:

OPTION Element: List of Options for SELECT

• Attributes: 
  • SELECTED (optional) This marks the OPTION as selected--by default, items are not selected.
  • VALUE="value" (optional) Specifies the value assigned to the OPTION. If VALUE is absent, then the text content of OPTION is used as the value.

• Examples:
  • See Example 1 of  FORM with SELECTs for OPTIONs.

TEXTAREA Element: Text Input Region

• Attributes: 
  • COLS="number" (mandatory) Specifies the display width of a TEXTAREA, in columns.
  • NAME="string" (mandatory) Specifies the variable name associated with the TEXTAREA content.
  • ROWS="number" (mandatory) Specifies the display height of a TEXTAREA, in columns.
  • WRAP="off", virtual", "physical" (optional) (Netscape only) Specifies the handling of word-wrapping within the TEXTAREA element.
    • "off": disables the word-wrapping completely--the only new-line characters are those explicitly typed or included with the input data. Default value for most browsers.
    • "virtual": causes virtual word-wrapping--new-line characters are introduced to ensure that the text fits within the specified area, but these characters are not included with the data when the FORM is submitted.
    • "physical":  causes virtual word-wrapping equivalent to WRAP="virtual", but in this case the extra new-line characters should be included with the data when the FORM is submitted.

• Examples:
  • See Example 1 of  TEXTAREA.

• Example 1: TEXTAREA

<FORM ACTION="http://side.edu/cgi-bin/send-note">

    <P> <STRONG> Message Body: </STRONG>
    <P> <TEXTAREA COLS="60" ROWS="8" NAME="message_body">
    Delete this message and type your message into this
    textbox. Press the &quot;Send Message&quot; button to send it
    off. You can press the &quot;Reset&quot; button to reset the
    form to the original values.
    </TEXTAREA>

    <P> <INPUT TYPE="submit" VALUE="Send Message"> <INPUT TYPE="reset"> (reset form)
</FORM>

• Example 1 Output: