ELEMENTS

Editing
  • account_tree
  • bug_report

<form>

사용자로부터 정보를 입력 받는 양식을 작성하는 양식 그룹을 나타낸다. 양식 요소에 입력된 값은 서버에 전송될 수 있으며 자체적으로 사용하기도 한다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    FLOW CONTENT

    플로우 콘텐츠(flow content)가 예상되는 위치

  • 콘텐츠 모델

    플로우 콘텐츠(flow content)이지만 하위에 다른 <form> 요소가 없어야 한다.

  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLFormElement

    [Exposed=Window,
     LegacyOverrideBuiltIns,
     LegacyUnenumerableNamedProperties]
    interface HTMLFormElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute DOMString acceptCharset;
      [CEReactions] attribute USVString action;
      [CEReactions] attribute DOMString autocomplete;
      [CEReactions] attribute DOMString enctype;
      [CEReactions] attribute DOMString encoding;
      [CEReactions] attribute DOMString method;
      [CEReactions] attribute DOMString name;
      [CEReactions] attribute boolean noValidate;
      [CEReactions] attribute DOMString target;
      [CEReactions] attribute DOMString rel;
      [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
    
      [SameObject] readonly attribute HTMLFormControlsCollection elements;
      readonly attribute unsigned long length;
      getter Element (unsigned long index);
      getter (RadioNodeList or Element) (DOMString name);
    
      undefined submit();
      undefined requestSubmit(optional HTMLElement? submitter = null);
      [CEReactions] undefined reset();
      boolean checkValidity();
      boolean reportValidity();
    };

구문

마크업 형식
<form></form>
Example

애트리뷰트

accept-charset character encoding선택

양식(form)을 제출할 때 사용되는 문자 인코딩을 지정한다.

이 요소에서의 특징

필요한 경우 공백으로 구분된 복수의 문자 인코딩을 지정할 수도 있다. 일반적으로 생략하여 양식(form)을 포함한 문서의 기본 문자 인코딩을 사용한다.

기본값

문서의 문자셋 인코딩

사용 예

<form accept-charset="UTF-8">
</form>
action non-empty URL potentially surrounded by spaces선택

양식을 제출할 URL을 지정한다. 즉 작성된 데이터를 받아서 처리하는 서버 로직이 위치하는 URL을 의미한다.

About Non-empty URL potentially surrounded by spaces

문자열에서 선행 및 후행 ASCII 공백을 제거한 후 유효한 비공백 URL인 경우 문자열은 공백으로 둘러싸일 수 있는 유효한 비공백 URL을 나타낸다.

사용 예

<form action="/process/register.php">
</form>
autocomplete keywords and enumerated attributes선택

양식(form) 내에 있는 입력 요소들의 자동 채우기 설정을 지정한다. 자동 채우기는 다음과 같이 두 가지 방식이 가능하다.

자동 완성 기대 맨틀(autofill expectation mantle)
사용자로부터 예상되는 입력을 나타낸다. 설정하는 방법은 on 키워드는 활성되고 off 키워드는 비활성된다. 생략될 수 있으며 생략되거나 유효하지 않은 경우에 기본값은 on이다. type 애트리뷰트가 hidden이 아닌 경우 사용된다.
자동 완성 앵커 맨틀(autofill anchor mantle)
주어진 값의 의미를 설명한다. 자동 완성 세부 토큰으로 구성된 공백으로 구분된 토큰의 정렬된 집합인 값을 가져야 한다. onoff 키워드는 사용할 수 없다. type 애트리뷰트가 hidden인 경우 사용된다.

지금까지의 내용은 HTML Standard 표준 사양에 나와있는 내용이지만 자동 완성 앵커 맨틀(autofill anchor mentle)에 대해 다음과 같은 이슈가 있다.

  • typehidden인 요소에게 자동 완성 기능 적용이 올바른가? [open issue]
  • 유저 에이전트에서의 동작 지원 여부가 명확하지 않다.

현재로서는 이 이슈에 대해 앞으로 시간을 두고 확인이 필요해 보이며 일반적인 자동 완성 기능인 자동 완성 기대 맨틀(autofill expectation mantle)의 구현을 위한 애트리뷰트라고 보는 편이 나을 것 같다.

기본값

on

사용 예

<form autocomplete="off">
</form>
enctype keywords and enumerated attributes선택

양식(form)을 서버에 전송할 때 전송되는 데이터의 인코딩(MIME) 유형을 지정한다.

기본값

application/x-www-form-urlencoded

사용되는 키워드

application/x-www-form-urlencoded

양식 전송의 기본 유형이다. 텍스트를 인코딩(encoding)하여 전송한다. 공백은 +, 알파벳과 숫자가 아닌 특수 문자들은 모두 퍼센트 인코딩(percent encoding)을 한다.

양식 예
<form>
  <input type="text" name="name" value="Eric Clapton">
  <input type="text" name="formula" value="a + b == 13%!">
