HTML Button: Step-by-Step Guide

The HTML button tag is used to create a clickable button within an HTML form. It lets a user to submit information in a form to a website. The button’s style can be controlled with CSS.

When you’re creating a form on a web page, you will need to create a clickable button so that a user can submit a form. For example, you may have an order form on an ecommerce site that collects delivery information from a user. After the user has filled in the forms, there should be a button for them to click to submit their information.

That’s where the HTML <button> tag comes in. The button tag is used in HTML to create a clickable button within an HTML form and enables a user to submit information in a form to a website.

In this tutorial, we are going to discuss how to use the <button> tag in HTML. We’ll also discuss the attributes you can use to create a custom button, and explore a few examples of these attributes in action.

HTML Form Refresher

HTML Forms are used to collect different types of user input, such as names, phone numbers, or addresses, on a web page.

Each form contains input elements that allow users to submit information to the website. For example, a web page may have an order form that contains form elements to collect a user’s name, date of birth, credit card information, and more.

The <form> tag is used to create a form in HTML. Here’s a simple example of the <form> tag being used to create a form that collects a user’s name:

<form>
	Name: <input type="text">
</form>

A form tag may include multiple <input> tags, or other user input elements such as select boxes. In addition, a form must include a <button> tag which, when clicked, will submit a user’s information to the website.

HTML Button

The <button> tag allows you to create a clickable button within an HTML form. For example, if you have a form that collects payment information, you may have a <button> at the end of the form so that a user can submit that data to your site.

The <button> tag must have a start and end tag, and should also include a value for the type attribute. The type attribute, as we will discuss later, tells the form what type of button should be rendered.

Here’s an example of the HTML <button> tag in action:

<button type="submit" value="Sign Up">Sign Up</button>

Here’s how our button appears on a web page:

Now that we have a button on our web page, a user would be able to submit the information they entered into the form they had filled out.

The <button> tag is supported in all major browsers, which means you can use it without worrying about browser compatibility. However, it’s worth noting that different browsers interpret the <button> tag differently. For example, Internet Explorer, before version 9, will submit the text between the opening and closing tag of the <button> element, whereas other browsers send the contents of the value attribute.

HTML Button Tag Attributes

The HTML <button> tag includes a number of attributes which can be used to create a custom button. In addition, the <button> tag supports the global attributes in HTML5. Let’s explore the main HTML <button> tag attributes in depth.

Autofocus

The autofocus attribute is used to specify that a button should automatically receive focus when the web page is loaded. Here’s the syntax for the autofocus attribute:

<button type="submit" autofocus>Test Button!</button>

Disabled

The disabled attribute disables the button, which means that users cannot interact with the element. Here’s the syntax for the disabled attribute:

<button type="submit" disabled>Test Button!</button>

As you can see below, our button is greyed out and cannot be clicked:

Form

The form attribute is used to link a button element to a form. The value of the form attribute should be equal to the id of the form to which the form relates. Here’s an example of the form attribute linking the submit button to our pizza form:

<form id="pizza">
	Flavor: <input type="text" name="flavor">
</form>
<button type="submit" form="pizza">Submit Order</button>

The form attribute has linked our button to the form with the id value pizza. So, when we click our button, our form with the id pizza will be submitted.

Formaction

formaction specifies the URL of a program that will process the information submitted by the button. This attribute can only be used if the type attribute in your button is equal to submit.

Here’s an example of the formaction attribute in use:

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>

Formenctype

The formenctype attribute specifies how the form data should be encoded when it is submitted to the server. This attribute should only be used when using the “method=’post’” attribute in your form.

Here’s an example of the formenctype attribute being used to send plain text to the server when our button is clicked:

<button type="submit" formenctype="text/plain">Submit Order</button>

Formmethod

formmethod is used to specify the HTTP method the browser will use to submit the form. This attribute should only be used with the “type=’submit’” attribute.

The two accepted values for the formmethod attribute are get and post. If you want to retrieve information or execute a HTTP GET function, you should use get; if you want to send information or execute a HTTP POST function, you should use post.

Here’s the syntax for the formmethod attribute:

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

<button type="submit" formmethod="post">Submit Order</button>

Formnovalidate

formnovalidate is used to specify that the form data should not be validated when it is submitted. For example, if you want to accept a user’s input even if they have not filled out all fields, you should use the formnovalidate attribute.

Here’s an example of formnovalidate in action:

<button type="submit" formnovalidate>Submit Order</button>

Formtarget

formtarget sets the target location for the response the server sends after the form has been submitted. The accepted values for this attribute are: _blank, _self, _parent, _top, or the name of your uframe.

Here’s the syntax for the formtarget attribute:

<button formtarget="_blank" rel="noopener">Submit Order</button>

Name

The name tag is used to specify the name of the button (which should be unique from all other form element names), and uses the following syntax:

<button name="submit_order">Submit Order</button>

Type

The type tag specifies the type of the button. There are three button types that can be used: button, submit, and reset. Here’s the syntax for the type tag:

<button type="submit">Submit Order</button>

Value

The value tag specifies the initial value of the button. Here’s the syntax for the value tag:

<button type="submit" value="Submit Order">Submit Order</button>

Conclusion

The <button> tag can be used to create a clickable button in an HTML form. For example, if you have a form that allows a user to place an order for a pizza, you’ll want to have a <button> tag that enables the user to submit the information about their order when they are ready.

In this tutorial, we have explored how to use the <button> tag in HTML. We also discussed the main attributes that can be used with the tag to create custom buttons, and explored a few examples of how those attributes can be used.

Now you’re ready to create buttons using the HTML <button> tag like an expert!