HTML Buttons

Buttons are used to perform actions such as submitting forms, resetting form fields, triggering JavaScript functions, or performing other user interactions.

1. Basic Button

The <button> element creates a clickable button.

<button>Click Me</button>

Output

2. Button with type Attribute

The type attribute defines how the button behaves. The main button types are:

3. Submit Button

Use type="submit" when the button should submit a form.

<form>

    <input type="text" name="username">

    <button type="submit">
        Submit
    </button>

</form>

Output

4. Reset Button

A reset button restores form controls to their initial values.

<form>

    <input type="text" name="username">

    <button type="reset">
        Reset
    </button>

</form>

Output

5. Normal Button

A button with type="button" does not submit or reset the form. It is commonly used with JavaScript.

<button type="button">
    Click Here
</button>

6. Button with JavaScript

A normal button can trigger JavaScript when the user clicks it.

<button type="button" onclick="showMessage()">
    Show Message
</button>

<script>
    function showMessage() {
        alert("Button clicked!");
    }
</script>

Output

7. Button with Disabled Attribute

The disabled attribute prevents the user from interacting with the button.

<button type="button" disabled>
    Submit
</button>

Output

8. Button with Name and Value

Buttons can have name and value attributes. This is useful when multiple submit buttons perform different actions.

<form>

    <button type="submit"
            name="action"
            value="save">
        Save
    </button>

    <button type="submit"
            name="action"
            value="publish">
        Publish
    </button>

</form>

The selected submit button contributes its name and value when the form is submitted.

9. Multiple Submit Buttons

A form can contain multiple submit buttons for different actions.

<form>

    <input type="text" name="title">

    <button type="submit"
            name="action"
            value="save">
        Save Draft
    </button>

    <button type="submit"
            name="action"
            value="publish">
        Publish
    </button>

</form>

10. Button Element vs Input Button

HTML also supports buttons using the <input> element.

<input type="button" value="Click Me">

A more flexible alternative is:

<button type="button">
    Click Me
</button>

11. Input Submit Button

An input element with type="submit" creates a form submission button.

<input type="submit" value="Submit Form">

12. Input Reset Button

An input element with type="reset" creates a reset button.

<input type="reset" value="Reset Form">

13. Button with Form Example

<form>

    <label for="student-name">Student Name:</label>
    <input type="text"
           id="student-name"
           name="studentName">

    <br><br>

    <label for="student-email">Email:</label>
    <input type="email"
           id="student-email"
           name="email">

    <br><br>

    <button type="submit">
        Register
    </button>

    <button type="reset">
        Clear
    </button>

</form>

14. Button with CSS Class

CSS classes can be used to customize the appearance of buttons.

<button type="button" class="primary-button">
    Save
</button>

<style>
    .primary-button {
        background-color: #4f46e5;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
    }
</style>

15. Button with Icon

The <button> element can contain other inline content, such as an icon and text.

<button type="button">
    Save
</button>

A button can also contain an image or icon element when required.

<button type="button">
    <span>Save</span>
</button>

16. Button with Form Action

A submit button can specify a different form action using formaction.

<form action="/save">

    <input type="text" name="name">

    <button type="submit">
        Save
    </button>

    <button type="submit"
            formaction="/publish">
        Publish
    </button>

</form>

17. Useful Button Attributes

18. Common Mistake: Missing Button Type

Inside a form, it is a good practice to explicitly specify the button type.

<button>Save</button>

Prefer:

<button type="submit">
    Save
</button>

Or for a button that should not submit the form:

<button type="button">
    Open Menu
</button>

19. Button Best Practices

• Always specify the button type when the button is inside a form.
• Use submit for form submission.
• Use reset only when resetting the form is useful.
• Use button for JavaScript-driven actions that should not submit the form.
• Use clear and descriptive button text.
• Disable buttons when the related action should not currently be available.
• Keep button behavior consistent with what the label communicates.

20. Practice Example

Create a registration form with Submit and Reset buttons.

<form>

    <label for="full-name">Full Name:</label>
    <input type="text"
           id="full-name"
           name="fullName"
           required>

    <br><br>

    <label for="email">Email:</label>
    <input type="email"
           id="email"
           name="email"
           required>

    <br><br>

    <button type="submit">
        Register
    </button>

    <button type="reset">
        Clear
    </button>

</form>