HTML DOM에서 Input Color 요소의 type 속성은 해당 입력 필드의 유형을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트로 색상 선택기(color picker)의 타입을 동적으로 확인하고 변경할 수 있습니다.
문법(Syntax)
type 속성의 기본 문법은 다음과 같습니다.
문자열 값 반환하기
inputColorObject.type
type 속성에 문자열 값 설정하기
inputColorObject.type = stringValue
설정 가능한 문자열 값
위 문법에서 stringValue에는 아래와 같은 값들을 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| color | 입력 유형이 색상 선택기(color)임을 나타냅니다. |
| radio | 입력 유형이 라디오 버튼(radio)임을 나타냅니다. |
| text | 입력 유형이 텍스트 필드(text)임을 나타냅니다. |
예제 코드
다음은 Input Color type 속성을 실제로 사용하는 예제입니다. 버튼을 클릭하면 현재 입력 필드의 유형을 확인하고, color 타입일 경우 text 타입으로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Color Type</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor" value="#0000ff">
</form>
<button onclick="changeNameValue()">Get type & change to text</button>
<div id="divDisplay"></div>
<script>
var inputColor = document.getElementById("Color");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Type of Input: '+inputColor.type;
function changeNameValue() {
if(inputColor.type == 'color'){
var defaultColor = inputColor.defaultValue;
inputColor.type = 'text';
inputColor.value = defaultColor;
divDisplay.textContent = 'Name of color input: '+inputColor.type;
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
'Get type & change to text' 버튼 클릭 전 — 화면에 현재 입력 필드의 유형인 'color'가 표시되고, 파란색(#0000ff) 색상 선택기가 나타납니다.
'Get type & change to text' 버튼 클릭 후 — 색상 선택기가 일반 텍스트 입력 필드로 변경되며, 기본값인 '#0000ff'가 그대로 유지됩니다.
정리
Input Color의 type 속성은 읽기와 쓰기가 모두 가능하므로, 런타임 중에 입력 필드의 유형을 조건에 따라 전환해야 하는 인터랙티브한 폼을 만들 때 유용하게 활용할 수 있습니다. 특히 defaultValue 속성과 함께 사용하면 유형이 변경되더라도 원래 값을 보존할 수 있다는 점이 핵심입니다.