एचटीएमएल इनपुट गुण
यह अध्याय HTML <input>तत्व के लिए विभिन्न विशेषताओं का वर्णन करता है।
मूल्य विशेषता
इनपुट valueविशेषता इनपुट फ़ील्ड के लिए प्रारंभिक मान निर्दिष्ट करती है:
उदाहरण
प्रारंभिक (डिफ़ॉल्ट) मानों के साथ इनपुट फ़ील्ड:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
केवल पढ़ने योग्य विशेषता
इनपुट readonlyविशेषता निर्दिष्ट करती है कि एक इनपुट फ़ील्ड केवल-पढ़ने के लिए है।
केवल-पढ़ने के लिए इनपुट फ़ील्ड को संशोधित नहीं किया जा सकता है (हालांकि, उपयोगकर्ता इसे टैब कर सकता है, इसे हाइलाइट कर सकता है, और इससे टेक्स्ट कॉपी कर सकता है)।
फ़ॉर्म सबमिट करते समय केवल-पढ़ने के लिए इनपुट फ़ील्ड का मान भेजा जाएगा!
उदाहरण
केवल पढ़ने के लिए इनपुट फ़ील्ड:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
अक्षम गुण
इनपुट disabledविशेषता निर्दिष्ट करती है कि एक इनपुट फ़ील्ड को अक्षम किया जाना चाहिए।
एक अक्षम इनपुट फ़ील्ड अनुपयोगी और अन-क्लिक करने योग्य है।
फ़ॉर्म सबमिट करते समय अक्षम इनपुट फ़ील्ड का मान नहीं भेजा जाएगा!
उदाहरण
एक अक्षम इनपुट फ़ील्ड:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
आकार विशेषता
इनपुट sizeविशेषता एक इनपुट फ़ील्ड के वर्णों में, दृश्यमान चौड़ाई को निर्दिष्ट करती है।
के लिए डिफ़ॉल्ट मान size20 है।
नोट: विशेषता sizeनिम्नलिखित इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, खोज, दूरभाष, यूआरएल, ईमेल और पासवर्ड।
उदाहरण
इनपुट फ़ील्ड के लिए चौड़ाई सेट करें:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
अधिकतम लम्बाई विशेषता
इनपुट maxlengthविशेषता इनपुट फ़ील्ड में अनुमत वर्णों की अधिकतम संख्या निर्दिष्ट करती है।
नोट: जब a maxlengthसेट किया जाता है, तो इनपुट फ़ील्ड निर्दिष्ट वर्णों की संख्या से अधिक स्वीकार नहीं करेगा। हालाँकि, यह विशेषता कोई प्रतिक्रिया नहीं देती है। इसलिए, यदि आप उपयोगकर्ता को सचेत करना चाहते हैं, तो आपको जावास्क्रिप्ट कोड लिखना होगा।
उदाहरण
इनपुट फ़ील्ड के लिए अधिकतम लंबाई निर्धारित करें:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
न्यूनतम और अधिकतम गुण
इनपुट minऔर maxविशेषताएँ इनपुट फ़ील्ड के लिए न्यूनतम और अधिकतम मान निर्दिष्ट करती हैं।
और विशेषताएँ निम्नलिखित इनपुट प्रकारों minके maxसाथ काम करती हैं: संख्या, श्रेणी, दिनांक, डेटाटाइम-स्थानीय, महीना, समय और सप्ताह।
युक्ति: कानूनी मूल्यों की एक श्रृंखला बनाने के लिए अधिकतम और न्यूनतम विशेषताओं का एक साथ उपयोग करें।
उदाहरण
अधिकतम तिथि, न्यूनतम तिथि और कानूनी मूल्यों की एक श्रृंखला निर्धारित करें:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
एकाधिक गुण
इनपुट multipleविशेषता निर्दिष्ट करती है कि उपयोगकर्ता को इनपुट फ़ील्ड में एक से अधिक मान दर्ज करने की अनुमति है।
multipleविशेषता निम्न इनपुट प्रकारों के साथ काम करती है: ईमेल और फ़ाइल ।
उदाहरण
एक फ़ाइल अपलोड फ़ील्ड जो अनेक मान स्वीकार करती है:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
पैटर्न विशेषता
इनपुट patternएट्रिब्यूट एक रेगुलर एक्सप्रेशन निर्दिष्ट करता है कि फॉर्म सबमिट करते समय इनपुट फ़ील्ड के मान की जाँच की जाती है।
patternविशेषता निम्न इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, दिनांक, खोज, यूआरएल, टेली, ईमेल, और पासवर्ड ।
युक्ति: उपयोगकर्ता की सहायता के लिए पैटर्न का वर्णन करने के लिए वैश्विक शीर्षक विशेषता का उपयोग करें।
युक्ति: हमारे जावास्क्रिप्ट ट्यूटोरियल में रेगुलर एक्सप्रेशन के बारे में अधिक जानें ।
उदाहरण
एक इनपुट फ़ील्ड जिसमें केवल तीन अक्षर हो सकते हैं (कोई संख्या या विशेष वर्ण नहीं):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
प्लेसहोल्डर विशेषता
इनपुट placeholderविशेषता एक संक्षिप्त संकेत निर्दिष्ट करती है जो इनपुट फ़ील्ड के अपेक्षित मान (नमूना मान या अपेक्षित प्रारूप का संक्षिप्त विवरण) का वर्णन करती है।
उपयोगकर्ता द्वारा कोई मान दर्ज करने से पहले इनपुट फ़ील्ड में संक्षिप्त संकेत प्रदर्शित किया जाता है।
placeholderविशेषता निम्न इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, खोज, यूआरएल, टेली, ईमेल, और पासवर्ड ।
उदाहरण
प्लेसहोल्डर टेक्स्ट वाला एक इनपुट फ़ील्ड:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
आवश्यक विशेषता
इनपुट requiredविशेषता निर्दिष्ट करती है कि फॉर्म जमा करने से पहले एक इनपुट फ़ील्ड भरना होगा।
विशेषता निम्न इनपुट प्रकारों के requiredसाथ काम करती है: टेक्स्ट, खोज, यूआरएल, टेल, ईमेल, पासवर्ड, डेट पिकर, नंबर, चेकबॉक्स, रेडियो और फ़ाइल।
उदाहरण
एक आवश्यक इनपुट फ़ील्ड:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
कदम विशेषता
इनपुट stepविशेषता इनपुट फ़ील्ड के लिए कानूनी संख्या अंतराल निर्दिष्ट करती है।
उदाहरण: यदि चरण = "3", कानूनी संख्याएँ -3, 0, 3, 6, आदि हो सकती हैं।
युक्ति: कानूनी मूल्यों की एक श्रृंखला बनाने के लिए अधिकतम और न्यूनतम विशेषताओं के साथ इस विशेषता का उपयोग किया जा सकता है।
विशेषता निम्न इनपुट प्रकारों के stepसाथ काम करती है: संख्या, श्रेणी, दिनांक, डेटाटाइम-स्थानीय, माह, समय और सप्ताह।
उदाहरण
एक निर्दिष्ट कानूनी संख्या अंतराल के साथ एक इनपुट फ़ील्ड:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
नोट: इनपुट प्रतिबंध फुलप्रूफ नहीं हैं, और जावास्क्रिप्ट अवैध इनपुट जोड़ने के कई तरीके प्रदान करता है। इनपुट को सुरक्षित रूप से प्रतिबंधित करने के लिए, इसे रिसीवर (सर्वर) द्वारा भी चेक किया जाना चाहिए!
ऑटोफोकस विशेषता
इनपुट autofocusविशेषता निर्दिष्ट करती है कि पृष्ठ लोड होने पर इनपुट फ़ील्ड को स्वचालित रूप से फ़ोकस प्राप्त करना चाहिए।
उदाहरण
पृष्ठ लोड होने पर "प्रथम नाम" इनपुट फ़ील्ड को स्वचालित रूप से फ़ोकस करने दें:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
ऊंचाई और चौड़ाई गुण
इनपुट heightऔर विशेषताएँ किसी तत्व widthकी ऊँचाई और चौड़ाई निर्दिष्ट करती हैं ।<input
type="image">
युक्ति: छवियों के लिए ऊंचाई और चौड़ाई दोनों विशेषताओं को हमेशा निर्दिष्ट करें। यदि ऊंचाई और चौड़ाई निर्धारित की जाती है, तो पृष्ठ लोड होने पर छवि के लिए आवश्यक स्थान आरक्षित होता है। इन विशेषताओं के बिना, ब्राउज़र छवि के आकार को नहीं जानता है, और इसके लिए उपयुक्त स्थान आरक्षित नहीं कर सकता है। प्रभाव यह होगा कि लोडिंग के दौरान पृष्ठ लेआउट बदल जाएगा (जबकि चित्र लोड होते हैं)।
उदाहरण
एक छवि को सबमिट बटन के रूप में परिभाषित करें, ऊंचाई और चौड़ाई विशेषताओं के साथ:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
सूची विशेषता
इनपुट listविशेषता उस तत्व को संदर्भित करती <datalist>है जिसमें <इनपुट> तत्व के लिए पूर्व-निर्धारित विकल्प होते हैं।
उदाहरण
<डेटालिस्ट> में पूर्व-निर्धारित मानों वाला एक <इनपुट> तत्व:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
स्वत: पूर्ण विशेषता
इनपुट autocompleteविशेषता निर्दिष्ट करती है कि कोई प्रपत्र या इनपुट फ़ील्ड स्वतः पूर्ण होना चाहिए या नहीं।
स्वत: पूर्ण ब्राउज़र को मूल्य की भविष्यवाणी करने की अनुमति देता है। जब कोई उपयोगकर्ता किसी फ़ील्ड में टाइप करना शुरू करता है, तो ब्राउज़र को पहले टाइप किए गए मानों के आधार पर फ़ील्ड भरने के विकल्प प्रदर्शित करने चाहिए।
autocompleteविशेषता <form>निम्न प्रकारों के साथ काम करती है <input>: टेक्स्ट, खोज, यूआरएल, टेली, ईमेल, पासवर्ड, डेटपिकर, रेंज, और रंग।
उदाहरण
एक इनपुट फ़ील्ड के लिए स्वत: पूर्ण और बंद के साथ एक HTML फॉर्म:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
युक्ति: कुछ ब्राउज़रों में इसके काम करने के लिए आपको एक स्वत: पूर्ण फ़ंक्शन सक्रिय करने की आवश्यकता हो सकती है (ब्राउज़र के मेनू में "प्राथमिकताएं" के अंतर्गत देखें)।
एचटीएमएल व्यायाम
एचटीएमएल फॉर्म और इनपुट तत्व
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।