The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Action Buttons

Action buttons are used to submit a form to a CGI script or to reset all of the form fields to the default values.

Action buttons are created using the <INPUT> tag. When used to create action buttons, the INPUT tag has one required attribute, TYPE and four optional attributes, NAME, VALUE, SRC, and ALIGN.

Sample HTML source for an action button:

<input type="submit" name="submit_button" value="Submit Form" />

See the table below for more examples of action buttons.

The TYPE Attribute (required)

There are three values of the TYPE attribute which are used to create action buttons.

type="submit"
INPUT tags with type="submit" are used to create a button which, when clicked, submits the form to the CGI script.
type="reset"
INPUT tags with type="reset" are used to create a button which, when clicked, resets all the form fields to their default values.
type="image"
INPUT tags with type="image" are used to use an image to submit the form to the CGI script when the image is clicked.

The NAME Attribute (optional for submit or image)

The NAME attribute is used when type="submit" or type="image" to include the submit button's VALUE as one of the elements sent to the CGI script. The NAME attribute is generally only necessary when more than one submit or image button is included in a page.

The VALUE Attribute (optional for submit or reset)

The VALUE attribute is used when type="submit" or type="reset" to specify the text to appear on the face of the button on the form.

The SRC Attribute (required for image)

The SRC attribute is used when type="image" to specify the URL of the image to be used as the button. The SRC attribute works the same way for INPUT tags as it does for IMG tags.

The ALIGN Attribute (optional for image)

The ALIGN attribute is used when type="image" to specify the way text flows around the image button. The ALIGN attribute may take the following values: top, middle, bottom, left, and right. The ALIGN attribute works the same way for INPUT tags as it does for IMG tags.

Example HTML Source Output from Script Description
<input type="submit" />  

When the user clicks on the submit button, the ACTION from the <form> tag is completed.

When no VALUE is specified, the value "Submit Query" is used.

<input type="submit" name="submit1" /> submit1 = Submit Query
<input type="submit" name="submit2" VALUE="value2" /> submit2 = value2
<input type="reset" />  

When the user clicks the reset button, the page is reloaded with its default values.

Use the VALUE attribute to specify text to appear on the button.

<input type="reset" value="value4" />  
<input type="image" src="http://www.utexas.edu/learn/forms/graphics/button.gif" name="image5" /> image5.x = 112
image5.y = 28

Image buttons support many of the attribues that the <img> tag supports.

When the user clicks on an image button, the ACTION from the <form> tag is completed.

Two name="value" pairs are passed to the script. The first gives the x coordinate of the user's click, the second gives the y coordinate.

The VALUE attribute has no effect on image buttons.

<input type="image" SRC="http://www.utexas.edu/learn/forms/graphics/button2.gif" name="image6" border="0" value="value6" /> image6.x = 122
image6.y = 24

  Updated 2009 July 10
  Copyright | Privacy | Accessibility
  Contact Us