form

설명

The form (<form>) HTML element represents a section of document that contains interactive controls that enable a user to submit information to a web server.

<FORM> 요소는 문서에 대화형(interactive)컨트롤을 포함하여 사용자가 서버에 데이터를 전송할 수 있게 한다.

대화형 컨트롤 : 서버와 클라이언트가 대화를 하듯 정보를 교환 하고 상호작용하여 웹페이지를 변화시킨다.

Usage Context

Permitted content	Flow content
Tag omission	None, both the opening and closing tags must be present
Permitted parent elements	Flow content, but with no contained <form> elementsSectioning content
Normative document	HTML5, section 4.10.3 (HTML4.01, section 17.3)

속성

이 요소는 전역속성을 지원한다.

accept - HTML4 Obsolete (HTML4부터 폐지)

A comma-separated list of content types that the server accepts.

서버가 수용하는 컨텐츠 타입/파일 형식들을 콤마','로 구분하여 나타낸다. 

참고 : This attribute has been removed in HTML5 and should no longer be used. Instead, use the accept attribute of the specific <input> element.

참고 : 이 속성은 HTML5에서 제거되었으며 더 이상 사용되지 않습니다. 대신, 특정 <input> 요소에서는 accept 속성을 사용합니다.

accept-charset

A list of character encodings that the server accepts. The list can be delimited by spaces or commas. The browser uses in the order in which they are listed. The default value is the reserved string "UNKNOWN", in which case the encoding corresponds to the encoding of the document containing the form element.
HTML 4: In previous versions of HTML, the different character encodings could be delimited by spaces or commas. This is no longer the case in HTML5, where only spaces are correct.

서버가 수용하는 문자 인코딩을 지정한다. 문자 인코딩의 종류는 공백이나 쉼표로 구분하여 나열할 수 있다. 브라우저는 문자인코딩이 설정된 곳 순서대로 사용한다. (form 요소를 포함하고있는 문서의 인코딩과 일치하는 인코딩일경우), 기본값은 예약어인 "UNKNOWN" 문자열 이다.
HTML 4: 이전 버전의 HTML에서는, 서로 다른 문자 인코딩이 공백이나 쉼표로 구분 될 수 있었지만 HTML5부터는 오직 공백으로만 구분이 가능하다.

action

The URI of a program that processes the information submitted via the form. This value can be overridden by a formaction attribute on a <button> or <input> element.

form(양식)을 통해 제출된 정보를 처리하는 프로그램이 있는 URI를 지정한다 (사용자가 입력한 데이터를 처리할 서버의 URI를 설정하는 것). 이 값은<button> 또는 <input> 요소에 쓰인 formaction 속성에 의해 덮혀 쓰일 수 있다. 

참고 : <input>의 formaction 속성

autocomplete - HTML5 (HTML5 전용)

Indicates whether controls in this form can by default have their values automatically completed by the browser. This setting can be overridden by an autocomplete attribute on an element belonging to the form. Possible values are:                                                                                                                                                                • off: The user must explicitly enter a value into each field for every use, or the document provides its own auto-completion method; the browser does not automatically complete entries.
 • on: The browser can automatically complete values based on values that the user has entered during previous uses of the form.

이 설정은 웹 브라우저에 의해 값이 자동으로 완성할 수 있는 지를 나타낸다. 다음의 값들로 설정이 가능 하다.:

  • off :  사용자가 직접 필드의 값을 작성해야한다. 또는 자체적으로 완성된 문서여야한다. 웹 브라우저에 의해 자동 완성 기능이 실행되지 않는다.
  • on :  사용자가 폼에 입력했던 값들을 바탕으로 웹 브라우저가 자동으로 값을 완성시킨다. 

 enctype

When the value of the method attribute is post, this attribute is the MIME type of content that is used to submit the form to the server. Possible values are:
 •application/x-www-form-urlencoded: The default value if the attribute is not specified.
 •multipart/form-data: Use this value if you are using an <input> element with the type attribute set to "file".
 •text/plain (HTML5)
 This value can be overridden by a formenctype attribute on a <button> or <input> element.

method 속성(사용자가 입력한 데이터를 전송하는 방법) 이 'post'일때,  이 속성은 서버에 데이터를 전송하기위한 MIME 타입을 지정한다. 다음의 값들로 설정이 가능하다:
 • application/x-www-form-urlencoded : (속성이 지정되어 있지 않은 경우) 기본값
 • multipart/form-data : <input> 요소의 형식을 "file"로 지정한 경우
• text/plain(HTML5) : 이 값은 <button> 또는 <input> 요소에 사용된 formemctype 속성에 의해 덮혀쓰일 수 있다.

