Tutorial: HTML form buttons
Level: Intermediate. Published on 22 November 2001 in HTML forms
Learn how to add buttons to your HTML forms. Buttons allow visitors to submit a form to your server for processing, and interact with your forms in other ways.
As well as fields such as text fields, checkboxes and menus, a form can contain a number of different types of buttons. These buttons allow the user to submit the filled-in form to the server for processing. Your form will generally contain at least one submit button so that the form can be sent.
Find out how to create HTML forms in our Building forms tutorial.
The submit button
Buttons of the submit button type usually send the form data to the script that was specified in the action attribute of the form tag (as described above). It takes the format:
<input type="submit" name="xxxx" value="xxxx">
The optional name attribute is the name of the button (for example, "sendform"). The value attribute specifies the value associated with this button. The value will also be the text label that appears on the button.
Note that the button behaves rather like a checkbox, in that the button's value itself is sent as a form field named after the button's name. So if your button was called sendform and had a value of "Send Now!", then the form field sendform having value "Send Now!" would be sent to the server, along with the rest of the submitted form data.
You can also include more than one submit button in the form, and use your server script to determine which of the buttons was pressed by looking at the fields that were submitted (only the value of the button that was pressed will be sent to the server).
Example 1: Simple submit button
<input type="submit" value="Send Now!">
Example 2: Two submit buttons
<input type="submit" name="send_button" value="Send">
<input type="submit" name="send_button" value="Send Now!">
(If the first button is pressed, then the field send_button with value "Send" will be sent to the server. If the second button is pressed, the field send_button with value "Send Now!" will be sent to the server.)
Images and image buttons
Forms can have submit buttons in the form of images, using the image type. An image behaves exactly like a regular submit button, with the additional feature that the X and Y coordinates of the point where the user clicked on the image are submitted as well. These coordinates are taken from the top left of the image.
The coordinates are returned as the values of two field names, name.x and name.y, where name is the image button's name. For example, if the user clicked on an image called fred, at a point 50 pixels across by 35 pixels down from the top-left corner, the fields name.x and name.y would be submitted, with values of 50 and 35 respectively.
The image button tag takes the format:
<input type="image" name="xxxx" src="xxxx" width="xxxx"
height="xxxx" border="xxxx" align="xxxx" hspace="xxxx"
vspace="xxxx" alt="xxxx">
The name attribute is the name of the field (for example, "checkout"). The src and alt attributes behave exactly like their counterparts in the img element.
Example:
<input type="image" name="checkout"
value="Proceed to Checkout"
src="images/checkout_button.gif" style="width: 170px; height=23px;"
alt="Proceed to Checkout">
The reset button
The reset button type is used to reset the contents of the form to their original values. This means that each form field will change back to the value it had when the form loaded - either null (empty), or the default value set with the value attribute.
The syntax for reset buttons is simply:
<input type="reset" name="xxxx" value="xxxx">
As with regular buttons, if you specify a text string value then that text string will appear as the label on the button.
Example:
<input type="reset" value="Reset the Form">
General buttons
It's also possible to create generic form buttons. These buttons won't do anything unless you write some code around them (for example, using onclick to call some JavaScript).
To create a generic button, use the syntax:
<input type="button" name="xxxx" value="xxxx">
The optional name attribute is the name of the button (for example, mybutton). The value attribute specifies the value associated with this button. The value will also be the text label that appears on the button.
Example:
<input type="button" name="mybutton" value="Click Me!">
Other types of form fields
Now that you understand how HTML form buttons work, find out about:
- Text fields and text areas
- Checkboxes, radio buttons and menus
- Hidden fields, password fields and file upload fields
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!