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

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