HTML Buttons
In this page:
<button type="button" onclick="script">Label</button>The button Tag
The button tag defines an interactive, clickable button on your webpage. Inside this container element, you can place text, icons, or images to customize how your button looks.
- Always specify an explicit type attribute on every button to prevent unexpected browser behaviors.
- Accepted attributes:
- type — submit | reset | button
- name / value — data submitted with the form
- disabled — boolean
- form — id of an associated form
- formaction / formmethod / formtarget — override form settings
Example: The button Tag
<button>Click me</button>Defining Button Types
You can define three distinct button types using the type attribute: submit (which packages and sends form data), reset (which clears all fields), and button (which triggers custom JavaScript actions).
- Use type="button" for buttons that trigger custom scripts to prevent the page from reloading.
- Accepted values:
- type="submit" — submits the form (default inside a form)
- type="reset" — resets form controls
- type="button" — no default behavior
Example: Defining Button Types
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Run Script</button>Disabling Buttons
You can temporarily lock or disable a button by adding the disabled attribute to its opening tag. This grays out the button, prevents user clicks, and blocks any associated script triggers.
- Use the disabled attribute to prevent users from clicking a submit button multiple times while their file is uploading.
- Accepted values:
- disabled — boolean attribute (present or disabled="")
- Disabled buttons cannot be clicked, focused or submitted
Example: Disabling Buttons
<button disabled>Uploading...</button>Styling Buttons with CSS
Browsers render buttons with boxy, outdated default styles. You can easily customize their borders, background colors, padding, and hover states using standard CSS properties.
Example: Styling Buttons with CSS
<button style="background-color: blue; color: white; padding: 10px; border: none;">
Styled Button
</button>Accessible Button Labels
If your button contains only an icon (like a trash can or a pencil symbol) without any visible text, screen readers will find it difficult to interpret.
You must include a descriptive aria-label attribute to tell visually impaired users what the button does.
Example: Accessible Button Labels
<button aria-label="Delete item">🗑</button>- Omitting explicit type attributes on button tags, causing unexpected form submissions.
- Attempting to write closing button tags as self-closing tags.
- Hiding browser focus outlines using CSS (outline: none) without replacing them with custom focus styles.
- The button tag defines an interactive, clickable button on your webpage.
- Specify button types using the type attribute: submit for form submissions, reset to clear fields, or button for custom JavaScript actions.
- Style buttons with CSS for a responsive design, and always include descriptive aria-labels on icon-only buttons for accessibility.
Standard button tags and core attributes are natively supported by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: