HTML <input> placeholder एट्रिब्यूट

<input> एलिमेंट का placeholder एट्रिब्यूट

<input> एलिमेंट का placeholder एट्रिब्यूट इनपुट फ़ील्ड के लिए एक संकेत (hint) सेट करता है जो उपयोगकर्ता को बताता है कि उस फ़ील्ड में क्या अपेक्षित है। यह प्लेसहोल्डर टेक्स्ट तब दिखाई देता है जब फ़ील्ड खाली होती है और उपयोगकर्ता टाइप करना शुरू करते ही गायब हो जाता है।

यह एट्रिब्यूट निम्न इनपुट टाइप के लिए काम करता है: text, url, search, email, password, tel। यह HTML5 में पेश किया गया था।

वाक्यविन्यास (Syntax)

<input placeholder="placeholder_text">

यहां placeholder_text संक्षिप्त संकेत है जो उपयोगकर्ताओं को तब दिखाई देगा जब वे उस वेब पेज पर जाएंगे।

उदाहरण

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
  Id - <input type="text" name="id" placeholder="Enter UserId here..."><br>
  Password - <input type="password" name="pwd" placeholder="Enter password here..."><br>
  DOB - <input type="date" name="dob"><br>
  Telephone - <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
  Email - <input type="email" name="email" placeholder="Enter email here..."><br><br>
  <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

आउटपुट

फॉर्म में प्रत्येक फ़ील्ड में प्लेसहोल्डर टेक्स्ट दिखाई देगा:

कोड विश्लेषण

उपरोक्त उदाहरण में, हमारे पास कुछ फ़ील्ड के साथ एक फॉर्म है:

<form action="" method="get">
  Id - <input type="text" name="id" placeholder="Enter UserId here..."><br>
  Password - <input type="password" name="pwd" placeholder="Enter password here..."><br>
  DOB - <input type="date" name="dob"><br>
  Telephone - <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
  Email - <input type="email" name="email" placeholder="Enter email here..."><br><br>
  <button type="submit" value="Submit">Submit</button>
</form>

प्लेसहोल्डर सभी फ़ील्ड के लिए सेट है जैसे:

<input type="password" name="pwd" placeholder="Enter password here...">

बस placeholder एट्रिब्यूट का उपयोग करें और संक्षिप्त संकेत सेट करें:

placeholder="Enter password here..."

सर्वोत्तम अभ्यास

• प्लेसहोल्डर लेबल का विकल्प नहीं है। हमेशा <label> का उपयोग करें।
• प्लेसहोल्डर टेक्स्ट संक्षिप्त रखें (उदाहरण प्रारूप के लिए)।
• कंट्रास्ट सुनिश्चित करें: प्लेसहोल्डर टेक्स्ट पढ़ने योग्य होना चाहिए (CSS ::placeholder से स्टाइल करें)।
• संवेदनशील फ़ील्ड (पासवर्ड) में प्लेसहोल्डर न डालें जो सुरक्षा जोखिम हो।