Capt. Horatio T.P. Webb

HTML FORMS Parks -- Fall 2013 Version 2 -- Last Updated 9:00 PM 7/17/2017

HTML forms provide the fundamental tools to gather information from users and transmit it to the server for processing. The HTML form objects are:

• text boxes
• textareas
• select (aka "drop down menu")
• radio buttons
• checkboxes
• buttons

The HTML elements allow the user to interact with (i.e., enter data or make choices) on the HTML page. The form elements are contained within a "form" tag pair that defines the beginning and end of a group of HTML form elements. The form tag is:

<form name="some form name" action="some URL/path/program_name" method="GET or POST">

...one or more HTML form elements

</form>

• The "name" attribute is any arbitrary name (no blank spaces).

• The "action" attribute consists of:
  1. the fully qualified URL of the server (i.e., the server where the data contained on the form is being sent for processing).

     e.g., http://auckland.bauer.uh.edu/ or http://www.myserver.com/

  2. the server directory path to the program that will receive the form data. This defines the directory structure on the server to identify WHERE the receiving program is located.

     e.g., storefront/us/ or travel/request/ or students/parks/

  3. the name of the receiving program which will processes the data contained in the form

     e.g., buy.php or travel_request.aspx

     This name is always a program -- never an HTML page. Some common program types are (* is the name, followed by a period, the the program type, e.g.:

     *.exe [an executable program];
     *.cgi [an old style compiled C program];
     *.php [a php program];
     *.asp [old style MS active server page];
     *.aspx [MS VB.NET or C# program];
     *.pl [a PERL script]
     

  These three parts make up the value of the "action attribute", like this:

  http://server_name/path/program_name

  e.g., http://auckland.bauer.uh.edu/students/parks/echo.asp

• the "method" attribute tells the browser how to send the form data to the server.
  1. when method="GET", the browser creates a "querystring" by:

     creating name-value pairs for EACH HTML element contained within the form tag. The "name" is the name in the HTML tag for an element and the "value" is the value entered or chosen by the user. The querystring begins with the first HTML element's "name" and its value separated by the "=" sign, then an "&" is used and the next name-value pair is added, etc. until all the name-value pairs are processed. The querystring is appended to the value of the "action" attribute -- separated by a "?".

     Text A
     Text B
     

     Code:

     <form name="form2" action="http://auckland.bauer.uh.edu/students/parks/echo.asp" method="GET">
     Text A <input type="text" name="TA" value="66">
     Text B <input type="text" name="TB" value="44">
     <input type="submit">
     </form>
     
     In the address field you will see:
     
     http://auckland.bauer.uh.edu/students/parks/echo.asp?TA=66&TB=44
     
     where:
     
     action = http://auckland.bauer.uh.edu/students/parks/echo.asp
     
     i.e., server  = http://auckland.bauer.uh.edu
           path    = /students/parks/
           program = echo.asp
     
     The querystring = "TA=66&TB=44"
     
     Together (with a "?" separating the two parts) they make:
     
     http://auckland.bauer.uh.edu/students/parks/echo.asp?TA=66&TB=44
     
     as shown in the address bar when you click the button above.
     

     One often stated limitations of the "GET" attribute is that the querystring length is limited. This depends on the browser and/or the web server configuration. However, many people the 2,000 bytes rule of thumb as a safe limit (based on IE).

  2. when method="POST", the same process is performed as with "GET", but the resulting querystring does NOT appear in the address window -- only the "action" appears. Rather than sending the action URL/path/program and the querystring together, the querystring is sent in a different fashion. On the server-side the results are the same whether you use "GET" or "POST"

     There is no effective limit for the size of "POST" querystring.

     One minor advantage of "POST" is that anyone looking over your shoulder CANNOT see the first few name value pairs in the address window as they could if method was "GET".

  As a result, the best choice for the form's method attribute is POST.

  ---

  The HTML "form" Elements

  • textboxes (and password and hidden)

    The standard one line textbox format is:

    <input type="text" name="some_name" size="integer" maxlength="integer" value="string">

    Here:

    • name is any string -- contained within double quotes -- used in the querystring for the name part of the name-value pairs. It is required if you are sending the data to the server.

    • size is an integer -- contained within double quotes -- which determines the width of the textbox in bytes (approximately). This in effect is the number of visible characters in the textbox

    • maxlength is an integer -- contained within double quotes -- that determines the maximum number of bytes a user can enter into the textbox (if larger than size, some of the bytes will not be visible in the textbox).

    • value is a string -- contained within double quotes -- that is placed in the textbox at the time the page is loaded (i.e., this is the initial value of the textbox. It may be changed by the user).

    If you use:

    <input type="password"...

    The text in the textbox is replaced by "*" bytes as the user enters the data in the textbox. This prevents a casual observer from seeing the value the user types -- hence useful for password entry. Otherwise the same rules applies as for <input type="text"...

    If you use:

    <input type="hidden"...

    The text in the textbox is NOT visible to the user. It is sent to the server when the form is submitted. It is used normally to send data to the user stored in the "hidden" textbox.

    This is a textbox [<input type="text" name="t1" size="4" maxlength="9" value="abc">]

    This is a password textbox [<input type="password" name="t2" size="4" maxlength="9" value="abc">]

    This is a hidden textbox [<input type="hidden" name="t3" size="4" maxlength="9" value="abc">]

  • textarea

    This form element is a multi-line textbox. The general format for a textarea is:

    <textarea name="some_name" rows="integer" cols="integer>optional inital value</textarea>

    • name is any string -- contained within double quotes -- used in the querystring for the name part of the name-value pairs. It is required if you are sending the data to the server.

    • The value of rows is the number of visible rows in the textarea

    • The value of cols is the number of visible columns in the textarea

    • the is NO maxlength attribute

    • the number of bytes a user can enetered is not limited by HTML.

    • if the user presses the "Enter" key during data entry in the textarea (i.e., causes the cursor to move to the left side of the next line), the carriage return/line feed characters are NOT sent to the server when the form is submitted.

  • select (aka drop down menu)

    The general form is:

    <select name="some name">
    <option>option value 1
    <option>option value 2
    <option>option value 3
    .
    .
    .
    </select>
    

    • name is any string -- contained within double quotes -- used in the querystring for the name part of the name-value pairs. It is required if you are sending the data to the server.

    When the form is submitted, the visible value of the selected option is used for the value of the name-value pair.

    If you wish to send a value to server other than the visible option value, you can specify a different value by using a value="some string" inside the option tag like this;
    

    <select name="some name">
    <option value="some value">option value 1
    <option value="some value">option value 2
    <option value="some value">option value 3
    .
    .
    .
    </select>
    

    This is useful when you wish to show the user a string which is explanatory and yet send a code or abbreviation to the server. For example,

    <select name="cheese">
    <option value="0" >Choose an cheese option below
    <option value="G">Gouda
    <option value="P">Pepper Jack
    <option value="S">Swiss
    <option value="A">American
    <option value="C">Cheddar
    </select>
    

    looks like this:

    Choose an cheese option below Gouda Pepper Jack Swiss American Cheddar

    By default the first option value is displayed when the page is loaded. To set the initial displayed option, add the word "selected" inside the option tag.

    <select name="coatsize">
    <option value="S" >Small
    <option value="M" selected>Medium
    <option value="L">Large
    <option value="XL">Extra Large
    </select>

    looks like this:

    Small Medium Large Extra Large

    The above will display the second option ("Medium") when the page is loaded.

  • radio buttons

    Radio button represent a group of empty selection circles that when clicked become filled. Only one of the radio buttons can be chosen at any time. Choosing an empty circle turns off the other filled circle. The format of radio buttons is:

    text... <input type="radio" name="same name" value="some string">
    text... <input type="radio" name="same name" value="some string">
    text... <input type="radio" name="same name" value="some string">
    text... <input type="radio" name="same name" value="some string">

    When the form is submitted the "value" of the checked radio button is used -- the "name" is always the same.

    You may force a particular radio button to "checked" at the time the page is loaded by adding the word "checked" inside the tag.

    Choice W <input type="radio" name="r1" value="w">
    Choice X <input type="radio" name="r1" value="x">
    Choice Y <input type="radio" name="r1" value="y" checked>
    Choice Z <input type="radio" name="r1" value="z">
    

    looks like this:

    Choice W  
    Choice X  
    Choice Y  
    Choice Z  

  • check boxes

    Checkboxes represent a two choice element (y/n, on/off). Checkboxes are checked or NOT checked. They have NO relationship to other checkboxes.

    text... <input type="checkbox" name="some name">
    text... <input type="checkbox" name="some name">
    text... <input type="checkbox" name="some name">
    text... <input type="checkbox" name="some name">

    If you do not use a "value" attribute in the tag, the value sent to the server if the checkbox is checked is: "on". If the checkbox is NOT checked, nothing is sent to the server (i.e., NO name-value pair is generated).

    You may force any checkbox to "checked" at the time the page is loaded by adding the word "checked" inside the tag.

    Toppings:
    Mustard <input type="checkbox" name="t1" value="must">
    Ketchup <input type="checkbox" name="t2" value="ketc">
    Onions  <input type="checkbox" name="t3" value="onio">
    Lettuce <input type="checkbox" name="t4" value="lett">
    Tomatoes<input type="checkbox" name="t5" value="toma">
    Toasted Bun<input type="checkbox" name="t6" value="tstd" checked>
    

    looks like this:

    Toppings:
    Mustard
    Ketchup
    Onions
    Lettuce
    Tomatoes
    Toasted Bun

  • submit button

    In order to provide a button for the user to submit the form to the server, the following element must be somewhere inside the form tags:

    <input type="submit">

    It looks like this:

    If you wish to change the words on the button, use a value attribute:

    <input type="submit" value="Click Here To Submit This Form">

    looks like this:

  • reset

    The reset button erases all the data the user has entered -- thus far -- on the form and returns the form values to their initial state at the time the page was loaded. The format is:

    <input type="reset">

    It looks like this:

    If you wish to change the words on the button, use a value attribute:

    <input type="reset" value="Erase My Entries and Start Over">

    It looks like this:

  Here is a complete sample form -- try it:

  Text named t1
  Password named t2
  Hidden named t3
  Textarea named t4	hello world
  Radios named t5	radio value 1 radio value 2 radio value 3
  Checkboxes named t6, t7, t8	checkbox t6 checkbox t7 checkbox t8
  Selected named t9	Pick an option from Below 1 2 3

  DOCUMENT OBJECT MODEL REFERENCES

  Most all form elements are referenced in javascript using the HTML Object Model

  Typically this is:

  document.[ form name  ].[ element name ].property
                or               or
             form number   element number
  

  So the four optional ways for getting (reading) or setting (writing ) the for an element when:

  ... the first element, in the first form
  ... with element named "fred"
  ... in a form named "alice" value

  could be any of the four ways shown below:
  

  1. document.alice.fred.value
  2. document.forms[0].fred.value
  3. document.forms[0].elements[0].value
  4. document.alice.elements[0].value

  Note that when using the form or element number, these collections are referred to plurals (note the "s" at the end):

  .forms[some integer].
  
  and
  
  .elements[some integer]

  It is also possible to reference the same elements in javascript using the document object model (DOM). This requires that the element be assigned a unique "id". This is in addition to the name attribute and could appear for examle as:

  <input type="text" name="t1" id="t1" size="10" maxlength="10" value="123">

  Referencing the value of this element could also be done with the DOM like this:

  document.getElementById("t1").value

  NOTE: references to .value can appear on EITHER side of the equal sign in javascript.

  i.e., .value can be get OR set (i.e, read OR written)