april 20023csg1htf 1 electronic commerce html forms john wordsworth department of computer science...
TRANSCRIPT
April 2002 3CSG1 HTF 1
Electronic CommerceHTML forms
John WordsworthDepartment of Computer ScienceThe University of [email protected] 129, Ext 6544
April 2002 3CSG1 HTF 2
Lecture objectives
To review the use of HTML forms
To look at the user interface capabilities of HTML forms
April 2002 3CSG1 HTF 3
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 HTF 4
The form displayed
April 2002 3CSG1 HTF 5
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 HTF 6
The menu displayed
April 2002 3CSG1 HTF 7
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><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></OPTGROUP></SELECT></FORM>
April 2002 3CSG1 HTF 8
The option group displayed
April 2002 3CSG1 HTF 9
As it should be
April 2002 3CSG1 HTF 10
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 HTF 11
The text area displayed
April 2002 3CSG1 HTF 12
Hidden variables
<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 HTF 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.