--- title:
slug: Web/HTML/Element/form tags: - Element - HTML - HTML forms - Reference - Web - 양식 translation_of: Web/HTML/Element/form ---
{{HTMLRef}}

HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.

{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}

<form> 요소를 꾸밀 땐, 모든 {{domxref("HTMLFormElement.elements", "elements")}}의 유효성을 나타내는 CSS {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용할 수 있습니다.

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 다른 <form> 요소를 제외한 플로우 콘텐츠.
태그 생략 {{no_tag_omission}}
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 {{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM 인터페이스 {{domxref("HTMLFormElement")}}

특성

이 요소는 전역 특성을 포함합니다.

{{htmlattrdef("accept-charset")}}
스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 페이지 인코딩과 같습니다.
{{htmlattrdef("action")}}
양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, <input type="submit">, <input type="image"> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.
{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 autocapitalize 특성이 <form>에 정의된 값을 재정의합니다.
  • none: 자동 대문자 입력을 비활성화합니다.
  • sentences: 문장의 첫 글자를 대문자로 변환합니다. 기본값.
  • words: 각 단어의 첫 글자를 대문자로 변환합니다.
  • characters: 모든 글자를 대문자로 변환합니다.
{{htmlattrdef("autocomplete")}}
입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 autocomplete 특성이 <form>에 정의된 값을 재정의합니다.
  • off: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)
  • on: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.
{{htmlattrdef("enctype")}}
method 특성이 post인 경우, enctype은 양식 제출 시 데이터의 MIME 유형을 나타냅니다.
  • application/x-www-form-urlencoded: 기본값.
  • multipart/form-data: <input type="file">이 존재하는 경우 사용하세요.
  • text/plain: HTML 5에서 디버깅 용으로 추가된 값.

{{HTMLElement("button")}}, <input type="submit">, <input type="image"> 요소의 {{htmlattrxref("formenctype", "button")}} 특성으로 재정의할 수 있습니다.

{{htmlattrdef("method")}}
양식을 제출할 때 사용할 HTTP 메서드.
  • post: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
  • get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
  • dialog: 양식이 {{htmlelement("dialog")}} 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.

{{HTMLElement("button")}}, <input type="submit">, <input type="image"> 요소의 {{htmlattrxref("formmethod", "button")}} 특성으로 재정의할 수 있습니다.

{{htmlattrdef("name")}} {{deprecated_inline}}
양식의 이름. HTML 4부터 사용 중단됐습니다. {{htmlattrxref("id")}}를 사용하세요.
{{htmlattrdef("novalidate")}}
지정한 경우 양식의 유효성 검증을 건너뜁니다. novalidate 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, <input type="submit">, <input type="image"> 요소의 {{htmlattrxref("formnovalidate", "button")}} 특성으로 재정의할 수 있습니다.
{{htmlattrdef("target")}}
양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
  • _self: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
  • _blank: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
  • _parent: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
  • _top: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

{{HTMLElement("button")}}, <input type="submit">, <input type="image"> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.

예제

<!-- Form which will send a GET request to the current URL -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

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

{{ EmbedLiveSample('예제', '100%', 110) }}

명세

Specification Status Comment
{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}} {{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '<form>')}} {{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}} {{Spec2('HTML4.01')}} Initial definition

브라우저 호환성

{{Compat("html.elements.form")}}

같이 보기