Learn HTML – Part 43 – button Tag – HTML Buttons

The HTML button tag is used to create clickable buttons on a webpage.

Buttons are commonly used in forms to submit data, reset fields, or trigger JavaScript actions.

What is the button Tag?

The button tag defines a clickable button element.

It can contain text, icons, or even other HTML elements inside it.

Basic Syntax

<button>Click Me</button>

This creates a simple clickable button on the webpage.

Example – Simple Button

<button>Click Me</button>

Output:

Click Me

Button Types

The button element supports different types using the type attribute.

Example – Button Types

<form>

   <label>Name:</label><br>
   <input type="text"><br><br>

   <button type="submit">Submit</button>
   <button type="reset">Reset</button>
   <button type="button">Click Me</button>

</form>

Output:

Button with JavaScript

The button element can trigger JavaScript actions.

<button onclick="alert('Hello!')">Click Me</button>

Output:

Click Me

button vs input type=”button”

Buttons can also be created using the input element.

<button>Click Me</button>

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

However, the button tag is more flexible because it can contain HTML elements.

<button><b>Click Me</b></button>

Why Use button?

• Creates interactive clickable elements
• Used for submitting and resetting forms
• Can trigger JavaScript functions
• Supports styling and HTML content inside

The button tag creates interactive buttons used in forms and web applications.

Common Mistakes Beginners Make

• Forgetting to set the button type inside forms
• Using buttons without proper labels
• Using input instead of button when HTML content is required

Conclusion

The HTML button tag is used to create clickable buttons that perform actions such as submitting forms or running scripts.

It is a flexible and widely used element in web forms and user interfaces.

What’s Next?

Now that you understand the button tag, the next step is learning about the fieldset tag, which is used to group related form elements together.

Next: Learn HTML – Part 44 – fieldset Tag – Grouping Form Elements →

Series: Learn HTML Series