</form>
인코딩(encodeing)하여 전송하는 형식
name=Eric%20Clapton&formula=a%20%2B%20b%20%3D%3D%2013%25%21
multipart/form-data

데이터 전송시 텍스트를 포함하여 바이너리(binary) 데이터를 함께 전송한다. 문자열은 인코딩(encoding)하지 않고 바이너리(binary) 데이터와 함께 헤더(header)에 포함하여 전송한다.

GET 방식으로 전송할 수 없으며 POST 방식으로만 가능하다.

text/plain

텍스트만 전송이 가능하며 공백만 +로 인코딩한다.

method enumerated attribute선택

양식(form)을 서버에 전송할 때 전송 방식을 지정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

기본값

GET

사용되는 키워드

dialog

양식(form)이 있는 <dialog> 요소에서 지정할 수 있으며 사용자가 누른 전송 버튼에 따라 처리를 분기하고자 할 때 사용할 수 있다.

사용자가 누른 전송 버튼의 값은 HTMLDialogElement 인터페이스의 returnValue 프로퍼티로 접근이 가능하다.

GET

양식(form)의 action URL 뒤에 붙여 쿼리 스트링(query string) 형식으로 전송한다. 기본 URL을 포함하여 최대 255개의 문자를 전송할 수 있다.

데이터가 노출되어 전송이 되기 때문에 보안에 취약하니 보안이 필요한 데이터는 절대 피한다. 캐시(cache)가 되므로 재전송이 가능하며 똑같은 결과를 가져온다. URL의 일부이기 때문에 특정 데이터에 따라 차별되는 웹페이지를 호출할 수 있다.

POST

전송 프로토콜(protocol)의 헤더(header)에 정해진 규약에 따라 데이터가 포함되어 전송된다. 외부에 직접적으로 노출되지 않기 때문에 GET 방식보다는 보안이 덜 취약하다. 바이너리(binary) 데이터를 전송할 수 있는 환경을 제공하기 때문에 파일을 전송하고자 할 때는 enctypemultipart/form-data로 설정하면 된다.

GET과 달리 캐시(cache)가 안되며 재전송을 암묵적(보통 유저 에이전트의 확인 절차가 있으나 절대 금지가 아님)으로 금지하지만 정상적인 재전송이 이루어지는 경우 중복처리가 될 수 있으므로 재전송을 방지하는 인터페이스가 필요하다.

name non empty string선택

요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox"> 요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.

<form> 요소에서 name 애트리뷰트가 HTML5에서 폐기되었다. 대신에 id 애트리뷰트를 식별값으로 사용한다.
About Non empty string

비워있지 않는 문자열을 나타낸다.

이 요소에서의 특징

양식(form)의 식별 이름을 지정한다.

novalidate boolean attributes선택

양식(form)을 서버에 전송시 입력된 데이터에 대한 유효성 검사를 하지 않는다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

이 요소에서의 특징

<form> 요소에서의 명시는 하위의 모든 입력 요소들의 유효성 검증을 하지 않겠다는 의미를 갖는다. 요소가 아닌 하위 입력 요소에서 개별적으로 유효성 검증을 우회할 수도 있다.

사용 예

<form novalidate>
</form>
target navigable target names or keywords

하이퍼링크 또는 기타 연결을 설정하는 경우 연결된 리소스를 여는 방식을 지정한다.

이 요소에서의 특징

양식(form)의 데이터를 최종적으로 전송할 때 action 애트리뷰트에 설정된 URL을 여는 방법을 설정한다.

현대의 웹에서 양식(form)의 전송은 전통적인 방식인 처리 페이지 호출이 아닌 유저 에이전트의 백그라운드에서 비동기적으로 전송되는 방식(AJAX)을 사용한다. 따라서 특별한 경우 이외에 target 애트리뷰트의 역할은 없다고 볼 수 있다.

기본값

_self
자신의 창(프레임)에서 연결될 리소스를 연다.

사용되는 키워드

_blank

새로 생성한 창(또는 탭)에 보여준다.

_parent

현재 페이지가 프레임 안에 존재하는 경우 부모 프레임(창)에서 보여준다.

_self

현재 창에서 보여준다.

_top

현재 문서가 프레임 안에 존재하는 경우를 포함하여 다수의 프레임이 연관되어 있다면 최상위 프레임(창)에서 보여준다.

rel unordered set of unique space-separated tokens

리소스를 연결하는 경우 관계를 정의한다. 연결 유형은 지정된 값을 공백으로 구분한 리스트로 작성해야 한다. 그러나 특별히 명시된 경우를 제외하고는 두 번 이상 지정할 수 없다.

About Unordered set of unique space-separated tokens

순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.

이 요소에서의 특징

target 애트리뷰트에서 언급한 것 처럼 현대의 웹은 양식(form) 처리 페이지가 사용자가 직접적으로 인지하지 못하는 방식으로 동작한다. 따라서 rel 애트리뷰트 역시 현대의 웹에서는 역할은 없다고 볼 수 있다.

