HTML CheckBox Input Element: Checkboxes छोटे Box की तरह ही होते हैं, जिन्हें HTML Form पर Check किया जा सकता है। ये केवल On या Off ही किए जा सकते हैं। जब इन्हें Click किया जाता है, तब ये On हो जाते हैं और जब फिर से इन्हें Click किया जाता है, तब ये Toggle होकर Off हो जाते हैं।
Checkboxes को उनके स्वतंत्र नाम के साथ Define किया जा सकता है अथवा हम ऐसे Checkboxes भी Create कर सकते हैं, जो Checkboxes के एक Group के रूप में होते हैं और सभी Controls एक ही नाम को Share करते हैं साथ ही User को ये सुविधा प्रदान करते हैं कि वह एक से ज्यादा Checkboxes को Check कर सके।
Checkboxes का प्रयोग तब किया जाता है, जब User को केवल Yes अथवा No में जवाब देना होता है अथवा बहुत सारे Items Select करना होता है। Checkbox Create करने के लिए भी हमें <input> Element का ही प्रयोग करना होता है और इस Element के type Attribute में मान के रूप में “checkbox” लिखना होता है, जिसे हम निम्न उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.demo.com/cv.asp" method="get" name="frmCV"> Which of the following skills do you possess? Select all that apply. <input type="checkbox" name="chkSkills" value="html" />HTML <br /> <input type="checkbox" name="chkSkills" value="xhtml" />XHTML <br /> <input type="checkbox" name="chkSkills" value="CSS" />CSS<br /> <input type="checkbox" name="chkSkills" value="JavaScript" /> JavaScript<br /> <input type="checkbox" name="chkSkills" value="html" />ASP<br /> <input type="checkbox" name="chkSkills" value="html" />PHP </form> As you can see, I start the name of checkboxes with the letters chk. <body> <html>
उपरोक्त Form में हम जितने भी Checkboxes को Select करते हैं, उन सभी के मान name/value Pair के रूप में Web Server पर Send होते हैं, इसलिए हमारे पास बहुत सारे ऐसे Pair हो सकते हैं, जिनके Control का नाम तो समान होता है, लेकिन Value अलग-अलग होती है। हम इन समान नाम वाले Multiple Checkboxes को किस तरह से Process करते हैं, ये इस बात पर निर्भर करता है कि ये Data Web Server पर कैसे पहुंचते हैं।
यदि हम HTTP get Method को Data Send करने के लिए उपयोग में लेते हैं, तो Selected Checkboxex Query String में URL के एक Part की तरह Send होते हैं। जबकि यदि हम HTTP post Method का प्रयोग करते हैं, तो हमें Web Server पर एक Array प्राप्त होता है, जिसके हर Element में एक Checkbox के मान की जानकारी होती है और इस Array को हम Loop द्वारा Process करते हैं। हम एक Single Checkbox को निम्नानुसार Process कर सकते हैं:
<html> <body> <form action="http://www.demo.org/accept.asp" name="frmTandC" method="get"> <input type="checkbox" name="chkAcceptTerms" checked="checked" /> I accept the <a href="terms.htm">terms and conditions</a>.<br /> <input type="submit" /> </form> <body> <html>
इस Code में हमने <input> Element में value Attribute को उपयोग में नहीं लिया है। जब <input> Element में value Attribute नहीं होता है, तब By Default Value Attribute ON ही रहता है। हम checked नाम Attribute भी लिख सकते हैं, जिसकी Value के रूप में “checked” लिखा जाता है। जब हम इस Attribute को उपयोग में लेते हैं, तब Page के Load होते ही वह Checkbox Selected ही रहता है। जब हम <input> Element के type Attribute में “checkbox” मान Specify करते हैं, तब हम इस <input> Element में निम्न Attributes का प्रयोग कर सकते हैं:
type Attribute
इस Attribute में हमें “checkbox” लिखना होता है, जिससे Web Page पर एक Checkbox Create होता है।
name Attribute
इस Attribute में हमें हमारे “checkbox” का नाम लिखना होता है, जिससे उसे पहचाना जा सके। जब बहुत सारे Checkbox Create किए जाते हैं, तब सभी Checkboxes समान नाम को Share करते हैं।
value Attribute
इस Attribute का मान उस समय Web Server पर name/value Pair के रूप में भेजा जाता है, जब हम Checkbox को Select करते हैं।
checked Attribute
जब हम किसी “checkbox” को Web Page Load होते समय Selected रखना चाहते हैं, तब हम इस Attribute को उपयोग में लेते हैं और इसमें मान के रूप में “checked” लिखते हैं।
size Attribute
इस Attribute द्वारा हम हमारे “checkbox” की Width को Specify करते हैं। इसमें Value के रूप में हमें एक Numerical मान लिखना होता है।
इस <input> Element के साथ हम सभी तरह के Universal Attributes, User Interface Attributes, disabled, readonly, tabindex व accesskey Attributes का भी प्रयोग कर सकते हैं। (HTML CheckBox Input Element)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
