HTML
इनपुट नियंत्रण तत्व

परिचय

वाक्य - विन्यास

• <input type="" name="" value="">

पैरामीटर

टिप्पणियों

चेकबॉक्स और रेडियो बटन

अवलोकन

चेकबॉक्स और रेडियो बटन HTML टैग <input> साथ लिखे गए हैं, और उनके व्यवहार को HTML विनिर्देश में परिभाषित किया गया है।

सबसे सरल चेकबॉक्स या रेडियो बटन एक <input> तत्व है जिसमें क्रमशः checkbox या radio का एक type होता है:

<input type="checkbox">
<input type="radio">

एक एकल स्टैंड-अलोन चेकबॉक्स तत्व का उपयोग एकल बाइनरी विकल्प के लिए किया जाता है जैसे कि हां-या-नो प्रश्न। चेकबॉक्स स्वतंत्र हैं, जिसका अर्थ है कि उपयोगकर्ता कई विकल्पों का चयन कर सकता है जैसे वे चेकबॉक्स के समूह में चाहते हैं। दूसरे शब्दों में, एक चेकबॉक्स की जाँच करने से चेकबॉक्स समूह में अन्य चेकबॉक्स अनचेक नहीं होते हैं ।

रेडियो बटन आमतौर पर समूहों में आते हैं (यदि यह किसी अन्य रेडियो बटन के साथ समूहीकृत नहीं है, तो आप संभवतः उस समूह के सभी बटनों पर समान name विशेषता का उपयोग करके पहचाने गए चेकबॉक्स का उपयोग करना चाहते हैं)। रेडियो बटन का चयन पारस्परिक रूप से अनन्य है , जिसका अर्थ है कि उपयोगकर्ता केवल रेडियो बटन के समूह में से एक विकल्प का चयन कर सकता है। जब एक रेडियो बटन की जाँच की जाती है, तो उसी name कोई अन्य रेडियो बटन जो पहले चेक किया गया था, अनियंत्रित हो जाता है।

उदाहरण:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

जब देखा जाता है, तो रेडियो बटन एक सर्कल (अनियंत्रित) या भरे हुए सर्कल (चेक किए गए) के रूप में दिखाई देते हैं। चेकबॉक्स एक वर्ग (अनियंत्रित) या भरे हुए वर्ग (चेक किए गए) के रूप में दिखाई देते हैं। ब्राउज़र और ऑपरेटिंग सिस्टम के आधार पर, वर्ग में कभी-कभी गोल कोने होते हैं।

गुण

चेकबॉक्स और रेडियो बटन में उनके व्यवहार को नियंत्रित करने के लिए कई विशेषताएं हैं:

value

किसी भी अन्य इनपुट तत्व की तरह, value विशेषता फॉर्म सबमिशन की स्थिति में बटन के साथ जुड़ने के लिए स्ट्रिंग मान को निर्दिष्ट करती है। हालाँकि, चेकबॉक्स और रेडियो बटन इस मायने में खास हैं कि जब मूल्य छोड़ा जाता है, तो यह रिक्त मान भेजने के बजाय, सबमिट किए जाने on चूक जाता है। बटन की उपस्थिति में value विशेषता परिलक्षित नहीं होती है।

checked

checked विशेषता चेकबॉक्स या रेडियो बटन की प्रारंभिक स्थिति को निर्दिष्ट करता है। यह एक बूलियन विशेषता है और छोड़ा जा सकता है।

इनमें से प्रत्येक वैध, एक चेक किए गए रेडियो बटन को परिभाषित करने के बराबर तरीके हैं:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

checked विशेषता की अनुपस्थिति एक अनियंत्रित बटन के लिए एकमात्र वैध सिंटैक्स है:

<input type="radio">
<input type="checkbox">

<form> रीसेट करते समय, चेकबॉक्स और रेडियो बटन अपनी checked विशेषता की स्थिति में वापस आ जाते हैं।

