Loading...
Loading...
Create clickable buttons and understand form submission flow
Buttons are how users take action on a page — submitting forms, triggering JavaScript, or navigating. The element is more flexible than using because it can contain HTML content (icons, bold text, images).
<!-- Submit button (submits the form) -->
<button type="submit">Save Changes</button>
<!-- Reset button (clears all form fields) -->
<button type="reset">Clear Form</button>
<!-- Button with no default behavior (for JavaScript) -->
<button type="button">Click Me</button>| Type | Behavior |
|---|---|
| `submit` | **(Default)** Sends form data to the server |
| `reset` | Resets all form fields to their initial values |
| `button` | Does nothing by itself — used with JavaScript |
<!-- ✅ Recommended: <button> — can contain HTML -->
<button type="submit">
<strong>Send</strong> <span>→</span>
</button>
<!-- ❌ Works, but limited to plain text -->
<input type="submit" value="Send"><button type="submit" disabled>Not Ready Yet</button>A disabled button can't be clicked and appears grayed out. Remove the disabled attribute when the form is valid.
<form action="/search" method="GET">
<input type="text" name="query" placeholder="Search...">
<button type="submit">🔍 Search</button>
</form>When submitted, the browser:
| ❌ Wrong | Why | ✅ Right |
|---|---|---|
| `` without `type` | Defaults to `submit` — may submit form unexpectedly | Always set `type` explicitly |
| `` styled as a button for actions | Links navigate, buttons submit — use the right element | Use ` |
| Forgetting `type="button"` for JS interactions | Clicking refreshes the page! | ` |
Create a form with:
<form action="/search" method="GET"> <label for="search">Search:</label> <input type="text" id="search" name="query" placeholder="Search..."> <button type="submit">🔍 Search</button> <button type="reset">Clear</button> </form>