Skip to main content

Visit Mozilla.org

DOM:form

MDC

« Gecko DOM Reference

목차

[편집] HTML Form 요소 인터페이스

FORM 요소는 요소 절(section)에 기술된 다른 HTML 요소의 모든 프로퍼티와 메소드를 공유합니다. 또한 특수 인터페이스 HTMLFormElement도 있습니다.

이 인터페이스는 DOM을 써서 FORM 요소를 만들고 수정하는 방법을 제공합니다. 다음 예는 새 form 요소를 만들어 그 속성을 수정하고 제출(submit)하는 법을 보입니다. 

// form 만듦
var f = document.createElement("form");

// 문서 body에 추가
document.body.appendChild(f);

// action과 method 속성 추가
f.action = "/cgi-bin/some.cgi";
f.method = "POST"

// form의 submit 메소드 호출
f.submit();

게다가, 다음 완전한 HTML 문서는 form 요소에서 정보를 뽑아내고(extract) 그 속성 일부를 설정하는 법을 보입니다. 

<title>Form example</title>
<script type="text/javascript">
  function getFormInfo() {
    var info;

    // form 모음(collection)을 써서 reference 얻음
    var f = document.forms["formA"];
    info = "f.elements: " + f.elements + "\n"
         + "f.length: " + f.length + "\n"
         + "f.name: " + f.elements + "\n"
         + "f.acceptCharset: " + f.acceptCharset + "\n"
         + "f.action: " + f.action + "\n"
         + "f.enctype: " + f.enctype + "\n"
         + "f.encoding: " + f.encoding + "\n"
         + "f.method: " + f.method + "\n"
         + "f.target: " + f.target;
    document.forms["formA"].elements['tex'].value = info;
  }

  // form reference는 'this.form'을 쓰는
  // 버튼의 onclick 속성에서 건네짐
  function setFormInfo(f) {
    f.method = "GET";
    f.action = "/cgi-bin/evil_executable.cgi";
    f.name   = "totally_new";
  }
</script>

<h1>Form  example</h1>

<form name="formA" id="formA"
 action="/cgi-bin/test" method="POST">
 <p>Click "Info" to see information about the form.
    Click set to change settings, then info again
    to see their effect</p>
 <p>
  <input type="button" value="info"
   onclick="getFormInfo();">
  <input type="button" value="set"
   onclick="setFormInfo(this.form);">
  <input type="reset" value="reset">
  <br>
  <textarea id="tex" style="height:15em; width:20em">
 </p>
</form>

[편집] 프로퍼티

form.elements 
elements는 FORM 요소에 담긴 모든 form 컨트롤(control) 배열을 반환합니다.
form.length 
length는 FORM 요소의 컨트롤 수를 반환합니다.
form.name 
name은 현재 FORM 요소 이름을 문자열로 반환합니다.
form.acceptCharset 
acceptCharset은 현재 FORM 요소가 지원하는 문자 집합 목록을 반환합니다.
form.action 
action은 FORM 요소의 action을 get/set.
form.enctype 
enctype은 FORM 요소의 content 형을 get/set.
form.encoding 
encoding은 FORM 요소의 content 형을 get/set.
form.method 
method는 form에 제출하는 데 쓰이는 HTTP 메소드를 get/set.
form.target 
target은 action의 대상을 get/set (예컨대, 출력을 안에 표현할 frame).

[편집] 메소드

form.submit 
submit()은 form을 제출.
form.reset 
reset()은 form을 초기 상태로 다시 놓음.
원본 주소 "http://developer.mozilla.org/ko/docs/DOM:form"