1 / 17

Understanding E-Commerce and Web Forms: A Comprehensive Guide

This lecture covers essential concepts in e-commerce, including its definition and various classes. It explains the workings of the World Wide Web, focusing on HTTP connections and the OSI network model. Additionally, it delves into network topology and common types. The lecture also provides practical insights into web forms, covering form controls, attributes, and methods like GET and POST for data submission, illustrated with examples of user input fields, text areas, buttons, and checkboxes.

rashad
Télécharger la présentation

Understanding E-Commerce and Web Forms: A Comprehensive Guide

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. CS-3432Electronic Commerce Lecture – 8 SikandarShujahToor https://sites.google.com/site/uolcsecom

  2. Quiz – 1 30 mins 20 mark • Define e-commerce and its classes • What is www? How an http connections is treated in www per transaction? • Define and explain OSI network model • What is a network topology? How many types of topologies are commonly used ?

  3. Forms • A form is a web page populated with the form controls such as text boxes, drop-down lists, combo boxes, radio buttons, check boxes and commands buttons to get information from the user • <form> and </form> • <Form action=http://www.uol.edu.pk/contact.html Method=get> • “action” attribute specifies where to send the form data when the form is submitted • Method attribute specifies how to send form data to the page specified in action attribute • Two ways to send form data • get – appends the form data into url in name/value pair • not recommended for sensitive data • post – appends the data inside the body of the http request

  4. Forms Controls • Types • Submit/Reset button • Text boxes • Text area • Check boxes • Radio buttons • Lists, etc., etc

  5. Post and Get Methods • <HTML> • <HEAD> • <TITLE>Post and Get Methods</TITLE> • </HEAD> • <BODY> • <H3>An Example of Post and Get methods</H3> • <FORM ACTION="http://www.uol.edu.pk/contact.html" METHOD=“GET"> • User Id:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="uid"> • <p>Password:&nbsp;<input type="password" name="pwd"></p> • <p><INPUT TYPE="SUBMIT" VALUE=Send-Form></p> • </FORM> • </BODY> • </HTML>

  6. Get Method

  7. Example -Submit <HTML> <HEAD> <TITLE>Submit Button</TITLE> </HEAD> <BODY> <H3>An example of Submit button:</H3> <FORM ACTION="http://www.uol.edu.pk/contact.html" METHOD="POST"> <INPUT TYPE="SUBMIT" VALUE=Send!> </FORM> </BODY> </HTML>

  8. Submit Button

  9. Example – Text Box & Text Area <HTML> <HEAD> <TITLE>Text Area Example</TITLE> </HEAD> <BODY> <H3>Today's Burning Question</H3> <FORM ACTION="http://www.gov.pk/scritps/test.asp" METHOD="POST"> First Name: <INPUT TYPE="TEXT" NAME="First"> <P> Last Name: <INPUT TYPE="TEXT" NAME="Last"> <P> Today's <I>Burning Question</I>: <B>How to make Pakistan a developed country?</B> <P> Please enter your answer in the text area below: <BR> <TEXTAREA NAME="Answer" ROWS="10" COLS="60"> </TEXTAREA> <P> <INPUT TYPE="SUBMIT" VALUE="I Know!"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>

  10. Text Boxes & Text Areas

  11. Text boxes - Attributes • <input type=text Name=“URL” Value=http://> • <Input type=text Name=“address” size=“40”> • <input type=text Name=“age” maxlength=“3”>

  12. Example – Checkbox <HTML> <HEAD> <TITLE>CheckBox Example</TITLE> </HEAD> <BODY> <H3>Describe Your Phobia!</H3> <FORM ACTION=http://www.sad.com/scripts/formtest.asp METHOD="POST"> What is <I>your</I> phobia? (Please check all that apply): <P> <INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR> <INPUT TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR> <INPUT TYPE="CHECKBOX" NAME=“Lock”>Fear of being locked inside<BR> <INPUT TYPE="CHECKBOX" NAME="Flying" Checked >Fear of flying<BR> <P> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>

  13. Example – Checkbox

  14. Example – Radio button <HTML> <HEAD> <TITLE>Radio Button Example</TITLE> </HEAD> <BODY> <H3>Survey</H3> <FORM ACTION="http://www.sad.com/scripts/formtest.asp" METHOD="POST"> Which of the following best describes your current income level:<BR><BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE="Poverty">living below the poverty line<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Middle” Checked>living at the level of middle class<BR> <INPUT TYPE="RADIO" NAME=“Income" VALUE=“Upper">living at the level of upper class<BR><BR> Which of the following best describes your political inclination:<BR><BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of Nationalist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of Socialist Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter of Republican Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None of the above<BR> <P> <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET"> </FORM> </BODY> </HTML>

  15. Example – Radio buttons

  16. Example - Lists <HTML><BODY> <FORM ACTION="http://www.sad.com/scripts/formtest.asp" METHOD="POST"> Select your nationality:<P> <SELECT NAME=“Nationality" SIZE="4"> <OPTION>American</OPTION> <OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION> <OPTION>Indian</OPTION> <OPTION>Iranian</OPTION> <OPTION SELECTED>Pakistani</OPTION> <OPTION>French</OPTION> </SELECT><P> Select your favorite city:<P> <SELECT NAME="City"> <OPTION>Sydney</OPTION> <OPTION>London</OPTION> <OPTION SELECTED>Lahore</OPTION> </SELECT><P> Countries visited last year:<P> <SELECT NAME=“Countries" SIZE="5" MULTIPLE> <OPTION>Canada</OPTION> <OPTION>Russia</OPTION> <OPTION>England</OPTION> <OPTION>Egypt</OPTION> <OPTION>Saudi Arabia</OPTION> </SELECT> </BODY></HTML>

  17. Example - Lists

More Related