June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
Your document will probably look something like this:
<HEAD>
<TITLE>Form example</TITLE>
</HEAD>
<BODY>
<FORM METHOD="post" ACTION="mailto:put.your@email.address.here">
</FORM>
</BODY>
You will notice that nothing shows when this form is rendered because it has none of the interactive elements that make forms useful.
To produce the text fields one by one:
The name text field (below) and its HTML.
Name: <INPUT TYPE="text" NAME="name" SIZE="35"><BR>
The email text field (below) and its HTML.
Email: <INPUT TYPE="text" NAME="email" SIZE="40"><BR>
The three address fields and the post code field (below), with the HTML.
Address 1: <INPUT TYPE="text" NAME="address1" SIZE="40"><BR> Address 2: <INPUT TYPE="text" NAME="address2" SIZE="40"><BR> Address 3: <INPUT TYPE="text" NAME="address3" SIZE="40"><BR> Postcode: <INPUT TYPE="text" NAME="postcode" SIZE="20"><BR>
The multi-line address text area and its HTML are as follows.
Name: <INPUT TYPE="text" NAME="name" SIZE="35" VALUE="you name
here"><BR>
Email: <INPUT TYPE="text" NAME="email" SIZE="40" VALUE="your email
here"><BR>
Address:<TEXTAREA NAME="textfield3" COLS="25" ROWS="5">
25 Nowhere Street
Somewhere
Not Here
Y2K 5RU
</TEXTAREA><BR>
Postcode: <INPUT TYPE="text" NAME="postcode" SIZE="20" VALUE="postal
code"><BR><BR>
The nicely laid out version and the table-based HTML follow:
</FORM> <TABLE> <TR> <TD>Name:</TD> <TD><INPUT TYPE="text" NAME="name" SIZE="35" VALUE="you name here"></TD> </TR> <TR> <TD>Email:</TD> <TD><INPUT TYPE="text" NAME="email" SIZE="40" VALUE="your email here"></TD> </TR> <TR> <TD>Address:</TD> <TD><TEXTAREA NAME="textfield3" COLS="25" ROWS="5"> 25 Nowhere Street Somewhere Not Here Y2K 5RU </TEXTAREA></TD> </TR> <TR> <TD>Postcode:</TD> <TD><INPUT TYPE="text" NAME="postcode" SIZE="20" VALUE="postal code"></TD> </TR> </TABLE> </FORM>
Note that the cells have been indented to aid readability. Note that the initial value of the text area (between <TEXTAREA> and </TEXTAREA> tags) should not be indented unless the text, as rendered by the browser, should itself appear indented.
Adding three more text areas to the table structure is more complicated than adding them to a simple (non-table) form: adding a lot of text before the text areas separates them the labels ('Name:', 'Email:', etc.). Aligning the labels to the right brings them closer, as in the figure below. The extra HTML follows the figure:
<TR>
<TD ALIGN="right">What is your favourite World Wide Web site
and why?</TD>
<TD><TEXTAREA name="textfield4" cols="40" rows="4">give details
here</TEXTAREA></TD>
</TR>
<TR>
<TD ALIGN="right">What is your favourite USENET discussion group
and why?</TD>
<TD><TEXTAREA name="textarea" cols="40" rows="4">give details
here</TEXTAREA></TD>
</TR>
<TR>
<TD ALIGN="right">What it the best designed website you have
come across and why?</TD>
<TD><TEXTAREA name="textarea2" cols="40" rows="4">give details
here</TEXTAREA></TD>
</TR>
The following HTML produces the required form (shown after the HTML).
<FORM METHOD="post" ACTION=mailto:name@xyz.ac.uk>
<p>1. Do you like playing computer games? <br>
<input type="radio" name="games" value="yes"> Yes
<input type="radio" name="games" value="no">No</p>
<p>2. How much did you enjoy the 'Star Wars Trilogy'? <br>
<input type="radio" name="starwars" value="eit"> enjoyed it
<input type="radio" name="starwars" value="dneit"> did not enjoy it
<input type="radio" name="starwars" value="hnsit"> have not seen it</p>
<p>3. Do you have an email address? <br>
<input type="radio" name="email" value="yes"> Yes
<input type="radio" name="eamil" value="yes"> No</p>
<p>4. Chocolate is delicious? <br>
<input type="radio" name="radiobutton" value="sagree"> strongly agree
<input type="radio" name="radiobutton" value="agr"> agree
<input type="radio" name="radiobutton" value="neutral"> neutral
<input type="radio" name="radiobutton" value="disagree"> disagree
<input type="radio" name="radiobutton" value="sdisagree"> strongly disagree</p>
</FORM>
Note that a different style of layout can be achieved by combining the form elements with the <OL> and <LI> tags. Here is a fragment of HTML and its associated layout.
<OL>
<li> Do you like playing computer games? <br>
<input type="radio" name="games" value="yes"> Yes
<input type="radio" name="games" value="no">No</li>
...
</OL>
Here is HTML code for extra questions. Note how the values have been abbreviated. The values are never seen by the user, but are for processing by software, typically a server-side script, and so do not need to be understood by the end users.
<p>1. Which of these foods do you prefer? <br>
<input type="radio" name="food" value="italian">Italian
<input type="radio" name="food" value="chinese">Chinese
<input type="radio" name="food" value="indian">Indian </p>
<p>2. Which car do you prefer? <br>
<input type="radio" name="car" value="ferrari">Ferrari
<input type="radio" name="car" value="astin">Aston Martin
<input type="radio" name="car" value="lotus">Lotus
<input type="radio" name="car" value="jaguar">Jaguar</p>
<p>3. Do you like music? <br>
<input type="radio" name="music" value="yes">Yes
<input type="radio" name="music" value="no">No</p>
<p>4. I enjoy reading?<br>
<input type="radio" name="read" value="sa">strongly agree
<input type="radio" name="read" value="a">agree
<input type="radio" name="read" value="n">neutral
<input type="radio" name="read" value="d">disagree
<input type="radio" name="read" value="sd">strongly disagree</p>
Here is the HTML. Note that summing the totals of the selected items requires server-side software. (This is one of the reasons that JavaScript is used to allow such calculations before a form is submitted; see Unit 16.)
<TABLE>
<TR>
<TD>Simple digital watch ($40)></TD>
<TD><INPUT TYPE="checkbox" VALUE="40"></TD>
</TR>
<TR>
<TD>Chrome strap digital watch ($52)</TD>
<TD><INPUT TYPE="checkbox" VALUE="52"></TD>
</TR>
<TR>
<TD>Traditional gold watch ($107)</TD>
<TD><INPUT TYPE="checkbox" VALUE="107"></TD>
</TR>
<TR>
<TD>Antique pocket watch ($250)</TD>
<TD><INPUT TYPE="checkbox" VALUE="250"></TD>
</TR>
</TABLE>
The HTML and the output for Title, Age, Gender, employment Status.
<FORM METHOD="post" ACTION=mailto:name@xyz.ac.uk> Title <SELECT NAME="title"> <OPTION>Select title</OPTION> <OPTION>Mr</OPTION> <OPTION>Mrs</OPTION> <OPTION>Miss</OPTION> <OPTION>Ms</OPTION> <OPTION>Dr</OPTION> </SELECT><BR><BR> Age: <SELECT NAME="age"> <OPTION>Select Age</OPTION> <OPTION>-19</OPTION> <OPTION>20-29</OPTION> <OPTION>30-39</OPTION> <OPTION>40-49</OPTION> <OPTION>50-59</OPTION> <OPTION>60+</OPTION> </SELECT><BR><BR> Gender: <SELECT NAME="gender"> <OPTION>Select Gender</OPTION> <OPTION>Male</OPTION> <OPTION>Female</OPTION> </SELECT><BR><BR> Status: <SELECT NAME="status"> <OPTION>Select Status</OPTION> <OPTION>Employed</OPTION> <OPTION>Unemployed</OPTION> <OPTION>Student</OPTION> </SELECT><BR><BR> </FORM>
The HTML and the output for Title, Age, Gender, employment Status
<FORM METHOD="post" ACTION=mailto:name@xyz.ac.uk> Day: <SELECT name="occupation" size="3"> <OPTION SELECTED>--Select Day--</OPTION> <OPTION>1st</OPTION> <OPTION>2nd</OPTION> <OPTION>3rd</OPTION> <OPTION>4th</OPTION> <OPTION>5th</OPTION> <OPTION>6th</OPTION> <OPTION>7th</OPTION> <OPTION>8th</OPTION> <OPTION>9th</OPTION> <OPTION>10th</OPTION> <OPTION>11th</OPTION> <OPTION>12th</OPTION> <OPTION>13th</OPTION> <OPTION>14th</OPTION> <OPTION>15th</OPTION> <OPTION>16th</OPTION> <OPTION>17th</OPTION> <OPTION>18th</OPTION> <OPTION>19th</OPTION> <OPTION>20th</OPTION> <OPTION>21st</OPTION> <OPTION>22nd</OPTION> <OPTION>23rd</OPTION> <OPTION>24th</OPTION> <OPTION>25th</OPTION> <OPTION>26th</OPTION> <OPTION>27th</OPTION> <OPTION>28th</OPTION> <OPTION>29th</OPTION> <OPTION>30th</OPTION> <OPTION>31st</OPTION> </SELECT><BR><BR> Month: <SELECT name="select" size="3"> <OPTION SELECTED>--Select Month---</OPTION> <OPTION>January</OPTION> <OPTION>February</OPTION> <OPTION>March</OPTION> <OPTION>April</OPTION> <OPTION>May</OPTION> <OPTION>June</OPTION> <OPTION>July</OPTION> <OPTION>August</OPTION> <OPTION>September</OPTION> <OPTION>October</OPTION> <OPTION>November</OPTION> <OPTION>December</OPTION> </SELECT><BR><BR> Year: <SELECT name="select2" size="3"> <OPTION SELECTED>--Select Year---</OPTION> <OPTION>1960</OPTION> <OPTION>1961</OPTION> <OPTION>1962</OPTION> <OPTION>1963</OPTION> <OPTION>1964</OPTION> <OPTION>1965</OPTION> <OPTION>1966</OPTION> <OPTION>1967</OPTION> <OPTION>1968</OPTION> <OPTION>1969</OPTION> <OPTION>1970</OPTION> <OPTION>1971</OPTION> <OPTION>1972</OPTION> <OPTION>1973</OPTION> <OPTION>1974</OPTION> <OPTION>1975</OPTION> <OPTION>1976</OPTION> <OPTION>1977</OPTION> <OPTION>1978</OPTION> <OPTION>1979</OPTION> <OPTION>1980</OPTION> <OPTION>1982</OPTION> <OPTION>1983</OPTION> <OPTION>1984</OPTION> <OPTION>1985</OPTION> <OPTION>1986</OPTION> <OPTION>1987</OPTION> <OPTION>1988</OPTION> <OPTION>1989</OPTION> <OPTION>1990</OPTION> <OPTION>1991</OPTION> <OPTION>1992</OPTION> <OPTION>1993</OPTION> <OPTION>1994</OPTION> <OPTION>1995</OPTION> <OPTION>1996</OPTION> </SELECT><BR><BR> </FORM>
The HTML code is as follows:
<FORM METHOD="post" ACTION="mailto:your-email@your.isp">
<INPUT TYPE="checkbox" NAME="autos" VALUE="yes">Autos<BR>
<INPUT TYPE="checkbox" NAME="b" VALUE="yes">Business & Finance<BR>
<INPUT TYPE="checkbox" NAME="movies" VALUE="yes">Movies<BR>
<INPUT TYPE="checkbox" NAME="music" VALUE="yes">Music<BR>
<INPUT TYPE="checkbox" NAME="comps" VALUE="yes">Computers & Internet <BR>
<INPUT TYPE="checkbox" NAME="science" VALUE="yes">Science<BR>
<INPUT TYPE="checkbox" NAME="sports" VALUE="yes">Sports <BR><BR>
<INPUT TYPE="submit" VALUE="Submit to email"><BR>
<INPUT TYPE="reset" VALUE="Clear to default settings">
</FORM>
</BODY>
For example, say the boxes labelled 'Movies', 'Science' and 'Sports', were checked, as in the figure below.
With default encoding you would receive an attached file in your email containing:
movies=yes&science=yes&sports=yes
This can be verified with a text editor.
With ENCTYPE="text/plain" you would receive the following in your email:
movies=yes
science=yes
sports=yes
Sample HTML and output are given below:
<BODY>
<H1>SpeedyPC Job Application Form</H1>
<HR><BR>
<FORM METHOD="post" ACTION=mailto:name@xyz.ac.uk>
<B>Position Applied for:</B>
<INPUT type="text" name="position" size="30">
Job reference code:
<INPUT type="text" name="ref" size="15"><BR>
<HR><BR>
First Name:
<INPUT type="text" name="firstname" size="30" maxlength="30"><BR>
Family Name:
<INPUT type="text" name="familyname" size="30"><BR>
Nationality:
<INPUT type="text" name="nationality" size="30"><BR>
Date of Birth:
<INPUT type="text" name="dob" size="10" value="dd/mm/yyyy"><BR>
Address:<BR>
<TEXTAREA name="address" cols="30" rows="5"></TEXTAREA>
<BR>
Telephone:
<INPUT type="text" name="phone" size="30" maxlength="30">
Email:
<INPUT type="text" name="email" size="30" maxlength="30"><BR>
<HR><BR>
<B>Educational History</B><BR>
School/College, Course Studied, Qualifications Received, Grades:
<TEXTAREA name="eduhistory" rows="6" cols="70"></TEXTAREA>
<B>Employment History</B><BR>
Employer, Date, Position/responsibilities:
<TEXTAREA name="emphistory" rows="6" cols="70"></TEXTAREA><BR>
<B>Personal Statement:</B><BR>
<TEXTAREA name="statement" rows="6" cols="70"></TEXTAREA><BR><BR>
<HR><BR>
<B>First Referee Details:</B><BR><BR>
First name:
<INPUT type="text" name="firstname1" size="30">
Family name:
<INPUT type="text" name="surname1" size="30"><BR>
Title:
<INPUT type="text" name="title" size="8">
Occupation:
<INPUT type="text" name="occ1" size="30"><BR>
Relationship:
<INPUT type="text" name="rel1" size="20"><BR>
Address:<BR>
<TEXTAREA name="address1" rows="4" cols="30"></TEXTAREA><BR>
Telephone:
<INPUT type="text" name="phone1" size="30">
Email:
<INPUT type="text" name="email1" size="30"><BR><BR>
<B>Second Referee Details:</B><BR><BR>
First name:
<INPUT type="text" name="firstname1" size="30">
Family name:
<INPUT type="text" name="surname1" size="30"><BR>
Title:
<INPUT type="text" name="title" size="8">
Occupation:
<INPUT type="text" name="occ1" size="30"><BR>
Relationship:
<INPUT type="text" name="rel1" size="20"><BR>
Address:<BR>
<TEXTAREA name="address1" rows="4" cols="30"></TEXTAREA><BR>
Telephone:
<INPUT type="text" name="phone1" size="30">
Email:
<INPUT type="text" name="email1" size="30"><BR><BR>
<HR><BR>
<INPUT type="submit" name="Submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>
</BODY>
Your HTML should look something like this:
For example, say you were to check the boxes labelled 'Movies', 'Science'
and 'Sports', as in the figure below.
<HEAD>
<TITLE>Land Of Boxes Form</TITLE>
</HEAD>
<H1><FONT SIZE="5" COLOR="coral">Land Of Boxes Order Form</FONT></H1>
<BODY>
<FORM METHOD="post" ACTION=mailto:name@xyz.co.za>
<TABLE>
<TR>
<TD ALIGN="right">Name:</TD>
<TD><INPUT TYPE="text" NAME="name" SIZE="35"></TD>
</TR>
<TR>
<TD ALIGN="right">Email:</TD>
<TD><INPUT TYPE="text" NAME="email" SIZE="35" VALUE=""></TD>
</TR>
<TR>
<TD ALIGN="right">Address:</TD>
<TD><TEXTAREA NAME="address" COLS="30" ROWS="5"></TEXTAREA></TD>
</TR>
<TR>
<TD ALIGN="right">Postcode:</TD>
<TD><INPUT TYPE="text" NAME="postcode" SIZE="20"></TD>
</TR>
</TABLE><BR><BR>
<TABLE BORDER=1>
<TR>
<TD><B>Product</B></TD>
<TD><B>Part Number</B></TD>
<TD><B>Quantity</B></TD>
<TD><B>Unit Price</B></TD>
<TD><B>Subtotal</B></TD>
</TR>
<TR>
<TD>EconoBox</TD><TD>LB100</TD>
<TD><INPUT type="text" name="Qlb100" size="8"></TD><TD>R5</TD>
<TD><INPUT type="text" name="Sublb100" size="15" value="R"></TD>
</TR>
<TR>
<TD>Standard Box</TD><TD>LB200</TD>
<TD><INPUT type="text" name="Qlb200" size="8"></TD><TD>R10</TD>
<TD><INPUT type="text" name="Sublb200" size="15" value="R"></TD>
</TR>
<TR>
<TD>Premium Box/TD><TD>LB300</TD>
<TD><INPUT type="text" name="Qlb300" size="8"></TD><TD>R15</TD>
<TD><INPUT type="text" name="Sublb300" size="15" value="R"></TD>
</TR>
<TR>
<TD>Deluxe Box/TD><TD>LB400</TD>
<TD><INPUT type="text" name="Qlb400" size="8"></TD><TD>R20</TD>
<TD><INPUT type="text" name="Sublb400" size="15" value="R"></TD>
</TR>
<TR>
<TD>Super Deluxe Box/TD><TD>LB500</TD>
<TD><INPUT type="text" name="Qlb500" size="8"></TD><TD>R30</TD>
<TD><INPUT type="text" name="Sublb500" size="15" value="R"></TD>
</TR>
<TR>
<TD COLSPAN=5 ALIGN="right">
Total: <INPUT type="text" name="total" size="15" value="R"></TD>
</TR>
</TABLE><BR><BR>
<B>Credit Card Details</B><BR>
<TABLE>
<TR>
<TD>Card Type:</TD>
</TR>
<TR>
<TD><INPUT type="radio" name="cardmake" value="master">Mastercard</TD>
<TD>Card Number:</TD>
<TD><INPUT type="text" name="cardnumber" size="20"></TD>
</TR>
<TR>
<TD><INPUT type="radio" name="cardmake" value="visa">Visa</TD>
<TD>Expiry date:</TD>
<TD><INPUT type="text" name="expiry" size="10" maxlength="5" value="mm/yy"></TD>
</TR>
<TR>
<TD><INPUT type="radio" name="cardmake" value="amex">American Express</TD>
</TR>
<TR>
<TD><INPUT type="radio" name="cardmake" value="diners">Diners Club</TD>
</TR>
</TABLE><BR><BR>
<TABLE>
<TR>
<TD ALIGN="right"><B>Delivery Address:</B></TD>
<TD><TEXTAREA NAME="delivery" COLS="25" ROWS="5"></TEXTAREA></TD>
</TR>
</TABLE><BR><BR>
<INPUT type="submit" name="submit" value="Send order">
<INPUT type="reset" name="reset" value="Clear form">
</FORM>
</BODY>
CGI software is software that adheres to the Common Gateway Interface protocol. A CGI programme is written for a special purpose and performs server-side processing of data submitted from a form.
No, the SIZE attribute in an <INPUT> tag merely sets the size of the field that will be rendered by a browser. The size of text is limited by the MAXLENGTH attribute.
To ensure a horizontal scroll bar is included in a multi-line text field, you must add the <TEXTAREA> tag the attribute WRAP=OFF.
The problem here is that all the buttons have the name flight_prefs, which means that only one name/value pair will be submitted where three are needed. Further, the first and last sets of radio buttons have unintentionally been made mutually exclusive, again because of the common name.
To initially set a check box, include the CHECKED attribute in the <INPUT> tag.
Menu buttons require only one line when rendered. The list of options appears over (usually) whatever is below it on the page. Scrolling lists occupy as many lines as specified by the SIZE attribute of the <SELECT> tag; since all the options are rarely shown, fewer lines than options are usually used.
Output and HTML are given below:
Choose a processor:<BR>
<SELECT name="processor" SIZE=4>
<OPTION>Motorola 68000</OPTION>
<OPTION>Intel 8088</OPTION>
<OPTION>Intel Pentium MMX</OPTION>
<OPTION>Intel Pentium II</OPTION>
<OPTION>Intel Pentium III</OPTION>
<OPTION>Intel Celeron</OPTION>
<OPTION>PowerPC G3</OPTION>
<OPTION>PowerPC G4</OPTION>
<OPTION>AMD Athlon</OPTION></SELECT>
The following name/value pair will be sent to the CGI software. An ampersand (&) would precede or follow it if other pairs were sent.
age=39
Two layout tips are worth remembering:
Use tables to layout the form in an organised way (see Unit 4).
You can use the <BR> tag (no closing tag needed) to move text or form objects to the next line. You can use the <P></P> tags to space your work in paragraphs.
Your HTML code should look something like this:
What is your favourite movie?<BR>
<TEXTAREA NAME="movie-comments" COLS="50" ROWS="5" WRAP=OFF></TEXTAREA>
There may be conflicting requirements here. It is not easy to reflect the fact that the usual destination for customers is within Egypt while promoting the others. For example, a scrolling list with Egypt at the top would appear to satisfy this requirement, but the other countries would not be visible. Breaking alphabetical ordering might distract some users:
Destination Country:<BR>
<SELECT NAME="colour" SIZE="3" MULTIPLE>
<OPTION>Egypt</OPTION>
<OPTION>Bahrain</OPTION>
<OPTION>Kuwait</OPTION>
<OPTION>Lebanon</OPTION>
<OPTION>Oman</OPTION>
</SELECT>
Alternatively, you could use alphabetical ordering to force the user to scroll through at least the options that precede the most likely destination, Egypt. But there would only be one option before Egypt, so it could be moved to last. To help users find Egypt, it can be pre-selected:
Destination Country:<BR>
<SELECT NAME="colour" SIZE="3" MULTIPLE>
<OPTION>Bahrain</OPTION>
<OPTION>Kuwait</OPTION>
<OPTION>Lebanon</OPTION>
<OPTION>Oman</OPTION>
<OPTION SELECTED>Egypt</OPTION>
</SELECT>
The final alternative is to use a menu button: it can preserve alphabetic ordering and shows all the other options:
Destination Country:<BR>
<SELECT NAME="colour">
<OPTION>Bahrain</OPTION>
<OPTION>Egypt</OPTION>
<OPTION>Kuwait</OPTION>
<OPTION>Lebanon</OPTION>
<OPTION>Oman</OPTION>
</SELECT>
Note that, when using a menu button, you should not pre-select Egypt if you want customers for internal flights to see the other options. Pre-selecting does exactly that: it would leave only Egypt visible on the button and most customers would not click on the button to reveal the other options in the menu.