Section 65. Create a Form

65. Create a Form


6 About Proper HTML Coding


48 Use the HTML Views

57 Add a Picture to Your Page

In this chapter, you are going to work in new pages. You can open existing ones, but for learning forms, there is a benefit to having little else on the page to cause confusion. Also, Composer doesn't have any tools to help you build forms, so you will have to do your first real hand-coding to add the forms to your page.

65. Create a Form


We are going to build a small catalog form for a winery that enables the viewer to select the number of bottles of wine she wants and provide a shipping address and phone number so that we can call her back to get her payment information. You can build any sort of form you like, but the following examples are going to be wine related .


Remember, building a page that handles credit cards correctly and securely is beyond the scope of this book.

Create a New Page and Add Content

In Composer , create a new page and a headline so that you have some text on the page. Then set the text as Heading 1 from the Paragraph Format choices in the Format toolbar and press Return to get a new line.

Add Your <FORM> Tag in HTML Source View

Click on the <HTML> Source tab to view the HTML for the page and then click in the line after the <H1> tag. Enter <FORM></FORM> to start and end your form.

Your code should look something like this:

 <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title></title> </head> <body> <h1>Wine Online - Three great wines available for you today</h1> <form></form> </body> </html> 

The beginning and end form tags contain your form markup and tell HTML where to look for form controls.

Add Text to Your Form in the HTML Source View

Click between <FORM> and </FORM> and type something (I typed Order Here ) and then click on the Normal tab to view the page in the Visual Editor .

Note that the text you typed between the <FORM> and </FORM> tags is visible on the page and inside a dashed green box that shows you where the edges of the HTML form are.

Click on the Normal tab to view the page in the Visual Editor .

Add Items in Normal View

Click after the text you typed in step 3 and add other items as you wish. (I added a couple of images and pressed Return after each image to create two or three images one above the other. This will be my catalog of items for sale. I also added some text for each item and then clicked back on the <HTML> Source tab.)

This gives you the basics you need for the catalog. You have three things to buy and descriptions of each. In the HTML Source view, you can see the link for each picture where you see the image tag, <IMG> , and the descriptive text after each image.

Save the Page

Save the page. You now have the basic form and some items in the form, but you need to have form elements for the buttons and text you are going to capture. You will do that in the next task. But before you do, please select the Preview tab. This will give you a halfway error point check on all your typing. If you see HTML tags being displayed, you've mistyped something or have a missing end tag. I've been known to forget to slash my tagsthat is, slash as in / .

Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276 © 2008-2017.
If you may any questions please contact us: