Lesson 8:   HTML Forms

1. Form
   The <form> tag has two attributes:
   
   
   • method = the way data is transferred to the next page.
   • action = what to do when the submit button is clicked.
   
   The method attribute has two values:
   
   
   • get = append the data to the URL. This method is useful but can send only 3000 characters to the next page, that's including the next page's URL!   "Get - bad!"
   • post = store the data in a buffer. This method is limitless in it's storage space so not data is lost.   "Post - good!"
   
   e.g. <form method="get" action="prog.asp">
   
   
2. Input
   The <input> tag has six types:
   
   
   • type="text" = standard text box for entering a name or address.
     The input type="text" has four attributes:
     
     
     • name = All objects in a form must have the name attribute (except the submit & reset tags.) The name attribute must be set to a unique value for each object in the form such as: name="Name" or name="Address". The name attribute will become (on the next page) a variable in which the data the user enters can be found.
     • value = an input type="text" can have a default value. For example, an input type="text" in which the user will enter the city may already have Baton Rouge in it.
     • size = sets the size of the text box (in characters.)
     • maxlength = set the maximum number of characters that can be entered into a text box.
     • autofocus = set the cursor in to this input. Only one can have the autofocus set.
     
     (e.g. Name: <input type="text" name="Name" size="40" autofocus>
             City:     < input type="text" name="City" size="40" value="Baton Rouge">)
             State:   <input type="text" name="Name" size="40" placeholder="Enter State Here">)
     

     Name:
     City:
     State:

   • type="email" = check to make sure the input has a valid email format.
     
     
   • type="url" = check to make sure the input has a valid web page format.
     
     
   • type="number" = check to make sure the input is a valid number.
     The number has two additional attribures:
     • min = set the minimun value of the number
     • max = set the maximun value of the number
     
     
   • type="range" = create a bar with a scroller.
     The range has four additional attribures:
     • min = set the minimun value
     • max = set the maximun value
     • step = set the up/down increments
     • value = set the default value
     
     
   • type="date" = allows you to select a date from a calendar.
     
     
   • type="color" = allows you to select a web safe color.
     
     
   • type="hidden" = This type is used to pass additional data along with the form data to the next page without the user seeing it. (e.g. form name, date, etc.)
     
     e.g. <input type="hidden" name="FormName" value="Ray's Form on Page Eight">
     
     
   • type="checkbox" = creates a checkbox.
     
     e.g. <input type="checkbox" name="NewsLetter" value="SignMeUp"> Sign Me Up!
     

     Sign Me Up!

     Note: If the user checks the box, the following line will be sent to the next web page:
     NewsLetter =SignMeUp
     If the user does not check the box, nothing will be sent.
     
     Pre-selecting a button:
     Or you can pre-check the checkbox like this:
     <input type="checkbox" name="NewsLetter" value="SignMeUp" checked='checked'>

     Sign Me Up!

   • type="radio" = create radio buttons.
     
     (e.g. <input type="radio" name="Payment" value="Cash"> Cash
             <input type="radio" name="Payment" value="Net 10 Days"> Net 10 Days
             <input type="radio" name="Payment" value="Charge"> Charge)
     

     Cash
     Net 10 Days
     Charge
     

     Note: Because radio buttons act like a single object, they all have the same name ("Payment").
     
     Pre-selecting a button:
     If you want to pre-select the Net 10 Days, simply add the checked='checked' in the input:
     <input type="radio" name="Payment" value="Net 10 Days" checked='checked'>
     

     Cash
     Net 10 Days
     Charge
     

     Using the Lable Tag:
     By adding the label tag around the input tag and it's prompt (The text that follow it) you can make the prompt clickable too.
     
     e.g.   <label for='pay1'><input type="radio" name="Payment" value="Cash" id='pay1'> Cash</label>
             <label for='pay2'><input type="radio" name="Payment" value="Net1" id='pay2'> Net 10 Days</label>
             <label for='pay3'><input type="radio" name="Payment" value="Chrg" id='pay3'> Charge</label>
     

     Cash
     Net 10 Days
     Charge
     

   • type="submit" does whatever the action attribute in the form tag is set to do.
     Note: In order for the data from the from to be processed, the action must be set equal to a program capable of gathering the data and processing it, such as an ASP web page like prog.asp.
     e.g. <input type="submit" value="Send Form">
     
     
     
   • type="reset" = sets all objects in the form back to there original settings in other words, clears the form.
     e.g. <input type="reset" value="Clear Form">
     
     
     
   • type="button" = to preform some sort of action like move to another page, or calculate, or run a procedure.
     e.g. <input type="button" value="Go to Google" onClick="location.href='http://google.com' ">
     
     
     Or the HTML5 Version:
     
     <button onClick="location.href='http://google.com' ">
        Go to Google
     </button>
     
     
     
   • type="image" = to preform some sort of action like move to another page, or calculate, or run a procedure.
     e.g. <input type="image" onclick="func('hello')" src="image.jpg"/>
     
     
