Making HTML Buttons on Forms

Using the input tag to submit forms

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.
  • 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.
  • The BUTTON tag is a more versatile type of button than the INPUT tag. This tag requires Javascript to activate.
  • 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 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 an attribute:

value="Submit Form">

The element is written 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.

onclick="submit();">

The 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.

src="submit.gif">

The Button Element

The BUTTON element requires both an opening tag and a closing tag. 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.

Submit Form

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

Submit Form

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.

label="Submit Form">

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

icon="submit.gif">

HTML forms have several different ways to submit, as you've learned on the previous page. Two of those methods are the INPUT tag and the BUTTON tag. There are good reasons to use both of these elements.

The Input Element

The tag is the easiest way to submit a form. It requires nothing beyond the tag itself, not even a value. When a customer clicks on the button, it submits automatically. You don't need to add any scripts, the browsers know to submit the form when a submit INPUT tag is clicked.
The problem is that this button is very ugly and plain. You can't add images to it. You can style it just like any other element, but it can still feel like an ugly button.

Use the INPUT method when your form has to be accessible even in browsers that have JavaScript turned off.

The BUTTON Element

The BUTTON element offers more options for submitting forms. You can put anything inside a BUTTON element and turn it into a submit button. Most commonly people use images and text. But you could create a DIV and make that entire thing a submit button if you wanted to.

The biggest drawback to the BUTTON element is that it doesn't automatically submit the form. This means there needs to be some type of script to activate it. And so it is less accessible than the INPUT method. Any user who doesn't have JavaScript turned on won't be able to submit a form with only a BUTTON element to submit it.

Use the BUTTON method on forms that are not as critical. Also, this is a great way to add additional submission options within one form.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Making HTML Buttons on Forms." ThoughtCo, Sep. 30, 2021, thoughtco.com/buttons-on-forms-3464313. Kyrnin, Jennifer. (2021, September 30). Making HTML Buttons on Forms. Retrieved from https://www.thoughtco.com/buttons-on-forms-3464313 Kyrnin, Jennifer. "Making HTML Buttons on Forms." ThoughtCo. https://www.thoughtco.com/buttons-on-forms-3464313 (accessed March 28, 2024).