2.3  HTML2 - Forms

Index Code Tester

OBJECTIVE

DISCUSSION

Forms 
<form name = "___" action = "script file goes here" method = "get or post"></form>

Input type Form Elements

<input type = "_____"  name = "___" value = "_____"  id = "____"/>

Type Description Notes
text FirstName:
  • name = "first"
  • value = "JoBob"
  • value is text in box
checkbox  Send Info
  • name = "sendinfo"
  • value = "send"
  • value not displayed
  • if value not specified sends "on"
  • Optional checked indicates if checked
radio

 2002

 2003

  • For 2002, name = "year"
  • For 2002, value = "2002"
  • For 2003, name = "year"
  • For 2003, value = "2003"
  • Only one selected at a time
  • name is the same for all in set
  • value indicates which user selects and is 
    NOT displayed 
  • optional checked indicates selected 
submit
  • When clicked, the contents of the form sent to another file depending on form's action attribute
  • value = "Submit Info"
  • name = "submitinfo"
reset
  • Resets the elements in the form
password
  • Like text element but used for entering passwords
file
  • Used for selecting a file
button
  • Can be customized. Thi example displays info for other Elements on this page.
  • name = "DisplayInfo"
  • value = "Display" 
  • value appears on face

Select Type Form Elements

<select style = "width: 70px; height: 50px" name = state size = "3">
<option value = "MD" selected>MD</option>
<option value = "PA">PA</option>
</select>

  Description Notes
ComboBox State: -
ListBox   -

Text Area

<textarea cols = "25" rows = "10" name = "text" id = "txtarea">Default text here</textarea>
            

 

EXERCISES

  1. Explain the difference between the following three attributes: ID, NAME, VALUE.
  2. One of the attributes of the form tag is method. Two possible values for method are get and post.  Search the Internet to determine the difference between get and post
  3. How do you use an image as a submit button?
  4. What do you use a hidden field for?
  5. There is a simple way to email the information in a form.  Search the Internet to find out how.
  6. Create a page that provides three radio buttons for selecting a color. Each radio button should represent a different color.  Make sure that the user can only select one of the three.  Make sure that each button is labelled with the color.
  7. Create a feedback page that has the following features.  The page should appear as shown below.

LINKS AND HELP

http://www.davesite.com/webstation/html/chap17.shtml
http://www.w3schools.com/html/html_forms.asp