Creating HTML Forms from Harold Goldstein;
http://goldray.com/forms/forms.htm

This document describes how to create HTML forms. Also refer to tutorials by PageResource or HTML Goodies. Responsomatic does mailto processing of your form (see my list for other options). Or download/install a script of your own like FormMail (quick setup - or high security version), Soupermail (uploads, multi-part forms, boolean), AlienForm (total flexibility in setup, calculations, multi-part forms), or bnbform (very flexible-user can select recipient).Wufoo allows the form to be created. hosted and processed. Also see articles from Evolt and from Internet.com on form usability.

text fields | password/hidden fields | checkbox buttons | radio buttons | selection/dropdown menus | reset/submit buttons

A Form container tag opens/closes an HTML Form.
<FORM METHOD=POST ACTION="URL"> ... form content ... </FORM>

All input fields of the form are placed between these tags. You may have multiple forms on a single page but you may not nest forms. METHOD specifies the protocol, GET or POST, used to pass the form data to the program which processes it. We will use POST (which most be upper case) to transmit form data. ACTION is the URL to which we submit the data for processing. You may use ACTION="mailto:email_address" and your browser may, email the results (unreliable!).

<FORM METHOD=POST ACTION="http://www.response-o-matic.com/cgi-bin/rom.pl"> - uses a service that echoes/emails the form data - see the Response-o-matic site for details but you must use:
       <input type=hidden name="your_email_address" value="youremail@yourhost">
Some form elements use an <INPUT> tag with attributes type (of field) and name (variable equals value of response).
  • text fields  -   User clicks and types; the display will wrap; use input type=text for one line, textarea for multi-line.

    • <input type=text name="yourname" size=32>
    <textarea name="address" cols=30 rows=3>
    optional text to appear in the textarea
    </textarea>
    (use wrap=physical within the tag to force wraparound)

  • password fields
    		• <input type="password" name="pw">

    Password fields are like text fields, except that the text entered is not shown.


  • hidden fields
    		•  <input type="hidden" name="hfield" value="a_secret">

    A hidden field is hidden from user; used when developer wants to pass a value w/o user input. Similarly using the disabled attribute and setting it =disabled makes a field unavailable. The readonly acts similarly.

  • disabled fields  
  • readonly fields  
    		•  <input type="text" disabled="disabled" name="disabled" value="cannot be changed">
    <input type="text" readonly="readonly" name="readonly" value="cannot be changed">

  • checkbox buttons    -   Checkboxes are for non-exclusive choices; check as many as apply.
    • Baseball
    Soccer
    Football     		Here the variable "SPORT" will take the value of each box checked.
    <input type="checkbox" name="sport" value="bb">Baseball
    <input type="checkbox" name="sport" value="sc">Soccer
    <input type="checkbox" name="sport" value="fb">Football
  • radio buttons    -   The radio button allows one choice.
    • Baseball
    Soccer
    Football     		Here "SPORT2" initially equals sc. Note that each button has the same variable name.
    <input type="radio" name="sport2" value="bb">
    <input type="radio" name="sport2" value="sc" checked>
    <input type="radio" name="sport2" value="fb">
  • selection menus (option lists)  -  Selection menus present a list of options. If size=1 a drop-down menu results.
    • Optgroups create menu categories (IE/NN 6+).
    		 Note the multiple attribute. The selected attribute causes a default selection.
    <select multiple size=2 name="sportmenu">
    <option>BASEBALL    <option>SOCCER
    <option selected>BASKETBALL
    <option>FOOTBALL    <option>HOCKEY    </select>
  • reset buttons
  • submit buttons
    		• Reset buttons change the form back to its original state. The Submit sends form output to the URL specified as the action.
    <input type="reset" value="Clear">
    <input type="submit" value="Send Data">

    The submit button (note method=get) can also send the user directly to another website. For example:
    		<form method=get action="http://goldray.com/webfolio.htm">
    <input type="submit" value="Go to my Webfolio"> </form>

    An image may be used as a select button with input type=image. This is comparable to setting the image as a link but the coordinates of the mouse are returned and can be used by a script. (note method=get)
    Use your browser back button to return here if you try this link.
    		 <form method=get action="http://goldray.com/webfolio.htm">
    <input type="image" src="back.gif"> </form>

    A selection menu can also jump to a URL. Required is, for the top example a CGI script (jump.cgi), and for the bottom example a javascript function (see viewURL). My advanced forms handout has more on this.
    		 <FORM method=get action="jump.cgi">    <select size=3 name="goto">
    <option value="webfolio.htm">    Goldray Webfolio
    <option value="dclocal.htm">DC Local Pages
    <option value="http://cws.iworld.com">Winsock Software
    </select><input type="submit" value=" JUMP! "></FORM>


    <FORM NAME="navigForm"> <SELECT size=3 NAME="urlSelect">
    <OPTION>Top Choice <OPTION>Next Choice <OPTION>Last Choice </SELECT> <INPUT TYPE="button" VALUE="View" onClick="viewURL(this.form)"> </FORM>

    You may now add color to selection menus; more details here.

    Just use alternating style classes
    		 Insert your style definition inside the document's HEAD section: <STYLE type="text/css"> OPTION.mar{background-color:maroon; color:white} OPTION.white{background-color:white; color:maroon}</STYLE> and in the BODY <FORM><SELECT><OPTION class="mar">First</OPTION> <OPTION class="white">Second</OPTION> <OPTION class="mar">Third</OPTION> <OPTION class="white">Fourth</OPTION></SELECT></FORM>
    		 <input type="text" name="colortest" size="25" value="text" style="background-color:yellow; color:maroon; font-weight:bold;">
    		 <input type="button" value="text" style="background-color:pink; color:#009900; font-weight:bold;">
    Goldray for Version 3.1.2009
    Copyright © 2009 Goldray Consulting Group
    http://goldray.com/forms/forms.htm