परिचय
HTML placeholder एट्रिब्यूट वह टेक्स्ट दर्शाता है जो <input> या <textarea> एलिमेंट में उपयोगकर्ता द्वारा कुछ भी दर्ज करने से पहले प्रदर्शित होता है। यह उपयोगकर्ता को अपेक्षित इनपुट प्रारूप या सामग्री का संकेत देता है।
सिंटैक्स
<tagname placeholder="text"></tagname>
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
input {
display: block;
width: 50%;
margin: 1rem auto;
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<body>
<h1>HTML placeholder एट्रिब्यूट डेमो</h1>
<input type="text" placeholder='अपना पहला नाम दर्ज करें'>
<input type="text" placeholder='अपना अंतिम नाम दर्ज करें'>
</body>
</html>
आउटपुट
दो इनपुट फ़ील्ड्स दिखाई देंगी जिनमें धूसर रंग का प्लेसहोल्डर टेक्स्ट होगा। जब उपयोगकर्ता टाइप करना शुरू करता है, तो प्लेसहोल्डर गायब हो जाता है।
महत्वपूर्ण बिंदु
- प्लेसहोल्डर लेबल का विकल्प नहीं है - एक्सेसिबिलिटी के लिए
<label>का उपयोग करें - यह केवल संकेत/उदाहरण के लिए है
- फॉर्म सबमिशन के साथ सबमिट नहीं होता
- CSS
::placeholderस्यूडो-एलिमेंट से स्टाइल किया जा सकता है <input>(text, search, url, tel, email, password, number) और<textarea>पर लागू होता है
प्लेसहोल्डर स्टाइलिंग
/* प्लेसहोल्डर टेक्स्ट का रंग बदलें */
::placeholder {
color: #999;
font-style: italic;
opacity: 1; /* Firefox फिक्स */
}
ब्राउज़र समर्थन
HTML5 समर्थन वाले सभी आधुनिक ब्राउज़रों में कार्य करता है।
