Forms

Forms In Action!  -  About Me Form   -   Annie's Form   -   24-Hour HTML Form Examples

Forms allow the web user to:

• fill in data (user surveys, order forms)
• request information
• provide a search strategy (dialog boxes for web searching)

The information submitted is "translated" by a script or program (CGI - Common Gateway Interface) written in PERL, C++… or other languages that manipulate text/files. This information, via the CGI scripting, is sent to a server. The server end of the transmission is generally an electronic mailbox where the mailbox owner can respond to or analyze the data.

Forms are never nested! However, other tags can be nested within form tags.

HTML Coding

Form tag do not specify the appearance or layout of the form itself - other HTML tags do that within the FORM tags. For example, to separate each line of the form use the <p> tag.

All forms must include three sections:

• start and end to form:
  • <form>…</form>
• a method of gathering data from the user:
  • <input type="…" name="…">
  • <select> used with <option>
  • <textarea>
• button whereby the user can "send" the form:
  • <input type="submit">

Return to the Top

<form>…</form>

Opening tag will always contain 2 elements:

• METHOD
  • specifies the method by which the browser will pass the form information to the server
• ACTION
  • indicates the address of the program that will process the information submitted
  • ask your Web server administrator what the CGI script address is for your server or locate a free form processor from the Web
• Ex: <form method="post" action="mailto:llb5610@dcccd.edu">

Return to the Top

<input type="…">

Selections you offer the users:

• ex: <input type="hidden" name="form" value="request form">
• ex: <input type="text" name="username" value="name">
• <input type="text" name="username" value="name" size="30" maxlength="40">

optional:

• size (default is 20 characters)
• maxlength (# of characters the form box will accept)
• value (choices user has)
• ex: <input type="checkbox" name="name of checkbox choices" value="same">
  note: always multiple selections to be made!
  <input type="checkbox" name="city" value="dallas">Dallas
• ex: <input type="radio" name="name of radio button choices" value="same">
  note: always only one selection to be made!
  <input type="radio" name="city" value="dallas">Dallas

The input tag submit is always required, the value tag added to submit is optional. Value allows you to determine what text will appear on the submit button. If you prefer to not use the value tag, the default "Submit Query" will be used.

• Ex: <input type="submit" value="send data">
• You can substitute an image for the standard submit button:
• Ex: <input type="image" scr="button.gif" alt="submit" height="10" width="20">
• You should include a reset button with the submit button:
  Ex: <input type="reset" value="clear">

<select name>…..</select>

Used to construct menus

DROP-DOWN

• limit user to one choice
• limit the amount of screen space taken up by the menu - only one item at a time is viewable from the select menu window.

SCROLLING

• viewer can select several items from the select menu window
• several items are viewable at the same time from the select menu window
• <option value> - used to display the text of each choice

<textarea>…..</textarea>

• Used for free text - the viewer can submit comments, questions, etc.
• You determine the height and width of the TEXTAREA box via attributes
• Ex: <textarea name="comments" rows="6" cols="50"></textarea>