form element - by. UXKM

2025-05-16

요약 설명
<form> 요소는 사용자로부터 입력을 받아 서버로 전송할 수 있도록 하는 입력 폼의 컨테이너 역할을 하는 시맨틱 태그입니다.
내부에 <input>, <textarea>, <select>, <button> 등 다양한 폼 요소들을 포함하며, action, method 등의 속성을 통해 데이터를 보낼 위치와 방식(GET 또는 POST)을 지정할 수 있습니다. 제출 버튼을 누르면 폼에 포함된 입력값이 서버로 전송되며, 클라이언트-서버 간의 데이터 상호작용을 구현하는 핵심 구조입니다.
또한 name, id, autocomplete, novalidate 등의 속성을 활용해 폼의 동작과 접근성을 세밀하게 제어할 수 있습니다.

주요 역할 및 특징

사용자 입력 수집 및 서버 전송
- <form> 요소는 웹 폼을 정의하고, 그 안에 포함된 입력 필드를 통해 사용자가 입력한 데이터를 서버로 전송합니다.
- 이름, 이메일, 비밀번호, 파일 업로드 등 다양한 데이터를 서버로 전송할 수 있습니다.
다양한 입력 요소와 함께 사용
<form> 내부에는 여러 가지 입력 요소들(<input>, <textarea>, <select>, <button>)을 포함할 수 있으며, 이들을 통해 다양한 형태의 사용자 데이터를 받을 수 있습니다.
action과 method 속성으로 폼 동작을 설정
- action 속성 : 폼 데이터를 전송할 URL을 지정
- method 속성 : 데이터를 전송하는 HTTP 방식을 지정 (주로 GET 또는 POST 사용)
name 속성을 사용하여 폼을 식별
폼에 name 속성을 지정하면 JavaScript에서 해당 폼을 참조하기 쉽습니다.
<fieldset> 및 <legend>와 함께 사용 가능
입력 그룹을 묶어 가독성을 높이고, 스크린 리더 접근성을 향상시킵니다.

CSS 기본 값

<form> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							form {
								display: block;
								width: auto;
								margin: 0;
								padding: 0;
								border: none;
								background: transparent;
							}

기본 문법

							<form action="/submit" method="post">
								<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
							</form>

속성

`<form>` 속성 요약

속성명
설명

action

데이터를 전송할 URL을 지정
method

전송 방식 지정 (GET, POST)
enctype

전송할 데이터의 인코딩 방식 지정
target

응답을 표시할 창을 지정 (_self, _blank 등)
autocomplete

자동 완성 활성화 여부 (on, off)
novalidate

브라우저 기본 유효성 검사 비활성화
name

양식의 이름을 지정
accept-charset

사용할 문자 인코딩 지정

[action] 선택 사항 <form action="URL">

데이터를 전송할 서버의 URL을 지정합니다. 값이 없으면 현재 페이지로 전송됩니다.
HTML5에서는 <form> 요소에 action 속성을 반드시 명시하지 않아도 되며, 명시하지 않으면 현재 페이지(URL)로 데이터가 전송됩니다.

								<form action="submit.php">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[method] 선택 사항 <form method="값">

폼 데이터(form data)를 서버에 전송하는 방식을 지정합니다.

설정 가능한 값 :: GET(기본값) :
URL에 폼 데이터를 추가하여 서버로 전송하는 방식입니다. 이 요청은 브라우저에 의해 캐시될 수 있고, 쿼리 문자열로 데이터를 전송하므로 길이에 제한이 있습니다.
또한, URL에 데이터가 노출되어 보안상 취약할 수 있으므로 중요한 데이터는 POST 방식을 사용하는 것이 좋습니다.; POST :
폼 데이터를 요청 본문에 포함시켜 서버로 전달하는 방식입니다. 이 방식의 요청은 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않습니다.
또한, 데이터는 쿼리 문자열과 별도로 전송되며, 길이에 제한이 없고, GET 방식보다 보안성이 더 높습니다.

								<form action="submit.php" method="post">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[enctype] 선택 사항 <form enctype="값">

<form> 요소의 enctype 속성은 폼 데이터가 서버로 전송될 때의 인코딩 방식을 지정합니다.
이 속성은 method="post"인 경우에만 적용되며, GET 방식에서는 사용되지 않습니다.

설정 가능한 값 :: application/x-www-form-urlencoded(기본값) :
폼 데이터가 key=value 형식으로 인코딩되어 서버로 전송되는 방식입니다.
공백은 + 또는 %20으로 변환되며, 특수 문자는 URL 인코딩 방식(퍼센트 인코딩)을 통해 변환됩니다.; multipart/form-data :
폼 데이터를 여러 부분(파트)로 나누어 전송하는 방식으로, 파일 업로드와 같은 바이너리 데이터 전송에 적합합니다.
각 부분은 개별적으로 인코딩되며, 일반 텍스트 데이터뿐만 아니라 파일, 이미지 등의 바이너리 데이터도 포함할 수 있습니다.
이 방식은 <form> 요소에서 method="post"와 함께 사용됩니다.; text/plain :
폼 데이터를 일반 텍스트 형식으로 전송하는 방식입니다.
공백은 +로 변환되지만, 기타 문자들은 인코딩되지 않고 그대로 전송됩니다. URL 인코딩이 적용되지 않으므로, 특수 문자 처리에 주의해야 합니다.

								<form action="upload.php" method="post" enctype="multipart/form-data">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[target] 선택 사항 <form target="값">

