HTML Buttons
The <button> element creates a clickable button. It's the right element for any action — submitting a form, opening a dialog, running a script.
Button types
type | Behaviour |
|---|---|
submit | (Default inside a form.) Submits the form to its action URL. |
reset | Resets all form fields to their default values. |
button | Does nothing on its own — use with a JavaScript event handler. |
Useful attributes
| Attribute | What it does |
|---|---|
disabled | Greys the button out and blocks clicks. |
name + value | Send a key/value pair when the form submits. |
form | Link the button to a form elsewhere on the page by its id. |
autofocus | Receive focus as soon as the page loads. |
Note: Outside of a form, set
type="button" explicitly. Without it, browsers default to type="submit" and your button may accidentally submit a parent form.Tip: For navigation use
<a>, not <button>. Buttons are for actions; links are for moving to a new URL.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Buttons</title>
</head>
<body>
<h1>HTML Buttons</h1>
<p>This is a demo page for the "HTML Buttons" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Set this button so clicking it does NOT submit a containing form.
<button
="button">Cancel</button>
The attribute that controls submit vs. button vs. reset.
Discussion
Loading…