april 20023csg1htf 1 electronic commerce html forms john wordsworth department of computer science...

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

Upload: baldric-miles

Post on 03-Jan-2016

214 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 1

Electronic CommerceHTML forms

John WordsworthDepartment of Computer ScienceThe University of [email protected] 129, Ext 6544

Page 2: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 2

Lecture objectives

To review the use of HTML forms

To look at the user interface capabilities of HTML forms

Page 3: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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>

Page 4: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 4

The form displayed

Page 5: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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>

Page 6: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 6

The menu displayed

Page 7: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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>

Page 8: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 8

The option group displayed

Page 9: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 9

As it should be

Page 10: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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>

Page 11: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

April 2002 3CSG1 HTF 11

The text area displayed

Page 12: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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.

Page 13: April 20023CSG1HTF 1 Electronic Commerce HTML forms John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk

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.