Submit and Reset Buttons
All forms that are submitted for server processing must include at least one "submit" button
to transmit form information to the Web page identified in the action attribute of the
<form> tag. Either a standard button or a graphic image can be used for
form submission.
The <input type="submit"> Button
A form submission button can be created with an <input type="submit"> tag
and can appear anywhere on the form. The default appearance of the button with its "Submit Query"
label is shown below.
Figure 10-27. Default appearance of a form submission button.
The general format for the <input type="submit"> tag to define a form
submission button is given in Figure 11-28.
Figure 10-28. General format for <input type="submit"> button.
The id Attribute
An id can be assigned to a submit button if there is a need to identify it
for browser script processing. Otherwise, an id is not needed.
The name Attribute
The submit button can be assigned a name with the name attribute. A name
is required for certain types of server processing.
The value Attribute
The value attribute provides two kinds of identification for the button.
On the one hand, this value is associated with the button name and indicates to a server
script which button was clicked; on the other, this value is used as the label for the
button. If a value attribute is not coded, the button is labeled "Submit Query"; however,
you can assign any text string to provide helpful identification of the button as a submit
button.
Typical coding and display for a submit button is shown below.
<input type="submit" name="SubmitButton" value="Submit Form">
Figure 10-29. Typical code and display for <input type="submit"/> button.
The <input type="image"/> Tag
An alternative to the standard submit button is to use a graphic image to trigger form
submission. For example, the following "Go" button functions identically to a standard
submit button.
<input type="image" name="SubmitButton" src="GoButton.gif"
alt="Click to Submit">
Figure 10-30. A graphic submit button.
An image button is created with an <input type="image"> tag whose general format
is given in Figure 10-31.
Figure 10-31. General format for <input type="image"> button.
The tag uses type="image" to identify this as a graphic form submission control. The particular
image that is used is given by the URL in the src attribute. Other attributes of an
<img> tag can be coded, including alt for an alternative text description of
the image. As with standard submit buttons, you may need to assign a name or id to identify the
button to server or browser scripts.
The <input type="reset"> Tag
One other button type is available for forms. A "reset" button can be created to permit users
to clear all information from a form, either to permit entry of new information or to clear
incorrect information. Its default appearance is shown below.
Figure 10-32. Default appearance of a form reset button.
This button is created by coding an <input type="reset"> tag. You can name
or id the button and can replace the default "Reset" label by coding its value attribute. The
action of the button is to automatically reset the form, clearing all text input areas and
resetting radio buttons, checkboxes, and drop-down lists back to their default appearances.
The following example shows use of a reset button. Enter text into the textbox; then click
the reset button. Information in the textbox is cleared.
Figure 10-33. Using a form reset button.
Styling Buttons
Submit and reset buttons can take advantage of style sheet settings to change their appearance.
Example styling is shown by the following two buttons.
Figure 10-34. Styled submit and reset buttons.
<style>
.submit {width:150px; background-color:#4682B4; color:#FFFFFF;
font-family:times new roman; font-size:14pt}
.reset {width:150px; background-color:#4682B4; color:#FFFFFF;
font-family:times new roman; font-size:14pt}
</style>
<input type="submit" name="SubmitButton" value="Submit Form" class="submit">
<input type="reset" name="ResetButton" value="Reset Form" class="reset">
Listing 10-18. Code to style form submit and reset buttons.