Chapter 10: Forms
10.5.4.1 Submission buttons
The submit button does what its name implies, setting in motion the form's submission to the server from the browser. You may have more than one submit button in a form. You may also include name and value attributes with the submit type of input form button.
With the simplest submit button (that without a name or value attribute), the browser displays a small rectangle or oval with the default label "Submit". Otherwise, the browser labels the button with the text you include with the tag's value attribute. If you provide a name attribute, the value attribute for the submit button is added to the parameter list the browser sends along to the server. That's good, because it gives you a way to identify which button in a form was pressed, letting you process any one of several different forms with a single form-processing application.The following are all valid submission buttons:
The first one is also the simplest: the browser displays a button, labeled "Submit," which activates the form-processing sequence when clicked by the user. it does not add an element to the parameter list that the browser passes to the formprocessing server and application.
The second example button has the value attribute that makes the displayed button label "Order Kumquats," but like the first example does not include the button's value in the form's parameter list.
The last example sets the button label and makes it part of the form's parameter list. When clicked by the user, that last example of the submissionbutton adds the parameter Ship_style= "Ship Overnight" to the form's parameter list.
10.5.4.2 Reset buttons
The reset type of form input button is nearly self-explanatory: it lets the user reset -- erase or set to some default value-all elements in the form. Unlike the other buttons, a reset button does not initiate form processing. Instead, the browser does the work of resetting the form elements. The server never knows (or cares, for that matter) if or when the user might have pressed a reset button.
By default, the browser displays a reset button with the label "Reset." You can change that by specifying a value attribute with your own button label.
Here are two sample reset buttons:
The first one creates a reset button labeled "Reset"; the browser labels the second example reset button with "Use Defaults." They both initiate the same reset response in the browser.
10.5.4.3 Custom image buttons
The image type of input form element creates a custom button that is a "clickable" image. it's a special button made out of your specified image that, when clicked by the user, tells the browser to submit the form to the server, and includes the x,y coordinates of the mouse pointer in the form's parameter list, much like the mouse-sensitive image maps we discuss in Chapter 7, Links and Webs. Image buttons require a src attribute with the URL of the image file, and you can include a name attribute and a descriptive alt attribute for non-graphical browsers. You may also use align and border (Netscape only) attributes to control image alignment within the current line of text and the width of the frame that Netscape places around the image, respectively, much like the align and border attributes for the <img> tag (Internet Explorer doesn't place a border on form input images).
Here are a couple of valid image buttons:...
The browser displays the designated image within the form's content flow. The second button's image will be aligned with the top of the adjacent text, as specified by the align attribute. Some browsers (Netscape, for instance) also add a border, as it does when an image is part of an anchor (<a> tag), to signal that the image is a form button.
When the user clicks the image, the browser sends the horizontal offset, in pixels, of the mouse from the left edge of the image and the vertical offset from the top edge of the image to the server. These values are assigned the name of the image as specified with the name attribute, followed by .x and .y, respectively. Thus, if someone clicked the image specified earlier in the example, the browser would send parameters named map.x and map.y to the server.
Image buttons behave much like mouse-sensitive image maps (usemaps), and, like the programs or client-side <map> tags that process image maps, your formprocessor may use the x,y mouse-pointer parameters to choose a special course of action. You should use an image button when you need additional form information to process the user's request. If an image map of links is all you need, use a mouse-sensitive image map. Mouse-sensitive images also have the added benefit of providing server-side support for automatic detection of shape selection within the image, letting you deal with the image as a selectable collection of shapes. Buttons with images require you to write code that determines where the user clicked on the image and how this position can be translated to an appropriate action by the server.
Oddly, the HTML 4.0 standard allows the use of the usemap attribute with an image button, but does not explain how such a use might conflict with normal server processing of the x,y coordinates of the mouse position. We recommend not mixing the two, using mouse-sensitive images outside of forms and image buttons within forms.
10.5.4.4 Push buttons
Using the <input type=button> tag (or the <button> tag, described in section 10.5-6), you can create a button that can be clicked by the user but that does not submit or reset the form. The value attribute can be used to set the label on the button; the name attribute, if specified, will cause the supplied value to be passed to the form processing script.
10.5.4.5 Multiple buttons in a single form
You can have several buttons of the same or different types in a single form. Even simple forms have both reset and submit buttons, for example. To distinguish between them, make sure each has a different value attribute, which the browser uses for the button label. Depending on the way you program the form-processing application, you might also make the name of each button different, but it is usually easier to name all similarly acting buttons the same and let the button handling subroutine sort them out by value. For instance:...