HTML DOM Input Radio type 속성 – 개념, 문법, 실전 예제까지 한 번에 정리

HTML DOM의 Input Radio type 속성은 type="radio"로 설정된 입력(input) 요소와 연관된 속성입니다. 이 속성은 라디오 버튼 요소에 대해 항상 radio라는 값을 반환하며, 자바스크립트를 통해 특정 입력 필드의 유형을 확인할 때 유용하게 활용됩니다.

문법(Syntax)

라디오 타입 속성의 기본 문법은 다음과 같습니다.

radioObject.type

별도의 매개변수 없이 라디오 객체에 바로 접근하여 해당 요소의 type 값을 문자열 형태로 얻을 수 있습니다.

예제(Example)

아래 예제는 라디오 타입 속성이 실제로 어떻게 동작하는지 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input radio type Property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
<br>
</form>
<p>아래 버튼을 클릭하면 위 입력 요소의 type 값을 확인할 수 있습니다.</p>
<button type="button" onclick="radioType()">GET Type</button>
<p id="Sample"></p>
<script>
    function radioType() {
        var P = document.getElementById("Mango").type;
        document.getElementById("Sample").innerHTML = "입력 필드의 type 값은: " + P;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Input Radio type 속성 – 개념, 문법, 실전 예제까지 한 번에 정리

그리고 GET Type 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM Input Radio type 속성 – 개념, 문법, 실전 예제까지 한 번에 정리

코드 상세 설명

1. 라디오 입력 요소 생성

먼저 폼(form) 안에 type="radio", name="fruits", id="Mango" 속성을 가진 입력 요소를 생성했습니다.

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

2. 버튼 생성 및 이벤트 연결

다음으로 사용자가 클릭했을 때 radioType() 함수를 실행하는 'GET Type' 버튼을 만들었습니다.

<button type="button" onclick="radioType()">GET Type</button>

3. radioType() 함수 동작 원리

radioType() 함수는 getElementById() 메서드를 사용해 id가 'Mango'인 입력 요소에 접근한 뒤, 해당 요소의 type 속성 값을 변수 P에 할당합니다. 이후 innerHTML 속성을 통해 변수 P의 값을 id가 'Sample'인 단락(paragraph)에 출력합니다.

function getType() {
    var P = document.getElementById("Mango").type;
    document.getElementById("Sample").innerHTML = "입력 필드의 type 값은: " + P;
}

정리

Input Radio type 속성은 라디오 버튼 요소의 유형을 확인하는 간단하지만 실용적인 DOM 속성입니다. 폼 유효성 검사나 동적인 UI 처리 과정에서 특정 입력 요소가 라디오 버튼인지 판별해야 할 때 활용할 수 있으며, 별도의 설정 없이 읽기만 가능한(read-only) 속성이라는 점도 기억해 두면 좋습니다.