HTML Input गुण

value गुण

value गुण इनपुट फील्ड का प्रारंभिक मूल्य निर्देश देता है:

उदाहरण

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

अपने आप से प्रयास करें

readonly गुण

readonly गुण इनपुट फील्ड को केवल पढ़ने के लिए निर्देश देता है (संशोधित नहीं किया जा सकता):

उदाहरण

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

अपने आप से प्रयास करें

readonly गुण को मूल्य नहीं चाहिए। यह readonly="readonly" के बराबर है।

disabled गुण

disabled गुण इनपुट फील्ड को अवरुद्ध निर्देश देता है。

अवरुद्ध एलीमेंट अस्तित्ववान नहीं हैं और न ही क्लिक किए जा सकते हैं。

अवरुद्ध एलीमेंट फार्म में नहीं भेजे जाएंगे。

उदाहरण

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

अपने आप से प्रयास करें

disabled गुण को मूल्य नहीं चाहिए। यह disabled="disabled" के बराबर है।

size गुण

size गुण इनपुट फील्ड का आकार (करक़्टरों के आधार पर) निर्देश देता है:

उदाहरण

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

अपने आप से प्रयास करें

maxlength गुण

maxlength अभियान्त्रिक गुण निर्देश इनपुट फील्ड की अधिकतम लंबाई की अनुमति देता है:

उदाहरण

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

अपने आप से प्रयास करें

यदि maxlength रूप-रेखा सेट की जाती है, तो इनपुट कंट्रोल अनुमते अक्षरों से अधिक अक्षरों को नहीं स्वीकार करेगा。

यह रूप-रेखा कोई भी प्रतिक्रिया प्रदान नहीं करेगा। यदि उपयोगकर्ता को अधिसूचना देने की जरूरत है, तो JavaScript कोड लिखना होगा。

नोट:इनपुट सीमा बिना गलती नहीं होती। JavaScript अधिकतर अवैध इनपुट को बढ़ाने के लिए कई तरीके प्रदान करता है। यदि इनपुट को सुरक्षित रूप से सीमित करना चाहते हैं, तो स्वीकर्ता (सर्वर) को दोनों ही सीमा की जांच करनी होगी。

HTML5 रूप-रेखाएँ

HTML5 ने <input> के लिए निम्नलिखित रूप-रेखाओं को जोड़ा:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height और width
  • list
  • min और max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

और <form> के लिए जरूरी रूप-रेखाओं को जोड़े:

  • autocomplete
  • novalidate

autocomplete रूप-रेखा

autocomplete रूप-रेखा फॉर्म या इनपुट क्षेत्र को स्वचालित पूरा करने के लिए क्या करना चाहिए या नहीं करना चाहिए का निर्धारण करता है。

जब स्वचालित पूरा करना चालू होता है, ब्राउज़र उपयोगकर्ता के पहले के इनपुट मूल्यों के आधार पर अपने मूल्य भरेगा。

सूचना:आप फॉर्म के autocomplete को on रख सकते हैं और विशेष इनपुट क्षेत्र को off रख सकते हैं, या उल्टा भी。

autocomplete रूप-रेखा <form> और निम्नलिखित <input> तरीकों के लिए लागू होती है: text, search, url, tel, email, password, datepickers, range और color。

उदाहरण

स्वचालित पूरा करना चालू करने वाला HTML फॉर्म (किसी इनपुट क्षेत्र के लिए off):

<form action="action_page.php" autocomplete="on">
   पहला नाम:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   ई-मेल: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

अपने आप से प्रयास करें

सूचना:कुछ ब्राउज़रों में, आपको स्वचालित पूरा करने की सुविधा मैनुअल रूप से सक्षम करनी पड़ सकती है।

novalidate विशेषता

novalidate विशेषता <form> विशेषता के अंतर्गत है।

यदि सेट किया गया है, तो novalidate इसके अनुसार फॉर्म डेटा की जांच सबमिट करने के समय नहीं की जाए।

उदाहरण

इंगित करके सूचित करता है कि जब फॉर्म सबमिट किया जाता है तो फॉर्म डेटा की जांच नहीं की जाए:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

अपने आप से प्रयास करें

autofocus विशेषता

autofocus विशेषता बूल विशेषता है।

