Section 65. Create a Form | Sams Teach Yourself Creating Web Pages All in One

65. Create a Form

BEFORE YOU BEGIN

6 About Proper HTML Coding

SEE ALSO

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

TIP

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 .

NOTE

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

1.	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.
2.	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.
3.	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 .
4.	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.
5.	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 / .