Using the <form> Tag


Using the <form> Tag
To accept input from a user, you must wrap all of your input fields inside a <form> tag. The purpose of
the
<form> tag is to indicate where and how the user's input should be sent. First, let's look at how the
<form> tag affects page layout. Forms are block-level elements. That means when you start a form, a
new line is inserted (unless you apply the
display: inline CSS property to the form tag).
Note
Form controls must appear inside another block level element inside the <form> element in
order to be considered valid. A
<div>, <p>, or <table> will all do the trick, as will other block
level elements.

Take a look at the following code fragment:
Input
<p>Please enter your username <form><input /> and password
<input /></form> to log in.</p>

You might think that your entire form would appear on a single line based on the preceding markup. As
shown in
Figure 10.3, the opening and closing <form> tags act like opening and closing paragraph tags.
Output
Figure 10.3. A line break inserted by an opening <form> tag.

The two most commonly used attributes of the <form> tag are action and method. Both of these
attributes are optional. The following example shows how the
<form> tag is typically used:
<form action="someaction" method="get or post">

file:///G|/1/0672328860/ch10lev1sec2.html (1 von 3) [19.12.2006 13:49:16]
Using the <form> Tag
content, form controls, and other HTML elements
</form>

action specifies the URL to which the form is submitted. Again, remember that for the form to be
submitted successfully, the script must be in the exact location you specify and must work properly.
If you leave out the
action attribute, the form is submitted to the current URL. In other words, if the
form appears on the page
and you leave off the action attribute, the
form will be submitted to that URL by default. This probably doesn't seem very useful, but it is if your
form is generated by a program instead of residing in an HTML file. In that case, the form is submitted
back to that program for processing. One advantage of doing so is that if you move the program on the
server, you don't have to edit the HTML to point the form at the new location.
Although most forms send their data to scripts, you also can make the action link to another web page
or a
mailto link. The latter is formed as follows:
<form action="mailto:" method="post">

This attaches the form data set to an email, which then is sent to the email address listed in the action
attribute.
Tip
To test your forms, I recommend using the get method and leaving out the action attribute
of the form tag. When you submit the form, the values you entered will appear in the URL
for the page so that you can inspect them and make sure that the results are what you
expected.

The method attribute supports two values: get or post. The method indicates how the form data should
be packaged in the request that's sent back to the server. The

get method appends the form data to the
URL in the request. The form data is separated from the URL in the request by a question mark and is
referred to as the query string. If I have a text input field named
searchstring and enter Orangutans in
the field, the resulting would look like the following:
/>
The method attribute is not required; if you leave it out, the get method will be used. The other method
is
post. Rather than appending the form data to the URL and sending the combined URL-data string to
the server,
post sends the form data to the location specified by the action attribute in the body of the
request.
DO DON'T
file:///G|/1/0672328860/ch10lev1sec2.html (2 von 3) [19.12.2006 13:49:16]
Using the <form> Tag
DO use the POST method when data on the
server will be changed in any way.
DON'T use the GET method if the form is used to
delete information.
DO use the
GET method if the form just requests
data. (Like search forms, for example.)
DON'T use the GET method if you do not want the
form parameters to be visible in a URL.
DO use the
GET method if you want to bookmark
the results of the form submission.


The general rule when it comes to choosing between post and get is that if the form will change any

