HTML Button Element in Forms

The HTML <button> element creates a clickable control. Inside a form, its behavior depends on the type attribute: submit sends the form, reset restores initial values, and button has no built-in action.

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

For a generic button that will be handled by JavaScript, explicitly use type="button". A <button> associated with a form can otherwise act as a submit button when its type is omitted.

Button Types Top ↑

The three main button types are button, submit, and reset.

<!-- No built-in action; use JavaScript if needed -->
<button type="button">Preview</button>

<!-- Submit the associated form -->
<button type="submit">Save</button>

<!-- Restore the form's initial values -->
<button type="reset">Reset</button>

For form submission, see HTML submit buttons. For reset behavior, see HTML reset buttons.

<button> vs <input type="button"> Top ↑

Both can create a generic button, but <button> is usually more flexible because its visible label comes from its content and can contain markup.

<input type="button" value="Click me">

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

For <input type="button">, the value is the visible label. For <button>, the text or HTML between the opening and closing tags is the visible label; its value attribute has a different purpose when form data is submitted.

name and value Attributes Top ↑

A submit button can contribute its own name=value pair to form data when that button is used to submit the form. This is useful when one form has multiple submit actions.

<form action="process.php" method="post">
  <button type="submit" name="action" value="save">Save</button>
  <button type="submit" name="action" value="preview">Preview</button>
</form>

The server must still validate the submitted action against an allowlist such as save or preview. Do not trust a button value merely because it came from your form markup.

Form Override Attributes Top ↑

A submit button can override selected attributes of its associated form. These attributes apply to submit buttons, not to a generic type="button" control.

<form action="save.php" method="post">
  <button type="submit">Save</button>
  <button type="submit" formaction="preview.php">Preview</button>
</form>

See submitting one form to different destinations for a dedicated example. Browser-side validation can improve UX, but every receiving endpoint must still validate submitted data on the server.

Associate a Button with a Form Top ↑

The form attribute can associate a button with a form by the form's id, even when the button is not nested inside that form.

<form id="profile-form" action="save.php" method="post">
  <label for="display-name">Display name:</label>
  <input id="display-name" name="display_name">
</form>

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

Button with JavaScript Top ↑

Use type="button" when a button performs a client-side action instead of submitting the form.

<button type="button" id="show-help">Show help</button>

<script>
document.getElementById('show-help').addEventListener('click', () => {
  alert('Help opened.');
});
</script>

Prefer unobtrusive event listeners for larger applications instead of putting substantial JavaScript directly in an onclick attribute. For client-side validation concepts, see JavaScript form validation.

Disabled Buttons Top ↑

The Boolean disabled attribute makes a button unavailable for normal interaction.

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

Disabled controls are normally not submitted with form data. Do not use disabled as a security control; authorization and validation still belong on the server.

Accessibility and UX Top ↑

• Use descriptive visible text such as Save changes rather than vague labels such as Click here.
• Use a real <button> for actions rather than making a non-interactive <div> imitate one.
• Keep a visible keyboard focus indicator.
• Use autofocus sparingly because moving focus automatically can surprise users; see setting focus in forms.
• For navigation to another URL, prefer a real hyperlink. See button-style links and navigation.
• Do not rely on the title attribute as the button's only accessible label; visible button text is normally clearer.

Common Button Mistakes Top ↑

Omitting type on a non-submit button Top ↑

Inside a form, the button may submit unexpectedly. Use type="button" when no form submission is intended.

Assuming value is the visible label of every button Top ↑

That is true for <input type="button">. A <button> gets its visible label from its contents.

Using a button for ordinary navigation Top ↑

A normal link is semantically correct for moving to another URL. It can be styled to look like a button.

Trusting a submitted button value Top ↑

Users can modify client-side form values. Validate all submitted actions and permissions server-side.

Using formnovalidate as a substitute for server validation Top ↑

Browser validation is only a user-interface aid. The server must validate every request.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: