eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

introduction to web programming
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>
    

    Previous | Next | Table of Contents