The Button Tag in HTML: How it Works with Examples

The HTML button tag creates interactive controls on a web page. You can use this element to trigger actions or submit forms and user experience.

The <button> tag is important because it gives more options and provides a clearer purpose than other clickable elements.

What is the <button> Tag in HTML?

The <button> tag defines a clickable button in HTML. It is a standard form control that can run custom actions or submit form data.

You will see buttons in forms for submission or reset, modal dialog triggers and toggles that run JavaScript. These uses help users complete tasks or navigate your app smoothly.

The basic syntax looks like this:

<button type="button">Click Me</button>

• The <button> tag at the start begins the element.
• The type attribute controls its behavior.
• Content between the tags becomes the button label.
• The </button> tag at the end finishes it.

This element supports rich content inside, so you can add text or other HTML.

Here is a simple example:

<button type="submit">Send</button>

This button submits its parent form. You can see that type="submit" tells the browser to send form data to the server when the user clicks the button.

Type of Button Tag in HTML

There are three types defined by the type attribute:

• The type="button".
• The type="submit".
• The type="reset".

Let’s take each one in-depth.

The type=”button”

This type creates a neutral button with no default action. You can attach JavaScript to it for custom actions.

<button type="button" onclick="alert('Hello')">Click Me</button>

• type="button" means this is just a normal button.
• The onclick part is JavaScript that shows an alert box when the button is clicked.

You want the button to do something with JavaScript, if you need to open a popup, change content, etc.

The type=”submit”

This button submits the form it belongs to. If you don’t write a type, this is the default type inside a form.

Here is an example:

<form action="/submit-form" method="post">
  <input type="text" name="username" required>
  <button type="submit">Send</button>
</form>

• When the “Send” button is clicked, the form sends the data to the server (/submit-form).
• method="post" means the form data will be sent with POST.

You want to send form data to a server when the button is clicked.

The type=”reset”

This button clears all the form inputs and resets them to their default values. Here is an example:

<form>
  <input type="text" value="Hello">
  <input type="email" value="user@example.com">
  <button type="reset">Clear</button>
</form>

The clickable “Clear” button will reset the text and email fields to what they were when the page loaded (Hello and user@example.com).

Here is a table that shows you the key differences:

Attributes of the HTML Button Tag

The <button> tag supports several attributes that control how it works or looks. Here is a table that shows you a quick explanation for each one:

Let’s take each one in-depth.

The type Attribute in Button

Defines what the button does (behavior).

For example:

<button type="submit">Send</button>

• submit sends the form
• Other values: button (default button), reset (clears form)

The name Attribute in Button

It specifies the name of the button, sent with form data. For example:

<button type="submit" name="action" value="save">Save</button>

• When submitted, form data will include: action=save
• Useful when the server needs to know which button was clicked.

The value Attribute in Button

The value sent to the server with the button’s name when the form is submitted.

Here is an example:

<button name="task" value="delete">Delete</button>

• When the button is clicked, task=delete is sent.
• Works only when the button is inside a form.

The disabled Attribute in Button

It makes the button unclickable and grayed out. Here is an example:

<button disabled>Can't Click Me</button>

• The user cannot click or interact with this button.
• Often used while you wait for input or when a page or data loads.

The autofocus Attribute in Button

It automatically focuses on the button when the page loads.

<button autofocus>I'm Focused</button>

• This button gets selected (focused) as soon as the page loads.
• Helpful for forms or key navigation.

The form Attribute in Button

It lets the button be outside of a form, but still connect to it.

For example:

<form id="myForm" action="/send" method="post">
  <input type="text" name="email">
</form>

<button type="submit" form="myForm">Submit Outside</button>

• Even though the button is outside the form, it still submits #myForm.
• form="formID" connects the button to the form.

The formaction Attribute in Button

It overrides the form’s action URL for that specific button.

<form method="post">
  <input type="text" name="name">
  <button type="submit" formaction="/save">Save</button>
  <button type="submit" formaction="/delete">Delete</button>
</form>

• It sends the form to /save when you click on the “Save” button.
• It sends it to /delete when you click on the “Delete” button.
• Helpful when one form does multiple things.

The formenctype Attribute in Button