यदि सेट किया गया है, तो इसके अनुसार पृष्ठ लोड होने पर <input> एलिमेंट को स्वचालित रूप से फोकस प्राप्त करना है।

उदाहरण

"First name" इनपुट क्षेत्र को पृष्ठ लोड होने पर स्वचालित रूप से फोकस प्राप्त करने देता है:

First name:<input type="text" name="fname" autofocus>

अपने आप से प्रयास करें

form विशेषता

form विशेषता <input> एलिमेंट के एक या अधिक फॉर्मों के संबंध में निर्धारित करती है।

सूचना:यदि एक से अधिक फॉर्मों को उद्धृत करना है, तो फॉर्म id सूची को खाली जगह से अलग करके दर्शाएं।

उदाहरण

इनपुट क्षेत्र HTML फॉर्म के बाहर है (बशर्ते कि यह फॉर्म के भीतर है):

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

अपने आप से प्रयास करें

formaction विशेषता

formaction विशेषता निर्धारित करती है कि जब फॉर्म सबमिट किया जाता है तो इस इनपुट कंट्रोल के फ़ाइल का URL कैसे है।

formaction विशेषता <form> एलिमेंट के action विशेषता को ओवरराइड करती है।

formaction विशेषता type="submit" और type="image" के लिए लागू होती है।

उदाहरण

दो दो सबमिट बटन वाला और अलग-अलग कार्य करने वाला HTML फॉर्म है:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

अपने आप से प्रयास करें

formenctype विशेषता

formenctype विशेषता निर्धारित करती है कि जब फॉर्म डेटा (form-data) सर्वर पर सबमिट किया जाता है तो इसका कैसे कोडिंग किया जाए (केवल method="post" फॉर्म के लिए ही)।

formenctype विशेषता <form> एलिमेंट के enctype विशेषता को ओवरराइड करती है।

formenctype गुण टाइप="submit" और type="image" के लिए उपयोगी है।

उदाहरण

डिफ़ॉल्ट एनकोडिंग और "multipart/form-data" (दूसरे सबमिट बटन) के लिए एनकोडिंग वाले फॉर्म डाटा (form-data) भेजना:

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

अपने आप से प्रयास करें

formmethod गुण

formmethod गुण फॉर्म डाटा (form-data) को action URL को भेजने के लिए उपयोगी HTTP तरीके को परिभाषित करता है。

formmethod गुण <form> एलीमेंट के method गुण को ओवरराइड करता है。

formmethod गुण टाइप="submit" और type="image" के लिए उपयोगी है。

उदाहरण

दूसरे सबमिट बटन ने फॉर्म के HTTP तरीके को ओवरराइड कर दिया है:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

अपने आप से प्रयास करें

formnovalidate गुण

novalidate गुण बूल गुण है。

यदि सेट किया गया है, तो इससे फॉर्म सबमिट करने पर <input> एलीमेंट का सत्यापन नहीं किया जाएगा。

formnovalidate गुण <form> एलीमेंट के novalidate गुण को ओवरराइड करता है。

formnovalidate गुण टाइप="submit" के लिए उपयोगी है。

उदाहरण

दो टाइप के सबमिट बटन वाला फॉर्म (सत्यापन के साथ और के बिना):

<form action="action_page.php">
   ई-मेल: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

अपने आप से प्रयास करें

formtarget अट्रिब्यूट

formtarget अट्रिब्यूट द्वारा निर्धारित नाम या शब्द निर्देशित करता है कि सबमिट करने के बाद प्राप्त प्रतिक्रिया कहाँ प्रदर्शित की जाए।

formtarget अट्रिब्यूट <form> एलिमेंट के target अट्रिब्यूट को पूर्वापेक्षभूत करेगा।

formtarget अट्रिब्यूट type="submit" और type="image" के साथ उपयोग किया जा सकता है।

उदाहरण

इस फॉर्म में दो सबमिट बटन हैं जो अलग-अलग लक्ष्य विंडो के लिए हैं:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

अपने आप से प्रयास करें

height और width अट्रिब्यूट

height और width अट्रिब्यूट एलिमेंट के ऊंचाई और चौड़ाई को निर्धारित करते हैं।

height और width अट्रिब्यूट केवल <input type="image"> के लिए उपयोग में हैं।

नोट:हमेशा इमेज के आकार को निर्धारित करें। अगर ब्राउज़र इमेज के आकार को नहीं जानता, तो पृष्ठ इमेज को लोड करते समय चमकता रहेगा।

