Labs ICT
Pro Login

Buttons

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.