 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में स्वागत है। आज हम लेसन १९ सीखेंगे।
पिछले लेसन में हम ने फॉर्म्स को वेब पेज में डिस्प्ले करना सीखा और हम ने देखा की फॉर्म्स कैसे काम करते हैं।
HTML forms, HTML radio button, HTML check boxes, HTML drop down lists
आज हम फॉर्म्स के बारे में और सीखेंगे। आज हम radio बटन, चेक बॉक्स, और drop down list के बारे में सीखेंगे। यह सब फॉर्म के अलग अलग तरह के input elements हैं जिनसे अलग अलग तरीके से information लिया जाता है।तो हम अपना प्रोग्राम लिखना शुरू करेंगे और एक एक element को समझ लेंगे।
एक नयी Notepad फाइल ओपन कीजिये। इस में "Lesson-18" का पूरा टेक्सट कॉपी कीजिये। पहले radio buttons सीखेंगे।
HTML radio buttons
हम पहले रेडियो बटन को कोडिंग लिखेंगे।<! radio button example>
<h3>Gender:</h3>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<h3>Marital Status:</h3>
<input type="radio" name="mstatus" value="married"> Married<br>
<input type="radio" name="mstatus" value="unmarried">Unmarried<br>
अब यह कोड समझ लेते हैं। पहले लाइन में comment लिखा है। इसके बाद <h3> में हमने हेडिंग लिखा है।
इसके बाद form input के लिए <input> दिया है। इस के attributes हम ने टेक्स्ट बॉक्स बनाते समय देखे हैं। इस लिए यह समझ लेना आसान है। टेक्सट बॉक्स के लिए type "text" देते है। रेडियो बटन के लिए type "radio"देते हैं। यहाँ हम "gender" का डाटा इनपुट कर रहे हैं। इसलिए "name" attribute के लिए "gender" दिया है। हमने tag के बाद लिखा है "Male"। यह टेक्सट वेब पेज में इस रेडियो बटन के पास डिस्प्ले होगा। इस <input> के value attribute में दिया है "male"। इसलिए इस बटन को क्लिक करने पर "male" इनपुट होगा। इसी तरह हमने दूसरा radio button "female"के लिए बनाया है।
यहाँ पर हम ने दो radio groups बनाये हैं - एक gender के लिए और दूसरा marital status के लिए।
तो हम रेडियो बटन का उपयोग कहाँ करते हैं। जब ऑप्शन्स कम हो तब इनका उपयोग होता है। हम एक रेडियो group में एक ही ऑप्शन सेलेक्ट कर सकते हैं जैसे male या female।
याद रखिये: <input> के type attribute में input element का type देते है, जैसे text, radio, checkbox वगैरह।इनपुट element के भी बहुत attributes होते हैं। Type attribute की बहुत सारी values होती है। आप जैसे जैसे प्रोग्राम्स लिखते जाएंगे, नये नए attributes और values सीखेंगे।
ऊपर लिखा हुआ कोड हमारे प्रोग्राम में </form> के बिल्कुल ऊपर कॉपी कीजिये। हमारे कोड में हर एक टेक्स्ट बॉक्स के बाद <br /> दिया है। पहले और दुसरे टेक्स्ट बॉक्स के बाद दिए हुए <br /> डिलीट कीजिये। इस से तीनों टेक्स्ट बटन्स एक ही लाइन में आएंगे। Source कोड की PDF फाइल देखने के लिए आकृति १९-१. पर क्लिक कीजिये।
 |
