Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P39 ppsx

If I have a text input field named searchstring and enter Orangutans in the field, the resulting would look like the following: http://www.example.com/cgi-bin/search?searchstring=Orangut

Trang 1

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]

Trang 2

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 http://www.example.com/form.html 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:somebody@isp.com" 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:

http://www.example.com/cgi-bin/search?searchstring=Orangutans

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

Trang 3

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

Trang 4

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.

Trang 5

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

Trang 6

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

Trang 7

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>

Trang 8

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

Trang 9

<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.

Trang 10

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.

Định dạng
Số trang	10
Dung lượng	115,61 KB