답변:
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>select 중 하나에 " required "키워드를 지정 하십시오 문 . 기본 모양을 변경하려는 경우. 이 단계를 수행 할 수 있습니다. 기본 동작을 수정하려는 경우 추가 정보입니다.
.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/…
다음은 기본 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 유효성 검사로 대체 할 수 있습니다. Javascript 유효성 검사를 통해 유효성 검사 프로세스를 훨씬 더 많이 제어 할 수 있으며 (in) 유효한 필드의 스타일을 개선하기 위해 의사 클래스 대신 실제 클래스를 설정할 수 있습니다. 이 기본 HTML5 유효성 검사는 Javascript가 손상되었거나 부족한 경우 대체 할 수 있습니다. Andrew Cole 에서 영감을 얻은 더 나은 양식 을 만드는 방법에 대한 다른 제안과 함께 여기 에서 해당 예를 찾을 수 있습니다 .
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"