차례
    1. 4.10
      1. 4.10.1 소개
        1. 4.10.1.1 사용자 인터페이스 작성
        2. 4.10.1.2 서버사이드 처리 구현
        3. 4.10.1.3 서버와 통신하도록 설정
        4. 4.10.1.4 클라이언트 사이드 유효성 검사
      2. 4.10.2 분류
      3. 4.10.3 The form element
      4. 4.10.4 The fieldset element
      5. 4.10.5 The legend element
      6. 4.10.6 The label element

4.10

4.10.1 소개

This section is non-normative.

폼은 텍스트 필드, 버튼, 체크박스, 범위 컨트롤, 색상 선택기 같은 폼 컨트롤들을 갖고 있는 웹 페이지의 컴포넌트입니다. 사용자는 그러한 폼과 상호작용하고, 서버에서 처리될 데이터를 제공할 수 있습니다(예를 들어 검색 결과라든가 계산값을 돌려주는 것을 말합니다). 대개의 경우 클라이언트 사이드 스크립트는 필요가 없지만, 사용자 경험을 증진시키거나, 또는 데이터를 서버로 보내지 않을 목적으로 사용할 수 있는 API들이 있습니다.

A form is a component of a Web page that has form controls, such as text fields, buttons, check boxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.

폼을 작성하는 것은 몇개의 단계로 구성되는데, 이 단계들의 순서는 중요하지 않습니다. 이러한 단계들은 사용자 인터페이스를 구성하는 것, 서버사이드 처리를 만드는 것, 그리고 사용자 인터페이스가 서버와 통신하도록 설정하는 것 들입니다.

Writing a form consists of several steps, which can be performed in any order: writing the user interface, implementing the server-side processing, and configuring the user interface to communicate with the server.

4.10.1.1 폼의 사용자 인터페이스 작성

This section is non-normative.

간단한 소개라는 목적에 맞게, 피자 주문 폼을 하나 만들어 보겠습니다.

For the purposes of this brief introduction, we will create a pizza ordering form.

모든 폼은 form 요소로 시작합니다. 그리고 그 안에 컨트롤들이 위치합니다. 대부분의 컨트롤은 input 요소로 표현되며, 이 요소는 기본값으로 한줄짜리 텍스트 필드를 제공합니다. 컨트롤에 이름을 붙이기 위해서는 label 요소를 사용합니다. 레이블 텍스트와 컨트롤 자신이 함께 label 요소 내부로 들어가게 됩니다. 폼의 각 부분들은 하나의 문단을 구성하며, 일반적으로 p 요소를 통해 서로 분리됩니다. 이러한 것들을 종합해 보면, 다음의 폼을 사용해서 고객의 이름을 요청할 수 있을 것입니다 :

Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements. Putting this together, here is how one might ask for the customer's name:

<form>
 <p><label>Customer name: <input></label></p>
</form>

사용자가 피자의 사이즈를 선택하도록 하기 위해, 라디오 버튼들을 사용할 수 있습니다. 라디오 버튼 역시 input 요소를 사용하는데, type 속성의 값을 radio 로 하면 됩니다. 라디오 버튼들이 그룹으로 동작하도록 하기 위해, 이들은 공통된 name 속성을 갖게 됩니다. 여러개의 컨트롤들 - 이 경우에는 라디오 버튼 - 을 그룹으로 묶고자 할 경우 fieldset 요소를 사용할 수 있습니다. 그러한 그룹의 제목은 filedset 요소의 첫번째 요소로 주어지는데, 그것은 legend 요소여야 합니다.

To let the user select the size of the pizza, we can use a set of radio buttons. Radio buttons also use the input element, this time with a type attribute with the value radio. To make the radio buttons work as a group, they are given a common name using the name attribute. To group a batch of controls together, such as, in this case, the radio buttons, one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
</form>

이전 단계에서의 변경점이 강조 표시되어 있습니다.

Changes from the previous step are highlighted.

토핑의 선택을 위해서는 체크박스를 사용할 수 있습니다. 체크박스 역시 input 요소를 사용하며, type 속성의 값으로 checkbox를 쓰게 됩니다 :

To pick toppings, we can use checkboxes. These use the input element with a type attribute with the value checkbox:

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

