개요
HTML DOM에서 입력 체크박스(Input Checkbox)의 type 속성은 해당 입력 요소가 어떤 유형인지 문자열로 반환하거나, 다른 유형으로 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 페이지를 새로 고침하지 않고도 런타임 중에 입력 필드의 타입을 동적으로 변경할 수 있습니다.
문법(Syntax)
type 속성의 기본 문법은 다음과 같습니다.
1. type 값 반환하기
inputCheckboxObject.type
2. type 값 설정하기
inputCheckboxObject.type = stringValue
설정 가능한 문자열 값
stringValue 자리에는 아래와 같은 값들을 지정할 수 있습니다.
| stringValue | 설명 |
|---|---|
| checkbox | 입력 유형이 체크박스임을 나타냅니다. |
| radio | 입력 유형이 라디오 버튼임을 나타냅니다. |
| text | 입력 유형이 텍스트 입력 필드임을 나타냅니다. |
예제
다음은 Input Checkbox type 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 체크박스가 텍스트 입력 필드로 전환되며, 현재 입력 유형이 화면에 함께 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>체크박스의 Type 속성</title>
</head>
<body>
<form id="Form">
<div>
기타: <input id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">입력 유형 변경</button>
<div id="displayDiv"></div>
<script>
var typeOfInput = document.getElementById("formCheckbox");
var displayDiv = document.getElementById("displayDiv");
displayDiv.textContent = '입력 유형: ' + typeOfInput.type;
function changeType(){
if(typeOfInput.type == 'checkbox'){
typeOfInput.type = 'text';
displayDiv.textContent = '입력 유형: ' + typeOfInput.type;
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
‘입력 유형 변경’ 버튼을 클릭하기 전 –
버튼을 클릭한 후 – 체크박스가 텍스트 입력 필드로 바뀌고, 화면에는 변경된 입력 유형(‘text’)이 표시됩니다.
