एचटीएमएल <इनपुट> विशेषता टाइप करें
उदाहरण
दो इनपुट फ़ील्ड के साथ एक HTML फॉर्म; एक टेक्स्ट फ़ील्ड और एक सबमिट बटन:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
विशेषता प्रदर्शित करने के लिए तत्व के प्रकार को typeनिर्दिष्ट करती है ।
<input>
यदि typeविशेषता निर्दिष्ट नहीं है, तो डिफ़ॉल्ट प्रकार "पाठ" है।
ब्राउज़र समर्थन
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
वाक्य - विन्यास
<input type="value">
गुण मान
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
और ज्यादा उदाहरण
इनपुट प्रकार: बटन
एक पुश बटन जो क्लिक किए जाने पर जावास्क्रिप्ट को सक्रिय करता है:
<input type="button" value="Click me" onclick="msg()">
इनपुट प्रकार: चेकबॉक्स
चेकबॉक्स उपयोगकर्ता को सीमित संख्या में विकल्पों में से एक या अधिक विकल्पों का चयन करने देता है:
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
इनपुट प्रकार: रंग
रंग बीनने वाले से रंग चुनें:
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
इनपुट प्रकार: तिथि
दिनांक नियंत्रण परिभाषित करें:
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
इनपुट प्रकार: डेटाटाइम-लोकल
दिनांक और समय नियंत्रण परिभाषित करें (कोई समय क्षेत्र नहीं):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
इनपुट प्रकार: ईमेल
ई-मेल पते के लिए एक फ़ील्ड परिभाषित करें (सबमिट होने पर स्वचालित रूप से मान्य हो जाएगा):
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
इनपुट प्रकार: फ़ाइल
फ़ाइल-चयन फ़ील्ड और "ब्राउज़ करें..." बटन परिभाषित करें (फ़ाइल अपलोड के लिए):
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
इनपुट प्रकार: छिपा हुआ
एक छिपे हुए क्षेत्र को परिभाषित करें (उपयोगकर्ता के लिए दृश्यमान नहीं)।
एक छिपा हुआ फ़ील्ड अक्सर कौन सा डेटाबेस रिकॉर्ड संग्रहीत करता है जिसे प्रपत्र सबमिट करते समय अद्यतन करने की आवश्यकता होती है:
<input type="hidden" id="custId" name="custId" value="3487">
इनपुट प्रकार: छवि
एक छवि को सबमिट बटन के रूप में परिभाषित करें:
<input type="image" src="img_submit.gif" alt="Submit">
इनपुट प्रकार: माह
एक महीने और साल के नियंत्रण को परिभाषित करें (कोई समय क्षेत्र नहीं):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
इनपुट प्रकार: संख्या
एक नंबर दर्ज करने के लिए एक फ़ील्ड परिभाषित करें (आप किन नंबरों को स्वीकार किए जाते हैं, इस पर प्रतिबंध भी लगा सकते हैं):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" name="quantity" min="1" max="5">
प्रतिबंधों को निर्दिष्ट करने के लिए निम्नलिखित विशेषताओं का उपयोग करें:
- अधिकतम - अनुमत अधिकतम मान निर्दिष्ट करता है
- न्यूनतम - अनुमत न्यूनतम मान निर्दिष्ट करता है
- चरण - कानूनी संख्या अंतराल निर्दिष्ट करता है
- मान - डिफ़ॉल्ट मान निर्दिष्ट करता है
इनपुट प्रकार: पासवर्ड
पासवर्ड फ़ील्ड परिभाषित करें (अक्षर नकाबपोश हैं):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
इनपुट प्रकार: रेडियो
रेडियो बटन उपयोगकर्ता को सीमित संख्या में विकल्पों में से केवल एक का चयन करने देते हैं:
<input type="radio" id="html" name="fav_language" value="HTML">
<label
for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language"
value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
इनपुट प्रकार: रेंज
एक संख्या दर्ज करने के लिए एक नियंत्रण परिभाषित करें जिसका सटीक मान महत्वपूर्ण नहीं है (जैसे स्लाइडर नियंत्रण)। डिफ़ॉल्ट सीमा 0 से 100 है। हालांकि, आप न्यूनतम, अधिकतम और चरण विशेषताओं के साथ कौन सी संख्याएं स्वीकार की जाती हैं, इस पर प्रतिबंध लगा सकते हैं:
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
प्रतिबंधों को निर्दिष्ट करने के लिए निम्नलिखित विशेषताओं का उपयोग करें:
- अधिकतम - अनुमत अधिकतम मान निर्दिष्ट करता है
- न्यूनतम - अनुमत न्यूनतम मान निर्दिष्ट करता है
- चरण - कानूनी संख्या अंतराल निर्दिष्ट करता है
- मान - डिफ़ॉल्ट मान निर्दिष्ट करता है
इनपुट प्रकार: रीसेट
रीसेट बटन को परिभाषित करें (सभी फॉर्म मानों को डिफ़ॉल्ट मानों पर रीसेट करता है):
<input type="reset">
युक्ति: रीसेट बटन का सावधानी से उपयोग करें! यह उन उपयोगकर्ताओं के लिए कष्टप्रद हो सकता है जो गलती से रीसेट बटन को सक्रिय कर देते हैं।
इनपुट प्रकार: खोज
एक खोज फ़ील्ड परिभाषित करें (जैसे साइट खोज, या Google खोज):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
इनपुट प्रकार: सबमिट करें
सबमिट बटन को परिभाषित करें:
<input type="submit">
इनपुट प्रकार: दूरभाष
टेलीफ़ोन नंबर दर्ज करने के लिए फ़ील्ड परिभाषित करें:
<label for="phone">Enter your phone number:</label>
<input type="tel"
id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
इनपुट प्रकार: टेक्स्ट
दो एकल-पंक्ति टेक्स्ट फ़ील्ड परिभाषित करें जिनमें उपयोगकर्ता टेक्स्ट दर्ज कर सकता है:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
इनपुट प्रकार: समय
एक समय दर्ज करने के लिए एक नियंत्रण परिभाषित करें (कोई समय क्षेत्र नहीं):
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
इनपुट प्रकार: url
URL दर्ज करने के लिए फ़ील्ड परिभाषित करें:
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
युक्ति: iPhone पर Safari url इनपुट प्रकार को पहचानता है, और इसे मिलान करने के लिए ऑन-स्क्रीन कीबोर्ड को बदलता है (.com विकल्प जोड़ता है)।
इनपुट प्रकार: सप्ताह
एक सप्ताह और वर्ष नियंत्रण परिभाषित करें (कोई समय क्षेत्र नहीं):
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ एचटीएमएल <इनपुट> टैग