HTML button Tag: The Button Element

The HTML <button> tag is an element to create clickable buttons on web forms and pages. The button element plays an important role in user interaction and form submission.

How to Use the HTML button Tag

The <button> tag can be part of HTML forms or used for standalone actions on a web page. Here's the basic syntax:

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

• <button>: The tag to create a button in HTML.
• type: An attribute to specify the button's behavior (e.g., button, submit, reset).
• The content between the opening and closing tags is the button's label.

When to Use the HTML button Tag

You need the <button> tag to create buttons on a web page. You can use buttons for submitting forms or executing JavaScript functions.

Submitting Form Data

You can use buttons to submit form data to a server through a HTTP get or post request. Form submission is common for login forms, surveys, and other forms requiring user data.

<!-- Contact form example -->
<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Submit</button>
</form>

Triggering JavaScript Functions

Buttons can also trigger JavaScript functions for opening modals, toggling elements, or creating dynamic content.

<button type="button" onclick="toggleSubscriptionForm()">Subscribe</button>

<div id="subscriptionForm" style="display: none;">
  <form action="/subscribe" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <button type="submit">Sign Up</button>
  </form>
</div>

<script>
function toggleSubscriptionForm() {
  const form = document.getElementById('subscriptionForm');
  form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>

Navigating Web Apps

Buttons can act as navigation elements, guiding users through a website or application. Such navigation buttons are common in single-page applications or menus.

<button type="button" onclick="window.location.href='#resume'">View Resume</button>

<!-- Resume section -->
<section id="resume">
  <h2>Resume</h2>
  <p>Details about experience and education...</p>
</section>

Examples of the HTML button Tag

Countless websites use buttons to handle form data or trigger JavaScript functions. Here are some simplified examples:

Survey Website

Since buttons can submit and reset forms, a survey website might use the <button> tag handle it survey form data.

<form action="/submit-feedback" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="feedback">Feedback:</label>
  <textarea id="feedback" name="feedback"></textarea>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Calculator Web App

In practice, buttons often execute JavaScript functions that perform calculations, manipulate data, or interact with APIs. Therefore, a calculator web app might use buttons for its arithmetic operations.

<button type="button" onclick="calculate()">Calculate</button>
<script>
function calculate() {
    // Perform calculations
    console.log('Function called!');
}
</script>

Product Details Toggle

Buttons can also toggle the visibility of an HTML element, such as showing more content dynamically. An e-commerce website might use a button to reveal additional information about a product.

<!-- Toggle button -->
<button type="button" onclick="document.getElementById('productDetails').style.display='block'">More Details</button>

<!-- Hidden product details -->
<div id="productDetails" style="display: none;">
  <h3>Product Specifications</h3>
  <ul>
    <li>Color: Red</li>
    <li>Size: Medium</li>
    <li>Weight: 1.2 kg</li>
  </ul>
</div>

Learn More About the HTML Tag

HTML Button onclick Attribute

The onclick attribute triggers a JavaScript function when you click on an element. onclick is particularly common and useful for buttons, enabling dynamic content changes and other actions directly from a button.

<button type="button" onclick="toggleVisibility('details')">Toggle Details</button>
<div id="details" style="display: none;">
  <p>Here are some additional details...</p>
</div>

<script>
function toggleVisibility(id) {
  const element = document.getElementById(id);
  element.style.display = (element.style.display === "none" || element.style.display === "") ? "block" : "none";
}
</script>

Styling Buttons

You can use CSS to style <button> elements to match the design of your website. For example, you can use the <style> tag to modify backgrounds, borders, and hover effects.

<style>
.button-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
.button-primary:hover {
  background-color: #0056b3;
}
</style>

<button class="button-primary" type="button" onclick="alert('Primary button clicked!')">Primary Button</button>

vs. Button Elements in HTML

You can also create buttons using the <input> tag and setting the type attribute of the element to "button".

Unlike the button element, however, <input> is an empty tag. To create a label for a button, you need to set its value attribute. Also, the default behavior of the button element is submitting while the input element has no default behavior. This can make a difference if you place the button inside a form element.

Finally, only the <button> tag can contain other HTML elements like images and links.

<!-- <button> can include an image as well -->
<button type="button">
  <img src="icon.png" alt="Icon"> Click Me!
</button>

<!-- <input type="button"> is more limited -->
<input type="button" value="Click Me!" onclick="alert('Button clicked!')">

Checkboxes (Check Buttons) in HTML

Checkboxes are a type of button that allows users to select multiple options independently. You can create a checkbox using the <input> tag and setting the type attribute to "checkbox". HTML check buttons are useful in surveys and forms where users can choose multiple items from a list.

<form>
  <label><input type="checkbox" name="interests" value="coding"> Coding</label>
  <label><input type="checkbox" name="interests" value="music"> Music</label>
  <label><input type="checkbox" name="interests" value="sports"> Sports</label>
</form>

Radio Buttons in HTML

HTML radio buttons let users select a single option from a group of options. To create a radio button, use the <input> tag with type="radio". Each radio button in a group needs to have the same name attribute to work properly. Radio buttons are suitable for mutually exclusive questions like "Yes" or "No."

<form>
  <label><input type="radio" name="subscribe" value="yes"> Yes</label>
  <label><input type="radio" name="subscribe" value="no"> No</label>
</form>

HTML Links vs. HTML Buttons

Links and buttons are both common for navigation and user interactions. Still, their intended purposes differ.

Links, using <a> tags, are ideal for navigating to another web page or section within the current page. Buttons are well-suited for performing actions like form submissions or triggering JavaScript functions.

<a href="https://example.com" target="_blank">Visit Example</a>

<button type="button" onclick="alert('Button clicked!')">Click Me!</button>

Buttons with Links in HTML

A button can also contain a link by wrapping an <a> tag inside the button element. By doing so, you can get the appearance and functionality of buttons with the navigation capabilities of links. It can also help you maintain consistency and design aesthetics across web pages.

<!-- <button> Tag with Link Inside -->
<button type="button" onclick="window.location.href='https://example.com'">
  <img src="icon.png" alt="Icon" style="width: 16px; vertical-align: middle;">
  Visit Us!
</button>

<!-- <button> Tag Wrapping an Anchor Tag -->
<button type="button">
  <a href="https://example.com" style="text-decoration: none; color: inherit;">
    <img src="icon.png" alt="Icon" style="width: 16px; vertical-align: middle;">
    Visit Us!
  </a>
</button>

Alternatively, you can style an <a> tag to look like a button using CSS:

<!-- Anchor Tag Styled to Look Like a Button -->
<a href="https://example.com" class="button-link">
  Visit Us!
</a>

<!-- CSS -->
<style>
.button-link {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.button-link:hover {
  background-color: #0056b3;
}
</style>