मैं बस सोच रहा हूं कि रेडियो बटन पर सही तरीके से "आवश्यक" नए एचटीएमएल 5 इनपुट विशेषता का उपयोग कैसे करें। क्या प्रत्येक रेडियो बटन फ़ील्ड को नीचे की तरह विशेषता की आवश्यकता होती है या क्या यह पर्याप्त है यदि केवल एक फ़ील्ड इसे प्राप्त करता है?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />जवाबों:
TL; DR: requiredरेडियो समूह के कम से कम एक इनपुट के लिए विशेषता सेट करें ।
requiredसभी इनपुटों के लिए सेटिंग अधिक स्पष्ट है, लेकिन आवश्यक नहीं है (जब तक कि गतिशील रूप से रेडियो-बटन उत्पन्न न हो)।
रेडियो बटन को समूहीकृत करने के लिए इन सभी का nameमूल्य समान होना चाहिए । यह एक समय में केवल एक को चुनने की अनुमति देता है और requiredपूरे समूह पर लागू होता है।
<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>इस पर भी ध्यान दें:
एक रेडियो बटन समूह की आवश्यकता है या नहीं, इस भ्रम से बचने के लिए, लेखकों को एक समूह में सभी रेडियो बटन पर विशेषता निर्दिष्ट करने के लिए प्रोत्साहित किया जाता है। दरअसल, सामान्य तौर पर, लेखकों को रेडियो बटन समूहों से बचने के लिए प्रोत्साहित किया जाता है, जिनके पास पहली बार में कोई प्रारंभिक जांच नियंत्रण नहीं है, क्योंकि यह एक ऐसी स्थिति है जिसे उपयोगकर्ता वापस नहीं कर सकता है, और इसलिए आमतौर पर एक खराब उपयोगकर्ता इंटरफ़ेस माना जाता है।
आप इस कोड का उपयोग कर सकते हैं स्निपेट ...
<html>
<body>
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Submit" />
</form>
</body>
</html>चुनिंदा कथनों में से एक में " आवश्यक " कीवर्ड निर्दिष्ट करें । यदि आप इसके स्वरूप का डिफ़ॉल्ट तरीका बदलना चाहते हैं। आप इन चरणों का पालन कर सकते हैं। यदि आप डिफ़ॉल्ट व्यवहार को संशोधित करने का कोई इरादा रखते हैं तो यह केवल अतिरिक्त जानकारी के लिए है।
निम्नलिखित को आप .cssफ़ाइल में जोड़ें ।
/* style all elements with a required attribute */
:required {
background: red;
}अधिक जानकारी के लिए आप निम्न URL का उल्लेख कर सकते हैं।
यदि आपके रेडियो बटन को अनुकूलित किया गया है, उदाहरण के लिए रेडियो बटन के लिए मूल आइकन को सीएसएस के माध्यम से छिपाया गया है display:noneताकि आप अपना रेडियो बटन बना सकें तो आपको त्रुटि हो सकती है।
इसे ठीक करने का तरीका इसके display:noneसाथ बदलना हैopacity:0
display:none।
यहां देशी HTML5 सत्यापन के साथ आवश्यक रेडियोबुटनों का एक बहुत ही बुनियादी लेकिन आधुनिक कार्यान्वयन है:
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<label>Gender</label>
<div class="checkboxes">
<label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
<label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
<label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>यद्यपि मैं मूल एचटीएमएल 5 सत्यापन का उपयोग करने के न्यूनतर दृष्टिकोण का एक बड़ा प्रशंसक हूं, आप इसे लंबे समय तक जावास्क्रिप्ट सत्यापन के साथ बदलना चाह सकते हैं। जावास्क्रिप्ट सत्यापन आपको सत्यापन प्रक्रिया पर कहीं अधिक नियंत्रण देता है और यह आपको वास्तविक फ़ील्ड्स (छद्म कक्षाओं के बजाय) को मान्य फ़ील्ड की स्टाइलिंग में सुधार करने की अनुमति देता है। यह मूल HTML5 सत्यापन टूट (या कमी) जावास्क्रिप्ट के मामले में आपकी गिरावट वापस हो सकता है। आप इससे प्रेरित होकर, इससे बेहतर रूपों को बनाने के बारे में कुछ अन्य सुझावों के साथ यहां इसका एक उदाहरण पा सकते हैं एंड्रयू कोल ।
मुझे required="required"एक ही नाम के साथ उपयोग करना था और सत्यापन की तुलना में ठीक काम किया था।
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"