HTML Buttons

Understand the topic

Buttons trigger actions. A native button supports focus, keyboard activation, and disabled states without recreating those behaviors in JavaScript. Inside a form, a button defaults to submit, so declare type="button" for a control that should not send the form. Give every button a clear name describing the action it performs.

Worked example

<button type="button" id="greet">Say hello</button>
<p id="greeting" role="status"></p>
<script>
document.querySelector("#greet").addEventListener("click", () => {
  document.querySelector("#greeting").textContent = "Hello, learner!";
});
</script>

The event listener updates a status paragraph. textContent inserts text without parsing it as HTML.

Practice

Write a button that cannot accidentally submit its containing form.

<button type="button">Preview your entry</button>

Common mistake

Do not use a link with href="#" as a substitute for an action button. It introduces unnecessary navigation behavior.

HTML documentation