• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Forms / HTML Form Buttons

HTML Form Buttons

29 November 2001 / 3 Comments

As well as fields such as text fields, checkboxes and select menus, an HTML form can contain different types of buttons. Form buttons allow the user to submit the filled-in form to the server for processing. Your form will generally contain at least one form submit button so that the form can be sent.

Find out how to create HTML forms in our HTML forms tutorial.

The submit button

Form submit buttons 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 submit 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 form 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 form submit button


<input type="submit" value="Send Now!">

Example 2: Two form submit buttons


<input type="submit" name="send_button" value="Send">
<input type="submit" name="send_button" value="Send Now!">

(If the first form 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

You can use an image as a form button, thanks to the image input type. An image form button 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 HTML for an image form button 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 (as explained in the HTML images tutorial).

HTML image form button 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 form 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 form 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 form buttons

It’s also possible to create generic HTML 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 form button, use the syntax:


<input type="button" name="xxxx" value="xxxx">

The optional name attribute is the name of the form 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 know how to create form submit, image, reset, and generic buttons using HTML, find out about:

  • Text and textarea fields
  • Checkboxes, radio buttons and select fields
  • Hidden fields, password fields and file upload fields

Filed Under: HTML Forms Tagged With: button, form buttons, form submit, html buttons, image, name, reset, value

Reader Interactions

Comments

  1. praguehotels says

    21 April 2011 at 6:56 am

    Thanks for step by step guidance of html-form-buttons! You make it easy to understood.

    Reply
  2. bullmoose says

    22 March 2012 at 5:05 pm

    Hello,

    Do you have a tutorial that shows multiple submit buttons on a form using CSS rollover images? I have this working without rollovers and I have rollovers working as shown here:http://www.elated.com/articles/css-rollover-buttons/ but I cannot figure out how to combine both? Any examples you could share please?

    Thanks!

    Reply
  3. bullmoose says

    23 March 2012 at 5:41 pm

    Here is the test page in question.

    http://www.speedylines.com/test/store_console.php

    Best Regards.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits