HTML <button> Tag

The <button> tag in HTML defines a clickable button, commonly used in forms or to trigger actions on a webpage. Buttons are essential for user interaction, allowing users to submit data, perform operations, or navigate within the site. They can contain text, images, or both, and can be styled using CSS to match the website's design.

Syntax

<button type="button|submit|reset" name="buttonName" value="buttonValue" form="form_id" formaction="URL" formenctype="mime_type" formmethod="get|post" formnovalidate="formnovalidate" formtarget="_blank|_self|_parent|_top" autofocus disabled accesskey="character" class="className" contenteditable="true|false" dir="ltr|rtl" draggable="true|false|auto" hidden id="uniqueID" lang="language_code" spellcheck="true|false" style="CSS_properties" tabindex="number" title="text" onclick="script" oncontextmenu="script" ondblclick="script" onmousedown="script" onmouseup="script" onmouseenter="script" onmouseleave="script" onmousemove="script" onmouseover="script" onmouseout="script" onkeydown="script" onkeypress="script" onkeyup="script" onfocus="script" onblur="script">
  Button Text or Content
</button>

Attributes

Example

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

More Examples

Basic Button Types

<button type="button">Regular Button</button>
<button type="submit">Submit Button</button>
<button type="reset">Reset Button</button>

This example demonstrates the three main types of buttons: a regular button, a form submission button, and a form reset button.

Button with Name and Value

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

This button, when submitted as part of a form, will send the name "action" with the value "save" to the server.

Button within a Form

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <button type="submit">Register</button>
</form>

This demonstrates a submit button used within a form, sending form data to /submit using a POST request.

Button with Styling and JavaScript

<button type="button" style="background-color: lightblue; padding: 10px;" onclick="alert('Button Clicked!')">Styled Button</button>

This button has inline styling and JavaScript to display an alert when clicked.

Button using other attributes:

<form id="myForm" action="/submit" method="post">
    <input type="text" name="data" value="some_value">
</form>

<button type="submit" form="myForm" formaction="/another_submit" formmethod="get" formtarget="_blank">Submit Form Elsewhere</button>

This button demonstrates how to use the form, formaction, formmethod and formtarget attributes to override form attributes and submits it to /another_submit on a new tab using GET method.

<button type="button" disabled>Disabled Button</button>
<button type="button" accesskey="a">Activate me with Alt+A</button>
<button type="button" title="Click me to do something">Hover me</button>

The first button will be disabled and non clickable, the second can be triggered using alt+A and the third shows a tooltip on hover.

Browser Support

The <button> tag is supported by all major browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Use the correct type attribute to define the button's behavior. Using type="button" helps avoid unexpected behavior.
• The <button> tag is more versatile than <input type="button"> because it can contain HTML elements like images or spans within its content.
• When using submit buttons inside a form, ensure you provide a name attribute to handle it at the backend.
• Always add a proper title attribute to make it accessible and SEO friendly.
• Use CSS classes to style your buttons consistently throughout your site.
• Make sure your buttons have enough padding to make them easier to click, especially on mobile devices.
• Leverage JavaScript to create interactive and dynamic behaviors with buttons.
• Test your buttons on different devices and browsers for a consistent user experience.