Making HTML Buttons on Forms

Using the input tag to submit forms

HTML Code
Hamza TArkkol / Getty Images

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

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