이 폼을 사용하게 될 피자 배달원은 늘상 실수를 하곤 합니다. 따라서 고객에게 연락할 방법이 필요합니다. 이 목적을 위해, 전화번호를 받을 컨트롤(input 요소를 사용하고, type의 값으로 tel을 사용합니다)과 이메일 주소를 받을 컨트롤(input 요소를 사용하고, type의 값으로 email을 사용합니다)을 사용할 것입니다.

The pizzeria for which this form is being written is always making mistakes, so it needs a way to contact the customer. For this purpose, we can use form controls specifically for telephone numbers (input elements with their type attribute set to tel) and e-mail addresses (input elements with their type attribute set to email):

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

type 속성을 time 으로 설정한 input 요소를 통해 배달 시간을 입력받을 수 있습니다. 이러한 폼 컨트롤의 대부분은 정확히 어떤 값을 받을것인지 정하는 속성들을 가지고 있습니다 : 이 경우, 관심의 대상이 되는 세가지 속성은 min, max, step 입니다. 이것들은 최소한의 시간, 최대한의 시간, 그리고 허용된 값 사이의 격차(초 단위로)입니다. 이 피자 배달원은 오전 11시부터 오후 9시까지 일하며, 15분 단위로밖에는 주문을 받지 않습니다. 이러한 내용을 다음과 같이 마크업할 수 있습니다 :

We can use an input element with its type attribute set to time to ask for a delivery time. Many of these form controls have attributes to control exactly what values can be specified; in this case, three attributes of particular interest are min, max, and step. These set the minimum time, the maximum time, and the interval between allowed values (in seconds). This pizzeria only delivers between 11am and 9pm, and doesn't promise anything better than 15 minute increments, which we can mark up as follows:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

textarea 요소를 사용해서 자유롭게 텍스트를 입력할 수 있는 필드를 제공합니다. 이 경우, 우리는 이것을 통해 고객이 추가적인 요청을 하는 공간을 마련할 것입니다.

The textarea element can be used to provide a free-form text field. In this instance, we are going to use it to provide a space for the customer to give delivery instructions:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
</form>

마지막으로, 이 폼을 제출할 수 있도록 button 요소를 사용합니다.

Finally, to make the form submittable we use the button element:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>E-mail address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
4.10.1.2 폼을 위한 서버사이드 처리 구현

This section is non-normative.

서버사이드 처리를 정확하게 기술하는 것은 이 명세의 초점을 벗어나는 일입니다. 우리의 목적인 간단한 소개를 위해, 우리는 이 서버사이드 스크립트가 https://pizza.example.com/order.cgi에 위치하며, application/x-www-form-urlencoded 형식으로 구성된 입력을 받아들이고, HTTP POST 본문 안에 다음의 변수들이 있을것이라고 가정합니다.

The exact details for writing a server-side processor are out of scope for this specification. For the purposes of this introduction, we will assume that the script at https://pizza.example.com/order.cgi is configured to accept submissions using the application/x-www-form-urlencoded format, expecting the following parameters sent in an HTTP POST body:

custname
고객이름
custtel
고객 전화번호
custemail
고객 이메일
size
피자 사이즈. small, medium, large 중 하나입니다.
toppings
토핑. 선택한 것마다 한번씩 명시됩니다. 선택할 수 있는 것은 베이컨, 치즈, 양파, 버섯입니다.
delivery
요청된 배달 시간입니다.
comments
기타 요청사항입니다.
4.10.1.3 폼이 서버와 통신하도록 설정

This section is non-normative.

폼의 제출은 다양한 방법으로 서버에 전달되는데, 그중 가장 흔한 것은 HTTP GET, 또는 HTTP POST 요청입니다. 어떤 방법을 택했는지 명시하기 위해, form 요소의 method 속성을 사용합니다. 이 설정은 값의 암호화 방법을 지정하지는 않습니다. 암호화 방법을 지정하기 위해서는 enctype 속성을 사용해야 합니다. 또한, 제출한 데이터를 처리할 서비스의 URL을 명시하기 위해 action 속성을 사용합니다.

Form submissions are exposed to servers in a variety of ways, most commonly as HTTP GET or POST requests. To specify the exact method used, the method attribute is specified on the form element. This doesn't specify how the form data is encoded, though; to specify that, you use the enctype attribute. You also have to specify the URL of the service that will handle the submitted data, using the action attribute.

