Section 66. Add Components to the Form | Sams Teach Yourself Creating Web Pages All in One

66. Add Components to the Form

BEFORE YOU BEGIN

6 About Proper HTML Coding

65 Create a Form

SEE ALSO

48 Use the HTML Views

Now you are going to add the elements to the form you created. I'm going to let the user specify how many bottles of wine she wants in my example. I'll also need to give the viewer a place to add her address so she will finally have the ability to send in her address and telephone numbers .

66. Add Components to the Form

1.	Add a Text Input Area Look at the HTML Source View and click after the description of the first item. We need to use a special word to represent this piece of information we will collect from the customer. I enter the following HTML code: <input type="text" name =" CabFrancQty "> This code adds a text input area to the form so that the viewer is able to enter the number of bottles of wine she wants. The type of the input being set to " text " tells HTML that the input area is a one-line entry box for text. Why did I use CabFrancQty ? Why that's shorthand for Cabernet French wine bottle Quantity. I could have simply used CheapStuff (given my love of all things California), but remember: On all web pages, anything you type is viewable to the customer. You should type a nice name for the bottle quantity.
2.	Add Text Areas for Each Catalog Item Add text areas for the remaining items after each description. The body of your code should look similar to this (the bold code is the portion you have added for the form): <body> <h1>Wine Online - Three great wines available for you today</h1> <form> Order here<br> <img alt="" src="cabernetfranc-small.gif" style="width: 100px; height: 73px;"> Cabernet Franc <input type="text" name="CabFrancQty"> <br> <img alt="" src="sauvignonblanc-small.gif" style="width: 100px; height: 78px;"> Sauvignon Blanc <input type="text" name="SauvBlancQty"> <br> <img alt="" src="stoneplacecuvee-small.gif" style="width: 100px; height: 73px;"> Stone Place Cuvee <input type="text" name="StPlcCvQty"> <br> </form> </body> I want to let the users enter their addresses and phone numbers, so I'm going to add another form element.
3.	Add a Text Area Just before the end tag of the form, </form> , add a text area , which is different from a text field because it enables the user to add multiple lines of text instead of just one line. Add the following HTML code: <textarea name="NameAddress"></textarea> I chose the name for this information to be NameAddress so as to suggest what information I expect. In my previous example, I used a fancy name, made up of several words. It's also quite acceptable to use a simple name, something you're likely to remember a year later when you update the website. TIP Names that are too complex or too simple can make website maintenance painful. The body of the code should look something like this (the highlighted code is the portion you have added for the form): <body> <h1>Wine Online - Three great wines available for you today</h1> <form> Order here<br> <img alt="" src="cabernetfranc-small.gif" style="width: 100px; height: 73px;"> Cabernet Franc <input type="text" name="CabFrancQty"><br> <img alt="" src="sauvignonblanc-small.gif" style="width: 100px; height: 78px;"> Sauvignon Blanc <input type="text" name="SauvBlancQty"><br> <img alt="" src="stoneplacecuvee-small.gif" style="width: 100px; height: 73px;"> Stone Place Cuvee <input type="text" name="StPlcCvQty"><br> <textarea name="NameAddress"></textarea> </form> </body>
4.	Add a Submit Button Add the Submit button to the form so that the viewer can send the form. Just after the textarea end tag, add a Submit button. Add the following HTML code: <input type="submit" name="Submit" value="Submit"> The body of the code should look something like this (the highlighted code is the portion you have added for the form): <body> <h1>Wine Online - Three great wines available for you today</h1> <form> Order here<br> <img alt="" src="cabernetfranc-small.gif" style="width: 100px; height: 73px;"> Cabernet Franc <input type="text" name="CabFrancQty"> <br> <img alt="" src="sauvignonblanc-small.gif" style="width: 100px; height: 78px;"> Sauvignon Blanc <input type="text" name="SauvBlancQty"> <br> <img alt="" src="stoneplacecuvee-small.gif" style="width: 100px; height: 73px;"> Stone Place Cuvee <input type="text" name="StPlcCvQty"><br> <textarea name="NameAddress"></textarea> <input type="submit" name="Submit" value="Submit"> </form> </body> There are a load of other elements you could add, but this is a good start. This completes most of the form. However, there is one more thing we need to do: which is to Add an action , which is a link to some service either on your own server or someone else's server that captures the content of the form and does something.
5.	View Your Results If the typing has gone well, you will see a beautiful form that has adequate text input boxes and a nice submit button. It is very important you review your results. One typo can ruin your form. Do you see any text in the form that shouldn't be there? That can indicate an extra carriage return has broken your HTML. Instead of interpreting the text as a closing tag, for example, the browser now interprets your half tag as text you want to display. Also, review your graphics. In my example, I leave my graphics too wide to be readable. Also, I've used the same graphic for all three different types of wine. It's best that your quality review finds these problems earlybefore the customer! Once you are satisfied with the results and have an accurate rendering of a form in HTML, it's time to move on and code what you want the form to do.