HTML Input Types
In this page:
<input type="text" name="name">
<input type="password" name="name">
<input type="checkbox" name="name" value="value">
<input type="radio" name="name" value="value">
<input type="submit" value="Label">Text Inputs
Text inputs मानक alphanumeric कैरेक्टर इकट्ठा करते हैं। अलग-अलग types चुनकर, आप गोपनीयता के लिए password फील्ड्स को छुपा सकते हैं, search configurations को कस्टमाइज़ कर सकते हैं, या mobile devices पर telephone layout pads को ऑप्टिमाइज़ कर सकते हैं।
- mobile displays पर ऑप्टिमाइज़्ड software keyboards ट्रिगर करने के लिए search और tel जैसे specialized text types का उपयोग करें।
- Accepted values:
- text — single-line text
- password — masked text
- search — search field
- tel — telephone number
- hidden — not displayed but submitted
उदाहरण: Text Inputs
<input type="text" name="username">
<input type="password" name="password">Email और URL
email और URL types बेसिक syntactic validation लागू करते हैं। ये ब्राउज़र को बताते हैं कि सबमिट करने से पहले दर्ज किया गया टेक्स्ट standard email या web link फॉर्मेट से मेल खाता है या नहीं, साथ ही '@' या '.com' जैसे mobile keyboard बटन को भी ऑप्टिमाइज़ करते हैं।
- अगर आप यूज़र को addresses की लिस्ट सबमिट करने देना चाहते हैं, तो अपने email input में multiple attribute जोड़ें।
- Accepted values:
- email — validated email address; multiple allowed
- url — validated absolute URL
- Both support placeholder, required, pattern, minlength, maxlength
उदाहरण: Email and URL
<input type="email" name="email">
<input type="url" name="website">Numeric Inputs
Numeric inputs यूज़र एंट्री को सिर्फ नंबरों तक सीमित रखते हैं। number type यूज़र को spin buttons क्लिक करके वैल्यू बढ़ाने या घटाने देता है, जबकि range type एक adjustable slider bar दिखाता है, जो लेआउट एडजस्टमेंट के लिए एकदम सही है।
- अपने numeric selectors के लिए सटीक सीमाएं और incremental limits तय करने के लिए min, max, और step attributes का उपयोग करें।
- Accepted values:
- number — min | max | step (number | any)
- range — slider; min | max | step; default 0-100
उदाहरण: Numeric Inputs
<input type="number" min="1" max="10">
<input type="range" min="0" max="100">Date और Time
Date और time inputs ब्राउज़र को एक साफ-सुथरा, built-in calendar या clock picker दिखाने के लिए कहते हैं। इससे आपका इंटरफ़ेस consistent रहता है और mobile यूज़र के लिए तारीखें दर्ज करना आसान हो जाता है, जिससे भारी-भरकम third-party calendar plugins की ज़रूरत खत्म हो जाती है।
- यूज़र को अमान्य पिछली या भविष्य की तारीखें चुनने से रोकने के लिए min और max attribute coordinates तय करें।
- Accepted values:
- date — YYYY-MM-DD
- time — HH:MM
- datetime-local — YYYY-MM-DDTHH:MM
- month — YYYY-MM
- week — YYYY-Www
- min / max / step limit accepted dates
उदाहरण: Date and Time
<input type="date">
<input type="time">Selection
Selection inputs यूज़र को पहले से तय ऑप्शन में से चुनने देते हैं। Radio buttons का उपयोग तब किया जाता है जब यूज़र किसी ग्रुप की गई category से सिर्फ एक ऑप्शन चुन सकें, जबकि checkboxes यूज़र को एक साथ कई स्वतंत्र ऑप्शन चुनने की सुविधा देते हैं।
- बड़े और आसानी से क्लिक होने वाले touch targets बनाने के लिए अपने selection inputs को label टैग्स के अंदर लपेटें।
- Accepted values:
- checkbox — zero or more; checked
- radio — one per name group; checked
- color — #rrggbb
- file — accept | multiple | capture
उदाहरण: Selection
<input type="radio" name="plan" value="basic"> Basic
<input type="checkbox" name="agree"> AgreeAction Buttons
Action inputs ऐसे क्लिक करने योग्य कंट्रोल बनाते हैं जो आपके फॉर्म्स के साथ इंटरैक्ट करते हैं। Submit बटन फॉर्म डेटा को पैकेज करके सर्वर पर भेजते हैं, reset बटन तुरंत सभी फील्ड्स क्लियर कर देते हैं, और image inputs ग्राफिकल submission बटन की तरह काम करते हैं।
- पेज को दोबारा लोड किए बिना कस्टम JavaScript एक्शन ट्रिगर करने के लिए अपने फॉर्म्स के अंदर type="button" का उपयोग करें।
- Accepted values:
- submit — submits the form
- reset — resets the form
- button — no default action
- image — graphical submit; needs src and alt
उदाहरण: Action buttons
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="image" src="submit.png" alt="Submit">Special
Specialized inputs अनूठे कार्य संभालते हैं। color type एक native color picker खोलता है, file type डॉक्यूमेंट ट्रांसफर के लिए एक uploader बटन दिखाता है, और hidden type यूज़र को कुछ भी दिखाए बिना चुपचाप background variables पास करता है।
- अनुमत फ़ाइल फॉर्मेट सीमित करने के लिए अपने file inputs पर हमेशा accept attribute तय करें।
- Accepted values:
- file — accept (e.g. image/*, .pdf) | multiple
- hidden — value is submitted, not shown
- color — #rrggbb
- range — min | max | step
उदाहरण: Special
<input type="color">
<input type="file" accept="image/*">
<input type="hidden" name="token" value="abc123">Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: