HTML DOM 라디오 버튼 name 속성 완벽 정리

HTML DOM의 Input Radio name 속성은 라디오 버튼(input type="radio") 요소의 name 속성 값을 설정하거나 반환하는 데 사용됩니다. name 속성은 폼 데이터가 서버로 제출된 후 해당 데이터를 식별하는 중요한 역할을 하며, JavaScript에서도 이 속성을 활용해 폼 요소를 참조하고 조작할 수 있습니다.

문법(Syntax)

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

radioObject.name = name

여기서 name은 라디오 버튼에 지정할 이름을 의미합니다.

예제(Example)

라디오 버튼의 name 속성을 실제로 변경하는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input radio name Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>
<p>아래 버튼을 클릭하면 위 라디오 버튼의 이름이 변경됩니다.</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("Orange").name = "colors";
        document.getElementById("Sample").innerHTML = "Radio button name is now colors";
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 라디오 버튼 name 속성 완벽 정리 – 설정 및 반환 방법

CHANGE NAME 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

HTML DOM 라디오 버튼 name 속성 완벽 정리 – 설정 및 반환 방법

예제 코드 분석

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

1. 라디오 버튼 생성

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

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

2. CHANGE NAME 버튼 생성

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

<button type="button" onclick="changeName()">CHANGE NAME</button>

3. changeName() 함수 동작

changeName() 함수는 getElementById() 메서드를 사용해 해당 라디오 버튼 요소에 접근한 뒤, name 속성 값을 "colors"로 변경합니다. 이후 id가 "Sample"인 문단(paragraph)의 innerHTML 속성을 이용해 변경 결과를 화면에 출력합니다.

function changeName() {
    document.getElementById("Orange").name = "colors";
    document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}

정리

HTML DOM의 라디오 버튼 name 속성은 서버로 제출되는 폼 데이터를 식별하는 핵심 요소입니다. JavaScript를 통해 런타임에 name 값을 동적으로 변경할 수 있으며, 이를 활용하면 폼 처리 로직을 더욱 유연하게 구현할 수 있습니다.