<form> 태그의 정의 및 사용법

<form> 태그는
데이터를 제출하기 위한 웹 양식 영역을 나타냅니다.
이 영역에는 웹 양식 관련 컨트롤 요소들이 포함되며, 이 요소들의 데이터를 다루거나 전송할 수 있도록 정의하는 데 사용됩니다.

웹 양식 관련 컨트롤 요소란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <button>, <select> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

아래의 예제는 <form> 태그의 일반적인 사용법 중 하나입니다.

HTML 
<form action="submit_url" method="get" class="form-example">
    <div class="form-example">
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name" required>
    </div>
    <div class="form-example">
        <label for="user-email">이메일</label>
        <input type="email" id="user-email" name="user-email" required>
    </div>
    <button type="submit">제출하기</button>
</form>
브라우저에서 실제 표시된 모습

주요 기술적인 문법 요약

<form> 태그의 자손으로 <form> 태그를 중첩해서 사용할 수 없습니다.

웹 양식 관련 컨트롤 요소들를 포함

<form> 태그는 데이터를 제출하기 위한 웹 양식 관련 컨트롤 요소들를 포함하는 영역입니다.
텍스트 입력 필드, 체크박스, 라디오 버튼, 드롭다운 목록, 여러 유형의 버튼 등에 해당하는 요소들을 포함할 수 있으며, 이 요소들의 데이터를 다루거나 전송할 수 있도록 정의하는 데 사용됩니다.

참조: 웹 양식 관련 주요 컨트롤 요소

웹 양식 관련 주요 컨트롤 요소
<input> 텍스트 입력 필드, 체크박스, 라디오 버튼 등 다양한 입력 유형이 있음
<textarea> 여러 줄로 된 텍스트 입력 필드를 나타내는 컨트롤
<select> 흔히 '드롭다운 목록'이라고 부르며, 옵션 메뉴를 제공하는 컨트롤
<button> 클릭 가능한 버튼을 나타내며,
버튼이 양식 데이터를 제출하는 submit 유형, 버튼이 포함되어 있는<form> 영역의 모든 컨트롤을 초깃값으로 되돌리는 reset 유형, 클라이언트측 스크립트와 연결해서 사용하는 button 유형이 있음

<form> 태그는 이러한 웹 양식에 관련된 컨트롤 요소들뿐만 아니라, 문단, 제목, 목록, 표, 이미지, 비디오 등과 같이 문서의 구조를 형성하는 대부분의 콘텐츠(flow content를 말함)도 포함할 수 있습니다.

관련 속성 사용하기

<form>의 관련된 속성에 대해 알아보겠습니다.

action 속성

양식이 제출될 때 <form>으로 정의된 양식 영역에 포함된 컨트롤 요소들의 데이터를 전송할 URL을 지정합니다.

동작 설명

<form> 내에 제출에 관련된 버튼(<input type="submit">이나 <input type="image">, <button type="submit">)이 있는 경우 클릭되었을 때 지정된 action 속성에 설정된 URL로 데이터가 전송됩니다.

HTML 
<form action="submit_url">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>

참고하세요!
<form> 내에 제출에 관련된 버튼이 없는 경우에는 자바스크립트를 사용하여 submit 메서드를 호출하여 양식 영역을 제출할 수도 있습니다. 이 경우에도 지정된 action 속성에 설정된 URL로 데이터가 전송됩니다. 또한, submit 이벤트 핸들러를 사용하여 데이터를 원하는 URL로 전송할 수 있습니다.

action 속성이 없거나 빈 문자열("")로 지정하면

현재의 URL로 데이터가 전송됩니다.

참고하세요!
action 속성이 없거나 빈 문자열("")로 지정하더라도 양식 영역이 제출될 때 자바스크립트를 사용하여 예를 들어, submit 이벤트 핸들러를 사용하여 데이터를 원하는 URL로 전송할 수 있습니다.

method 속성

양식이 제출될 때 양식 영역의 데이터를 제출하는 방법을 지정합니다.

값

이 속성의 값은 양식이 제출될 때 양식 영역의 데이터를 제출하는 데 사용할 HTTP 메소드입니다. 대소문자를 구분하지 않습니다.

method 속성의 값
get method 속성이 지정되지 않을 때 기본값임.
데이터를 URL의 쿼리 문자열로 전송
post 데이터를 HTTP 요청 본문(body)에 포함하여 전송
dialog 양식 영역이 <dialog> 내에 있는 경우 대화 상자를 닫고 데이터를 제출하거나, 양식을 지우지 않고 제출 시 제출 이벤트가 시작되도록 함. 주로 대화 상자 안에 있는 웹 양식 영역의 데이터를 대화 상자의 반환 값으로 설정할 때 사용함
HTML 
<form action="submit_url" method="post">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>

novalidate 속성