제출하고자 하는 폼의 컨트롤들에 대해, 그 값의 이름을 정해주어야 합니다. 우리는 이미 라디오 버튼의 그룹에 대해 이름을 정한 바 있는데, 같은 속성인 name이 제출값의 이름이 됩니다. 라디오 버튼들은 제출시에 각각 다른 값 - value 속성의 값 - 들을 가짐으로서 서로 구별됩니다.

For each form control you want submitted, you then have to give a name that will be used to refer to the data in the submission. We already specified the name for the group of radio buttons; the same attribute (name) also specifies the submission name. Radio buttons can be distinguished from each other in the submission by giving them different values, using the value attribute.

다중 컨트롤들은 같은 이름을 가질 수 있습니다. 예를 들어, 여기의 체크박스들은 모두 같은 이름을 가지고 있습니다. 서버는 그 이름으로 보내어진 값을 해석해서 어떤 체크박스들이 체크되었었는지 알 수 있습니다. 라디오 버튼들과 같이, 이것들 역시 value 속성의 값을 통해 고유한 값을 가집니다.

Multiple controls can have the same name; for example, here we give all the checkboxes the same name, and the server distinguishes which checkbox was checked by seeing which values are submitted with that name — like the radio buttons, they are also given unique values with the value attribute.

앞 섹션에서 얻었던 세팅들을 포함해서, 다음과 같이 만들어집니다 :

Given the settings in the previous section, this all becomes:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button><p>
</form>

예를 들어, 고객의 이름이 "Denise Lawrence" 이고, 전화번호는 "555-321-8642"이며, 이메일 입력란은 비워두었고, 중간 크기의 피자에 익스트라 치즈/버섯 토핑을 오후 7시에 배달해달라고 주문하였으며 추가요청 란은 비워두었다고 가정합니다. 그렇다면 사용자 에이전트는 다음과 같은 내용을 전송하게 될 것입니다 :

For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their telephone number, did not specify an e-mail address, asked for a medium-sized pizza, selected the Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery instructions text field blank, the user agent would submit the following to the online Web service:

custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
4.10.1.4 클라이언트 사이드 폼 유효성 검사

This section is non-normative.

사용자 에이전트가 폼을 전송하기 전에 사용자의 입력 내용을 점검해보도록 폼을 작성할 수 있습니다. 물론 서버는 여전히 입력값이 정확한지 체크해봐야 하지만(악의적인 사용자가 폼 점검을 우회할 수 있으므로), 값의 유효성을 체크하는 것이 서버 하나뿐일 경우 발생될 수 있는 지연시간을 줄일 수 있습니다.

Forms can be annotated in such a way that the user agent will check the user's input before the form is submitted. The server still has to verify the input is valid (since hostile users can easily bypass the form validation), but it allows the user to avoid the wait incurred by having the server be the sole checker of the user's input.

가장 간단한 점검은 required 속성입니다. 이 속성을 input 요소에 사용해서, 요소에 값이 입력되지 않으면 폼을 전송하지 않을 것이라는 것을 나타낼 수 있습니다. 이 속성을 고객이름과 배달시간 필드에 추가함으로서, 고객이 그 필드를 비운채로 폼을 전송하려고 할 때 사용자 에이전트가 고객에게 그 사실을 알려주도록 할 수 있습니다.

The simplest annotation is the required attribute, which can be specified on input elements to indicate that the form is not to be submitted until a value is given. By adding this attribute to the customer name and delivery time fields, we allow the user agent to notify the user when the user submits the form without filling in those fields:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button><p>
</form>

maxlength 속성을 사용해서 입력값의 길이를 제한할수도 있습니다. 우리는 이 속성을 textarea 요소에 사용해서, 고객이 1000 글자 이상은 입력하지 못하도록 제한할 것입니다. 고객은 추가요청 란에 장문의 수필을 기고하지 못하게 될 것이고, 바쁜 피자 배달원은 핵심에 집중할 수 있게 될 것입니다.

It is also possible to limit the length of the input, using the maxlength attribute. By adding this to the textarea element, we can limit users to 1000 characters, preventing them from writing huge essays to the busy delivery drivers instead of staying focused and to the point:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>E-mail address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button><p>
</form>

4.10.2 분류

다분히 관습적인 이유들 때문에, 이 섹션의 요소들은 몇가지 중첩되는(하지만 미묘하게 다른) 카테고리들로 분류될 것입니다.

Mostly for historical reasons, elements in this section fall into several overlapping (but subtly different) categories in addition to the usual ones like flow content, phrasing content, and interactive content.

이 요소들 중 상당수는 폼 관련 요소들입니다. 즉 이것들은 폼 소유자를 가질 수 있으며, 그것을 드러내기 위해, 일치하는 폼 IDL 속성을 갖는 폼 내용 속성을 갖습니다.

A number of the elements are form-associated elements, which means they can have a form owner and, to expose this, have a form content attribute with a matching form IDL attribute.

폼 관련 요소들은 몇가지 부속 카테고리들로 나뉘어집니다 :

The form-associated elements fall into several subcategories:

목록화된 요소Listed elements

form.elements와 fieldset.elements에 나열된 요소들을 나타냅니다.

Denotes elements that are listed in the form.elements and fieldset.elements APIs.

레이블을 붙일 수 있는 요소Labelable elements

label 요소와 관련될 수 있는 요소들을 나타냅니다.

Denotes elements that can be associated with label elements.

제출할 수 있는 요소Submittable elements

폼 요소들이 제출될 때 폼 데이터 셋을 구성하기 위해 사용할 수 있는 요소들을 나타냅니다.

Denotes elements that can be used for constructing the form data set when a form element is submitted.

리셋할 수 있는 요소Resettable elements

폼 요소가 리셋될 때 영향을 받을 수 있는 요소들을 나타냅니다.

Denotes elements that can be affected when a form element is reset.

이에 더해, 몇가지 제출가능한 요소들은, 그 속성에 따라, button이 될 수 있습니다. 아래의 산문은 요소가 버튼인 경우를 정의합니다. 일부 버튼들은 특수한 제출 버튼들입니다.

In addition, some submittable elements can be, depending on their attributes, buttons. The prose below defines when an element is a button. Some buttons are specifically submit buttons.

object 요소 역시 폼 관련 요소이며, 적절한 플러그인을 사용한다면 폼 제출에 포함될 수 있습니다.

The object element is also a form-associated element and can, with the use of a suitable plugin, partake in form submission.

4.10.3 The form element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것:Content model

플로우 컨텐츠. 하지만 form 요소를 자손으로 포함할수는 없습니다.

Flow content, but with no form element descendants.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
accept-charset
action
autocomplete
enctype
method
name
novalidate
target
DOM interface:
[OverrideBuiltins]
interface HTMLFormElement : HTMLElement {
           attribute DOMString acceptCharset;
           attribute DOMString action;
           attribute DOMString autocomplete;
           attribute DOMString enctype;
           attribute DOMString encoding;
           attribute DOMString method;
           attribute DOMString name;
           attribute boolean noValidate;
           attribute DOMString target;

  readonly attribute HTMLFormControlsCollection elements;
  readonly attribute long length;
  caller getter any (in unsigned long index);
  caller getter any (in DOMString name);

  void submit();
  void reset();
  boolean checkValidity();

  void dispatchFormInput();
  void dispatchFormChange();
};

form 요소는 폼과 관련된 요소들의 집합을 나타냅니다. 그중 일부는 서버에 전송하여 처리할, 변경가능한 값을 나타냅니다.

The form element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.

accept-charset 속성은 제출시 사용할 문자 인코딩을 제시합니다. 명시되었다면, 그 값은 스페이스로 구분된 순서 있는 예약어들이어야 하며, 각각의 예약어들은 ASCII 기준 대소문자를 구분합니다. 이 값은 IANACharset에 제시된 아스키 호환 문자인코딩의 마임 이름과 매치되어야 합니다.

The accept-charset attribute gives the character encodings that are to be used for the submission. If specified, the value must be an ordered set of unique space-separated tokens that are ASCII case-insensitive, and each token must be an ASCII case-insensitive match for the preferred MIME name of an ASCII-compatible character encoding. [IANACHARSET]

name 속성은 폼의 집합 내에서 폼의 이름을 나타냅니다. 이 값은 빈 문자열일 수 없으며, 폼을 구성하는 요소들의 이름 중에서 유일해야 합니다.

The name attribute represents the form's name within the forms collection. The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any.

autocomplete 속성은 나열 속성입니다. 이 속성은 두가지의 상태를 가집니다. on 키워드는 on 상태를 나타내며, off 키워드는 off 상태를 나타냅니다. 속성은 생략될 수 있습니다. 값을 명시하지 않았을 경우의 기본값은 on 입니다. off 상태는, 기본적으로, 폼 내의 input 요소들이 자동완성 상태를 off로 가지는 것을 나타냅니다. on은 물론 반대입니다.

The autocomplete attribute is an enumerated attribute. The attribute has two states. The on keyword maps to the on state, and the off keyword maps to the off state. The attribute may also be omitted. The missing value default is the on state. The off state indicates that by default, input elements in the form will have their resulting autocompletion state set to off; the on state indicates that by default, input elements in the form will have their resulting autocompletion state set to on.

action, enctype, method, novalidate, target 속성들은 폼 제출을 위한 속성들입니다.

The action, enctype, method, novalidate, and target attributes are attributes for form submission.

form . elements

폼에 포함되어 있는 컨트롤들의 HTMLCollection을 반환합니다. (이미지 버튼들은 제외됩니다.)

Returns an HTMLCollection of the form controls in the form (excluding image buttons for historical reasons).

form . length

폼에 포함된 컨트롤들의 갯수를 반환합니다. (이미지 버튼들은 제외됩니다.)

Returns the number of form controls in the form (excluding image buttons for historical reasons).

form[index]
form(index)

폼의 index번째 요소를 반환합니다. (이미지 버튼들은 제외됩니다.)

Returns the indexth element in the form (excluding image buttons for historical reasons).

form[name]
form(name)

주어진 ID, 혹은 이름으로 폼 요소를 찾아서 반환합니다 (이미지 버튼들은 제외됩니다.)

Returns the form control in the form with the given ID or name (excluding image buttons for historical reasons).

요소가 특정한 이름으로 참조되었다면, 그 이름은 이 메서드에서 그 요소를 찾기 위해 계속해서 사용되어질 수 있는데, 설령 그 요소의 ID나 이름이 바뀌었더라도 그 문서 내에 존재하는 한 그렇습니다.

Once an element has been referenced using a particular name, that name will continue being available as a way to reference that element in this method, even if the element's actual ID or name changes, for as long as the element remains in the Document.

복수의 요소가 일치한다면, NodeList 객체를 반환합니다. 객체는 일치하는 모든 요소를 포함합니다.

If there are multiple matching items, then a NodeList object containing all those elements is returned.

일치하는 요소가 없을 경우 null을 반환합니다.

Returns null if no element with that ID or name could be found.

form . submit()

폼을 제출합니다.

Submits the form.

form . reset()

폼을 리셋합니다.

Resets the form.

form . checkValidity()

폼의 모든 요소가 유효하다면 true를 반환합니다.

Returns true if the form's controls are all valid; otherwise, returns false.

form . dispatchFormInput()

폼의 모든 컨트롤에 forminput 이벤트를 보냅니다.

Dispatches a forminput event at all the form controls.

form . dispatchFormChange()

폼의 모든 컨트롤에 formchange 이벤트를 보냅니다.

Dispatches a formchange event at all the form controls.

The autocomplete IDL attribute must reflect the content attribute of the same name, limited to only known values.

The name IDL attribute must reflect the content attribute of the same name.

The acceptCharset IDL attribute must reflect the accept-charset content attribute.


The elements IDL attribute must return an HTMLFormControlsCollection rooted at the Document node, whose filter matches listed elements whose form owner is the form element, with the exception of input elements whose type attribute is in the Image Button state, which must, for historical reasons, be excluded from this particular collection.

The length IDL attribute must return the number of nodes represented by the elements collection.

The supported property indices at any instant are the indices supported by the object returned by the elements attribute at that instant.

When a form element is indexed for indexed property retrieval, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its argument.

Each form element has a mapping of names to elements called the past names map. It is used to persist names of controls even when they change names.

The supported property names are the union of the names currently supported by the object returned by the elements attribute, and the names currently in the past names map.

When a form element is indexed for named property retrieval, the user agent must run the following steps:

  1. If name is one of the supported property names of the object returned by the elements attribute, then run these substeps:

    1. Let candidate be the object returned by the namedItem() method on the object returned by the elements attribute when passed the name argument.

    2. If candidate is an element, then add a mapping from name to candidate in the form element's past names map, replacing the previous entry with the same name, if any.

    3. Return candidate and abort these steps.

  2. Otherwise, name is the name of one of the entries in the form element's past names map: return the object associated with name in that map.

