Buttons
The clickable elements that submit forms and trigger actions — and the three button types you must know.
What you will learn
- Create buttons with <button>
- Use the three button types correctly
- Know when to use a button vs a link
The button element
The <button> element is a clickable button. Its type matters a lot inside a form.
| type | What it does |
|---|---|
submit | Submits the form (the default inside a form) |
reset | Clears the form back to its starting values |
button | Does nothing on its own — used with JavaScript |
<form>
<label>Name <input type="text" name="name"></label><br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello!')">Say hi</button>
</form>Three buttons, three different type values: submit sends the form, reset wipes the fields back to their starting state, and button does nothing by itself — here it is wired to onclick to pop up an alert, the kind of job JavaScript handles.
Note: Output: Three buttons. “Submit” attempts to send the form, “Reset” clears the Name box, and “Say hi” shows a “Hello!” pop-up.
Watch out: Inside a form, a <button> with no type defaults to submit. If you only want it to run JavaScript, you must write type="button" — otherwise it will submit the form unexpectedly.
Tip: Use a button for an action (submit, open a menu). Use a link <a> for navigation (go to another page). Choosing the right one keeps your site accessible.
Q. Inside a form, a <button> with no type attribute will:
✍️ Practice
- Make a form with a submit button and a reset button and test both.
- Add a
type="button"that shows an alert when clicked.
🏠 Homework
- Write one sentence each on when to use a button and when to use a link.