Form Field Elements
| < Day Day Up > |
A form is made up of field s as well as the markup necessary to structure the form and potentially control its presentation. Form fields include text fields, password fields, multiple-line text fields, pop-up menus , scrolled lists, radio buttons, check boxes, and buttons . Hidden form fields are also possible. In the following sections, we explore the common form fields one by one. Newer and less common form items such as <button> , <label> , < fieldset > , and <legend> are discussed later in the section "Other Form Elements."
Text Fields
Single-line text entry fields are specified using the input element and are useful for collecting small bits of data such as a user 's name , address, e-mail address, and so on. It also is possible to specify a multiple-line text field using the textarea element, but for now let's focus on the simplest form of text entry . To set a text entry control, use the <input> tag and set the type attribute equal to text, as shown here, for traditional HTML:
<input type="text" name="UserName" id="UserName">
In XHTML syntax, because this is an empty element we would write the following:
<input type="text" name="UserName" id="UserName" />
The rest of the discussion will utilize XHTML syntax, but all examples could easily be modified back to HTML 4.
All form elements should be named by setting the name attribute to some unique value. In the previous example, the name attribute was set to "UserName" in order to indicate that the field is used to collect a user's name on an order form. Remember to pick a name that makes sense and is unique to the form. The name will be used when the form is submitted, as well as for manipulation by scripting languages. You should also set the id attribute to the same value as name for use in CSS and scripting, but a few areas like radio buttons will vary from this rule of thumb. This will be discussed more in an upcoming section.
The last example does not specify the size of the field nor the maximum number of characters that can be entered into the field. By default, unless specified this field generally will be a width of 20 characters, although browsers might not necessarily follow this typical situation. To set the size of the field in characters, use the size attribute. For example,
<input type="text" name="UserName" id="UserName" size="40" />
The value of the size field for an <input> tag is the number of characters to be displayed. It is possible for the user to type more characters than this value. The text will just scroll by. If you want to limit the size of the field, you need to set the value of the maxlength attribute to the maximum number of characters allowed in the field. The browser will keep the user from typing more than the number of characters specified. Browser feedback can include beeping or can just overstrike the last character. To set a text field that shows 30 characters but has a maximum of 60 characters that can be entered, you can use the following:
<input type="text" name="UserName" id="UserName" size="30" maxlength="60" />
The final attribute that is useful to set with a text entry field is the value attribute. With this attribute, you can specify the default text you want to appear in the field when the form is first loaded. For example, in the following code fragment, a value of "Enter your name here" is provided as a prompt to the user to fill in the field properly:
<input type="text" name="UserName" id="UserName" size="30" maxlength="60" value="Enter your name here" />
A very simple example of the basic text field is shown here, complete with a Submit button, the purpose of which is to send a form in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Text Field Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Text Field Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Customer Name :</strong> <input type="text" name="UserName" id="UserName" size="25" maxlength="35" /> <input type="submit" value="Submit" /> </form> </body> </html>
A rendering of the previous example is shown in Figure 12-2.
Figure 12-2: Text field rendering under Netscape
Password Fields
The password form field is the same as the simple text entry field, except that the input to the field is not echoed when typed. In many cases, the browser may render each character as an asterisk or dot to avoid people seeing the password being entered, as shown here:
Not echoing the password onscreen is appropriate. It discourages the idea of "shoulder surfing" in which an unscrupulous user looks on your screen to see what secret data you input. To set a password form control, use the <input> tag again but this time set the type attribute equal to password . As with the text field, it is possible to specify the size of the field in characters with size and the maximum entry in characters with maxlength . In the case of the password field, it is probably wise to limit its length so users don't become confused about how many characters they have entered.
The password form is very similar to the single-line text entry field. However, setting a default value for the password field with the value attribute doesn't make much sense because the user can see it by viewing the HTML source of the document. Of course, the name and id attributes should also be used on this form field. A complete example of the password field's use within the form is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Password Field Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Password Field Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Password :</strong> <input type="password" name="Pass" id="Pass" size="10" maxlength="10" /> <br /> <input type="submit" value="Submit" /> </form> </body> </html>
| Note | Don't assume that password fields are secure. The data is not encoded in any way that is difficult to figure out. Sensitive data must be transmitted using an SSL (Secure Sockets Layer) connection as designated by the https communication protocol. |
Multiple-Line Text Input
When it is necessary to enter more than one line of text in a form field, the input element must be abandoned in favor of the textarea element. Like the text input field, there are similar attributes to control the display size of the data entry area as well as the default value and the name of the control. For example, to set the number of rows in the text entry area, set the rows attribute equal to the number of rows desired. To set the number of characters per line, set the cols attribute. So, to define a text area of five rows of 80 characters each, use the following:
<textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> </textarea>
Because there can be many lines of text within a <textarea> tag, it is not possible to set the default text for the area using the value attribute. Instead, place the default text between the <textarea> and </textarea> tags:
<textarea rows="5" cols="80" name="CommentBox" id="CommentBox"> Please fill in your comments here. </textarea>
The information enclosed within a <textarea> tag must be plain text and should not include any HTML markup. In fact, the default text in a <textarea> tag preserves all the spaces, returns, and other special characters. Markup included within the form control will not be interpreted. A complete example of a multiple-line text field is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Textarea Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Textarea Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Comments :</strong><br /> <textarea name="Comments" id="Comments" rows="8" cols="40"> Your comments go here. </textarea><br /> <input type="submit" value="Submit" /> </form> </body> </html>
The rendering of the preceding example is shown in Figure 12-3.
Figure 12-3: Rendering of <textarea> example under Internet Explorer
When typing text into a multiline field, wrapping must be considered . By default, most browsers will wrap text, but versions 4.0 and previous of Netscape will not. To address this, you can use the nonstandard wrap attribute for the <textarea> tag. The values for this attribute are off , hard , and soft . A value of off disables word wrapping in the form control. Any text the user enters is displayed exactly as is, although the user may insert hard returns of his or her own. A value of hard allows word wrapping, and the actual break points are included when the form is submitted. A value of soft allows word wrapping in the form control, but the line breaks are not sent with the form's contents. A value of soft is the default in Internet Explorer, but should always be explicitly set to make sure that other browsers such as Netscape wrap text properly. The modern implementations of browsers (including Netscape) do not have this problem, so this attribute should be avoided, particularly because it is not part of the XHTML standard.
One interesting omission with the textarea element is that there is no attribute to limit the amount of content that can be entered into the field. This really is a glaring omission from HTML/XHTML. Fortunately, using JavaScript you can address the lack of a maxlength attribute and limit a user from entering more data, assuming they have a script-enabled browser.
Pull-Down Menus
A pull-down menu enables the user to select one choice out of many possible choices. One nice aspect of pull-down menus is that all choices do not have to be seen on the screen and are generally are hidden. The following illustration shows the rendering of a pull-down menu under different browsers:
To create a pull-down menu, use the <select> tag. The tag should contain one or more occurrences of the option element. Each <option> tag specifies a menu choice. In many ways, the structure of a pull-down menu looks similar to a list structure, as shown in the following code fragment:
<select name="GadgetType" id="GadgetType"> <option> Super Gadget </option> <option> Mega Gadget </option> <option> Mongo Gadget </option> <option> Plain Gadget </option> </select>
As you can see in the code fragment, like all form fields the select element has name and id attributes used to set a unique name for the field. It is also possible to set the size attribute on a <select> tag, but generally this is not set unless the menu is a scrolled list, as discussed later in this chapter.
The option element has a few attributes as well. An occurrence of the attribute selected in an <option> tag sets the form control to select this item by default. Otherwise, a browser will choose the first <option> within the select element as the default if no <option> tags contain the selected attribute. If multiple selected attributes are specified, the result is generally to select the final <option> tag with a selected attribute, but page authors should not assume this result and instead should focus on developing correct markup. Generally, the value submitted when the form is sent is the value enclosed by the option element. However, it is possible to set the value attribute for the element that will be returned instead. Separating the text of the option from the submitted value is often a good idea so you can have a descriptive message for the user and a short data item for transmission. A complete example of a simple pull-down menu is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Pulldown Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Pulldown Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Gadget Type :</strong> <select name="GadgetType" id="GadgetType"> <option> Super Gadget </option> <option value="MEG-G5"> Mega Gadget </option> <option value="MO-45" selected="selected"> Mongo Gadget </option> <option> Plain Gadget </option> </select><br /> <input type="submit" value="Submit" /> </form> </body> </html>
<optgroup>
HTML 4 introduced a variation to pull-down menus that is not often seen, the optgroup element. The goal of an <optgroup> tag is to create menu categories . It was initially designed to allow for cascading style menus, but it doesn't quite support that functionality. Although initially not well-supported by browsers, today's modern browsers do recognize <optgroup> . This simple example shows how <optgroup> might be used:
<select name="GadgetType" id="GadgetType"> <optgroup label="S* Gadgets"> <option value="SG-01"> Super Gadget </option> </optgroup> <optgroup label="M* Gadgets"> <option value="MEG-G5"> Mega Gadget </option> <option value="MO-45"> Mongo Gadget </option> </optgroup> <option selected="selected"> Gadget </option> </select>
Example renderings here under today's browsers show <optgroup> is useful.
Even if browsers do not support <optgroup> , its use is relatively harmless because most browsers will just ignore it and render the list normally. The complete syntax for this element can be found in Appendix A.
Scrolled Lists
The select element also might contain the size attribute, which is used to specify the number of items showing on the screen at once. The default value for this attribute is 1, which specifies a normal pull-down menu. Setting the size attribute to a value of two or more creates a list in a window of the specified number of rows, as shown here:
In the default case, scrolled lists act just like pull-down menus. However, if a <select> tag contains the attribute multiple , it becomes possible to select more than one entry. How multiple items are selected depends on the browser, but generally, it requires holding down some modifier key such as CTRL, COMMAND, or SHIFT and selecting the appropriate items with the mouse.
| Note | Many novice users have a hard time with the scrolled list control and multiple entries. Depending on your site's target audience and size, it might be wise to provide instructions near the control to assist the user. |
Because it is possible to select more than one entry in a scrolled list when the multiple option is applied, it is possible to use the selected attribute multiple times in the enclosed option elements. A complete example illustrating how the scrolled list is used is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Scrolled List Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Scrolled List Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Gadget Options :</strong><br /> <select name="GadgetOptions" id="GadgetOptions" multiple="multiple" size="3"> <option selected="selected" value="Hit with hammer"> Bumps </option> <option value="Add glitter"> Sparkles </option> <option selected="selected" value="Buff it"> Polished </option> <option> Scratches </option> <option> Shrink wrapped </option> </select><br /> <input type="submit" value="Submit" /> </form> </body> </html>
Check Boxes
With the scrolled list, it is possible to select many items out of a large group of items. Unfortunately, not all the items are presented at once for the user to choose. If there are a few options to select from that are not mutually exclusive, it probably is better to use a group of check boxes that the user can check off.
Check boxes are best used to toggle choices on and off. Although it is possible to have multiple numbers of check boxes and let the user select as many as he or she wants, if there are too many it can be difficult to deal with because they take up so much screen real estate, so don't forget about scrolled lists.
To create a check box, use an <input> tag and set the type attribute equal to checkbox . The check box also should be named by setting the name and id attributes. For example, to create a check box asking if a user wants cheese, use some markup like the following:
Cheese: <input type="checkbox" name="Cheese" id="Cheese" />
In this example, the label to the left is arbitrary. It could be to the right as well. The label could say "Put cheese on it," but there will be no indication of this label to the receiving program. In this simple example, if the check box is selected, a value of Cheese=on will be transmitted to the server. Setting a value for the check box might make more sense. Values to be transmitted instead of the default value can be set with the value attribute. The code
Cheese: <input type="checkbox" name="Extras" id="Extras" value="Cheese" />
would send a response such as Extras=Cheese to the server. Under traditional HTML, it was possible to have multiple check box controls with the same name. For example, the HTML 4 markup
Cheese: <input type="checkbox" name="Extras" id="Extras" value="Cheese"> Pickles: <input type="checkbox" name="Extras" id="Extras" value="Pickles">
would send multiple entries such as the following to the server when both extras were selected:
Extras=Cheese&Extras=Pickles
However, under XHTML you should have unique id attributes everywhere, so you would write:
Cheese: <input type="checkbox" name="Extras" id="cheese" value="Cheese" /> Pickles: <input type="checkbox" name="Extras" id="pickles" value="Pickles" />
However, another reason to avoid same name and id on multiple check boxes besides standards issues is that some Web programming environments will also make it difficult to parse incoming query strings with multiple name/value pairs with the same name. Interestingly enough, this is exactly how scrolled lists send in data, so yet another reason to avoid that construct.
Lastly, it is possible to set a check box to be selected by default by using the checked attribute within an <input> tag. The checked attribute requires no value under traditional HTML. However, under XHTML you have to use checked="checked" to be perfectly correct. A complete example using check box fields properly is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Checkbox Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Checkbox Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Gadget Bonus Options :</strong><br /> Super-magneto: <input type="checkbox" name="mag" id="mag" value="Magnetize" /><br /> Kryptonite Coating: <input type="checkbox" name="krypto" id="krypto" value="Anti-Superman" checked="checked" /><br /> Anti-gravity: <input type="checkbox" name="antigrav" id="antigrav" value="Anti-gravity" /><br /> <input type="submit" value="Submit" /> </form> </body> </html>
Radio Buttons
Radio buttons use a similar notation to check boxes, but only one option may be chosen among many. This is an especially good option for choices that don't make sense when selected together. In this sense, radio buttons are like pull-down menus that allow only one choice. The main difference is that all options are shown at once with radio buttons. Possible renderings of the radio button form control are shown here:
Like check boxes, this form field uses the standard <input type=""> format. In this case, set type equal to radio . Setting the name attribute is very important in the case of radio buttons because it groups together controls that share the radio functionality. The radio functionality says that when an item is selected, it deselects the previously pressed item. If the names are not the same, the radio group will not work. Be careful when naming radio fields. Although you should set the name attribute the same for all buttons in a group, radio buttons must not have the same id attribute under XHTML, similar to the situation with check boxes. In short, radio groups need the same name attribute value, but different id values.
When working with radio buttons, the value attribute must also be carefully considered. It is important to set each individual radio button to a different value entry. Otherwise, it will be impossible to decipher which button was selected. Like check boxes, the occurrence of the selected attribute in an <input> tag will preselect the item. Only one item may be selected as a default out of a radio group. If the selected attribute does not occur, the browser typically will not display any items as selected. A complete example using radio buttons is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Radio Button Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Radio Button Example </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Gadget Color :</strong><br /> Groovy Green: <input type="radio" name="Color" id="radio1" value="Green" /> Rocket Red: <input type="radio" name="Color" id="radio2" value="Red" checked="checked" /> Yipee! Yellow: <input type="radio" name="Color" id="radio3" value="Yellow" /> <br /> <input type="submit" value="Submit" /> </form> </body> </html>
Reset and Submit Buttons
Once a form has been filled in, there must be a way to send it on its way, whether it is submitted to a program for processing or simply mailed to an e-mail address. The input element has two values, reset and submit , for the type attribute for accomplishing this. Setting the type attribute for an <input> tag to reset creates a button that allows the user to clear or set to default all the form fields at once. Setting the type attribute for <input> to submit creates a button that triggers the browser to send the contents of the form to the address specified in the action attribute of the enclosing form element. Common renderings of the Submit and Reset form buttons are shown here:
The buttons have two important attributes: value and name . The value attribute sets both the value of the button transmitted to the server and the text wording on the button. The name value associates an identifier with the form field for submission. Of course, id can be used as well for setting a name, but it is typically more related to style sheets. A complete example showing a small form with Submit and Reset buttons is shown here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Reset and Submit Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> Gadget Order Form </h1> <hr /> <form action="http://www.htmlref.com/scripts/formecho.php" method="post" name="form1" id="form1"> <strong> Customer Name :</strong> <input type="text" name="UserName" id="UserName" size="25" maxlength="35" /> <br /> <strong> Password :</strong> <input type="password" name="Pass" id="Pass" size="10" maxlength="10" /> <br /> <strong> Gadget Type :</strong> <select name="GadgetType" id="GadgetType"> <option value="SG-01"> Super Gadget </option> <option value="MEG-G5"> Mega Gadget </option> <option value="MO-45"> Mongo Gadget </option> <option selected="selected"> Gadget </option> </select> <br /><br /> <input type="submit" value="Order Gadget" /> <input type="reset" value="Reset Form" /> </form> </body> </html>
Because the Submit and Reset buttons cause an action, either form submission or field reset, it may not be obvious why the name field can be useful. Although having multiple Reset buttons might not be so useful, multiple Submit buttons are useful because the value of the button is sent to the address specified in the form element's action attribute. One possible use might be to have three Submit buttons: one for add, one for delete, and one for update.
<input type="submit" value="Place Order" name="Add" /> <input type="submit" value="Delete Order" name="Delete" /> <input type="submit" value="Update Order" name="Update" /> <input type="reset" value="Reset Form" name="ResetButton" />
When the form is submitted, the name and value of the button is sent to the form- handling program, which will decide what to do with the submitted data based upon its contents. This use of a Submit button hints at a more generalized form of button, which will be discussed in the next section.
| Note | If you have two buttons next to each other, it is useful to separate the two with a nonbreaking space ( ). Otherwise, the buttons probably will render too closely together. Another approach would be to use a small table around the buttons and provide some cell padding or a blank cell between the buttons. CSS could also be used with form elements to avoid using HTML for presentation and is the preferred method for layout. However, some browsers have problems with CSS formatting with form fields, particularly when they are positioned, and you may see that form fields, noticeably pull-down menus, may have higher z-index values than other page objects regardless of your layout efforts. |
Additional <input> Types
There are a few types of input elements that have not been discussed. These elements hint at the potential complexity of using forms. Some of these elements, particularly the file selection form element, are not supported in very old browsers.
Hidden Text and Its Uses
The usefulness of this field is not always obvious to the new user. By setting the type attribute of the input element to a value of hidden , it is possible to transmit default or previously specified text that is hidden from the user to the handling program. For example, if there were many versions of the same form all over a Web site, the hidden text could be used to specify where the form came from, as shown here:
<input type="hidden" name="SubmittingFormName" id="SubmittingFormName" value="Form1" />
While this last example seems rather contrived, there actually is a very important use for hidden form controls.
When filling in forms, you may need to remember information the user entered from one form to the next. Imagine a form in which the user fills in his or her personal information on one page and the ordering information on the next page. How will the two pages be related to each other? This presents the state-loss problem. The protocols of the Web, primarily HTTP, do not support a "memory." In other words, they don't preserve state. One way to get around this is to use hidden text. Imagine that, in the last example, the personal information is passed to the next page by dynamically embedding it in the ordering page as hidden text. Then state has been preserved ”or has it? When users are finished ordering, they submit the whole form at once as a complete transaction. The use of hidden text to get around the state-loss problem is illustrated in Figure 12-4.
Figure 12-4: Using hidden form fields to preserve state
While hidden form data seems very useful, there are significant issues to consider. First, consider that nefarious users might be able to determine the internal workings of your system or even falsify requests that include control information in the hidden fields. Not to alarm page designers, but do consider that to see hidden form fields, all the user has to do is view the page source! Furthermore, even the casual hacker can modify such values. Because of the security implications of hidden form data, using it to control things such as shopping carts or other server-side activity is potentially extremely dangerous. Fortunately, there are other approaches to saving state, including extended path information and cookies. These ideas will be briefly discussed in the next chapter.
Image Type
One form of the input element that is somewhat strange is the image type, as specified by setting type="image" . This form of an <input> tag creates a graphical version of the Submit button, which not only submits the form but transmits coordinate information about where the user clicked in the image. The image is specified by the src attribute. Many of the attributes used for the img element might be valid for this form of <input> as well. The specification defines alt and align . Other attributes such as border , hspace , or vspace may or may not be supported by browsers. Like all other forms of <input> , the name attribute is a very important part of how the coordinate information is transmitted. The example use of <input> shown next could be used to insert a map of the United States, allowing users to click on the regional office where they want to submit their order forms.
<input type="image" src="usamap.gif" name="Sales" alt="Sales Region Map" />
When clicked, the form values would be submitted along with two extra values, Sales. x and Sales. y . Sales. x and Sales. y would be set equal to the x and y coordinates of where the image was clicked. The x and y coordinates are relative to the image with an origin in the upper left-hand corner of the image. You might notice a similarity to image maps. Indeed, much of the functionality of this form control could be imitated with a client-side image map in conjunction with some scripting code. A future extension to this form of the input element would be to make it less server-side dependent, possibly even allowing the page author to set a map name to decode coordinates or set function. Except for specialized needs, page designers probably should look to provide the functionality of the image form control in some other way.
File Form Control
A newer addition to the input element that now is part of the HTML and XHTML specifications is the capability to set the type attribute to file . This form control is used for file uploading. The field generally consists of a text entry box for a filename that can be manipulated with the size and maxlength attributes, as well as a button immediately to the right of the field, which usually is labeled "Browse." Pressing the Browse button enables the user to browse the local system to find a file to specify for upload. The logistics of how a file is selected depends on the user agent.
Following is an example of the syntax of the file form control, in which the enctype value has been set to multipart/form-data to allow the file to be attached to the uploaded form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> File Upload Test </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="center"> File Upload System </h1> <hr /> <form action="http://www.htmlref.com/scripts/fileupload.php" method="post" enctype="multipart/form-data" name="form1" id="form1"> <strong> File Description :</strong><br /> <input type="text" name="Description" id="Description" size="50" maxlength="100" /> <br /><br /> <strong> Specify File to Post :</strong><br /> <input type="file" name="FileName" id="FileName" /> <hr /> <input type="submit" value="Send it" name="SubmitButton" id="SubmitButton" /> <input type="reset" value="Reset Form" /> </form> </body> </html>
A rendering of this example is shown in Figure 12-5.
Figure 12-5: File form control rendering with browser dialog box
Although it is possible to set the size and maxlength values of the <input type="file"> element, this is not suggested because the path name might be larger than the size specified. (This depends on how the user has set up his or her system.)
The HTML specification also specifies the accept attribute for the <input type="file" /> tag, which can be used to specify a comma-separated list of MIME types that the server receiving the contents of the form will know how to handle properly. Browsers could use this attribute to keep users from uploading files that are unacceptable to a server (for example, executable files). It is not known whether browsers actually pay any attention to this attribute.
| Note | The file form control is not supported by all browsers, particularly older versions. |
Generalized Buttons
One last form of the input element, hinted at earlier, is the generalized button. By using <input type="button" /> , it is possible to create a button in the style of the Submit or Reset buttons, but that has no predetermined actions. Inserting something like the following doesn't really do much:
<input type="button" value="Press Me!" />
If you click the rendering of this button, no action is triggered, and no value will be submitted. So what's the point? By using a scripting language, it is possible to tie an event to the button and create an action. For example,
<input type="button" value="Press Me!" onclick="alert('Hello from JavaScript');" /> In Chapter 14, you'll see how forms can be tied to scripting languages to create powerful interactive documents.
| < Day Day Up > |
EAN: 2147483647
Pages: 252