Content · Web Development · HTML

HTML <button> Element: Reference and Examples

Learn <button> element reference with a clear explanation, practical HTML markup, a walkthrough and common mistakes to avoid.

1 views Published Oct 19, 2026 Updated Oct 19, 2026 Admin

You might see <button> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English


Creates an interactive control. Inside forms, type="button" prevents accidental submission; type="submit" submits the form.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example


Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<form action="/newsletter" method="post">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <button type="submit">Subscribe</button>
</form>

What Each Part Does


  • A button performs an action; type="submit" can submit its form.
  • The form collects and submits named fields to the destination specified by action.
  • The label tells visitors and assistive tools what a control is for.
  • action sets the URL that receives a submitted form.
  • method chooses GET or POST for form submission.
  • for connects a visible label to the control with the same ID.

The button submits the named field if the native checks pass.

Try It Yourself


Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes


  • Forgetting a type on a button used only to open a menu inside a form.
  • Changing several parts of the example at once, making it difficult to see which part caused a different result.
  • Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways


  • Creates an interactive control. Inside forms, type="button" prevents accidental submission; type="submit" submits the form.
  • The button submits the named field if the native checks pass.
  • Test the markup in a browser, and check accessibility and real-world behavior where relevant.
Share this resourceSend this page to someone who may find it useful.