सरल उपयोग

लेबल

बटनों को संदर्भ देने और उपयोगकर्ताओं को यह दिखाने के लिए कि प्रत्येक बटन क्या है, उनमें से प्रत्येक में एक लेबल होना चाहिए। यह बटन को लपेटने के लिए <label> तत्व का उपयोग करके किया जा सकता है। इसके अलावा, यह लेबल को क्लिक करने योग्य बनाता है, इसलिए आप संबंधित बटन का चयन करें।

उदाहरण:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

या एक साथ <label> एक साथ तत्व for करने के लिए विशेषता सेट id बटन की विशेषता:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

बटन समूह

चूंकि प्रत्येक रेडियो बटन समूह में दूसरों को प्रभावित करता है, इसलिए पूरे रेडियो बटन के लिए एक लेबल या संदर्भ प्रदान करना आम है।

पूरे समूह के लिए एक लेबल प्रदान करने के लिए, रेडियो बटन को एक <fieldset> तत्व में <legend> तत्व के साथ शामिल किया जाना चाहिए।

उदाहरण:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

चेकबॉक्स को भी एक समान अंदाज़ में वर्गीकृत किया जा सकता है, जिसमें एक फ़ील्डसेट और लीजेंड संबंधित चेकबॉक्स के समूह की पहचान करता है। हालांकि, ध्यान रखें कि चेकबॉक्स को एक ही नाम साझा नहीं करना चाहिए क्योंकि वे पारस्परिक रूप से अनन्य नहीं हैं। ऐसा करने से परिणाम एक ही कुंजी के लिए कई मान सबमिट करने और सभी सर्वर-साइड भाषाओं को एक ही तरीके से (अपरिभाषित व्यवहार) के रूप में संभालेगा। प्रत्येक चेकबॉक्स में या तो एक अद्वितीय नाम होना चाहिए, या यह इंगित करने के लिए कि इस कुंजी के लिए प्रपत्र को मानों को प्रस्तुत करना चाहिए, यह इंगित करने के लिए वर्ग कोष्ठक ( [] ) के एक सेट का उपयोग करें। आपके द्वारा चुनी गई विधि इस बात पर निर्भर करती है कि आप फॉर्म डेटा क्लाइंट-साइड या सर्वर-साइड को संभालने की योजना कैसे बनाते हैं। आपको किंवदंती को छोटा रखना चाहिए, क्योंकि ब्राउज़र और स्क्रीन रीडर के कुछ संयोजन फ़ील्ड में प्रत्येक इनपुट फ़ील्ड से पहले किंवदंती को पढ़ते हैं।

छिपा हुआ

<input type="hidden" name="inputName" value="inputValue">  

एक छिपा हुआ इनपुट उपयोगकर्ता को दिखाई नहीं देगा, लेकिन इसके मूल्य को सर्वर पर तब भेजा जाएगा जब फॉर्म को फिर भी सबमिट किया जाएगा।

कुंजिका

<input type="password" name="password">

एक प्रकार की विशेषता वाला इनपुट तत्व जिसका मान password है, इनपुट type=text समान एकल-पंक्ति पाठ फ़ील्ड बनाता है, सिवाय इसके कि पाठ को प्रदर्शित नहीं किया जाता है क्योंकि उपयोगकर्ता इसमें प्रवेश करता है।

<input type="password" name="password" placeholder="Password">

प्लेसहोल्डर पाठ को सादे पाठ में दिखाया गया है और जब उपयोगकर्ता टाइप करना शुरू करता है तो स्वचालित रूप से अधिलेखित हो जाता है।

नोट: कुछ ब्राउज़र और सिस्टम कम समय के लिए सबसे हाल ही में टाइप किए गए चरित्र को प्रदर्शित करने के लिए पासवर्ड फ़ील्ड के डिफ़ॉल्ट व्यवहार को संशोधित करते हैं, जैसे:

प्रस्तुत

<input type="submit" value="Submit">