사용되는 키워드

alternte

사용되는 요소가 <link>이고 stylesheet 키워드가 설정된 경우라면 추가적으로 alternate 키워드를 지정하는 경우 대체 스타일 시트로 연결된다. 이 경우 빈 문자열 값을 허용하지 않으며 유효한 값을 가진 title 애트리뷰트가 반드시 존재해야 한다.

일반적으로 외부의 CSS 파일을 연결할 때 <link> 요소를 사용하므로 주로 위와 같은 경우처럼 alternate가 사용된다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

author

작성자에 대한 정보 및 작성자와 연락 가능한 연락처 정보가 담긴 페이지로 연결되는 하이퍼링크로 정의한다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

bookmark

가장 가까운 조상 <article> 요소에 대해 퍼머링크(permalink)를 제공하는 하이퍼링크로 정의한다. 만약에 <article> 요소가 없다면 <link> 요소와 가장 가까운 관계를 가지고 있는 섹션(section)에 대한 퍼머링크(permalink)로 인식된다.

<a>, <area>요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

canonical

현재 문서의 기본 URL을 지정한다.

<link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

dns-prefetch

유저 에이전트(user agent)가 대상 리소스의 출처에 대한 DNS 확인을 선제적으로 수행하도록 지정한다.

<link> 요소에서 외부 리소스(external resource)로 사용이 가능하다.

external

연결될 문서가 현재 웹사이트 외부의 리소스임을 알린다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

help

상황에 맞는 도움말에 대한 링크를 제공한다.

만약 <a> 요소이거나 <area> 요소이면 help는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<link> 요소라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.

<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

icon

현재 문서를 나타내는 아이콘을 가져오는 것으로 처리한다. 때때로 icon 앞에 shortcut 유형을 작성하는 경우가 있는데 이는 비표준이며 웹브라우저가 무시하므로 사용하지 않아야 한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

참고로 애플(Apple)의 iOS는 icon 유형을 사용하지 않을 수 있다. 더 자세한 사항은 iOS의 사파리(safari) 웹브라우저의 최신 기술 명세를 확인하라.
license

현재 문서의 주요 콘텐츠가 하이퍼링크(hyperlink)로 참조된 문서에 설명된 저작권 라이선스의 적용을 받는다는 것을 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

manifest

애플리케이션의 매니페스트(manifest)를 가져오거나 연결한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

mask-icon

단색의 투명한 배경을 갖는 SVG 아이콘을 나타낸다. color 애트리뷰트와 함께 사용될 수 있다. W3C 명세에는 반드시 지원하지 않아도 되는 것으로 정했다. 따라서 모든 최신 유저 에이전트가 지원한다고 보기 어렵다.

사파리(safari) 웹브라우저에서 지원한다.
modulepreload

유저 에이전트(user agent)가 모듈 스크립트(moduel script)를 선제적으로 가져와 나중에 평가할 수 있도록 문서의 모듈 맵(moduel map)에 저장하도록 지정한다. 선택적으로 모듈의 종속성도 가져올 수 있다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

next

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 다음 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

nofollow

현재 문서의 게시자(또는 원저자)가 연결될 문서를 보증하지 않음을 나타낸다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noopener

하이퍼링크(hyperlink)가 현재 문서와 컨텍스트(context)가 단절되어 열린다. 즉 하이퍼링크(hyperlink)로 열린 문서에서 window.opener 속성 값은 null을 갖는다. 신뢰할 수 없는 문서를 연결할 때 유용하다. target 애트리뷰트는 기본적으로 _blank로 적용된다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

noreferrer

하이퍼링크(hyperlink) 연결을 정의한 현재 문서를 하이퍼링크(hyperlink)로 열릴 문서에서 참조하도록 헤더(header)에 포함시키지 않는다. 즉 문서를 열게한 문서와 단절된다는 측면에서 noopener와 동일한 작용을 한다고 할 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

opener

하이퍼링크(hyperlink)로 열릴 문서는 현재 문서의 탐색 컨텍스트(context)를 포함한다. 즉 noopener와 반대 작용을 한다고 볼 수 있다.

<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.

pingback

현재 문서에 대한 핑백(pingback)을 처리하는 핑백(pingback) 서버의 주소를 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preconnect

유저 에이전트가 대상 리소스의 오리진(origin)에 선제적으로 연결하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prefetch

후속 탐색이 가능하도록 유저 에이전트가 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

preload

유저 에이전트가 as 애트리뷰트에 지정된 잠재적 목적지와 연결 우선 순위에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

prev

현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 이전 순서에 해당하는 것을 의미한다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

search

현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크를 나타낸다.

<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

stylesheet

현재 문서에 스타일시트 문서를 리소스로 가져온다.

<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.

tag

하이퍼링크가 현재 문서에 적용되는 태그를 설명하는 문서임을 나타낸다.

<a>, <area> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

HTML Standard
#the-form-element

지원 웹브라우저