Input Color name 속성이란?
HTML DOM의 Input Color name 속성은 <input type="color"> 요소의 name 속성값을 문자열(string) 형태로 반환합니다. 뿐만 아니라, 이 속성에 새로운 문자열을 할당하여 name 값을 동적으로 변경하는 것도 가능합니다.
name 속성은 폼(form) 데이터를 서버로 전송할 때 해당 입력 필드를 식별하는 역할을 하므로, 자바스크립트를 통해 이를 읽고 수정할 수 있으면 폼 처리 로직을 유연하게 구현할 수 있습니다.
문법(Syntax)
1. name 값 반환하기
inputColorObject.name
2. name 값 새로 설정하기
inputColorObject.name = '문자열'
예제 코드
다음은 Input Color의 name 속성을 조회하고 버튼 클릭 시 값을 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Color Name 예제</title>
</head>
<body>
<form id="formForColorsInput">
색상 선택기: <input type="color" id="Color" name="primaryColor">
</form>
<button onclick="changeNameValue()">name 값 변경</button>
<div id="divDisplay"></div>
<script>
var inputColor = document.getElementById("Color");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = '색상 입력 요소의 name 값: '+inputColor.name;
function changeNameValue() {
if(inputColor.name == 'primaryColor'){
inputColor.name = 'secondaryColor';
divDisplay.textContent = '색상 입력 요소의 name 값: '+inputColor.name;
}
}
</script>
</body>
</html>코드 설명
document.getElementById("Color")를 통해 색상 입력 요소에 접근합니다.- 페이지가 로드되면
divDisplay영역에 현재 name 값인 primaryColor가 표시됩니다. - 버튼을 클릭하면
changeNameValue()함수가 실행되어, name 값이 secondaryColor로 변경되고 화면에 즉시 반영됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'name 값 변경' 버튼을 클릭하기 전 — 초기 name 값인 primaryColor가 화면에 출력됩니다.
버튼을 클릭한 후 — name 값이 secondaryColor로 변경되어 화면이 갱신됩니다.
마무리 정리
Input Color의 name 속성은 단순히 값을 읽는 것뿐만 아니라 런타임 중에 동적으로 변경할 수 있다는 점이 핵심입니다. 이를 활용하면 사용자 인터랙션에 따라 폼 필드의 이름을 유연하게 조작할 수 있어, 동적인 폼 처리나 조건부 데이터 전송 등 다양한 상황에서 유용하게 사용됩니다.