HTML required एट्रिब्यूट

परिचय

HTML required एट्रिब्यूट यह निर्दिष्ट करता है कि फॉर्म सबमिट करने से पहले HTML एलिमेंट को भरना अनिवार्य है। इसे <input>, <select>, और <textarea> HTML एलिमेंट्स पर लागू किया जा सकता है।

सिंटैक्स

<tagname required></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;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  select, input {
    padding: 10px;
    font-size: 1rem;
    margin: 1rem auto;
    display: block;
    width: 50%;
    max-width: 300px;
  }
</style>
<body>
<h1>HTML required एट्रिब्यूट डेमो</h1>
<p>अपना पसंदीदा विषय चुनें:</p>
<form method="post">
  <select required>
    <option value="">कोई नहीं</option>
    <option value="Physics">भौतिकी</option>
    <option value="Chemistry">रसायन विज्ञान</option>
    <option value="Biology">जीव विज्ञान</option>
  </select>
  <input type="submit" value="सबमिट" class="btn">
</form>
</body>
</html>

आउटपुट

एक ड्रॉपडाउन सूची और सबमिट बटन दिखाई देगा। जब उपयोगकर्ता सूची से कोई विषय चुने बिना "सबमिट" बटन पर क्लिक करता है, तो ब्राउज़र डिफ़ॉल्ट वैलिडेशन संदेश दिखाता है: "कृपया इस फ़ील्ड को भरें"।

लागू होने वाले एलिमेंट्स

महत्वपूर्ण बिंदु

• यह एक बूलियन एट्रिब्यूट है - केवल उपस्थिति ही इसे सक्रिय करती है
• यह क्लाइंट-साइड वैलिडेशन प्रदान करता है (ब्राउज़र द्वारा स्वचालित)
• सर्वर-साइड वैलिडेशन अभी भी आवश्यक है - क्लाइंट-साइड को बायपास किया जा सकता है
• CSS :required और :optional स्यूडो-क्लासेस से स्टाइलिंग संभव
• novalidate एट्रिब्यूट <form> पर लगाकर ब्राउज़र वैलिडेशन अक्षम कर सकते हैं

CSS स्टाइलिंग

const input = document.querySelector('input[required]');
if (!input.checkValidity()) {
  console.log('वैलिडेशन विफल:', input.validationMessage);
}

ब्राउज़र समर्थन

HTML5 समर्थन वाले सभी आधुनिक ब्राउज़रों में कार्य करता है।