1. Technology

Buttons on Forms

Using the Input Tag to Submit Forms

By

HTML forms are one of the most basic ways to add interactivity to your website. You can ask questions and solicit answers from your readers, provide additional information from databases, set up games, and more. There are a number of HTML elements you can use to build your forms. And once you've built your form, there are many different ways to submit that data to the server or just start the form action running.

These are several ways you can submit your forms:

  • <input type="submit">
    This is the most common method of getting data to the server, but it can be very plain looking.
  • <input type="image">
    Using an image makes it very easy to make your submit button fit with the style of your site. But some people might not recognize it as a submit button.
  • <input type="button">
    The button INPUT tag gives a lot of the same options as the image INPUT tag, but looks more like the standard submit type. It requires JavaScript to activate.
  • <button></button>
    The BUTTON tag is a more versatile type of button than the INPUT tag. This tag requires Javacript to activate.
  • <command type="command">
    The COMMAND element is new in HTML5, and it provides a way to activate scripts and forms with associated actions. It is activated with JavaScript.

The INPUT Element

The INPUT element is the most common way to submit a form, all you do is choose a type (button, image, or submit) and if necessary add some scripting to submit to the form action.

The <input type="submit"> element can be written just like that. But if you do, you will have different results in different browsers. Most browsers make a button that says “Submit,” but Firefox makes a button that says “Submit Query.” To change what the button says, you should add a value attribute:

<input type="submit" value="Submit Form">

The <input type="button"> element is writen like that, but if you leave off all other attributes, all that will display in browsers is an empty gray button. To add text to the button, use the value attribute. But this button won't submit the form unless you use JavaScript.

<input type="button" value="Submit Form" onclick="submit();">

The <input type="image"> is similar to the button type, which needs a script to submit the form. Except that instead of a text value, you need to add an image source URL.

<input type="image" onclick="submit();" src="submit.gif">

The BUTTON Element

The BUTTON element requires both an opening tag <button> and a closing tag </button> When you use it, any content you enclose inside the tag will be enclosed in a button. Then you activate the button with a script.

<button onclick="submit();">Submit Form</button>

You can include images in your button or combine images and text to create a more interesting button.

<button onclick="submit();"><img src="submit.gif" />Submit Form</button>

The COMMAND Element

The COMMAND element is new with HTML5. It does not require a FORM to be used, but it can act as a submit button for a form. This element allows you to create more interactive pages without requiring forms unless you really need forms. If you want the command to say something, you write the information in a label attribute.

<command type="command" onclick="submit();" label="Submit Form">

If you want your command to be represented by an image, you use the icon attribute.

<command type="command" onclick="submit();" icon="submit.gif">

This article is part of the HTML Forms Tutorial. Read through the full tutorial to learn how to use HTML forms.

©2014 About.com. All rights reserved.