उदाहरण

इमेज को सबमिट बटन के रूप में परिभाषित करें और height और width अट्रिब्यूट सेट करें:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

अपने आप से प्रयास करें

list अट्रिब्यूट

list अट्रिब्यूट द्वारा संदर्भित <datalist> एलिमेंट में <input> एलिमेंट के अग्रिम विकल्प हैं।

उदाहरण

इसके लिए <datalist> का उपयोग करके अग्रिम मूल्यों के <input> एलिमेंट को सेट करें:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

अपने आप से प्रयास करें

min और max विशेषता

min और max विशेषता <input> element का न्यूनतम और अधिकतम मान निर्दिष्ट करती हैं।

min और max विशेषता number, range, date, datetime, datetime-local, month, time और week जैसे इनपुट types के लिए उपयोगी हैं。

उदाहरण

Minimum and maximum values having <input> element:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

अपने आप से प्रयास करें

multiple विशेषता

multiple विशेषता बूल विशेषता है।

यदि सेट किया गया है, तो इससे उपयोगकर्ता को <input> तत्व में एक से अधिक मान भरने की अनुमति दी जाती है।

multiple विशेषता निम्नलिखित इनपुट तरीकों के लिए उपयोगी है: email और file。

उदाहरण

कई मान ग्रहण करने वाला फ़ाइल अपलोड क्षेत्र:

एक चित्र चुनें: <input type="file" name="img" multiple>

अपने आप से प्रयास करें

pattern विशेषता

pattern विशेषता इनपुट तत्व के मान की जांच के लिए प्रयोग की जाने वाली प्रतिरूप व्यवस्था को निर्दिष्ट करती है।

pattern विशेषता निम्नलिखित इनपुट तरीकों के लिए उपयोगी है: text, search, url, tel, email और password。

सूचना:उपयोगकर्ताओं को मदद करने के लिए पूर्णतः वैश्विक title विशेषता का उपयोग करके मॉडल को वर्णित करें।

सूचना:समान रूप से, आपको JavaScript ट्यूटोरियल में अधिक जानकारी प्राप्त करने के लिए सिफारिश करते हैं जो प्रतिरूप व्यवस्था के बारे में है।

उदाहरण

केवल तीन अक्षरों वाला इनपुट क्षेत्र (कोई संख्या या विशेष चरित्र नहीं) समाविष्ट कर सकता है:

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

अपने आप से प्रयास करें

placeholder विशेषता

placeholder विशेषता इनपुट क्षेत्र के अपेक्षित मान (नमूना मान या फॉर्मेट के लिए छोटी सूचना) को वर्णित करने के लिए प्रयोग की जाती है।

यह सूचना उपयोगकर्ता इनपुट मान भरने से पहले इनपुट क्षेत्र में दिखाई देगी।

placeholder गुण निम्नलिखित इनपुट प्रकारों के लिए लागू होता है: text、search、url、tel、email और password。

उदाहरण

प्लेसहोल्डर टेक्स्ट वाले इनपुट फील्ड:

<input type="text" name="fname" placeholder="First name">

अपने आप से प्रयास करें

required गुण

required गुण बूल गुण है。

सेट किए तो, फॉर्म सबमिट करने से पहले इनपुट फील्ड भरना आवश्यक है。

required गुण निम्नलिखित इनपुट प्रकारों के लिए लागू होता है: text、search、url、tel、email और password。

उदाहरण

अनिवार्य इनपुट फील्ड:

Username: <input type="text" name="usrname" required>

अपने आप से प्रयास करें

step गुण

step गुण <input> एलिमेंट के वैध नंबर अंतर को निर्धारित करता है。

उदाहरण: यदि step="3" है, तो वैध नंबर -3、0、3、6 आदि होने चाहिए。

सूचना:step गुण को max और min गुण के साथ साथ उपयोग किया जा सकता है, ताकि वैध मूल्यों की श्रृंखला बनाई जा सके。

step गुण निम्नलिखित इनपुट प्रकारों के लिए लागू होता है: number、range、date、datetime、datetime-local、month、time और week。

उदाहरण

विशिष्ट वैध नंबर अंतर के साथ इनपुट फील्ड:

<input type="number" name="points" step="3">

अपने आप से प्रयास करें