HTML Buttons का उपयोग user interaction के लिए actions trigger करने में किया जाता है।
Buttons forms submit करने, JavaScript events run करने और navigation actions के लिए बहुत important होते हैं।
HTML Button क्या होता है
HTML Button एक clickable element होता है।
User button पर click करके कोई action perform कर सकता है।
Buttons websites और web apps का core UI component हैं।
Button बनाने के तरीके
HTML में button बनाने के तीन common तरीके होते हैं:
<button> element<input type="button"><input type="submit">
Button Element का Basic Syntax
<button>Click Me</button>
यह सबसे recommended और flexible तरीका है।
Simple Button Example
<button>Submit</button>
Button text easily change किया जा सकता है और इसमें HTML भी add किया जा सकता है।
Input Button Example
<input type="button" value="Click Here">
यह simple actions के लिए use होता है।
Submit Button Example
<form>
<input type="submit" value="Send">
</form>
यह form data submit करने के लिए use होता है।
Reset Button
<input type="reset" value="Reset">
यह form के सारे fields reset कर देता है।
Button के Type Attribute
<button> element में type attribute बहुत important होता है।
<button type="button">Normal Button</button>
<button type="submit">Submit Button</button>
<button type="reset">Reset Button</button>
Default type submit होता है, इसलिए form के बाहर use करते समय type="button" देना best practice है।
Button के साथ JavaScript
Buttons अक्सर JavaScript events के साथ use किए जाते हैं।
<button onclick="alert('Hello!')">Click Me</button>
Click करने पर alert message show होगा।
Disabled Button
<button disabled>Disabled Button</button>
Disabled button clickable नहीं होता।
Button Styling with CSS
<style>
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
<button class="btn">Styled Button</button>
CSS से buttons को attractive बनाया जाता है।
Hover Effect on Button
<style>
.btn:hover {
background-color: #45a049;
}
</style>
Hover effects user experience improve करते हैं।
Button Size Control
<style>
.large-btn {
font-size: 18px;
padding: 14px 28px;
}
</style>
Button size text और padding से control होता है।
Button as Link
Button को link जैसा behavior दिया जा सकता है।
<button onclick="location.href='https://example.com'">
Go to Page
</button>
Navigation buttons के लिए useful है।
Accessibility और Buttons
Buttons accessibility के लिए friendly होते हैं।
Screen readers buttons को easily recognize करते हैं।
Accessibility tips:
Clear button text रखें
Icons के साथ text रखें
Disabled state clearly दिखाएँ
Common Mistakes
Button type define न करना
Link के लिए button का गलत use
Inline styling overuse करना
Too small buttons बनाना
Best Practices
Actions के लिए <button> use करें
Forms में button type जरूर define करें
CSS classes से styling करें
Accessible और readable text रखें
Summary
HTML Buttons user interaction का main part हैं।<button> element सबसे flexible और recommended है।
Proper styling, correct type और accessibility के साथ buttons effective UI बनाते हैं।