HTML DOM의 Input Submit 객체는 <input> 요소 중 type 속성값이 "submit"인 요소와 연결됩니다. 새로운 제출 버튼을 생성할 때는 createElement() 메서드를 사용하고, 이미 존재하는 요소에 접근할 때는 getElementById() 메서드를 활용합니다.
Input Submit 객체의 주요 속성
Input Submit 객체에서 사용할 수 있는 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autofocus | 페이지가 로드될 때 제출 버튼이 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다. |
| defaultValue | 제출 버튼의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | 제출 버튼이 비활성화되어 있는지 여부를 설정하거나 반환합니다. |
| form | 제출 버튼이 포함된 폼(form)에 대한 참조를 반환합니다. |
| formAction | 제출 버튼의 formaction 속성값을 설정하거나 반환합니다. |
| formEnctype | 제출 버튼의 formenctype 속성값을 설정하거나 반환합니다. |
| formMethod | 제출 버튼의 formmethod 속성값을 설정하거나 반환합니다. |
| formNoValidate | 폼 데이터를 제출할 때 유효성 검사를 수행하지 않도록 설정하거나 해당 여부를 반환합니다. |
| formTarget | 제출 버튼의 formtarget 속성값을 설정하거나 반환합니다. |
| name | 제출 버튼의 name 속성값을 설정하거나 반환합니다. |
| type | 제출 버튼이 속한 폼 요소의 타입을 반환합니다. |
| value | 제출 버튼의 value 속성값을 설정하거나 반환합니다. |
문법(Syntax)
Input Submit 객체를 생성하는 기본 문법은 다음과 같습니다.
var P = document.createElement("INPUT");
P.setAttribute("type", "submit");예제(Example)
아래 예제를 통해 Input Submit 객체 속성의 실제 동작을 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function rangeCreate() {
var S = document.createElement("INPUT");
S.setAttribute("type", "submit");
document.body.appendChild(S);
}
</script>
</head>
<body>
<h1>Input submit 객체</h1>
<p>아래 버튼을 클릭하면 input submit 버튼이 생성됩니다.</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭하면 새로운 제출 버튼이 화면에 추가됩니다.
