Creating Forms for your Web Pages

If you are impatient you may see some examples of forms. PLEASE read this document even if you are ready to get it done. There is a lot of useful information here that will help you write good forms. Remember, you can always look at someone else's HTML source to see how they did it.

To create a from you simply need to include the FORM tags in your HTML document. Here is the basic format for the form section of the HTML document :

<form method="post" action="mailto:me2@psu.edu?subject=Website Feedback" enctype="text/plain" name="Some Feedback">
...
Your input tags here
...
</form>

These input tags should be of the form :
<input name="varible name" type="input type" value="default value">

example form, just change the email and items on this(look at the code)

variable name can be any word with no spaces in it. The variable name you choose will be included in the e-mail message you receive with the information that was typed into the HTML form. There are some variables that the script recognizes as commands, a few of these are required.

Variable Names

Required

• mailto - email address of mail recipient
• namefrom - name of the person the submission is from
• mailfrom - email address of person submission is from
• subject - subject of the email message

Input Types

Special Note -- Every form must have a <INPUT type="submit" value="some words"> for the form to be processed. A user must click on the button it creates in order 'submit' the form.

• hidden -- this will pass a variable to script without it showing up on the form and a user being able to change it. This is useful for things like the variable mailto since this will never change (always go to your email address), it makes sense to have it hidden.
• text -- text entry field; this is the default
• password -- text entry field; entered characters are represented as asterisks)
• checkbox -- a single toggle button; on or off
• radio -- a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior
• submit -- a pushbutton that causes the current form processed
• reset -- a pushbutton that causes the various input elements in the form to be reset to their default values

Additional Options

Here are some additional options besides name= and type= for the INPUT HTML tag.

• VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset", VALUE can be used to specify the label for the pushbutton.
• CHECKED (no value needed) specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons.
• SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE="width,height"; e.g. SIZE="60,12". Note: the SIZE attribute should not be used to specify multiline text entry fields now that the TEXTAREA tag is available.
• MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for text entry fields and password entry fields (and only for single-line text entry fields at that). If this is not present, the default will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

Other types of input

The SELECT Tag

Inside <FORM> ... </FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms).

Unlike INPUT, SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed; for example:

      <SELECT NAME="a-menu">
      <OPTION value="first option">First option.</OPTION>
      <OPTION value="second option">Second option.</OPTION>
      </SELECT>

The attributes to SELECT are as follows:

• NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form.
• SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.
• MULTIPLE, if present (no value), specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

The attributes to OPTION are as follows:

• SELECTED specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

The TEXTAREA Tag

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

• NAME is the symbolic name of the text entry field.
• ROWS is the number of rows (vertical height in characters) of the text entry field.
• COLS is the number of columns (horizontal width in characters) of the text entry field.

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. A TEXTAREA with no default contents looks like this:

<TEXTAREA NAME="comments" ROWS=4 COLS=40></TEXTAREA>

<TEXTAREA NAME="comments" ROWS=4 COLS=40> Default contents go here. </TEXTAREA>

Newlines are respected (so in the above example there will be a newline both before and after "Default contents go here.").