सबमिट इनपुट एक बटन बनाता है जो क्लिक करने पर उसके अंदर मौजूद फॉर्म को सबमिट करता है।

आप <button> तत्व का भी उपयोग कर सकते हैं यदि आपको एक सबमिट बटन की आवश्यकता होती है जिसे अधिक आसानी से स्टाइल किया जा सकता है या अन्य तत्व शामिल हो सकते हैं:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

फ़ाइल

<input type="file" name="fileSubmission">

फ़ाइल इनपुट उपयोगकर्ताओं को वर्तमान पृष्ठ के साथ उपयोग के लिए अपने स्थानीय फ़ाइल सिस्टम से एक फ़ाइल का चयन करने की अनुमति देता है। यदि एक form तत्व के साथ संयोजन में उपयोग किया जाता है, तो उनका उपयोग उपयोगकर्ताओं को सर्वर पर फाइल अपलोड करने की अनुमति देने के लिए किया जा सकता है (अधिक जानकारी के लिए अपलोडिंग फ़ाइलें देखें)।

निम्न उदाहरण उपयोगकर्ताओं को अपने फाइलसिस्टम से एक फ़ाइल का चयन करने के लिए file इनपुट का उपयोग करने की अनुमति देता है और उस फ़ाइल को upload_file.php नामक सर्वर पर स्क्रिप्ट में अपलोड करने की upload_file.php ।

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

कई फाइलें

एक से multiple विशेषताओं को जोड़ने पर उपयोगकर्ता एक से अधिक फ़ाइल का चयन कर सकेगा:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

फ़ाइलें स्वीकार करें

स्वीकार विशेषता उपयोगकर्ता द्वारा चयनित फ़ाइलों के प्रकारों को निर्दिष्ट करता है। जैसे .png , .gif , .jpeg ।

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

इनपुट सत्यापन

एचटीएमएल इनपुट सत्यापन स्वचालित रूप से इनपुट तत्व पर विशेष विशेषताओं के आधार पर ब्राउज़र द्वारा किया जाता है। यह आंशिक रूप से या पूरी तरह से जावास्क्रिप्ट इनपुट सत्यापन को बदल सकता है। इस तरह के सत्यापन को विशेष रूप से तैयार किए गए HTTP अनुरोधों के माध्यम से उपयोगकर्ता द्वारा दरकिनार किया जा सकता है, इसलिए यह सर्वर-साइड इनपुट सत्यापन को प्रतिस्थापित नहीं करता है। सत्यापन केवल तब होता है जब फॉर्म जमा करने का प्रयास किया जाता है, इसलिए सत्यापन के लिए सभी प्रतिबंधित इनपुट फॉर्म के अंदर होने चाहिए (जब तक कि आप जावास्क्रिप्ट का उपयोग नहीं कर रहे हैं)। ध्यान रखें कि इनपुट जो अक्षम हैं या केवल पढ़ने के लिए मान्यता को ट्रिगर नहीं करेंगे।

कुछ नए इनपुट प्रकार (जैसे email , url , tel , date और कई और अधिक) स्वचालित रूप से मान्य हैं और आपको अपने स्वयं के सत्यापन अवरोधों की आवश्यकता नहीं है।

<input required>

न्यूनतम / अधिकतम लंबाई

का प्रयोग करें minlength और maxlength लंबाई आवश्यकताओं इंगित करने के लिए गुण। अधिकांश ब्राउज़र उपयोगकर्ता को बॉक्स में अधिकतम वर्णों से अधिक टाइप करने से रोकेंगे, प्रस्तुत करने का प्रयास करने से पहले ही उन्हें अपनी प्रविष्टि को अमान्य बनाने से रोकेंगे।

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

एक श्रेणी निर्दिष्ट करना

किसी प्रकार की number या range इनपुट में उपयोगकर्ता इनपुट कर सकता है, संख्याओं की सीमा को सीमित करने के लिए min और max विशेषताओं का उपयोग करें

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

