Using the HTML Input Tag and Button Tag in Forms

Two young people working together in office at computer

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.

Going Further With Buttons

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.