Class 5 Notes for Web Publishing II

Learning Objectives:

You will be able to create a form that connects to a shopping cart

You will be able to modify the form with JQuery

You will be able to identify new attributes and elements in HTML 5


Post: A form that sends data to a shopping cart. The form must be linked to your homework page

Create: an account on Mal's E-commerce (Make sure you save the Userid, Password and Server)

Review: Mal's tutorial to set up your connection to his shopping cart!

Review: Jon's Bribe Site uses a form that connects to a database. (View Source to see the HTML I used to link to the shopping cart.)

Review: W3schools Tutorial on Forms, Input Type and Input Attributes

Review: JQuery UI and JQuery Mobile for tools to spice up your Form

Review: The video from note 7 on how to create a form.

Watch: Forms and Connecting to Mal's E-commerce


Topics Covered:

You will need to register at Mal's E-commerce

We will be interacting with a database at Mal's Website. Mal's database needs the following fields to be filled out for the shopping cart to work. Mal's website uses Cold Fusion to create the connection to his database

userid     User Id for your shopping cart setup

product    What is the product you are selling?

price    Price of the Product you are selling

qty    How many will the customer want to buy?

Form Action     You will need to provide an action for this form to work. Mal will send you this URL when you register!

Sample of the Code:

<form action="" method="post">
<input name="userid" type="hidden" value="12345678">
<input name="product" type="hidden" value="Oceanmaster jacket">
<input name="price" type="hidden" value="159">
<input name="return" type="hidden" value="">
<input type="submit" value="Buy Now!">

We will play with the following form objects: Sample Form

Text Field & Area Check Box Radio Button
Selection Box Submit Button Reset Button

With Forms you can "Get" or "Post" information to your server. You have the option of adding several "objects" to your HTML with the forms tag. Text boxes, Text Areas, Check Boxes, Radio Buttons and Submit Buttons are the more popular objects you can add to your page.

CGI stands for Common Gateway Interface. CGI adds interactivity between HTML and the Web servers resources (data bases or ability to create new pages.) Several different languages can be used to create CGI scripts. Some of the more popular languages are Perl, VB Script, Java Script, C++ and Apple Script.

New and Popular HTML 5 Input Types

button checkbox color
date datetime email
file hidden image
password radio reset
search submit tel
text time URL

New attributes for <input>:

autocomplete autofocus form
formaction formenctype formmethod
formnovalidate formtarget height and width
list min and max multiple
pattern (regexp) placeholder required




Form, Action, Checkbox, drop down box, CGI, database, cfm, asp



Dr. Jon Storslee
Phone: 602-787-6734

HTML Valid

Paradise Valley Community CollegeĀ 
18401 N. 32nd Street Phoenix, AZ 85032