How to Use the button Element

The HTML button element represents a control that users can activate to open a menu, submit a form, or perform an action on the current page.

The answer first

Minimal example

<button type="button">Open the menu</button>

<form action="/search" method="get">
  <label for="keyword">Keyword</label>
  <input id="keyword" name="q">
  <button type="submit">Search</button>
</form>

type="button" is for a page action such as running JavaScript. type="submit" submits the form.

Choose a type

Value	Main role	Use it for
button	Does not submit or reset a form	Opening menus, toggling content, and other page actions
submit	Submits a form	Search, registration, login, and similar actions
reset	Returns form controls to their initial values	Only when resetting the whole form is genuinely useful

When type is omitted, a button in an ordinary form is treated as a submit button. If a control must not submit the form, make the intent explicit with type="button".

Submit a form

A submit button starts form submission. If the button has name and value, they can be included in the submitted data when that button is the one that started the submission.

In a real service, validate submitted data on the server as well. Browser-side validation alone is not a security measure.

Give the button a clear name

The visible label should help users predict what will happen. Prefer “Open the menu”, “Save”, or “Search” over a vague label such as “Click here”.

<button type="button" aria-expanded="false">Open the menu</button>

<button type="button" aria-label="Open settings">
  <span aria-hidden="true">⚙</span>
</button>

An icon-only button needs an accessible name. If the button represents state, attributes such as aria-expanded must stay synchronized with the actual state.

Choose between a link and a button

Purpose	Element
Navigate to another page, URL, or place in a page	<a href="...">
Operate a menu or dialog on the current page	<button type="button">
Submit form data	<button type="submit">

Using a div or span as a button means recreating keyboard and assistive-technology behavior yourself. Start with the native button element.

Common mistakes

• Omitting type="button" for a form control that must not submit
• Using a button for navigation instead of an a element
• Using a div or span as a button
• Providing an icon without an accessible name
• Adding a reset control without explaining that it clears the form

Going further

The form attribute can associate a button with a form even when the button is outside that form. Submit buttons can also use formaction, formmethod, formnovalidate, and formtarget to set conditions for that submission.

Buttons can also participate in standard commands for dialogs and popovers through command and commandfor. Atlas traces those conditions and processing boundaries in more detail.

Check it in Atlas

For type states, form ownership, activation behavior, commands, the DOM API, and specification evidence, see the button element in Yugien Atlas. The relationship between buttons and dialog controls is covered by the dialog element; the boundary with links is covered by the a element in Atlas.