HTML DOM의 Input Submit type 속성은 type="submit"으로 설정된 input 요소와 연관된 속성입니다. 이 속성은 해당 input 요소의 type 값을 반환하며, 제출(submit) 버튼 요소의 경우 항상 문자열 "submit"을 반환합니다.
문법(Syntax)
Submit type 속성의 기본 문법은 다음과 같습니다.
submitObject.type
반환값
이 속성은 읽기 전용이며, 대상 input 요소가 type="submit"일 경우 항상 "submit"이라는 문자열을 반환합니다. 별도의 매개변수는 필요하지 않습니다.
예제(Example)
다음 예제는 버튼을 클릭했을 때 input submit 요소의 type 값을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Submit type 속성 예제</h1>
<form>
이름 <input type="text" id="NAME1" name="USERNAME">
<input type="submit" id="SUBMIT1">
</form>
<p>아래 버튼을 클릭하면 위 input 요소의 type 값을 확인할 수 있습니다.</p>
<button type="button" onclick="submitType()">type 확인</button>
<p id="Sample"></p>
<script>
function submitType() {
var P = document.getElementById("SUBMIT1").type;
document.getElementById("Sample").innerHTML = "input 필드의 type 값은: " + P;
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 텍스트 입력 필드와 제출 버튼이 포함된 폼이 화면에 표시됩니다.
"type 확인" 버튼을 클릭하면 자바스크립트가 SUBMIT1 요소의 type 속성값을 읽어와 아래와 같이 결과를 출력합니다.
input 필드의 type 값은: submit
동작 원리 설명
예제 코드의 흐름을 단계별로 살펴보면 다음과 같습니다.
- 폼 안에 type="text" 입력 필드와 type="submit" 버튼이 함께 배치되어 있습니다.
- "type 확인" 버튼을 클릭하면
submitType()함수가 호출됩니다. document.getElementById("SUBMIT1").type구문이 해당 요소의 type 값을 가져옵니다.- 가져온 값이
<p id="Sample">영역에 innerHTML로 삽입되어 사용자에게 표시됩니다.
브라우저 호환성
Input Submit type 속성은 Chrome, Edge, Firefox, Safari, Opera 등 주요 브라우저에서 모두 지원되므로, 별도의 폴리필 없이 안전하게 사용할 수 있습니다.
정리
HTML DOM의 Submit type 속성은 type="submit"인 input 요소의 유형을 확인할 때 사용하는 간단하지만 유용한 읽기 전용 속성입니다. 자바스크립트로 폼 요소를 동적으로 검증하거나 조작할 때 요소의 타입을 판별하는 용도로 활용할 수 있습니다.