3. textarea
   A textarea is a box (who's dimensions you can set) in which the user can enter paragraphs of data. Unlike the input type="text" a textarea allows carriage returns within the data.
   (e.g. Comments: <textarea name="Comments" cols="70" rows="5">)
   

   Comments:

   
   
4. Select Box
   A Select box is a dropdown list box with pre-set data to choose from.
   e.g. State: <select name="State">
                             <option value="AL">Alabama</option>
                             <option value="AR">Arkansas</option>
                             <option value="MS">Mississippi</option>
                             <option value="LA" selected>Louisiana</option>
                       </select>
   
   

   State: Alabama Arkansas Mississippi Louisiana

   Note that Louisiana appears in the select box first. Take a closer look at the option for Louisiana. It has an added attribute selected. This attribute will make Louisiana the default choice. The following line will be sent to the next web page:
   State=LA (the value is sent not the text between option and /option.)
   To allow for multiple selections from the Select Box add multiple as an attribute:

   States visited: Alabama Arkansas Mississippi Louisiana

   Hold down the Ctrl Key to select more than one.
   
   

Web Page Design: Exercise 8

Click Start → Computer Double Click Local Disk (C:)
Double Click inetpub and wwwroot
Right Click in the wwwroot and choose New → Text Document
Double click the New Text Document.txt and Enter the following code:

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Echo</title>
</head>
<body bgcolor='cornflowerblue'>
<font size='3' family='verdana'>

<!-- * * * * * * * -->
<!-- * Echo.asp  * -->
<!-- * * * * * * * -->
<%
Dim Item
For Each Item in Request.Form
    Response.Write Item & " = "
    Response.Write Request.Form( Item ) & "<br>"
Next
%>

<br><br>
<input type='button' value=' &laquo; Return'
 onClick='history.back();'>
</font>
</body>
</html>

Save it, close it, Right Click and Rename it echo.asp.

Now let's finish the Contact Us page with a form for visitors to fill out:

Replace ~under construction~ with the following:

      <form method='post' action='http://localhost/echo.asp'>
      <table>
      <tr>
        <td align='right'> Your Name: </td>
       <td> <input type='text' name='Name'> </td>
      </tr>
      <tr>
        <td align='right'> E-mail Address: </td>
        <td> <input type='text' name='Email'> </td>
      </tr>
      <tr>
        <td align='right' valign='top'> Questions/Comments: </td>
          <td> <textarea cols='45' rows='8' name='Comments'></textarea> </td>
      </tr>
      <tr>
        <td align='right'> <input type='submit' value=' Send '> </td>
        <td> <input type='reset' value=' Clear '> </td>
      </tr>
      </table>
      </form>

Try it! The information you enter here will be displayed on the echo.asp Web page.

Try adding a checkbox, radio buttons, a select list of states with Louisiana as the default.