<form>

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

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

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 다른 <form> 요소를 제외한 플로우 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 group, presentation
DOM 인터페이스 HTMLFormElement

특성

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

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

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

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

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

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

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

예제

<!-- Form which will send a GET request to the current URL -->
<form>
  <label>Name:</label>
    <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:</label>
    <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>

명세

Specification Status Comment
HTML Living Standard
The definition of '<form>' in that specification.
Living Standard
HTML5
The definition of '<form>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<form>' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
formChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
accept
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
accept-charsetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
actionChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
autocapitalize
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android No support No
autocompleteChrome Full support Yes
Notes
Full support Yes
Notes
Notes The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on <input> elements as well as their form. Specifically, when a form has autocomplete set to off and its <input> element's autocomplete attribute is not set, then if the user asks for autofill suggestions for the <input> element, Chrome might display a message saying 'autocomplete has been disabled for this form.' On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each <input> that has custom auto-completion.
Edge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
enctypeChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
methodChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
novalidateChrome Full support 1Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 15Safari ? WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support 1.0
targetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기