Buttons are how users take action — submit a form, reset fields, or trigger something on the page. HTML gives you a few ways to create them, and each has its own use case.
The Button Tag
The <button> tag is the most flexible option. You can put text, icons, or even images inside it. By default, a button inside a form acts as a submit button.
<button type="submit">Save Changes</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>
Try it Yourself →
Input Type Submit vs Button
You can also use <input type="submit"> to create a submit button, but it is limited — you cannot put HTML inside it, only a value attribute for the label. The <button> tag is more powerful: it lets you nest other elements and style the interior freely.
<!-- input version — label is plain text -->
<input type="submit" value="Submit">
<!-- button version — can have rich content -->
<button type="submit">
<strong>Submit</strong> Your Order
</button>
Onclick and Button Types
The type attribute matters. type="submit" submits the form. type="reset" clears all fields back to their default values. type="button" does nothing by itself — it just sits there until you attach JavaScript to it with onclick or an event listener.