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

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

इनपुट तरीका: 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>
  गूगल सर्च:
  <input type="search" name="googlesearch">
</form>

स्वयं एक प्रयास कीजिए

इनपुट तरीका: tel

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

वर्तमान में केवल साफारी 8 तेल तरीका का समर्थन करता है。

उदाहरण

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

स्वयं एक प्रयास कीजिए

इनपुट तरीका: url

<input type="url"> यूआरएल का पता रखने वाले इनपुट फील्ड के लिए इस्तेमाल किया जाता है。

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

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

उदाहरण

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

स्वयं एक प्रयास कीजिए