HTML इनपुट टाइप

इस अध्याय में <input> एलिमेंट के इनपुट टाइप का वर्णन किया गया है।

इनपुट टाइप: text

<input type="text"> मिटाने के लिए परिभाषितटेक्स्ट इनपुटके एकल प्रविष्टि क्षेत्र:

उदाहरण

<form>
 पहला नाम:<br>
<input type="text" name="firstname">
<br>
 अंतिम नाम:<br>
<input type="text" name="lastname">
</form>

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

पहला नाम:


अंतिम नाम:

इनपुट टाइप: password

<input type="password"> परिभाषित करता हैपासवर्ड क्षेत्र：

उदाहरण

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

User name:


User password:

टिप्पणी:password क्षेत्र के अक्षर को छापने का संसाधन (तारा या भारी गोली के रूप में दिखाया जाता है)।

इनपुट टाइप: submit

<input type="submit"> परिभाषित करता हैसबमिटफॉर्म डाटा कोफॉर्म हैंडलरके बटन।

फॉर्म हैंडलर (form-handler) आमतौर पर इनपुट डाटा को संसाधित करने वाले सर्वर पृष्ठ में इनको लिखा हुआ स्क्रिप्ट है।

फॉर्म के action गुण में फॉर्म प्रशासक (form-handler) निर्धारित करें:

उदाहरण

<form action="action_page.php">
पहला नाम:<br>
<input type="text" name="firstname" value="Mickey">
<br>
अंतिम नाम:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

पहला नाम:


अंतिम नाम:


अगर आपने सबमिट बटन की value गुणवत्ता खोदड़ दी है, तो बटन को डिफ़ॉल्ट टेक्स्ट मिलेगा:

उदाहरण

<form action="action_page.php">
पहला नाम:<br>
<input type="text" name="firstname" value="Mickey">
<br>
अंतिम नाम:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

स्वयं प्रयोग करें

Input Type: radio

<input type="radio"> रेडियो बटन परिभाषित करता है。

रेडियो बटनों के द्वारा उपयोगकर्ता को सीमित संख्या के विकल्पों में केवल एक को चुनने की अनुमति होती है:

उदाहरण

<form>
<input type="radio" name="sex" value="male" checked>पुरुष
<br>
<input type="radio" name="sex" value="female">महिला
</form>

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

पुरुष

महिला

Input Type: checkbox

<input type="checkbox"> चेकबॉक्स परिभाषित करता है。

चेकबॉक्स उपयोगकर्ता को सीमित संख्या के विकल्पों में शून्य या अधिक विकल्पों को चुनने की अनुमति देता है。

उदाहरण

<form>
<input type="checkbox" name="vehicle" value="Bike">मैंने साइकिल है
<br>
<input type="checkbox" name="vehicle" value="Car">मैंने कार है 
</form>

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

मैंने साइकिल है

मैंने कार है

Input Type: button

<input type="button"> परिभाषित करता हैबटन。

उदाहरण

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

स्वयं प्रयोग करें

ऊपरी HTML कोड ब्राउज़र में इस तरह देखा जाएगा:}

HTML5 इनपुट क़िस्म

HTML5 ने कई नए इनपुट क़िस्में जोड़ी हैं:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

टिप्पणी:पुराने वेब ब्राउज़र इस इनपुट क़िस्म को इनपुट टेक्स्ट के रूप में देखेंगे जो HTML5 का समर्थन नहीं करते हैं。

इनपुट क़िस्म: number

<input type="number"> जो इनपुट फील्ड में नंबर मान होना चाहिए।

आप नंबर पर सीमा लगा सकते हैं।

ब्राउज़र के समर्थन के अनुसार, सीमा इनपुट फील्ड पर लागू की जा सकती है।

उदाहरण

<form>
  कीमत (1 से 5 तक):
  <input type="number" name="quantity" min="1" max="5">
</form>

स्वयं प्रयोग करें

इनपुट सीमाएँ

यहाँ कुछ सामान्य इनपुट सीमाएँ सूचीबद्ध हैं (जिनमें से कुछ HTML5 में नई है):

गुण वर्णन
disabled नियत इनपुट फील्ड को निष्क्रिय (उपयोग में नहीं लगाया जा सकता) बना दें।
max नियत इनपुट फील्ड का अधिकतम मान निर्धारित करें।
maxlength नियत इनपुट फील्ड का अधिकतम करक़्ष संख्या निर्धारित करें।
min नियत इनपुट फील्ड का न्यूनतम मान निर्धारित करें।
pattern नियत इनपुट फील्ड के इनपुट मान की जांच करने वाला पेटर्न निर्धारित करें।
readonly नियत इनपुट फील्ड को रीड़ॉन (संशोधित नहीं किया जा सकता) बना दें।
required नियत इनपुट फील्ड को अनिवार्य (अनिवार्य भरना चाहिए) बना दें।
size नियत इनपुट फील्ड की चौड़ाई (करक़्षों में) निर्धारित करें।
step नियत इनपुट फील्ड के वैध नंबर अंतर निर्धारित करें।
value नियत इनपुट फील्ड का डिफ़ॉल्ट मान निर्धारित करें।

आप अगले चाप में इनपुट सीमाओं के बारे में अधिक जानेंगे。

उदाहरण

