Lesson 7 of 55 · HTML
Button Controls – Submit, Reset, Button
Duration: 7 min
Buttons in Forms
<button type='submit'>Send</button>
<button type='reset'>Clear</button>
<button type='button' onclick='alert("Clicked")'>Custom</button>
Types explained
type='submit'– Triggers form submission. If the button lives outside a<form>, you can target a form with theformattribute.type='reset'– Resets all controls to their initial values (defined by thevalueattribute or the default).type='button'– Generic button; you attach JavaScript behaviour (e.g., opening a modal).
<button> vs. <input>
<button>can contain HTML (icons, multiline text) which is useful for richer UI.<input type='submit'>is limited to plain text but is slightly shorter to write.- Use
<button>when you need an icon (e.g.,<button><svg>…</svg> Save</button>).
Accessibility and state
- Always provide a clear label (text or
aria-label). - Use the
disabledattribute to indicate when a button cannot be used; style the disabled state for visual clarity. - Ensure focus is visible; avoid removing the outline unless you replace it with an equally visible style.
Quick checklist for buttons
typeattribute present and correct? ✅- Visible text or
aria-labelprovided? ✅ disabledattribute used where appropriate? ✅- Consistent styling with visible focus outline? ✅
Tip: In a form, prefer
<button type='submit'>over<input type='submit'>if you need an icon or multiline label.