| आकृति १९-१. HTML radio button in Hindi |
HTML check boxes
अब हम check box सीखेंगे। सबके लिए कोड नीचे दिया है।
<! Examples of checkbox>
<h3>Which mobiles do you like? Select any two</h3>
<input type="checkbox" name="mobile1" value="Nokia"> Nokia<br>
<input type="checkbox" name="mobile2" value="Samsung"> Samsung<br>
<input type="checkbox" name="mobile3" value="Oppo"> Oppo<br>
<input type="checkbox" name="mobile4" value="Apple"> Apple<br>
<input type="checkbox" name="mobile5" value="Xiaomi"> Xiaomi<br>
<! Examples of checkbox>
<h3>Which televisions do you like? Select any two</h3>
<input type="checkbox" name="television1" value="Sony"> Sony<br>
<input type="checkbox" name="television2" value="Samsung"> Samsung<br>
<input type="checkbox" name="television3" value="LG"> LG<br>
<input type="checkbox" name="television4" value="Sharp"> Sharp<br>
<input type="checkbox" name="television5" value="TCL"> TCL<br>
यह कोडिंग ध्यान से पढिये। इस में हमने input type "checkbox" दिया है। बाकी का सब कोडिंग radio button जैसा ही है। हम ने दो checkbox groups बनाये हैं - एक मोबाइल्स के लिए और दूसरा टेलीविजन के लिए।
याद रखिये किसी भी चेक बॉक्स group में एक या एक से ज्यादा ऑप्शन्स दे सकते हैं।
ऊपर लिखा हुआ टेक्सट हमारे प्रोग्राम में कॉपी कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति १९-२. पर क्लिक कीजिये।
 |
| आकृति १९-२. HTML check box in Hindi |
HTML drop down list
अब drop down लिस्ट देखेंगे। इस के लिए <select> tag का उपयोग किया जाता है। हम एक drop down list बनाएंगे।इस के लिए कोड नीचे दिया है।
<! Drop down lists>
<h3>Select country</h3>
<select>
<option value="usa">USA</option>
<option value="india">India</option>
<option value="UK">UK</option>
<option value="china">China</option>
<option value="france">France</option>
</select>
यह कोड ध्यान से पढिये। पहला लाइन कमेन्ट है। दूसरे लाइन में हेडिंग दिया है। इस के बाद <select> लिखा है। यह drop down लिस्ट डिस्प्ले करने के लिए होता है। <select> के अंदर "option" elements आते हैं। <option> tag का attribute होता है "value"। <option> tag के बाद जो टेक्सट है वह लिस्ट में डिस्प्ले होगा। हम इन ऑप्शन्स में से एक ऑप्शन सिलेक्ट कर सकते हैं।
<select> tag के कुछ attributes होते हैं। उदाहरण "required"। अगर हम select में required देते हैं तो ऑप्शन सेलेक्ट करना ही पडता है वरना फॉर्म को submit नहीं कर सकते हैं।
अब ऊपर लिखा हुआ टेक्सट हमारे प्रोग्राम में कॉपी कीजिये। अब हमारा HTML कोड ऐसे दिखेगा।
 |
| आकृति १९-३. HTML drop down list in Hindi |
Source कोड की PDF फाइल देखने के लिए आकृति १९-३. पर क्लिक कीजिये। इस को "Lesson-19" और "Lesson-19.html" के नाम से save कीजिये। आउटपुट देखिये। हमारा फॉर्म डिस्प्ले हुआ है।
 |
| आकृति १९-४ Radio button, checkbox, drop down list |
हमारे आउटपुट में टेक्स्ट, रेडियो बटन, चेक बॉक्स, और ड्रॉप डाउन लिस्ट डिस्प्ले हुए हैं। यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
Important Points:
०१. रेडियो बटन डिस्प्ले करने के लिए <input> के "type" attribute में "radio" देते हैं। एक फॉर्म में एक या एक से ज्यादा रेडियो ग्रुप हो सकते हैं। एक रेडियो ग्रुप में एक ऑप्शन सेलेक्ट कर सकते हैं।०२. चेक बॉक्स डिस्प्ले करने के लिए <input> के "type" attribute में "checkbox" देते हैं। एक फॉर्म में एक या एक से ज्यादा चेकबॉक्स ग्रुप हो सकते हैं। एक रेडियो ग्रुप में एक से ज्यादा ऑप्शन्स सेलेक्ट कर सकते हैं।
०३. ड्रॉप डाउन लिस्ट के लिए <select> का उपयोग किया जाता है। select में option elements होते हैं। हम इन में से एक ऑप्शन सेलेक्ट कर सकते हैं।
लेसन १८ लेसन २०