नोट: form तत्व में novalidate विशेषता जोड़ना या सबमिट बटन के लिए formnovalidate विशेषता, प्रपत्र तत्वों पर सत्यापन को रोकता है। उदाहरण के लिए:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

फ़ॉर्म में ऐसे फ़ील्ड हैं जो मसौदे को "प्रकाशित" करने के लिए आवश्यक हैं लेकिन मसौदे को "सहेजने" के लिए आवश्यक नहीं हैं।

रीसेट

<input type="reset" value="Reset">

टाइप reset का एक इनपुट एक बटन बनाता है, जिस पर क्लिक करने पर, सभी इनपुट को उस रूप में रीसेट करता है, जो उनके डिफ़ॉल्ट स्थिति में समाहित है।

• इनपुट फ़ील्ड में पाठ रिक्त या उसके डिफ़ॉल्ट मान ( value विशेषता का उपयोग करके निर्दिष्ट) पर रीसेट किया जाएगा।
• चयन मेनू में किसी भी विकल्प को तब तक हटा दिया जाएगा जब तक कि उनके पास selected विशेषता न हो।
• सभी चेकबॉक्स और रेडियो बॉक्स को तब तक हटा दिया जाएगा जब तक कि उनके पास checked की checked विशेषता न हो।

नोट: एक रीसेट बटन किसी भी प्रभाव के लिए अंदर ( form विशेषता के माध्यम से) एक <form> तत्व से जुड़ा होना चाहिए। बटन केवल इस फॉर्म के तत्वों को रीसेट करेगा।

संख्या

<input type="number" value="0" name="quantity">

तेल

<input type="tel" value="+8400000000">

एक प्रकार की विशेषता वाला इनपुट तत्व जिसका मान tel एक टेलीफोन नंबर दर्ज करने के लिए एक-लाइन सादे-पाठ संपादन नियंत्रण का प्रतिनिधित्व करता है।

ईमेल

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

बटन

<input type="button" value="Button Text">

बटन को प्रपत्र जमा किए बिना, पृष्ठ पर होने वाली क्रियाओं को ट्रिगर करने के लिए उपयोग किया जा सकता है। आप <button> तत्व का भी उपयोग कर सकते हैं यदि आपको एक बटन की आवश्यकता होती है जो अधिक आसानी से स्टाइल किया जा सकता है या अन्य तत्व शामिल हो सकते हैं:

<button type="button">Button Text</button>

बटन का उपयोग आमतौर पर "ऑनक्लिक" घटना के साथ किया जाता है:

<input type="button" onclick="alert('hello world!')" value="Click Me">

या

<button type="button" onclick="alert('hello world!')">Click Me</button>

गुण

[name]

बटन का name , जिसे प्रपत्र डेटा के साथ प्रस्तुत किया गया है।

[type]

बटन का type ।

संभावित मूल्य हैं:

submit : बटन सर्वर को फ़ॉर्म डेटा सबमिट करता है। यदि विशेषता निर्दिष्ट नहीं है, तो यह डिफ़ॉल्ट है, या यदि विशेषता गतिशील रूप से रिक्त या अमान्य मान में बदल जाती है।

reset : बटन उनके प्रारंभिक मूल्यों पर सभी नियंत्रणों को रीसेट करता है।

button : बटन का कोई डिफ़ॉल्ट व्यवहार नहीं है। इसमें तत्व की घटनाओं से जुड़ी क्लाइंट-साइड स्क्रिप्ट हो सकती हैं, जो घटनाओं के होने पर ट्रिगर होती हैं।

menu : बटन अपने निर्दिष्ट तत्व के माध्यम से परिभाषित एक पॉपअप मेनू खोलता है।

[value]

बटन का प्रारंभिक मूल्य।

रंग

<input type="color" name="favcolor" value="#ff0000">

यूआरएल

<input type="url" name="Homepage">

दिनांक

