एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल इनपुट गुण


यह अध्याय 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>

युक्ति: कुछ ब्राउज़रों में इसके काम करने के लिए आपको एक स्वत: पूर्ण फ़ंक्शन सक्रिय करने की आवश्यकता हो सकती है (ब्राउज़र के मेनू में "प्राथमिकताएं" के अंतर्गत देखें)।


एचटीएमएल व्यायाम

व्यायाम के साथ खुद को परखें

व्यायाम:

नीचे दिए गए इनपुट फ़ील्ड में, "आपका नाम यहाँ" कहने वाला प्लेसहोल्डर जोड़ें।

<form action="/action_page.php">
<इनपुट प्रकार="पाठ्य">
</फॉर्म>


एचटीएमएल फॉर्म और इनपुट तत्व

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।