참고 : <input>의 formenctype 속성

 method

The HTTP method that the browser uses to submit the form. Possible values are:
•post: Corresponds to the HTTP POST method ; the data from the form is included in the body of the form and is sent to the server.
 •get: Corresponds to the HTTP GET method; the data from the form are appended to the action attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
This value can be overridden by a formmethod attribute on a <button> or <input> element.

이 속성은 웹 브라우저가 form(양식)을 전송할때 쓰는 HTTP 전송 방식을 말한다.  사용 가능한 값은 다음과 같다:
 • post : HTTP POST 전송 방식과 일치한다; form 안의 데이터들이 form의 body에 포함되어 서버로 전송된다. 
 • get : HTTP GET 전송 방식과 일치한다; form 안의 데이터들이 action 속성에 지정된 URI에 '?'로 구분되어 덧붙혀지고, 그 덧붙혀진 URI가 서버에 전송된다.  양식에 오류가 없으며 오직 데이터가 ASCII문자로만 이루어졌을때 사용한다. 이 값은 <button> 또는 <input> 요소에 사용된 formmethod 속성에 의해 덮혀쓰여질 수 있다.

참고 : <input>의 formmethod 속성

 name

The name of the form. In HTML 4 its use is deprecated (id should be used instead). It must be unique among the forms in a document and not the empty string in HTML 5.

form(양식)의 이름을 설정한다. 이 속성의 사용은 HTML4에서 폐지예정이므로 'id'로 사용을 대체한다. HTML5에서는 문서상에서 form들의 name이 중복될 수 없고, name의 값으로 빈 문자열을 사용할 수 없다. 

novalidate - HTML5 (HTML5전용)

This Boolean attribute indicates that the form is not to be validated when it is submitted. If this attribute is missing (and therefore the form is validated), this default setting can be overridden by a formnovalidate attribute on a <button> or <input> element belonging to the form.

이 Boolean 속성은 form이 전송될때 유효성 검사를 거치지 않도록 설정한다. 예를들면, 모든 입력필드가 완전히 다 채워지지 않아도 폼의 전송이 가능케 한다. 이 속성이 명시되지 않으면(form은 유효화 된다), 이 기본값 설정이 <button>이나 <input>요소의 formnovalidate 속성으로 인해 덮여쓰일 수 있다. 

 참고 : <input>의 formnovalidate 속성

target

A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
•_self: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
 •_blank: Load the response into a new unnamed HTML 4 window or HTML5 browsing context.
 •_parent: Load the response into the HTML 4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
 •_top: HTML 4: Load the response into the full, original window, canceling all other frames.  HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
 HTML5: This value can be overridden by a formtarget attribute on a <button> or <input> element.

form(양식)을 전송한 뒤 서버로 부터 받은 응답을 띄울 곳을 설정하는 요소이다. HTML4에서 frame을 기준으로한 이름이나 키워드가 사용되었다면 HTML5에서는 브라우저의 맥락으로 한 이름이나 키워드를 사용한다(탭, 창, 인라인 프레임). 다음 키워드들은 특정한 의미를 갖는다:
•_self : 응답을 현재와 같은 프레임/같은창에 띄운다. 속성이 명시되지 않을 경우 이 설정을 기본값으로 같는다.
•_blank: 응답을 새 프레임셋/새 탭에 띄운다.
•_parent: 응답을 현재 프레임의 상위(부모) 프레임/ 현재창을 기준으로 부모창에 로드한다. 부모가 없는 경우, 이는 _self 처럼 작동한다.
•_top: HTML4의 경우, 다른 프레임을 무시하고 원래의 전체창에 띄운다. HTML5의 경우, 최상위창에서 로드한다. 부모가 없는 경우, 이는 _self처럼 작동한다. 단, 이값은 <butoon>이나 <input>요소에 사용된 formtarget 속성에 의해 덮혀쓰일 수 있다.

참고 : <input>의 formtarget 속성

예제

<!-- Simple form which will send a GET request -->
<form action="">
  Name: <input type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Simple form which will send a POST request -->
<form action="" method="post">
  Name: <input type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Form with fieldset, legend, and label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form> 

DOM Interface

This element implements the HTMLFormElement interface.

이 요소는  HTMLFormElement 인터페이스를 구현한다.

호환성

Desktop

기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	1.0	1.0 (1.7 or earlier)	지원	지원	지원
novalidate attribute	1.0	4.0 (2.0)

Mobile

기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원	지원	1.0 (1.0)	지원	지원	지원
novalidate attribute		4.0 (2.0)

참고

• https://developer.mozilla.org/en/HTML/Element/form
• Other elements that are used for creating forms: <button>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.