Syntax
<button type="button">Click Me</button>Examples
Basic Button
A standalone button with a click handler.
<button type="button" onclick="alert('Hello!')">Click Me</button>Form Submit Button
A button that submits its enclosing form.
<form>
<input type="text" placeholder="Your name" required>
<button type="submit">Submit</button>
</form>Button with Icon Content
Buttons can contain more than just text.
<button type="button" style="display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: #3b82f6; color: white; border: none;">
<span>⬇</span>
<span>Download</span>
</button>Attributes
- type (submit | reset | button): Determines default behavior; submit sends the form, reset clears it, button does nothing by default
- disabled (boolean): Disables the button, preventing interaction
- form (string): Associates the button with a form by its id, even if not nested inside it
Best practices
- Always specify a type attribute — inside a <form>, a button defaults to type="submit", which can cause accidental form submissions
- Use <button> instead of a styled <div> or <span> for clickable actions, so it is keyboard-accessible and works with assistive technology out of the box
- Disable buttons during async actions (e.g., form submission) to prevent duplicate clicks
- Give icon-only buttons an aria-label describing their action for screen reader users
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.