HTML <form>
요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<form>
요소를 꾸밀 땐, 모든 elements
의 유효성을 나타내는 CSS :valid
와 :invalid
의사 클래스를 사용할 수 있습니다.
콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 다른 <form> 요소를 제외한 플로우 콘텐츠. |
태그 생략 | None, both the starting and ending tag are mandatory. |
가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
가능한 ARIA 역할 | group , presentation |
DOM 인터페이스 | HTMLFormElement |
특성
이 요소는 전역 특성을 포함합니다.
accept
- A comma-separated list of content types that the server accepts.
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:
<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>
명세
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 |
브라우저 호환성
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.