mozilla
검색 결과

    form

    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을 초기 상태로 다시 놓음.

    문서 태그 및 공헌자

    Contributors to this page: Netaras, jsx, fscholz, teoli
    최종 변경: jsx,