HTML Buttons
In this page:
<button type="button" onclick="script">Label</button>button Tag
button tag आपके webpage पर एक interactive, clickable button define करता है। इस container element के अंदर, आप अपने button का दिखावट customize करने के लिए text, icons, या images रख सकते हैं।
- अनचाहे browser behaviors से बचने के लिए हर button पर हमेशा एक explicit type attribute तय करें।
- Accepted attributes:
- type — submit | reset | button
- name / value — form के साथ submit होने वाला data
- disabled — boolean
- form — जुड़े हुए form की id
- formaction / formmethod / formtarget — form की settings override करें
उदाहरण: The button Tag
<button>Click me</button>Button Types Define करना
आप type attribute का इस्तेमाल करके तीन अलग-अलग button types define कर सकते हैं: submit (जो form data को package करके भेजता है), reset (जो सभी fields को clear करता है), और button (जो custom JavaScript actions trigger करता है)।
- page को reload होने से रोकने के लिए, custom scripts trigger करने वाले buttons पर type="button" इस्तेमाल करें।
- Accepted values:
- type="submit" — form submit करता है (form के अंदर default)
- type="reset" — form controls reset करता है
- type="button" — कोई default behavior नहीं
उदाहरण: Defining Button Types
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Run Script</button>Buttons को Disable करना
आप किसी button के opening tag में disabled attribute जोड़कर उसे temporarily lock या disable कर सकते हैं। इससे button ग्रे हो जाता है, user clicks रुक जाते हैं, और किसी भी जुड़े हुए script triggers को रोक देता है।
- किसी फ़ाइल के upload होते समय users को submit button को कई बार क्लिक करने से रोकने के लिए disabled attribute इस्तेमाल करें।
- Accepted values:
- disabled — boolean attribute (मौजूद हो या disabled="")
- Disabled buttons पर क्लिक, focus या submit नहीं किया जा सकता
उदाहरण: Disabling Buttons
<button disabled>Uploading...</button>CSS से Buttons को Style करना
Browsers buttons को boxy, पुराने ढंग के default styles में render करते हैं। आप standard CSS properties इस्तेमाल करके उनके borders, background colors, padding, और hover states को आसानी से customize कर सकते हैं।
उदाहरण: Styling Buttons with CSS
<button style="background-color: blue; color: white; padding: 10px; border: none;">
Styled Button
</button>Accessible Button Labels
अगर आपके button में बिना किसी दिखने वाले text के सिर्फ एक icon (जैसे trash can या pencil symbol) है, तो screen readers के लिए उसे समझना मुश्किल हो जाता है।
दृष्टिबाधित users को यह बताने के लिए कि button क्या करता है, आपको एक descriptive aria-label attribute शामिल करना चाहिए।
उदाहरण: Accessible Button Labels
<button aria-label="Delete item">🗑</button>Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: