HTML DOM 입력 리셋 type 속성이란?
HTML DOM의 Input Reset type 속성은 type="reset"으로 설정된 input 요소와 관련된 속성입니다. 이 속성은 해당 입력 리셋 요소에 대해 항상 문자열 "reset"을 반환합니다.
문법(Syntax)
리셋 type 속성의 기본 문법은 다음과 같습니다.
resetObject.type
예제(Example)
다음 예제를 통해 리셋 type 속성의 사용 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input reset type Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>아래 버튼을 클릭하여 위 input 요소의 type을 확인해 보세요</p>
<button type="button" onclick="resetType()">GET Type</button>
<p id="Sample"></p>
<script>
function resetType() {
var P=document.getElementById("RESET1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"GET Type" 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제에서 수행되는 작업을 단계별로 자세히 살펴보겠습니다.
1. 리셋 버튼 생성
먼저 type="reset", id="RESET1"로 지정된 input 요소를 생성했습니다. 이 버튼을 클릭하면 폼에 입력된 데이터가 초기화됩니다. 이 버튼은 두 개의 텍스트 필드를 포함하는 폼 내부에 위치하며, 폼에는 인라인 스타일이 적용되어 있습니다.
<form style="border:solid 2px green;padding:2px"> UserName: <input type="text" id="USR"> <br> Location: <input type="text" id="Age"> <br><br> <input type="reset" id="RESET1"> </form>
2. type 확인 버튼 생성
그다음, 사용자가 클릭하면 resetType() 메서드를 실행하는 "GET Type" 버튼을 만들었습니다.
<button type="button" onclick="resetType()">GET Type</button>
3. JavaScript 로직 구현
resetType() 메서드는 getElementById() 메서드를 사용하여 input 요소를 가져온 뒤, 해당 요소의 type 속성 값을 변수 P에 할당합니다. 이후 innerHTML 속성을 통해 이 변수의 값을 id가 "Sample"인 단락에 출력합니다.
function getType() {
var P = document.getElementById("RESET1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is : "+P;
}