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.
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
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:
<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">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!