1. Electronic Commerce HTML forms
John Wordsworth
Department of Computer Science
The University of Reading
Room 129, Ext 6544
April 2002
3CSG1

2. Lecture objectives To review the use of HTML forms
To look at the user interface capabilities of HTML forms
April 2002
3CSG1

3. An HTML form
<FORM action=" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for=" "> </LABEL>
<INPUT type="text" id=" "><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
April 2002
3CSG1

4. The form displayed
April 2002
3CSG1

5. A form with a menu
<FORM action=" method="post">
<P>
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
April 2002
3CSG1

6. The menu displayed
April 2002
3CSG1

7. A form with an option group
<FORM action=" method="post">
<P>
<SELECT name="ComOS">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
</SELECT>
</FORM>
April 2002
3CSG1

8. The option group displayed
April 2002
3CSG1

9. As it should be
April 2002
3CSG1

10. Form with text area
<FORM action=" method="post">
<P>
<TEXTAREA name="thetext" rows="20" cols="80">
First line of initial text.
Second line of initial text.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
April 2002
3CSG1

11. The text area displayed
April 2002
3CSG1

12. Hidden variables Hidden variables are not shown by the browser.
<INPUT type="hidden" id=“user" value="jbw">
<INPUT type=“hidden" id=“book" value=" ">
Hidden variables are not shown by the browser.
The id/value pairs of the hidden variables contribute to the HTTP request that is sent when the SUBMIT button is activated.
April 2002
3CSG1

13. Key points Forms can be used to get user input in a variety of ways
The action attribute explains what happens when the user submits the form
Radio buttons, menus, and text areas can be used to get input.
Hidden variables can be used to save state between HTTP requests.
April 2002
3CSG1