11.8: Submit and Reset Buttons

Last updated
Save as PDF

Page ID: 93851

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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 \(\PageIndex{1}\): 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 \(\PageIndex{2}\).

<input type="submit"
  id="id"
  name="name"
  value="text"
>

Figure \(\PageIndex{2}\): 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 \(\PageIndex{3}\): Typical code and display for <input type="submit"/> button.

The `<input type="image"/>` Tag - TOP

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.

Figure \(\PageIndex{4}\): A graphic submit button.

An image button is created with an

<input type="image"> tag whose general format is given in Figure \(\PageIndex{5}\).

<input type="image"
  id="id"
  name="name"
  src="url"
  alt="text"
>

Figure \(\PageIndex{5}\): 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 \(\PageIndex{6}\): 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.

Enter text:

Figure \(\PageIndex{7}\): 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 \(\PageIndex{8}\): 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">

Figure \(\PageIndex{9}\): Code to style form submit and reset buttons.

The <input type="submit"> Button