If an element listed in the form element's past names map is removed from the Document, then its entries must be removed from the map.


The submit() method, when invoked, must submit the form element from the form element itself, with the scripted-submit flag set.

The reset() method, when invoked, must run the following steps:

  1. If the form element is marked as locked for reset, then abort these steps.

  2. Mark the form element as locked for reset.

  3. Reset the form element.

  4. Unmark the form element as locked for reset.

If the checkValidity() method is invoked, the user agent must statically validate the constraints of the form element, and return true if the constraint validation return a positive result, and false if it returned a negative result.

If the dispatchFormInput() method is invoked, the user agent must broadcast forminput events from the form element.

If the dispatchFormChange() method is invoked, the user agent must broadcast formchange events from the form element.

이 예제는 두개의 검색 폼을 보여줍니다:

This example shows two search forms:

<form action="http://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="http://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

4.10.4 The fieldset element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
섹션 루트Sectioning root
목록화된 폼 관련 요소Listed form-associated element.
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 올 수 있는 곳

Where flow content is expected.

이 요소가 포함할 수 있는 것:Content model

선택적으로, legend 요소. 그 다음에 플로우 컨텐츠가 옵니다.

Optionally a legend element, followed by flow content.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
disabled
form
name
DOM interface:
interface HTMLFieldSetElement : HTMLElement {
           attribute boolean disabled;
  readonly attribute HTMLFormElement form;
           attribute DOMString name;

  readonly attribute DOMString type;

  readonly attribute HTMLFormControlsCollection elements;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);
};

fieldset 요소는 공통적인 이름으로 그룹화 된(이 그룹화는 선택적입니다)폼 컨트롤 집합을 나타냅니다.

The fieldset element represents a set of form controls optionally grouped under a common name.

그룹의 이름은 fieldset 요소의 자식 요소중 첫번째 legend 요소로 주어집니다. 나머지 자식 요소들은 그룹을 형성합니다.

The name of the group is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

disabled 속성은 해당 fieldset 요소의 모든 자식 요소들을 비활성화합니다. 단 fieldset 요소의 첫번째 legend 요소의 자손 요소는 제외됩니다.

The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled.

form 속성은 fieldset 요소를 그 폼 소유자와 명시적으로 연관시키기 위하여 사용됩니다. name 속성이 요소의 이름을 나타냅니다.

The form attribute is used to explicitly associate the fieldset element with its form owner. The name attribute represents the element's name.

fieldset . type

문자열 "fieldset" 을 반환합니다.

Returns the string "fieldset".

fieldset . elements

요소에 포함된 HTMLCollection 을 반환합니다.

Returns an HTMLCollection of the form controls in the element.

The disabled IDL attribute must reflect the content attribute of the same name.

The type IDL attribute must return the string "fieldset".

The elements IDL attribute must return an HTMLFormControlsCollection rooted at the fieldset element, whose filter matches listed elements.

The willValidate, validity, and validationMessage attributes, and the checkValidity() and setCustomValidity() methods, are part of the constraint validation API. The form and name IDL attributes are part of the element's forms API.

Constraint validation: fieldset elements are always barred from constraint validation.

아래 예제는 fieldset이 활성화될지 비활성화될지를 결정하는 체크박스를 포함하는 legend 요소를 가진 필드셋을 보여줍니다. 필드셋의 내용은 두개의 필수 텍스트 필드와, 선택적인 년/월 컨트롤을 포함하고 있습니다.

The following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled. The contents of the fieldset consist of two required text fields and an optional year/month control.

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

fieldset 요소를 중첩할수도 있습니다. 위 예제를 그렇게 중첩한 것입니다.

You can also nest fieldset elements. Here is an example expanding on the previous one that does so:

<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <fieldset name="numfields">
  <legend> <label>
   <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked">
   My card has numbers on it
  </label> </legend>
  <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 </fieldset>
 <fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype onchange="form.letfields.disabled = !checked">
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
 </fieldset>
</fieldset>

