Web Development - HTML Buttons
HTML Buttons
Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked.
HTML Button
The HTML <button> element defines a clickable button.
By itself, the button does nothing until you add an action to it.
Styling HTML Buttons
Buttons are often styled with CSS:
Disabled Buttons
Use the disabled attribute to make a button unclickable:
Tip: Disabled buttons cannot be clicked and usually appear faded.
Button with JavaScript
You can run JavaScript when the user clicks a button using the onclick attribute:
Button Types
The type attribute defines what a button does when clicked. There are three button types:
type="button"- A normal clickable button (does nothing by default)type="submit"- Submits a formtype="reset"- Resets all form fields
Example
Three different button types:
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Buttons are often used inside forms, which you will learn more about in the next chapter.
For now, just know that a submit button sends the form data to the server, while a reset button clears the form:
Example
<form action="/action_page.php">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Try it Yourself »
Note: You should always specify the type attribute. Inside a form, the default type is submit, and browsers may behave differently if the type is omitted.
