HTML <button> Tag – Clickable Button
📌 Introduction
The <button> tag is used to create a clickable button in HTML.
It can be used for:
- Submitting forms
- Running JavaScript actions
- Navigation (in some cases)
- Interactive UI elements
🧱 Syntax
<button>Click me</button>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
</head>
<body>
<h2>Simple Button</h2>
<button>Click Me</button>
</body>
</html>
🖥️ Output Explanation
- A clickable button appears
- It can trigger actions (especially with JavaScript)
- Used inside forms or standalone
🎯 Button Types
1. Submit Button
<button type="submit">Submit</button>
✔ Sends form data
2. Reset Button
<button type="reset">Reset</button>
✔ Clears form inputs
3. Normal Button
<button type="button">Click</button>
✔ Used for JavaScript actions
🧠 Important Concept
👉 <button> is more flexible than <input type="button">
| Element | Feature |
|---|---|
<button> |
Can contain text + icons + HTML |
<input> |
Only text value |
🧩 Example in Form
<form>
<input type="text" placeholder="Name" /><br /><br />
<button type="submit">Send</button>
</form>
⚙️ Button with JavaScript
<button onclick="alert('Hello!')">Click Me</button>
✔ Triggers an action
🎨 Styling Example
<button style="padding:10px; background:blue; color:white;">Submit</button>
🚫 Common Mistakes
- Forgetting
typein forms ❌ - Using button outside form without purpose ❌
- Not distinguishing submit vs normal button ❌
🧪 Mini Exercise
Create a page with:
- A form with inputs
- A submit button
- A reset button
- A normal button that shows an alert