Using the HTML Input Tag and Button Tag in Forms

Use the 'button' tag to bypass calls to Javascript and to extend functionality

Two young people working together in office at computer

Xavier Arnau / E+ / Getty Images

Create customizable text buttons in HTML using the input tag. The input element is used within a form element. 

By setting the attribute type to "button," a simple clickable button generates. You can define the text that will appear on the button, such as "Submit," by using the value attribute. For example:

<input type="button" value="Submit">

The input tag will not submit an HTML form; you must include JavaScript to handle the form-data submission. Without a JavaScript onclick event, the button will appear to be clickable but nothing will happen, and you will have frustrated your readers.

The 'button' Tag Alternative

Though using the input tag to create a button works for its purpose, it is a better option to use the button tag to create your website HTML buttons. The button tag is more flexible because it allows you to use images for the button (which helps you preserve visual consistency if your site has a design theme), for example, and it can be defined as a submit or reset type of button without needing any extra JavaScript.

Specify the button type attribute in any button tags. There are three different types:

  • button:The button has no inherent behavior but is used in conjunction with scripts that run on the client-side that can be attached to the button and executed when it is clicked.
  • reset: Resets all values.
  • submit: The button submits form data to the server (this the default value if no type is defined).

Other attributes include:

  • name: Gives the button a reference name.
  • value: Specifies a value to be initially assigned to the button.
  • disable: Turns off the button.

Going Further With Buttons

HTML5 adds additional attributes to the button tag that extends its functionality. 

  • autofocus: When the page loads, this option specifies that this button is the focus. Only one autofocus can be used on a page.
  • form: Associates the button with a specific form within the same HTML document, using the identifier of the form as the value.
  • formaction: Used only with type="submit" and a URL as the value, it specifies where form data will be sent. Often, the destination is a PHP script or something similar,
  • formenctype: Used only with type="submit" attribute. Defines how form data is to be encoded when submitted to the server. The three values are application/x-www-form-urlencoded (default), multipart/form-data, and text/plain.
  • formmethod: Used only with type="submit" attribute. This specifies which HTTP method to use when submitting form data, either get or post.
  • formnovalidate: Used only with type="submit" attribute. Form data will not be validated when submitted.
  • formtarget: Used only with type="submit" attribute. This indicates where the site response should be displayed when form data is submitted, such as in a new window, etc. The value options are either ​_blank, _self, _parent, _top, or a specific frame name.

Read more about making buttons in HTML forms, and how to make your site more user-friendly.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Using the HTML Input Tag and Button Tag in Forms." ThoughtCo, Sep. 30, 2021, thoughtco.com/input-type-button-3468604. Kyrnin, Jennifer. (2021, September 30). Using the HTML Input Tag and Button Tag in Forms. Retrieved from https://www.thoughtco.com/input-type-button-3468604 Kyrnin, Jennifer. "Using the HTML Input Tag and Button Tag in Forms." ThoughtCo. https://www.thoughtco.com/input-type-button-3468604 (accessed March 29, 2024).