HTML DOM 입력 라디오 필수 속성

<시간/>

HTML DOM 입력 라디오 필수 속성은 요소의 필수 속성과 연결됩니다. 필수 속성은 양식을 서버에 제출하기 전에 일부 라디오 버튼을 확인해야 하는지 여부를 설정하고 반환하는 데 사용됩니다. 이렇게 하면 필수 속성이 있는 라디오 버튼을 사용자가 선택하지 않은 상태로 두면 양식이 제출되지 않습니다.

구문

다음은 −

의 구문입니다.

필수 속성을 설정합니다.

radioObject.required = true|false

여기에서 true는 라디오 버튼을 선택해야 함을 나타내고 false는 양식을 제출하기 전에 라디오 버튼을 확인하기 위한 선택 사항을 나타냅니다.

예시

입력 라디오 필수 속성에 대한 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<h1>Radio required property</h1>
<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>
<button type=”button” onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
   function checkReq() {
      var Req=document.getElementById("Mango").required;
      if(Req==true)
         document.getElementById("Sample").innerHTML="The radio button must be checked before
         submitting";
      else
         document.getElementById("Sample").innerHTML="The radio button is optional and can be
         left unchecked by the user";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 라디오 필수 속성

CHECK 버튼을 클릭하면 -

HTML DOM 입력 라디오 필수 속성

라디오 버튼을 선택하지 않고 "제출" 버튼을 클릭하면 -

HTML DOM 입력 라디오 필수 속성

위의 예에서 -

먼저 ID가 "Mango"이고 이름이 "fruits"이고 필수 속성이 true로 설정된 입력 라디오 버튼을 만들었습니다. 제출 버튼을 클릭할 때 양식 데이터를 제출할 위치를 지정하기 위해 action=”Sample_page.php”가 있는 양식 내부에 포함된 라디오 버튼. 양식에도 인라인 스타일이 적용되어 있습니다. −

<form style="border:solid 1px green;padding:5px" action="/Sample_page.php">
FRUIT:
<input type="radio" name="fruits" id="Mango" required>Mango
<br><br>
<input type="submit">
</form>

그런 다음 사용자가 클릭할 때 checkReq() 메서드를 실행하는 CHECK 버튼을 만들었습니다.

<button type=”button” onclick="checkReq()">CHECK</button>

checkReq() 메서드는 getElementById() 메서드를 사용하여 radio 유형의 입력 요소를 가져오고 필수 속성을 가져옵니다. 이 경우에는 true를 반환합니다. 반환된 부울 값은 변수 Req에 할당되고 반환된 값에 따라 true 또는 false인지 여부에 따라 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 적절한 메시지를 표시합니다 -

function checkReq() {
   var Req=document.getElementById("Mango").required;
   if(Req==true)
      document.getElementById("Sample").innerHTML="The radio button must be checked before submitting";
   else
      document.getElementById("Sample").innerHTML="The radio button is optional and can be left unchecked by the user";
}