How to Create a Form Shopping Cart

A simple HTML form shopping cart allows customers to purchase your products online.

Putting a form shopping cart on your site allows Web visitors to purchase your products. You will need a basic knowledge of HTML in addition to product images, product description and the price. The table-based shopping cart is created inside of a form, so make the table and its cells as wide as your Web page. At the end of the form, you can include a "submit" button. This is a simple shopping cart that does not use JavaScript, which you can modify or update as needed.

Things You'll Need

• Text editor, like Notepad

Instructions

1. Open a text editor, like Notepad. Type the opening "<form>" and closing "</form>" tags.

2. Begin a table underneath the "<form>" tag with the opening "<table width=?? cellpadding="1" cellspacing="1" border="1">" and the closing "</table>" tags. Specify the table width.

3. Add the table's first row "<tr>" and "</tr>" tags. Add the first rows column "<td>" and "</td>" tags. Add additional rows and columns within the table as needed. The code looks like this:

   <form>

   <table width="500" cellpadding="1" cellspacing="1" border="1">

   <tr>

   <td></td>

   </tr>

   Add more rows and columns here

   </table>

   </form>

4. Add the product image HTML to the first column of the first row. Add the product's description and any other text you want.

5. Add a checkbox for the customer to purchase the product in the second column of the first row. Type the price. Sample code looks like this:

   <td><input type="checkbox" name="price" value="$9.95"/>$9.95</td>

6. Repeat steps 4 and 5 for additional products. The product image and description go in the first column and the price goes into the second column. Complete the table.

7. Add a "Submit" button. After the "</form>" tag, create a new form for the submit button. The action attribute is where the data will be sent. Sample code looks like this:

   <form name="input" action="????" method="get">

   <input type="submit" value="Submit" />

   </form>

8. Add your coding to the Web page where you want your shopping cart to appear. Upload your product photographs and change anything if desired.

Tips & Warnings

• Add the "<div align="center">" and "</div>" tags to your form to center it on the Web page.

References

• How to Use Tables to Structurize Forms in HTML
• W3 Schools: HTML Forms and Input