HTML Buttons

<button> element defines a clickable button. By itself, the button does nothing until you add an action to it.

Buttons are often styled with CSS:

<button class="mytestbtn">Green Button</button>

Use the disabled attribute to make a button unclickable:

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>

You will learn more about JavaScript in our HTML JavaScript chapter.

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 type="reset">Reset</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="reset">Reset Form</button> </form>

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.

<button>

For a complete list of all HTML tags, visit our HTML Tag Reference.