Button in HTML

Button in HTML is used to create clickable actions inside forms and web pages. A button can submit a form, reset a form, trigger JavaScript, open a modal, start a search, save settings, delete an item, load more content, or perform many other user actions. The main element used for this is the <button> tag.

Buttons look simple, but they are important for usability and accessibility. A button tells the browser and assistive technologies that the element performs an action. This is different from a link, which normally navigates to another URL. Using the correct element makes keyboard behavior, screen reader announcements, form submission, and styling more reliable.

Basic Syntax of Button in HTML

The basic button tag has opening and closing tags. The visible text goes between them. Unlike an input submit button, a button element can contain text and inline HTML content, such as an icon and label.

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

The type attribute is important. If a button is inside a form and the type is not specified, the default type is usually submit. This surprises many beginners because a normal-looking button may submit the form accidentally. Always set the type explicitly.

Button Types in HTML

Button Type	Purpose	Example
submit	Submits the form	<button type="submit">
button	Normal button for JavaScript or custom action	<button type="button">
reset	Resets form controls to initial values	<button type="reset">

Most form submit buttons should use type="submit". JavaScript buttons that should not submit a form should use type="button". Reset buttons should be used carefully because resetting a form can erase user input and frustrate users if clicked accidentally.

Submit Button in HTML Form

A submit button sends the form data according to the form’s action and method. If the form has built-in validation rules such as required fields, email inputs, or min and max values, the browser checks them before submitting.

<form action="/login" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">Login</button>
</form>

This button is part of the form. When clicked, it submits the email and password values to the server. The button text should clearly describe the action. Login, Create Account, Save Changes, Send Message, and Search are better than vague text like Click or OK.

Button Type Button for JavaScript

When a button is meant to run JavaScript and not submit a form, use type="button". This prevents accidental form submission and makes the intention clear in the markup.

<button type="button" id="preview-button">Preview</button>

<script>
  document.querySelector("#preview-button").addEventListener("click", () => {
    console.log("Preview opened");
  });
</script>

This pattern is used for preview buttons, modal open buttons, menu toggles, copy buttons, password visibility toggles, image upload previews, and many other interactive actions. The button remains keyboard accessible by default.

Reset Button in HTML

A reset button returns form controls to their initial values. If an input had a default value, reset restores that value. If a checkbox was checked by default, reset checks it again. This sounds useful, but many real websites avoid reset buttons because users may click them accidentally and lose typed data.

<form>
  <input type="text" name="search" value="html">
  <button type="submit">Search</button>
  <button type="reset">Reset</button>
</form>

Use reset only when it clearly helps the user, such as clearing filter panels or demo forms. Avoid placing reset buttons beside important submit buttons without visual separation because accidental clicks can be annoying.

Button Element vs Input Button

HTML also supports button-like input types such as <input type="submit">, <input type="button">, and <input type="reset">. They still work, but the button element is usually more flexible because it can contain richer content and is easier to style consistently.

Feature	button element	input button
Content	Can contain text and inline elements	Uses value attribute only
Styling	Flexible	Works but less flexible
Common modern use	Preferred for most buttons	Still valid for simple forms
Example	<button>Save</button>	<input type="submit" value="Save">

Disabled Button

The disabled attribute makes a button unavailable. A disabled button cannot be clicked and is usually skipped by keyboard focus. It is often used while a form is incomplete, while a request is loading, or when the user does not have permission to perform an action.

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

Disabled buttons should be used carefully. If a button is disabled, users should understand why. Sometimes it is better to allow the click and show a clear validation message instead of leaving the user guessing why the button cannot be used.

Button Accessibility

A button should have a clear accessible name. Usually the visible text provides that name. Icon-only buttons need an accessible label, such as aria-label, because a screen reader cannot understand the visual icon by itself.

<button type="button" aria-label="Close dialog">
  Ã-
</button>

Use icon-only buttons only when the icon is obvious and the accessible label is present. For important actions, visible text is often better. Buttons should also have a visible focus style so keyboard users can see which button is active.

Button vs Link

Use a button for actions and a link for navigation. If clicking the element submits data, opens a modal, toggles a menu, deletes an item, or changes the current page state, a button is usually correct. If clicking takes the user to another page or resource, a link is usually correct.

Use Case	Correct Element
Submit contact form	Button
Open mobile menu	Button
Delete comment	Button
Go to About page	Link
Download a PDF from URL	Link
Load next article URL	Link or button depending on behavior

Styling Buttons with CSS

Buttons are commonly styled with CSS for color, padding, border, radius, hover state, and focus state. The focus state is important. Do not remove the outline without replacing it with a visible alternative.

button {
  padding: 10px 16px;
  border: 0;
  border-radius: 4px;
  background: #111160;
  color: white;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #2c8ffa;
}

Common Button Mistakes

• Forgetting type="button" for JavaScript buttons inside forms.
• Using links as buttons for actions that do not navigate.
• Using buttons as links for normal page navigation.
• Creating icon-only buttons without accessible labels.
• Removing focus outlines and hurting keyboard usability.
• Using vague button text like Click Here instead of specific action text.

The button element is small but important. Use the right type, write clear button text, preserve keyboard accessibility, use links for navigation, and avoid accidental form submission. A good button makes the next action obvious before the user clicks it.

Form Action Overrides on Buttons

HTML buttons can override some form attributes when needed. Attributes like formaction, formmethod, formenctype, formtarget, and formnovalidate allow one form to have multiple submit actions. This is useful when a form has Save Draft and Publish buttons, or when one button submits normally while another opens the result in a new tab.

<form action="/save" method="post">
  <input type="text" name="title">

  <button type="submit">Save Draft</button>
  <button type="submit" formaction="/publish">Publish</button>
</form>

In this example, both buttons submit the same form fields, but the second button sends the request to a different URL. This is cleaner than creating two separate forms with duplicate inputs. The backend still needs to check permissions and validate submitted data for both actions.

Button Text and Microcopy

Button text should describe the result of clicking. Send Message is better than Submit on a contact form. Create Account is better than OK on a signup form. Delete Post is better than Confirm when the action is destructive. Clear button text reduces hesitation and helps users understand the next step before they interact.

For dangerous actions, combine clear button text with confirmation patterns. A delete button should not be styled exactly like a normal save button. It should communicate risk through text, placement, color, or confirmation flow. HTML creates the button, but good interface design decides how safe and understandable the action feels.

Loading State for Buttons

Modern forms often disable a submit button while a request is in progress to prevent duplicate submissions. When doing this, change the visible text too. A button that says Sending… or Saving… explains what is happening. If you only disable the button with no feedback, users may think the page is broken.

Buttons Outside a Form

A button can be visually placed outside a form and still submit that form by using the form attribute. The form attribute points to the id of the form. This is useful in layouts where the submit button appears in a sticky footer, toolbar, modal footer, or separate action area.

<form id="profile-form" action="/profile" method="post">
  <input type="text" name="display_name">
</form>

<button type="submit" form="profile-form">Save Profile</button>

This keeps the markup flexible without breaking form behavior. The button still submits the referenced form, even though it is not nested inside the form element. Use this feature carefully and keep the layout understandable for users.

This is valid HTML, but do not overuse it. If the button is far away from the fields, users may not understand which form will be submitted. Good visual grouping still matters.

What is the default type of button in HTML?

Inside a form, a button without a type usually behaves as a submit button. Set the type explicitly to avoid mistakes.

Should I use button or anchor tag?

Use button for actions and anchor links for navigation to another URL.

---