ฉันแค่สงสัยว่าจะใช้คุณลักษณะการป้อนข้อมูล HTML5 ใหม่ "ต้อง" ในวิธีที่ถูกต้องในปุ่มตัวเลือก ฟิลด์ตัวเลือกทุกปุ่มต้องการแอททริบิวต์ด้านล่างหรือไม่ก็เพียงพอหากมีเพียงฟิลด์เดียวเท่านั้นที่ได้รับ
<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 ต่อไปนี้
หากปุ่มแบบเรดิโอของคุณได้รับการปรับแต่งเช่นไอคอนดั้งเดิมสำหรับปุ่มเรดิโอนั้นถูกซ่อนไว้ผ่าน css display:noneเพื่อให้คุณสามารถสร้างปุ่มแบบเรดิโอของคุณเองได้จากนั้นคุณอาจจะได้รับข้อผิดพลาด
วิธีแก้ไขคือแทนที่display:noneด้วยopacity:0
display:noneเบราว์เซอร์ที่มองไม่เห็นถ้าปุ่มตัวเองจะถูกซ่อนไว้ผ่านทาง ขอบคุณตอบแล้วที่นี่: stackoverflow.com/questions/49687229/…
นี่คือการใช้งาน RadioButtons พื้นฐานที่ทันสมัย แต่ทันสมัยพร้อมการตรวจสอบ 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>แม้ว่าฉันจะเป็นแฟนตัวยงของวิธีการที่เรียบง่ายของการใช้การตรวจสอบ HTML5 ดั้งเดิม แต่คุณอาจต้องการแทนที่ด้วยการตรวจสอบ Javascript ในระยะยาว การตรวจสอบความถูกต้องของจาวาสคริปต์ช่วยให้คุณสามารถควบคุมกระบวนการตรวจสอบได้มากขึ้นและช่วยให้คุณตั้งค่าคลาสจริง (แทนที่จะเป็นคลาสหลอก) เพื่อปรับปรุงสไตล์ของฟิลด์ (ใน) ที่ถูกต้อง การตรวจสอบความถูกต้องของ HTML5 ดั้งเดิมสามารถเป็นทางเลือกของคุณในกรณีที่ Javascript ใช้งานไม่ได้ (หรือขาด) คุณสามารถค้นหาตัวอย่างของที่นี่พร้อมกับคำแนะนำอื่น ๆ บางอย่างเกี่ยวกับวิธีที่จะทำให้รูปแบบที่ดีขึ้น , แรงบันดาลใจจากแอนดรูโคล
ฉันต้องใช้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"