HTML <form>: 양식 요소

HTML <form> 요소는 데이터 제출을 위한 대화형 요소로 이루어진 문서 구획을 나타냅니다.

<form action="">
  <div>
    <label for="name">이름</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">이메일</label>
    <input type="email" id="email" name="email" required />
  </div>
  <button>가입하기</button>
</form>

form {
  border: 1px solid red;
  padding: 8px;
}
form:valid {
  border: 1px solid lime;
}

div {
  margin-bottom: 8px;
}

label {
  width: 80px;
  display: inline-block;
}

위의 예제와 같이, CSS :valid와 :invalid 의사 클래스를 사용하면 양식에 속한 컨트롤의 유효성에 따라 <form>에 다른 스타일을 적용할 수 있습니다.

특성

전역 특성을 포함합니다.

양식 제출과 관련된 특성

action

제출한 데이터를 처리할 URL을 지정합니다. <button>, <input type="submit">, <input type="image"> 요소의 formaction 특성이 우선합니다.

enctype

제출할 데이터를 인코딩하는 방법을 지정합니다. 가능한 값은 다음과 같습니다.

• application/x-www-form-urlencoded: 기본값입니다.
• multipart/form-data: type이 file인 <input>을 제출할 때 사용합니다.
• text/plain: 디버깅 용도로 사용하는 값입니다. 실제 사용자가 제출하는 데이터의 인코딩에는 사용하지 말아야 합니다.

<button>, <input type="submit">, <input type="image"> 요소의 formenctype 특성이 우선합니다.

method

제출할 데이터를 전송할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.

• post: 양식의 데이터를 HTTP 요청의 본문에 넣어서 서버로 전송합니다. 로그인 키처럼 공개해선 안되는 정보를 포함해야 할 때 사용하세요.
• get: 양식의 데이터를 action URL 뒤의 쿼리 문자열로 붙여서 서버로 전송합니다. 검색 창처럼 양식이 유발하는 부수효과가 없을 때 사용하세요.
• dialog: 양식이 <dialog> 안에 있을 때, 양식을 제출하면 대화상자를 닫습니다.

<button>, <input type="submit">, <input type="image"> 요소의 formmethod 특성이 우선합니다.

novalidate

제출 시 양식의 데이터를 검증하지 않음을 지정하는 불리언 특성입니다. <button>, <input type="submit">, <input type="image"> 요소의 formnovalidate 특성이 우선합니다.

target

제출 결과를 표시할 위치를 지정합니다. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름입니다.

다음의 키워드는 특별한 뜻을 가지고 있습니다.

• _self (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
• _blank: 결과를 새롭게 생성한 이름 없는 브라우징 맥락에 보여줍니다.
• _parent: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 _self와 동일합니다.
• _top: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 _self와 동일합니다.

<button>, <input type="submit">, <input type="image"> 요소의 formtarget 특성이 우선합니다.

기타 특성

accept-charset

서버에서 받을 수 있는 문자 인코딩을 나타내는 공백 구분 목록입니다. 브라우저는 지정한 순서에 따라 문자 인코딩을 사용합니다. 기본 값은 문서의 인코딩과 동일합니다.

autocomplete

브라우저가 양식 내 컨트롤을 자동으로 완성할 수 있어야 하는지 지정합니다. 각각의 컨트롤에 지정하는 autocomplete이 <form>의 autocomplete보다 우선합니다. 가능한 값은 다음과 같습니다.

• off: 브라우저가 양식의 항목을 자동으로 완성하지 않습니다. (로그인 양식처럼 보이는 경우, 브라우저는 off를 무시합니다. 자동완성 특성과 로그인 필드를 참고하세요.)
• on: 브라우저가 양식의 항목을 자동으로 완성할 수 있습니다.

name

양식의 이름을 지정합니다. 지정할 경우, 문서 내의 양식끼리 겹치는 이름이 없어야 합니다.

rel

양식이 생성하는 링크의 종류를 명시합니다. 링크 유형을 공백으로 구분한 리스트여야 합니다.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 양식 요소 참고서