Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk. Room 129, Ext 6544 April 2002 3CSG1

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

An HTML form <FORM action="http://somesite.com/prog/adduser" 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="email">email: </LABEL> <INPUT type="text" id="email"><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

The form displayed April 2002 3CSG1

A form with a menu <FORM action="http://somesite.com/prog/component-select" 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

The menu displayed April 2002 3CSG1

A form with an option group <FORM action="http://somesite.com/prog/someprog" 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

The option group displayed April 2002 3CSG1

As it should be April 2002 3CSG1

Form with text area <FORM action="http://somesite.com/prog/text-read" 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

The text area displayed April 2002 3CSG1

Hidden variables Hidden variables are not shown by the browser. <INPUT type="hidden" id=“user" value="jbw"> <INPUT type=“hidden" id=“book" value="0201627574"> 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

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