Using the HTML Input Tag and Button Tag in Forms

Two young people working together
Xavier Arnau/E+/Getty Images

You can 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 will be generated. 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">

Be aware that the <input> tag will not submit an HTML form; you will still need to 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.

You will want to 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.

HTML5 adds some additional attributes to the <button> tag that give you more functionality.


  • autofocus - When the page loads, this specifies that this button is the focus. Only one autofocus can be used on a page.
  • form - Associates the button with a form within the same HTML document, using the identifier of the form as the value. For example: 
    <button type="submit" form="regform" value="Submit">Submit</button>
  • formaction - Used only with type="submit" and a URL as the value, it specifies where form data will be sent. For example:
    <button type="submit" formaction="/submitted.php">Submit form data to another page</button>
  • 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.

    If you are using forms, you might want to read up on making buttons in HTML forms, and how to make your site more user friendly.

    mla apa chicago
    Your Citation
    Kyrnin, Jennifer. "Using the HTML Input Tag and Button Tag in Forms." ThoughtCo, Jan. 13, 2018, Kyrnin, Jennifer. (2018, January 13). Using the HTML Input Tag and Button Tag in Forms. Retrieved from Kyrnin, Jennifer. "Using the HTML Input Tag and Button Tag in Forms." ThoughtCo. (accessed March 21, 2018).