HTML DOM의 Input Text type 속성은 입력 텍스트(input type="text") 요소의 유형(type) 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트로 특정 입력 필드가 어떤 타입인지 확인하거나, 런타임에 다른 타입으로 변경할 수 있습니다.
문법(Syntax)
type 속성의 기본 문법은 다음과 같습니다.
1. 문자열 값 반환하기
inputTextObject.type
2. 문자열 값으로 type 설정하기
inputTextObject.type = stringValue
사용 가능한 문자열 값(String Values)
위 문법에서 stringValue에 들어갈 수 있는 주요 값은 다음과 같습니다.
| stringValue | 설명 |
|---|---|
| 입력 유형이 이메일(email)임을 정의합니다. | |
| text | 입력 유형이 일반 텍스트(text)임을 정의합니다. |
| radio | 입력 유형이 라디오 버튼(radio)임을 정의합니다. |
| tel | 입력 유형이 전화번호(tel)임을 정의하며, 모바일 환경에서는 숫자 키패드가 표시됩니다. |
예제(Example)
다음은 Input Text type 속성의 실제 사용 예제입니다. 버튼을 클릭하면 해당 입력 필드의 type 값을 읽어와 라벨에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Text type</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Text-type</legend>
<label for="TextSelect"></label>
<input type="text" id="TextSelect" >
<input type="button" onclick="getTypeOfInput()" value="What to enter?">
</fieldset>
</form>
<script>
var labelSelect = document.querySelector("label");
var inputText = document.getElementById("TextSelect");
function getTypeOfInput() {
labelSelect.innerHTML = ' Plain '+inputText.type+': ';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'What to enter?' 버튼을 클릭하기 전 화면입니다.
'What to enter?' 버튼을 클릭한 후에는 입력 필드의 type 값인 'text'가 라벨에 표시됩니다.
이처럼 type 속성을 활용하면 폼 유효성 검사나 동적 폼 구성 시 입력 요소의 유형을 손쉽게 확인하고 제어할 수 있습니다.