HTML DOM 라디오 버튼 required 속성 완벽 정리 – 폼 제출 전 필수 선택 설정하기

HTML DOM의 라디오 버튼(radio) required 속성은 <input> 요소의 required 속성과 연결된 DOM 속성입니다. 이 속성은 폼을 서버로 제출하기 전에 해당 라디오 버튼이 반드시 선택되어야 하는지 여부를 설정하거나 반환하는 데 사용됩니다.

즉, required 속성이 지정된 라디오 버튼을 사용자가 선택하지 않은 상태에서 폼을 제출하려고 하면, 브라우저는 폼 제출을 차단하고 사용자에게 선택을 요구합니다. 이를 통해 필수 항목 누락으로 인한 불완전한 데이터 제출을 방지할 수 있습니다.

문법(Syntax)

required 속성을 설정하는 기본 문법은 다음과 같습니다.

radioObject.required = true|false

true : 폼을 제출하기 전에 해당 라디오 버튼을 반드시 선택해야 합니다.
false : 라디오 버튼 선택은 선택 사항이며, 체크하지 않아도 폼을 제출할 수 있습니다.

예제(Example)

다음은 input radio required 속성을 활용한 실제 예제입니다.

<!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>

실행 결과(Output)

위 코드를 실행하면 초록색 테두리가 있는 폼과 라디오 버튼, CHECK 버튼이 화면에 표시됩니다.

CHECK 버튼을 클릭한 경우 − required 속성값이 true이므로 "라디오 버튼을 반드시 선택해야 한다"는 메시지가 출력됩니다.

라디오 버튼을 선택하지 않은 채 Submit 버튼을 클릭한 경우 − 브라우저가 폼 제출을 막고 해당 라디오 버튼을 선택하도록 안내 메시지를 표시합니다.

코드 분석

위 예제의 동작 방식을 단계별로 살펴보겠습니다.

1. 라디오 버튼이 포함된 폼 생성

먼저 id가 "Mango", name이 "fruits"인 라디오 버튼을 만들고 required 속성을 지정했습니다. 이 라디오 버튼은 action 속성으로 "/Sample_page.php"를 지정한 폼 내부에 있으며, Submit 버튼 클릭 시 폼 데이터가 해당 페이지로 전송됩니다. 폼에는 인라인 스타일도 적용되어 있습니다.

<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>

2. CHECK 버튼 생성

사용자가 클릭하면 checkReq() 함수를 실행하는 CHECK 버튼을 만들었습니다.

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

3. checkReq() 함수 동작 원리

checkReq() 함수는 getElementById() 메서드로 해당 라디오 입력 요소에 접근하여 required 속성값을 가져옵니다. 이 예제에서는 true가 반환되며, 반환된 불리언(boolean) 값은 변수 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";
}

마무리

required 속성은 별도의 자바스크립트 유효성 검사 코드 없이도 브라우저 차원에서 필수 입력 검증을 수행할 수 있는 편리한 기능입니다. 특히 설문조사, 주문 양식 등 특정 항목의 선택을 강제해야 하는 상황에서 활용도가 높습니다. DOM의 required 속성을 함께 사용하면 자바스크립트로 이 값을 동적으로 읽거나 변경할 수 있어 더욱 유연한 폼 처리가 가능합니다.