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:
This is the most common method of getting data to the server, but it can be very plain looking.
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.
INPUTtag gives a lot of the same options as the image
BUTTONtag is a more versatile type of button than the
INPUTtag. This tag requires Javacript to activate.
INPUT element is the most common way to submit a form, all you do is choose a type (
submit) and if necessary add some scripting to submit to the form action.
<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
<input type="submit" value="Submit Form">
<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
<input type="button" value="Submit Form" onclick="submit();">
<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">
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>
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
<command type="command" onclick="submit();" label="Submit Form">
If you want your command to be represented by an image, you use the
<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.