HTML Input Attributes
In this page:
<input type="type" name="name" value="value" placeholder="hint" required>value और placeholder Attributes
value attribute पेज लोड होने पर input फील्ड के अंदर डिफ़ॉल्ट, पहले से भरा हुआ टेक्स्ट सेट करता है।
placeholder attribute फील्ड के अंदर एक हल्का, अस्थायी संकेत दिखाता है जो यूज़र को बताता है कि क्या टाइप करना है, और यूज़र के टेक्स्ट दर्ज करना शुरू करते ही यह गायब हो जाता है।
- फॉर्मेटिंग उदाहरण दिखाने के लिए placeholders का उपयोग करें, जैसे email फील्ड्स पर '[email protected]'।
- Accepted attributes:
- value — initial or submitted value
- placeholder — hint text shown while empty
- Placeholder does not replace a label
उदाहरण: The value and placeholder Attributes
<input type="text" value="Default text">
<input type="email" placeholder="[email protected]">readonly और disabled Attributes
readonly attribute यूज़र को फील्ड के अंदर टेक्स्ट देखने और सिलेक्ट करने देता है, लेकिन उन्हें उसे एडिट करने से रोकता है, फिर भी सबमिशन के समय डेटा सर्वर पर भेजा जाता है।
disabled attribute एलिमेंट को पूरी तरह लॉक कर देता है, उसे ग्रे-आउट कर देता है और उसका डेटा सबमिट होने से रोकता है।
- उस डेटा (जैसे order numbers) को दिखाने के लिए readonly attribute का उपयोग करें, जिसे आप यूज़र से कॉपी करवाना चाहते हैं लेकिन बदलवाना नहीं चाहते।
- Accepted attributes:
- readonly — boolean; value is submitted, not editable
- disabled — boolean; not editable, not submitted, not focusable
उदाहरण: The readonly and disabled Attributes
<input type="text" value="Order #1234" readonly>
<input type="text" value="Cannot edit" disabled>required और autofocus Attributes
required attribute ब्राउज़र को बताता है कि फॉर्म सबमिट होने से पहले उस फील्ड को ज़रूर भरना चाहिए, और खाली छोड़ने पर एक native error message दिखाता है।
autofocus attribute पेज लोड होते ही अपने आप कर्सर को किसी specific फील्ड के अंदर रख देता है।
- पेज नेविगेशन को सहज रखने के लिए प्रति पेज सिर्फ एक ही input फील्ड पर autofocus का उपयोग करें।
- Accepted attributes:
- required — boolean; must be filled before submit
- autofocus — boolean; focus on page load (one per page)
उदाहरण: The required and autofocus Attributes
<input type="text" required autofocus>minlength और maxlength से Character Limits
minlength attribute किसी फील्ड में यूज़र द्वारा टाइप किए जाने वाले कैरेक्टर की न्यूनतम संख्या तय करता है, और maxlength attribute अधिकतम सीमा तय करता है, जिससे यूज़र उस सीमा के बाद कोई कैरेक्टर दर्ज नहीं कर पाता।
- सुरक्षित, मानक कैरेक्टर काउंट लागू करने के लिए passcode फील्ड्स पर maxlength का उपयोग करें।
- Accepted attributes:
- minlength — non-negative integer
- maxlength — non-negative integer
- Apply to text, search, url, tel, email, password and textarea
उदाहरण: Character Limits with minlength and maxlength
<input type="text" minlength="4" maxlength="8">pattern और title से Custom Validation
pattern attribute आपको Regular Expressions (regex) का उपयोग करके कस्टम validation rules लिखने देता है, ताकि यह जांचा जा सके कि यूज़र इनपुट किसी विशेष फॉर्मेटिंग स्ट्रक्चर (जैसे zip codes या phone numbers) से मेल खाता है या नहीं, जबकि title attribute वैलिडेशन फेल होने पर एक कस्टम error tooltip दिखाता है।
- जटिल JavaScript स्क्रिप्ट्स की ज़रूरत के बिना सुरक्षित, कस्टम इनपुट फॉर्मेट लागू करने के लिए pattern attribute का उपयोग करें।
- Accepted attributes:
- pattern — regular expression matched against the full value
- title — text explaining the required format
- Applies to text, search, url, tel, email, password
उदाहरण: Custom Validation with pattern and title
<input type="text" pattern="[0-9]{5}" title="Enter a 5-digit zip code">Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: