HTML DOM Button 유형 속성은 HTML
구문
다음은 −
의 구문입니다.버튼 유형 속성 설정 -
buttonObject.type = "submit|button|reset"
여기에서 submit|button|reset은 버튼 유형 값입니다. 제출은 기본적으로 설정되어 있습니다.
- 제출 - 버튼을 제출 버튼으로 만듭니다.
- 버튼 - 일반 클릭 가능한 버튼을 만듭니다.
- 재설정 - 양식 데이터를 재설정하는 재설정 버튼을 만듭니다.
예시
HTML DOM 버튼 유형 속성의 예를 살펴보겠습니다 -
<!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>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
세부 정보를 입력하고 CHANGE를 클릭하면 -
이제 제출을 클릭하십시오(이제 재설정됨) −
위의 예에서 -
먼저 두 개의 텍스트 필드와 데이터를 제출할 "제출" 유형의 버튼을 만들었습니다.
<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를 사용하여 버튼 요소를 가져오고 유형을 재설정하도록 설정합니다. 그러면 "Id" 샘플이 있는 단락에 변경 사항에 대한 메시지가 반영됩니다. 이제 제출 버튼을 클릭하면 재설정됩니다. 즉, 제출하는 대신 양식 데이터를 지웁니다. −
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}