1 / 13

Electronic Commerce HTML forms

In this lecture, we will explore the various capabilities of HTML forms for user interaction. We will review how to create forms using standard elements such as text inputs, radio buttons, drop-down menus, and text areas. Additionally, we will discuss the action attribute to define form submission behavior. The session will also cover hidden variables and their role in maintaining state during HTTP requests. By the end of this lecture, participants will gain practical insights into effectively utilizing HTML forms in web applications.

penha
Download Presentation

Electronic Commerce HTML forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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> 3CSG1

  4. The form displayed 3CSG1

  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> 3CSG1

  6. The menu displayed 3CSG1

  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> 3CSG1

  8. The option group displayed 3CSG1

  9. As it should be 3CSG1

  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> 3CSG1

  11. The text area displayed 3CSG1

  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. 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. 3CSG1

More Related