양식이 제출될 때 양식 영역이 검증되지 않아야 함을 나타냅니다. 이 속성이 없으면 웹 양식 영역을 검증합니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

양식 영역의 검증은 두 가지입니다.

  1. HTML5의 기본 기능으로 제공하는 유효성 검사
  2. required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사
HTML5의 기본 기능으로 제공하는 유효성 검사

<input type="url">이나 <input type="email">은 <form> 태그 내에서 사용하면 기본적으로 브라우저에서 유효성 검사가 진행됩니다.
이는 HTML5의 기본 기능으로, <input type="url">에는 사용자가 올바른 형식의 URL을 입력했는지 자동으로 확인해 주고, <input type="email">은 사용자가 올바른 형식의 이메일 주소를 입력했는지 자동으로 확인해 줍니다.

HTML5의 기본 기능으로 제공하는 유효성 검사 기능를 제거하려면 <form> 태그 내에 novalidate 속성을 추가하는 것입니다.

다음은 <form> 태그 내에 novalidate 속성을 설정하지 않은 것과 novalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML 
<h3>유효성 검사를 진행함</h3>
<p>올바른 형식의 URL을 입력했는지 검사</p>
<form>
    <label for="user-url">홈페이지 주소</label>
    <input type="url" id="user-url" name="user-url">
    <button type="submit">제출</button>
</form>
<h3>유효성 검사를 진행하지 않음</h3>
<p>올바른 형식의 URL을 입력했는지 검사를 진행하지 않음</p>
<form novalidate>
    <label for="user-url-1">홈페이지 주소</label>
    <input type="url" id="user-url-1" name="user-url-1">
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 URL을 입력하고 유효성 검사가 진행되는지 실제로 테스트 해보세요!
주의! URL을 입력하지 않으면 유효성 검사 없이 폼이 제출됩니다.
required 속성이 있는 컨트롤의 값이 지정되어 있는지 검사

required 속성은 양식을 제출하기 전에 사용자가 컨트롤의 입력 값을 지정해야 함을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

다음은 <form> 태그 내에 novalidate 속성을 설정하지 않은 것과 novalidate 속성을 설정한 것을 비교하는 예제입니다.

HTML 
<h3>required 속성 검사를 진행함</h3>
<p>required 속성이 있는지 검사</p>
<form>
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name" required>
    <button type="submit">제출</button>
</form>
<h3>required 속성 검사를 진행하지 않음</h3>
<p>required 속성이 있는지 검사를 진행하지 않음</p>
<form novalidate>
    <label for="user-name-1">이름</label>
    <input type="text" id="user-name-1" name="user-name-1" required>
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 required 속성 검사가 진행되는지 실제로 테스트 해보세요!

target 속성

양식이 제출된 후 결과를 표시할 위치를 지정합니다. 주로 링크나 폼의 대상 프레임 또는 창을 지정하는 데 사용됩니다.

값
target 속성의 값
_self target 속성이 지정되지 않을 때 기본값임.
양식 제출 결과가 현재 창이나 프레임에 표시됨
_blank 양식 제출 결과가 새 창이나 새 탭에 표시됨
_parent 양식 제출 결과가 부모 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함
_top 양식 제출 결과가 전체 창의 최상위 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작함
예제
HTML 
<form action="submit_url" method="post" target="_blank">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" name="user-name">
    <button type="submit">제출하기</button>
</form>

enctype 속성

양식 영역에 포함된 컨트롤 요소들의 데이터가 서버로 제출될 때 사용되는 인코딩 유형을 지정합니다. 이 속성은 method 속성의 값이 post로 설정된 폼에 대해 주로 사용됩니다. enctype 속성의 값에는 몇 가지 주요 선택지가 있습니다.

값
enctype 속성의 값
application/x-www-form-urlencoded enctype 속성이 지정되지 않을 때 기본값임.
모든 문자들이 URL 인코딩되어 전송됨. 기본적인 폼 데이터 인코딩 방식임
multipart/form-data 파일 업로드를 지원함.
폼 데이터가 여러 부분으로 나뉘어 전송되고 각 부분은 자체적으로 인코딩됨. <input type="file">이 포함되어 있을 때 사용함.
text/plain 폼 데이터가 일반 텍스트로 인코딩됨.
예제
HTML 
<form action="submit_url" method="post" enctype="multipart/form-data">
    <label for="user-file">파일 업로드</label>
    <input type="file" id="user-file" name="user-file">
    <button type="submit">제출하기</button>
</form>

브라우저 호환성

form 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<form> 1 12 1 4
action 1 12 1 3
novalidate 10 12 4 10.1
target 1 12 1 3
enctype 1 12 1 3

명세서 사양

form 태그의 명세서 사양
명세서 사양
<form> HTML Standard
#the-form-element

참고문헌

같이 보기