Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked.
The HTML <button> element defines a clickable button.
By itself, the button does nothing until you add an action to it.
<button> click </button>
Buttons are often styled with CSS:
<button class="mytestbtn"> Green Button </button>
Use the disabled attribute to make a button unclickable:
<button disabled> Disabled Button </button>
Tip : Disabled buttons cannot be clicked and usually appear faded.
You can run JavaScript when the user clicks a button using the onclick attribute:
<button onclick="alert('Hello!')"> Click me </button>
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 form
type="reset" - Resets all form fields
<button type="button"> Normal Button </button>
<button type="submit"> submit Button </button>
<button type="reset"> reset Button </button>
Buttons are often used inside forms, which you will learn more about in a later chapter.
For now, just know that a submit button sends the form data to the server, while a reset button clears the form:
<form action="/action_page.php">
First name: <input type="text" name="fname">
<button type="submit"> Submit </button>
<button type="resetgt; reset </button>
</form>
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.