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

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

<input> एलिमेंट का required एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो निर्दिष्ट करता है कि फॉर्म सबमिट करने से पहले उस इनपुट फ़ील्ड को भरना अनिवार्य है। यदि required एट्रिब्यूट वाला फ़ील्ड खाली छोड़ दिया जाता है, तो सबमिट बटन पर क्लिक करने पर फॉर्म सबमिट नहीं होगा और ब्राउज़र एक अंतर्निहित मान्यता संदेश दिखाएगा।

यह HTML5 में पेश किया गया था और क्लाइंट-साइड फॉर्म मान्यता को सरल बनाता है।

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

<input required>

उदाहरण

नीचे एक रजिस्ट्रेशन फॉर्म है जहां 3 फ़ील्ड (ID, Password, Telephone) अनिवार्य हैं:

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

आउटपुट

फॉर्म प्रदर्शित होगा। यदि हम 3 अनिवार्य फ़ील्ड (ID, Password, Telephone) में से किसी को भरे बिना Submit पर क्लिक करते हैं, तो फॉर्म सबमिट नहीं होगा:

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

यहां हमने "Telephone" फ़ील्ड नहीं भरा, इसलिए एक त्रुटि दिखाई देगी जो फॉर्म सबमिट करने से रोकेगी:

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

कोड विश्लेषण

फॉर्म में कुछ फ़ील्ड और एक बटन है:

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

max एट्रिब्यूट ID इनपुट टाइप नंबर के लिए सेट है। न्यूनतम मान 1 है, इसलिए उपयोगकर्ता 1 से कम मान दर्ज नहीं कर पाएगा:

Id - <input type="number" name="id" min="1" max="10">

समर्थित इनपुट टाइप

text, search, url, tel, email, password
date, datetime-local, month, time, week
number, range
checkbox, radio, file

CSS स्टाइलिंग

अमान्य (खाली required) फ़ील्ड को स्टाइल करने के लिए :invalid छद्म-वर्ग का उपयोग करें:

input:required:invalid { border-color: red; }

नोट

क्लाइंट-साइड मान्यता उपयोगकर्ता अनुभव में सुधार करती है लेकिन सर्वर-साइड मान्यता की जगह नहीं ले सकती। हमेशा सर्वर पर भी मान्य करें।