data on the server, you should use
post. If the form is used to retrieve information, using get is fine. For
example, let's say that you're writing a message board program. The registration form for new users
and the form used to publish messages should use the
post method. If you have a form that enables the
user to show all the posts entered on a certain date, it could use the
get method.
That about does it for the
<form> tag, but you've really only just begun. The <form> tag alone is just a
container for the input fields that are used to gather data from users. It simply indicates where the data
should go and how it should be packaged. To actually gather information, you're going to need items
called form controls.
One other less frequently used attribute of the
<form> tag is enctype. It defines how form data is
encoded when it's sent to the server. The default is
application/x-www-form-urlencoded. The only time
you ever need to use
enctype is when your form includes a file upload field (which I'll discuss a bit later).
In that case, you need to specify that the
enctype is multipart/form-data. Otherwise, it's fine to leave it
out.


file:///G|/1/0672328860/ch10lev1sec2.html (3 von 3) [19.12.2006 13:49:16]
Creating Form Controls with the <input> Tag



Creating Form Controls with the <input> Tag
Now it's time to learn how to create the data entry fields form. The <input> tag enables you to create

many different types of form controls.
Form controls are special HTML tags used in a form that enable you to gather information from visitors
to your web page. The information is packaged into a request sent to the URL in the form's
action
attribute.
The
input element consists of an opening tag with attributes, no other content, and no closing tag:
<input attributes />

The key point here is using the attributes that will create the form control you need. The most important
of these is
type, which specifies what kind of form control to display. For all controls, except Submit and
Reset buttons, the
name attribute is required. It associates a name with the data entered in that field
when the data is sent to the server. The rest of this section describes the different types of controls you
can create using the
input element.
Creating Text Controls
Text controls enable you to gather information from a user in small quantities. This control type creates
a single-line text input field in which users can type information, such as their name or a search term.
To create a text input field, create an
input element and choose text as the value for the type attribute.
Make sure to name your control so that the server script will be able to process the value:
Input
<p>Enter your pet's name:
<input type="text" name="petname" /></p>

Figure 10.4 shows this text control, which tells the user what to type in.
Output
Figure 10.4. A text entry field.

file:///G|/1/0672328860/ch10lev1sec3.html (1 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag

You can modify the appearance of text controls by using the size attribute. Entering a number sets the
width of the text control in characters:
<input type="text" name="petname" size="15" />

To limit the number of characters a user can enter, add the maxlength attribute to the text control. This
doesn't affect the appearance of the field; it just prevents the user from entering more characters than
specified by this attribute. If users attempt to enter more text, their web browsers will stop accepting
input for that particular control.
<input type="text" name="petname" size="15" maxlength="15" />

To display text in the text control before the user enters any information, use the value attribute. If the
user is updating data that already exists, you can specify the current or default value using
value, or
you can prompt the user with a value:
<input type="text" name="petname" size="15" maxlength="15" value="Enter Pet Name" />

In this case, Enter Pet Name appears in the field when the form is rendered in the web browser. It
remains there until the user modifies it.
Caution
When you're using the value attribute, using a value that's larger than the size of the text
control can confuse the user because the text will appear to be cut off. Try to use only
enough information to make your point. Ensure that any
value is less than or equal to the
number of characters you specified in
size.

Creating Password Controls

The password and text field types are identical in every way except that the data entered in a password
field is masked so that someone looking over the shoulder of the person entering information can't see
file:///G|/1/0672328860/ch10lev1sec3.html (2 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag
the value that was typed into the field.
Tip
You don't have to limit your use of the password control to just passwords. You can use it
for any sensitive material that you feel needs to be hidden when the user enters it into the
form.

To create a password control, create an input element with the type set to password. To limit the size of
the password control and the maximum number of characters a user can enter, you can use the
size
and
maxlength attributes just as you would in a text control. Here's an example:
Input
<p>Enter your password: <input type="password" name="userpassword"
size="8" maxlength="8" /></p>

Figure 10.5 shows a password control.
Output
Figure 10.5. A password form field.

Caution
When data entered in a password field is sent to the server, it is not encrypted in any way.
Therefore, this is not a secure means of transmitting sensitive information. Although the
users can't read what they are typing, the
password control provides no other security
measures.


Creating Submit Buttons
file:///G|/1/0672328860/ch10lev1sec3.html (3 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag
Submit buttons are used to indicate that the user is finished filling out the form. Setting the type
attribute of the form to
submit places a Submit button on the page with the default label determined by
the browser, usually
Submit Query. To change the button text, use the value attribute and enter your
own label, as follows:
<input type="submit" value="Send Form Data" />

Note
Your forms can contain more than one Submit button.

If you include a name attribute for a Submit button, the value that you assign to the field is sent to the
server if the user clicks on that Submit button. This enables you to take different actions based on which
Submit button the user clicks, if you have more than one. For example, you could create two Submit
buttons, both with the
name attribute set to "action". The first might have a value of "edit" and the
second a value of
"delete". In your script, you could test the value associated with that field to
determine what the user wanted to do when he submitted the form.
Creating Reset Buttons
Reset buttons set all the form controls to their default values. These are the values included in the value
attributes of each field in the form (or in the case of selectable fields, the values that are preselected).
As with the Submit button, you can change the label of a Reset button to one of your own choosing by
using the
value attribute, like this:
<input type="reset" value="Clear Form" />


Caution
Reset buttons can be a source of some confusion for users. Unless you have a really good
reason to include them on your forms, you should probably just avoid using them. If your
form is large and the user clicks the Reset button when he means to click the Submit
button, he isn't going to be very pleased with having to go back and re-enter all of his data.

Creating Check Box Controls
Check boxes are fields that can be set to two states: on and off (see Figure 10.6). To create a check
box, set the
input tag's type attribute to checkbox. The name attribute is also required, as shown in the
following example:
Input
<p>Check to receive SPAM email <input type="checkbox" name="spam" /></p>
file:///G|/1/0672328860/ch10lev1sec3.html (4 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag

Output
Figure 10.6. A check box field.

To display the check box as checked, include the checked attribute, as follows:
<input type="checkbox" name="year" checked="checked" />

You can group check boxes together and assign them the same control name. This allows multiple
values associated with the same name to be chosen:
<p>Check all symptoms that you are experiencing:<br />
<input type="checkbox" name="symptoms" value="nausea" /> Nausea<br />
<input type="checkbox" name="symptoms" value="lightheadedness" />
Light-headedness<br />
<input type="checkbox" name="symptoms" value="fever" /> Fever<br />
<input type="checkbox" name="symptoms" value="headache" /> Headache

</p>

When this form is submitted to a script for processing, each check box that's checked returns a value
associated with the name of the check box. If a check box isn't checked, neither the field name nor
value will be returned to the serverit's as if the field didn't exist at all.
Creating Radio Buttons
Radio buttons, which generally appear in groups, are designed so that when one button in the group is
selected, the other buttons in the group are automatically unselected. They enable you to provide users
with a list of options from which only one option can be selected. To create a radio button, set the
type
attribute of an
<input> tag to radio. To create a radio button group, set the name attributes of all the
fields in the group to the same value, as shown in
Figure 10.7. To create a radio button group with three
options, the following code is used:
Input
file:///G|/1/0672328860/ch10lev1sec3.html (5 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag
<p>Select a color:<br />
<input type="radio" name="color" value="red" /> Red<br />
<input type="radio" name="color" value="blue" /> Blue<br />
<input type="radio" name="color" value="green" /> Green<br />
</p>

Output
Figure 10.7. A group of radio buttons.

As with check boxes, if you want a radio button to be selected by default when the form is displayed,
use the
checked attribute. One point of confusion is that even though browsers prevent users from

having more than one member of a radio button group selected at once, they don't prevent you from
setting more than one member of a group as checked by default. You should avoid doing so yourself.
Using Images As Submit Buttons
Using image as the type of input control enables you to use an image as a Submit button:
Input
<input type="image" src="submit.gif" name="submitformbtn" />_

Figure 10.8 shows a custom button created with an image.
Output
Figure 10.8. The image input type.
file:///G|/1/0672328860/ch10lev1sec3.html (6 von 9) [19.12.2006 13:49:17]
Creating Form Controls with the <input> Tag

When the user clicks on an image field, the x and y coordinates of the point where the user clicked are
submitted to the server. The data is submitted as
name.x = x coord and name.y = y coord, where name is
the name assigned to the control. Using the preceding code, the result might look like the following:
submitoformbtn.x=150&submitformbtn.y=200

You can omit the name if you choose. If you do so, the coordinates returned would just be x = and y =.
Form controls with the type
image support all the attributes of the <img> tag. You can remove the border
from the image by using
border="0", or add a horizontal buffer around it using hspace="10". To refresh
your memory on the attributes supported by the
<img> tag, go back to Lesson 7, "Adding Images, Color,
and Backgrounds."
Creating Generic Buttons
In addition to creating Submit, Reset, and Image buttons, you also can create buttons that generate
events within the browser that can be tied to client-side scripts. To create such a button, set the

type
attribute to
button. Figure 10.9 shows a button that calls a function when it is pressed. Use the following
code to create a button:
Input
<input type="button" name="verify" value="verify" onclick="verifydata()" />

Output
Figure 10.9. A button element on a web page.
file:///G|/1/0672328860/ch10lev1sec3.html (7 von 9) [19.12.2006 13:49:17]