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
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="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>
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.
button | checkbox | color |
date | datetime | |
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 |
Form, Action, Checkbox, drop down box, CGI, database, cfm, asp