HTML DOM의 버튼 type 속성은 HTML <button> 요소와 연관된 속성입니다. 기본적으로 button 요소는 type="submit" 값을 가지며, 따라서 폼 안에 있는 버튼을 클릭하면 해당 폼이 제출됩니다. 이 type 속성은 버튼의 유형을 설정하거나 반환하는 역할을 합니다.
문법(Syntax)
버튼 type 속성을 설정하는 문법은 다음과 같습니다.
buttonObject.type = "submit|button|reset"
여기서 submit|button|reset은 버튼 유형 값이며, 기본값은 submit입니다.
- submit − 버튼을 제출(submit) 버튼으로 만듭니다.
- button − 일반적인 클릭 가능한 버튼으로 만듭니다.
- reset − 폼 데이터를 초기화하는 리셋(reset) 버튼으로 만듭니다.
예제
HTML DOM 버튼 type 속성의 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>아래 CHANGE 버튼을 클릭하면 위 버튼의 유형이 "submit"에서 "reset"으로 변경됩니다.</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "Submit 버튼이 이제 reset 버튼입니다.";
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이름과 성을 입력한 뒤 CHANGE 버튼을 클릭하면 −
이후 Submit(현재는 reset으로 변경됨) 버튼을 클릭하면 −
예제 코드 분석
위 예제에서 수행되는 과정은 다음과 같습니다.
먼저 두 개의 텍스트 입력 필드와, 데이터를 제출하는 type="submit" 버튼을 생성했습니다.
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
그다음, 클릭 시 changeType() 함수를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeType()">CHANGE</button>
changeType() 함수는 id를 이용해 버튼 요소에 접근한 뒤, 해당 버튼의 type을 reset으로 변경합니다. 그리고 변경 사항을 알리는 메시지가 id가 "Sample"인 단락(<p>)에 표시됩니다. 이후 Submit 버튼을 클릭하면 더 이상 폼이 제출되지 않고, 폼 데이터가 초기화(clear)됩니다.
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "Submit 버튼이 이제 reset 버튼입니다.";
}