<form>

개요

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

<form> 요소를 스타일링 하기 위해 :valid and :invalid CSS 가상 클래스를 사용할 수 있습니다.

• 컨텐츠 범주 플로우 컨텐츠, palpable 컨텐츠
• 허용된 컨텐츠 <form> 요소를 제외한 플로우 컨텐츠,
• 태그 생략 None, both the starting and ending tag are mandatory.
• 허용된 부모 요소 플로우 컨텐츠를 허용하는 모든 요소
• DOM 인터페이스 HTMLFormElement

속성

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

accept HTML 4

A comma-separated list of content types that the server accepts.

사용시 주의: 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, <input> 요소의 accept 속성을 사용하세요.

accept-charset

A space- or comma-delimited list of character encodings that the server accepts. The browser uses them in the order in which they are listed. The default value, the reserved string "UNKNOWN", indicates the same encoding as that of the document containing the form element.
In previous versions of HTML, the different character encodings could be delimited by spaces or commas. In HTML5, only spaces are allowed as delimiters.

action

The URI of a program that processes the form information. This value can be overridden by a formaction attribute on a <button> or <input> element.

autocapitalize

This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value for textual form control descendants should be automatically capitalized as it is entered/edited by the user. If the autocapitalize attribute is specified on an individual form control descendant, it trumps the form-wide autocapitalize setting. The non-deprecated values are available in iOS 5 and later. The default value is sentences. Possible values are:

• none: Completely disables automatic capitalization
• sentences: Automatically capitalize the first letter of sentences.
• words: Automatically capitalize the first letter of words.
• characters: Automatically capitalize all characters.
• on: Deprecated since iOS 5.
• off: Deprecated since iOS 5.

autocomplete HTML5

Indicates whether input elements can by default have their values automatically completed by the browser. This setting can be overridden by an autocomplete attribute on an element belonging to the form. Possible values are:

• off: The user must explicitly enter a value into each field for every use, or the document provides its own auto-completion method; the browser does not automatically complete entries.
• on: The browser can automatically complete values based on values that the user has previously entered in the form.

참고: If you set autocomplete to off in a form because the document provides its own auto-completion, then you should also set autocomplete to off for each of the form's input elements that the document can auto-complete. For details, see Google Chrome notes.

enctype

When the value of the method attribute is post, enctype is the MIME type of content that is used to submit the form to the server. Possible values are:

• application/x-www-form-urlencoded: The default value if the attribute is not specified.
• multipart/form-data: The value used for an <input> element with the type attribute set to "file".
• text/plain (HTML5)

This value can be overridden by a formenctype attribute on a <button> or <input> element.

method

브라우저가 폼을 제출하기 위한 HTTP 메서드.

• post: HTTP POST 메서드와 일치함; 폼 데이터가 폼의 바디에 포함되어 서버에 전달됨.
• get: HTTP GET 메서드와 일치함; form data are appended to the action attribute URI with a '?' as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

This value can be overridden by a formmethod attribute on a <button> or <input> element.

name

폼의 이름. In HTML 4,its use is deprecated (id should be used instead). It must be unique among the forms in a document and not just an empty string in HTML 5.

novalidate HTML5

This Boolean attribute indicates that the form is not to be validated when submitted. If this attribute is not specified (and therefore the form is validated), this default setting can be overridden by a formnovalidate attribute on a <button> or <input> element belonging to the form.

target

target이 정의되지 않은 하이퍼링크나 폼을 통해 결과를 표시할 기본 로케이션을 가리킬 이름이나 키워드를 나타냅니다. HTML4에서 이것은 frame을 위한 이름이나 키워드가 되었습니다. HTML5에서 이것은 브라우징 컨텍스트(탭 ,윈도우, 인라인 프레임 같은것들)를 위한 이름이나 키워드가 되었습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다:

• _self: 결과를 현재 HTML4 프레임(or HTML5 브라우징 컨텍스트) 에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.
• _blank: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.
• _parent: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.
• _top: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.
• 프레임이름: 결과가 이름 있는 <iframe>에 표시됩니다.

HTML5: This value can be overridden by a formtarget attribute on a <button> or <input> element.

예제

<!-- Simple form which will send a GET request -->
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Simple form which will send a POST request -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

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

사양

브라우저 호환성

Google Chrome 참고

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 field 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.

같이 보기

• HTML forms guide
• Other elements that are used for creating forms: <button>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.