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)
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

Graphics & Media Lab. >> Áèáëèîòåêà | Êóðñû | Ãðàôèêîí

Hosted by Graphics & Media Lab
http://graphics.cs.msu.su

mailto: Laboratory