Creating Forms

You've seen forms on the Web, but I'll bet you didn't know they were so easy to create. I want to point out a couple of things for you to keep track of as you read this section and then you'll create a form.

• Forms are made up of fields (that you want the user to fill out) and buttons (to perform actions such as submit and reset).

• Every field (<input type="type" />) should have name and id attributes as well.

• Every field can be set to have a default value (a pre-selected option that the users can overwrite if they want); many also can be set to validate the data the user enters.

• Every form requires a Submit button that sends the form data to the address specified in the action attribute of the <form> tag. It has its own <input /> tag and you can read more about it in the "Buttons" section later in this lesson.

One more thing: A form isn't a form until it is enclosed within the <form> tag. The <form> tag always includes an action and a method attribute. To make it simple, a form's method is almost always set to post and the action can only be one of two values: an e-mail address of the person who will be receiving the form's data, or a URL of a file that will be receiving the form's data. We're going to use the e-mail option because it's easier for you to practice with. Figure 11.1 demonstrates an online form using the following simple <form> tag. Figure 11.2 shows the full HTML document for the form shown in Figure 11.1.

<form method="mailto: [e-mail]" action="post">

Figure 11.1. This Web form contains each of the input types (fields) discussed in this lesson.

Figure 11.2. Here's the HTML document for the form shown in Figure 11.1.

Don't forget that an HTML form is just like any other HTML document; it doesn't recognize extra spaces. If you want to line up your fields for a more professional-looking form, line up your form fields in tables, as shown in Figure 11.3, and use style sheet properties to define your fonts and add images.

Figure 11.3. This version of the form took a little longer to create, but the results are worth it.