Class 6 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

Homework:

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

Review: W3schools on JQuery

Review: JQuery UI and Mobile forms modifications.

 

Topics Covered:

Jon's Bribe Site uses a form that connects to a database.

You will need to register at Mal's E-commerce
Mal has a tutorial that will help you set up your connection to his shopping cart!

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="http://ww#.aitsafe.com/cf/add.cfm" 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="www.mals-e.com/support.php">
<input type="submit" value="Buy Now!">
</form>

JQuery UI and JQuery Mobile will spice up your Form

 

A Web Form needs an action (what you are going to do with the form) and should include a method (how to send the info in the form)

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
step    

New HTML 5 Form attributes:

New attributes for <form>:

W3schools Tutorial on Forms, Input Type and Input Attributes

 

Terms:

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

Homework:

You should be reading Chapter 11 in Dreamweaver

Final Step:

Review in your mind everything we covered in class and remember to cover it again before you go to bed so your mind to process this information while you sleep.