Exercise Two

Exercise Two

• Okay that was quite a big chunk at once. Why not take 30 minutes to practice building an HTML FORM. Make sure you experiment with all of the widgets. You might even put the whole form in an HTML table if you want it to look organized. Here is an example of what you are after:

  First Name
  Last Name
  User Name
  Password
  Gender	Man Woman
  OS Proficiency (Select all that apply)	Mac PC UNIX
  Language Skills (Select all that apply)	English Mandarin Malay Spanish Korean Japanese Martian German Bantu
  Comments

• The code for the above example is shown below:

  <FORM>
  <CENTER>
  <TABLE 	BORDER 		= "1" 
  	WIDTH  		= "400" 
  	CELLPADDING 	= "5"
  	>
  	
  <TR>
  <TH>First Name</TD>
  <TD><INPUT 	TYPE = "TEXT"
  		SIZE = "20" 
  	        NAME = "fname"
  		></TD>
  </TR>
  
  <TR>
  <TH>Last Name</TD>
  <TD><INPUT 	TYPE = "TEXT"
  		SIZE = "20" 
              	NAME = "lname"
  		></TD>
  </TR>
  	
  <TR>
  <TH>User Name</TD>
  <TD><INPUT 	TYPE = "TEXT"
  		SIZE = "20" 
              	NAME = "uname"
  		></TD>
  </TR>
  	
  <TR>
  <TH>Password</TD>
  <TD><INPUT 	TYPE = "PASSWORD"
  		SIZE = "20" 
  		NAME = "pass"
  		></TD>
  </TR>
  	
  <TR>
  <TH>Gender</TH>
  <TD><INPUT 	TYPE = "RADIO"
  		NAME = "gender" 
              	VALUE = "man"
  		> Man
  <BR><INPUT 	TYPE = "RADIO"
  		NAME = "gender" 
              	VALUE = "woman"
  		> Woman<TD>
  </TR>
  	
  <TR>
  <TH>OS Proficiency <BR>
  <FONT SIZE = "1">
  (Select all that apply)
  </FONT>
  </TH>
  <TD><INPUT TYPE  = "CHECKBOX" 
             NAME  = "mac_checked"
  	   VALUE = "yes"
  	   > Mac
  <BR><INPUT TYPE  = "CHECKBOX" 
             NAME  = "pc_checked"
  	   VALUE = "yes"
  	   > PC
  <BR><INPUT TYPE  = "CHECKBOX"
             NAME  = "unix_checked" 
             VALUE = "yes"
  	   > UNIX</TD>
  </TR>
  	
  <TR>
  <TH>Language Skills <BR>
  <FONT SIZE = "1">
  	(Select all that apply)
  </FONT></TH>
  <TD><SELECT NAME = "language"
  	    SIZE = "3" 
              MULTIPLE
  	    >
  	    <OPTION>English
  	    <OPTION SELECTED>Mandarin
  	    <OPTION>Malay
  	    <OPTION>Spanish
  	    <OPTION>Korean
  	    <OPTION>Japanese
  	    <OPTION>Martian
  	    <OPTION>German
  	    <OPTION>Bantu
  	</SELECT></TD>
  </TR>
  	
  <TR>
  <TH>Comments</TH>
  <TD><TEXTAREA NAME = "comments" 
                COLS = "20"
  	      ROWS = "5"
  	      >
  </TEXTAREA></TD>
  </TR>
  </TABLE>
  <P>
  <INPUT 	TYPE 	= "SUBMIT"
  	VALUE 	= "Submit Info"
  	>
  <INPUT 	TYPE 	= "RESET"
  	VALUE 	= "Clear Form"
  	>
  </CENTER>
  </FORM>
  

The Reset Button Widget
Table of Contents
Extra Widgets