이 예제에서는, 바깥쪽의 "Use Club Card" 체크박스가 체크되어 있지 않다면, 그 fieldset 내부의 모든것 - 라디오버튼 2개를 포함해서 - 들이 비활성화될 것입니다. 그 체크박스가 체크되면, 두개의 라디오버튼 모두가 활성화되면서 안쪽의 fieldset 중 어떤 것을 활성화할지 정할 수 있게 됩니다.

In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the outer fieldset, including the two radio buttons in the legends of the two nested fieldsets, will be disabled. However, if the checkbox is checked, then the radio buttons will both be enabled and will let you select which of the two inner fieldsets is to be enabled.

4.10.5 The legend element

요소가 속하는 범주Categories
없음None
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

fieldset 요소의 첫번째 자식 요소

As the first child of a fieldset element.

이 요소가 포함할 수 있는 것:Content model
구문 컨텐츠Phrasing content
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
DOM interface:
interface HTMLLegendElement : HTMLElement {
  readonly attribute HTMLFormElement form;
};

legend 요소는 부모인 fieldset 요소의 내용에서 자신을 제외한 부분에 대한 캡션을 나타냅니다.

The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any.

legend . form

요소의 form 요소가 있다면 그것을 반환합니다. 없다면, null을 반환합니다.

Returns the element's form element, if any, or null otherwise.

The form IDL attribute's behavior depends on whether the legend element is in a fieldset element or not. If the legend has a fieldset element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that fieldset element. Otherwise, it must return null.

4.10.6 The label element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
대화형 컨텐츠Interactive content
폼 관련 요소Form-associated element.
이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

구문 컨텐츠가 사용될 수 있는 곳

Where phrasing content is expected.

이 요소가 포함할 수 있는 것:Content model

구문 컨텐츠. 하지만 그러한 것은 자손으로 레이블을 붙일 수 있는 폼 연관 요소를 포함할 수 없는데, label 요소가 가리키는 컨트롤이며 다른 label 자손요소를 포함하지 않았다면 그러한 경우는 예외입니다.

Phrasing content, but with no descendant labelable form-associated elements unless it is the element's labeled control, and no descendant label elements.

요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
form
for
DOM interface:
interface HTMLLabelElement : HTMLElement {
  readonly attribute HTMLFormElement form;
           attribute DOMString htmlFor;
  readonly attribute HTMLElement control;
};

label 요소는 사용자 인터페이스에서 캡션을 나타냅니다. 이 캡션은 특정한 폼 컨트롤에 연결될 수 있는데 - 이 컨트롤은 label 요소의 레이블된 컨트롤이라 칭합니다 - for 속성을 사용하거나, 또는 컨트롤을 label 요소 내부로 이동시키는 방법을 사용할 수 있습니다.

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.

Except where otherwise specified by the following rules, a label element has no labeled control.

for 속성을 사용해서 폼 컨트롤을 캡션과 연결할 수 있습니다. 속성의 값은 레이블을 붙일 수 있는 폼 관련 요소ID여야 하고, label 요소와 같은 Document에 속해야 합니다.

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable form-associated element, then that element is the label element's labeled control.

If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control.

The label element's exact default presentation and behavior, in particular what its activation behavior might be, if anything, should match the platform's label behavior.

For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

On other platforms, the behavior might be just to focus the control, or do nothing.

label . control

이 요소와 연관된 폼 컨트롤을 반환합니다.

Returns the form control that is associated with this element.

form 속성은 label 요소와 그 폼 소유자를 명시적으로 연결하기 위하여 사용됩니다.

The form attribute is used to explicitly associate the label element with its form owner.

The htmlFor IDL attribute must reflect the for content attribute.

The control IDL attribute must return the label element's labeled control, if any, or null if there isn't one.


control . labels

폼 컨트롤과 연관된 모든 label 요소들의 NodeList를 반환합니다.

Returns a NodeList of all the label elements that the form control is associated with.

Labelable form-associated elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable form-associated elements, on getting, must return that NodeList object.

The form IDL attribute is part of the element's forms API.

다음의 예제는 세개의 폼 컨트롤을 보여줍니다. 세가지 모두 레이블을 갖고 있으며, 두개는 작은 텍스트를 사용해서 사용자가 입력할 올바른 서식을 나타내고 있습니다.

The following example shows three form controls each with a label, two of which have small text showing the right format for users to use.

<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p>
<p><label>Age: <input name=age type=number min=0></label></p>
<p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>