폼 데이터를 서버로 전송한 후, 응답이 표시될 위치를 지정합니다.
설정 가능한 값 중 _parent, _top 등은 주로 <iframe>과 함께 사용됩니다.

설정 가능한 값 :: _self(기본값/생략 가능) : 현재 창에서 열기; _blank : 새 창(tab)에서 열기; _parent : 부모 프레임에서 열기(부모가 없을 경우 _self와 동일); _top : 최상위 프레임에서 열기(부모가 없을 경우 _self와 동일)

								<form action="submit.php" target="_blank">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[autocomplete] 선택 사항 <form autocomplete="값">

<form> 요소의 autocomplete 속성은 브라우저의 자동 완성 기능을 활성화할지 여부를 지정합니다.
값을 on으로 설정하면, 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동 완성 옵션을 제공합니다. 이 속성은 <form> 요소뿐만 아니라 개별 <input> 요소에서도 설정할 수 있으며, HTML5에서 추가되었습니다.

설정 가능한 값 :: on(기본값) : 자동 완성 활성화; off : 자동 완성 비활성화

								<form autocomplete="off">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[novalidate] Boolean - 선택 사항 <form novalidate>

HTML5에서 제공하는 폼 유효성 검사를 비활성화하여, 데이터가 검증 없이 서버로 전송되도록 합니다.

								<form novalidate>
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

[name] 선택 사항 <form name="값">

해당 폼의 이름을 지정합니다.
이 속성은 서버로 제출된 폼 데이터를 참조하거나 자바스크립트에서 폼을 참조할 때 사용됩니다. 그러나 현재는 name 속성보다 id 속성을 사용하여 요소를 참조하는 것이 더 일반적입니다.

								<form name="userForm">
									<input type="text" name="username">
									<button type="submit">전송</button>
								</form>

								<script>
									document.userForm.onsubmit = function() {
										alert("폼이 제출되었습니다.");
									};
								</script>

[accept-charset] 선택 사항 <form accept-charset="값">

폼 데이터(form data)를 서버로 전송할 때 사용되는 문자 인코딩(character encoding) 방식을 명시합니다.
이 속성을 사용하면, 서버에서 폼 데이터를 올바르게 해석할 수 있도록 할 수 있습니다. 여러 개의 문자 인코딩 방식을 공백 문자(space)로 구분하여 지정할 수 있습니다.

기본적으로 accept-charset 속성은 설정되어 있지 않으며, 만약 속성이 지정되지 않으면 폼은 HTML 문서의 기본 문자 인코딩을 사용합니다.
HTML 4.01에서는 공백(space) 또는 콤마(,)를 구분자로 사용할 수 있었으나, HTML5에서는 공백 문자(space)만을 사용해야 합니다.

설정 가능한 값 :: UTF-8 : 전 세계의 문자 집합을 포괄하는 Unicode 기반의 문자 인코딩 방식입니다. 대부분의 현대 웹사이트에서 사용됩니다.; EUC-KR : 한국어 문자 인코딩 방식입니다.; Shift_JIS : 일본어 문자 인코딩 방식입니다.; Big5 : 전통적인 중국어 문자 인코딩 방식입니다.; ISO-8859-1 : 라틴 알파벳 문자 인코딩 방식으로, 유럽 언어의 대부분을 지원합니다.; Windows-1252 : Windows에서 사용되는 문자 인코딩 방식으로, ISO-8859-1의 확장판입니다.

								<form accept-charset="UTF-8">
									<!-- <input>, <textarea>, <select>, <button> 등의 입력 요소 -->
								</form>

예제

기본적인 사용자 정보 제출 폼

파일 업로드 폼

JavaScript로 유효성 검사

`<fieldset>` 및 `<legend>`를 사용한 그룹화

주의사항

action 속성을 사용할 경우 정확한 URL을 지정해야 하며, 그렇지 않으면 데이터가 잘못 전송될 수 있습니다.
method 속성의 GET 방식은 URL에 데이터가 노출되므로 보안상 민감한 정보는 POST 방식으로 전송하는 것이 좋습니다.
파일 업로드 시 반드시 enctype="multipart/form-data"를 지정해야 합니다.
novalidate 사용 시, HTML5의 기본 유효성 검사를 사용하지 않으므로, JavaScript로 별도의 검사가 필요합니다.