It specifies how the form data should be encoded when sent (used with file uploads).

Here is an example:

<form method="post">
  <input type="file" name="image">
  <button type="submit" formenctype="multipart/form-data">Upload</button>
</form>

• Required for file uploads.
• Tells the browser to handle files correctly.

The formmethod Attribute in Button

It sets the HTTP method (GET or POST) for this specific button. For example:

<form method="post">
  <input type="text" name="query">
  <button type="submit" formmethod="get">Search</button>
</form>

• Even though the form uses POST, this button uses GET to submit data.
• Useful if one form needs different submission methods.

The formtarget Attribute in Button

It controls where to open the response (like in a new tab).

For example:

<form method="post" action="/download">
  <button type="submit" formtarget="_blank">Open in New Tab</button>
</form>

• The result will open in a new tab (_blank).
• Other options: _self, _parent, _top, or a frame name.

The formnovalidate Attribute in Button

It prevents the browser from validating form inputs when this button is clicked.

<form>
  <input type="email" required>
  <button type="submit" formnovalidate>Skip Validation</button>
</form>

• Even though the email input is required. The click event on this button will skip validation.
• Good for “Save as Draft” buttons.

The aria-* Attributes in Button

These attributes improve screen reader support.

For example:

<button aria-label="Close Modal">X</button>

So, why are buttons better than clickable <div> or <a> tags?

Here are the main reasons:

• Built-in accessibility.
• Keyboard support by default.
• Semantic.
• Works with forms without extra code.

The title and keyboard support with aria-label:

• aria-label gives screen readers a clear description.
• title shows a tooltip on hover.
• Keyboard users can tab to buttons and activate them with Enter or Space by default.

Example:

<button aria-label="Open Menu" title="Menu">☰</button>

Here we used aria-label to help screen readers and describe the button’s action (“Open Menu”). The title shows a tooltip (“Menu”) when you hover over the button, with ☰ is the menu icon.

How to Style HTML Buttons

Browsers give buttons standard styles with padding and hover effects. These differ between browsers but give a consistent baseline.

You can change:

• Background color
• Borders
• Hover and active states

Here is an example:

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

You can add icons or spans:

The <button> vs. <input type="button">

• Use <button> when you need rich content inside.
• Use <input type="button"> for simple text-only buttons.

Here are the key differences:

• <button> is more flexible and semantic for modern UI.
• <input> is simpler but limited in content.
• Both support form submission and accessibility features.

Nest Content Inside <button>

You can include:

• Plain text
• Inline elements like <span>
• Images or SVG icons

For example:

<button>
  <span class="icon">★</span>
  Favorite
</button>

So, what is allowed and what breaks standards?

• Block-level elements like <div> are not allowed inside <button>.
• Inline content ensures consistent rendering and accessibility.

Examples of HTML Button Tag

Contact form submission

<form>
  <input type="text" placeholder="Your Name">
  <button type="submit">Send Message</button>
</form>

This button submits the form data to the server.

Modal trigger buttons:

<button type="button" onclick="openModal()">Open Modal</button>

Triggers a JavaScript function to show a modal dialog.

Toggle Buttons with JavaScript:

<button type="button" id="toggleButton">Show</button>
<script>
  const button = document.getElementById('toggleButton');
  let visible = false;
  button.addEventListener('click', () => {
    visible = !visible;
    button.textContent = visible ? 'Hide' : 'Show';
  });
</script>

Changes the button text based on a toggle state.

Browser Compatibility

You will see how well the <button> tag works across browsers.

• Fully supported in all major browsers.
• Minor differences in default styles.
• Known quirks include older Internet Explorer versions ignoring some form-related attributes.

You can fix most issues of styles with a CSS reset or custom styles.

Wrapping Up

In this article, you learned what the HTML <button> tag is, how to use its types and attributes. You also saw examples and comparisons with <input type="button">.

Here is a quick recap:

• The <button> tag creates interactive, accessible buttons.
• Supports types: button, submit, reset.
• Offers rich content and styles.
• Works better than <div> or <a> for actions.
• Fully supports accessibility with aria-label and keyboard use.
• Supported in all major browsers with minor styles differences.

FAQs

Submit

Similar Reads