<form>
  कीमत:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: date

<input type="date"> जो इनपुट फील्ड में तारीख होनी चाहिए।

ब्राउज़र के समर्थन के अनुसार, तारीख चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  जन्मदिन:
  <input type="date" name="bday">
</form>

स्वयं प्रयोग करें

आप इस इनपुट में सीमा जोड़ सकते हैं:

उदाहरण

<form>
  इससे पहले 1980-01-01 की तारीख दर्ज करें:
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01 के बाद की तारीख दर्ज करें:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: color

<input type="color"> एक इनपुट क्षेत्र के लिए जिसमें रंग होना चाहिए इसके लिए इस्तेमाल किया जाता है。

ब्राउज़र के समर्थन के अनुसार, रंग चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  अपना पसंदीदा रंग चुनें:
  <input type="color" name="favcolor">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: range

<input type="range"> एक इनपुट क्षेत्र के लिए जिसमें एक निश्चित दायरे के भीतर की आंकड़ा होनी चाहिए इसके लिए इस्तेमाल किया जाता है。

ब्राउज़र के समर्थन के अनुसार, इनपुट क्षेत्र को स्लाइडर कंट्रोल के रूप में दिखाया जा सकता है。

उदाहरण

<form>
  <input type="range" name="points" min="0" max="10">
</form>

स्वयं प्रयोग करें

आप निम्नलिखित गुणों का उपयोग करके प्रतिबंध निर्धारित कर सकते हैं: min, max, step, value。

इनपुट क़िस्म: month

<input type="month"> उपयोगकर्ता को महीना और वर्ष चुनने की अनुमति देता है。

ब्राउज़र के समर्थन के अनुसार, तारीख चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  जन्मदिन (महीना और वर्ष):
  <input type="month" name="bdaymonth">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: week

<input type="week"> उपयोगकर्ता को सप्ताह और वर्ष चुनने की अनुमति देता है。

ब्राउज़र के समर्थन के अनुसार, तारीख चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  एक सप्ताह चुनें:
  <input type="week" name="week_year">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: time

<input type="time"> उपयोगकर्ता को समय चुनने की अनुमति देता है (टाइम-ज़ोन नहीं)。

ब्राउज़र के समर्थन के अनुसार, समय चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  एक समय चुनें:
  <input type="time" name="usr_time">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: datetime

<input type="datetime"> उपयोगकर्ता को तारीख और समय चुनने की अनुमति देता है (टाइम-ज़ोन से)。

ब्राउज़र के समर्थन के अनुसार, तारीख चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  जन्मदिन (तारीख और समय):
  <input type="datetime" name="bdaytime">
</form>

स्वयं प्रयोग करें

इनपुट क़िस्म: datetime-local

<input type="datetime-local"> उपयोगकर्ता को तारीख और समय चुनने की अनुमति देता है (टाइम-ज़ोन नहीं)。

ब्राउज़र के समर्थन के अनुसार, तारीख चयनकारक इनपुट क्षेत्र में दिखाया जाएगा。

उदाहरण

<form>
  जन्मदिन (तारीख और समय):
  <input type="datetime-local" name="bdaytime">
</form>

स्वयं प्रयोग करें

इनपुट प्रकार: email

<input type="email"> ई-मेल पते के साथ जुड़े इनपुट फील्ड के लिए इस्तेमाल किया जाता है。

सबमिट करते समय ई-मेल पते का स्वचालित प्रमाणीकरण किया जा सकता है (ब्राउज़र समर्थन के अनुसार)。

कुछ स्मार्टफोन ई-मेल प्रकार को पहचानते हैं और कीबोर्ड में ".com" जोड़ते हैं ताकि ई-मेल इनपुट में मेल खाते हों。

उदाहरण

<form>
  ई-मेल:
  <input type="email" name="email">
</form>

स्वयं प्रयोग करें

इनपुट प्रकार: search

<input type="search"> सर्च फील्ड (सर्च फील्ड का प्रदर्शन आम टेक्स्ट फील्ड के समान है) के लिए इस्तेमाल किया जाता है。

उदाहरण

<form>
  Google चार्चा:
  <input type="search" name="googlesearch">
</form>

स्वयं प्रयोग करें

इनपुट प्रकार: tel

<input type="tel"> टेलीफोन नंबर के साथ जुड़े इनपुट फील्ड के लिए इस्तेमाल किया जाता है。

वर्तमान में केवल Safari 8 tel प्रकार का समर्थन है。

उदाहरण

<form>
  टेलीफोन:
  <input type="tel" name="usrtel">
</form>

स्वयं प्रयोग करें

इनपुट प्रकार: url

<input type="url"> URL के साथ जुड़े इनपुट फील्ड के लिए इस्तेमाल किया जाता है。

ब्राउज़र समर्थन के अनुसार, यूआरएल फील्ड को सबमिट करते समय स्वचालित रूप से प्रमाणीकरण किया जाता है。

कुछ स्मार्टफोन यूआरएल प्रकार को पहचानते हैं और कीबोर्ड में ".com" जोड़ते हैं ताकि यूआरएल इनपुट में मेल खाते हों。

उदाहरण

<form>
  अपना होमपेज जोड़ें:
  <input type="url" name="homepage">
</form>

स्वयं प्रयोग करें