<input type="date" />

दिनांक समय-स्थानीय

<input type="datetime-local" />

छवि

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

एक छवि। आपको छवि के स्रोत और वैकल्पिक पाठ को परिभाषित करने के लिए alt विशेषता को परिभाषित करने के लिए src विशेषता का उपयोग करना चाहिए। आप पिक्सेल में छवि के आकार को परिभाषित करने के लिए ऊँचाई और चौड़ाई की विशेषताओं का उपयोग कर सकते हैं।

रेंज

<input type="range" min="" max="" step="" />

महीना

<input type="month" />

समय

<input type="time" />

19:04:39
08:20:39.04

सप्ताह

<input type="week" />

टेक्स्ट

सबसे बुनियादी इनपुट प्रकार और डिफ़ॉल्ट इनपुट अगर कोई type निर्दिष्ट नहीं है। यह इनपुट प्रकार एकल-पंक्ति पाठ फ़ील्ड को परिभाषित करता है जिसमें इनपुट मान से स्वचालित रूप से हटाए गए लाइन-ब्रेक होते हैं। अन्य सभी पात्रों को इसमें प्रवेश दिया जा सकता है। <input> तत्वों का उपयोग <form> तत्व में इनपुट नियंत्रणों को घोषित करने के लिए किया जाता है जो उपयोगकर्ताओं को इनपुट डेटा की अनुमति देते हैं।

वाक्य - विन्यास

<input type="text">

या (एक type निर्दिष्ट किए बिना, डिफ़ॉल्ट विशेषता का उपयोग करके):

<input>

पाठ फ़ील्ड इनपुट की डिफ़ॉल्ट चौड़ाई 20 वर्ण है। इसे इस तरह size विशेषता के लिए एक मूल्य निर्दिष्ट करके बदला जा सकता है:

<input type="text" size="50">

सीएसएस के साथ चौड़ाई सेट करने की तुलना में size विशेषता अलग-अलग है। चौड़ाई का उपयोग एक विशिष्ट मान (पिक्सेल की संख्या, मूल तत्व का प्रतिशत, आदि) को परिभाषित करता है कि इनपुट हमेशा चौड़ा होना चाहिए। size का उपयोग करते हुए फ़ॉन्ट के आधार पर आवंटित की जाने वाली चौड़ाई की मात्रा का उपयोग किया जाता है और सामान्य रूप से वर्ण कितने व्यापक होते हैं।

नोट: size विशेषता का उपयोग स्वाभाविक रूप से उन वर्णों की संख्या को सीमित नहीं करता है, जिन्हें बॉक्स में दर्ज किया जा सकता है, केवल बॉक्स को कितना चौड़ा प्रदर्शित किया जाता है। लंबाई सीमित करने के लिए, इनपुट सत्यापन देखें।

एक इनपुट फ़ील्ड केवल पाठ की एक पंक्ति की अनुमति देता है। यदि आपको पाठ की पर्याप्त मात्रा के लिए एक बहु-पंक्ति पाठ इनपुट की आवश्यकता है, तो इसके बजाय <textarea> तत्व का उपयोग करें।

खोज

<input type="search" name="googlesearch">

दिनांक समय (वैश्विक)

एक प्रकार की विशेषता वाला इनपुट तत्व जिसका मान " डेटाइम " है, एक वैश्विक तिथि और समय (समयक्षेत्र जानकारी के साथ) का प्रतिनिधित्व करते हुए तत्व के मूल्य को स्ट्रिंग पर सेट करने के लिए एक नियंत्रण का प्रतिनिधित्व करता है ।

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

अनुमत विशेषताएँ:

• वैश्विक विशेषताएं
• नाम
• विकलांग
• प्रपत्र
• प्रकार
• स्वत: पूर्ण
• ऑटोफोकस
• सूची
• न्यूनतम अधिकतम
• कदम (नाव)
• सिफ़ पढ़िये
• आवश्यक मूल्य