개요
아래 내용은 form 태그의 핵심 속성(action, method, enctype)을 먼저 정리한 뒤, 회원가입 폼 예제를 통해 label, input, select/option, textarea, button을 “입력 → 제출 → 전송 형태” 흐름으로 정리한 글이다.
form 태그란? (action / method / enctype)
form은 여러 입력 컨트롤을 하나로 묶고, 제출(submit) 시 값을 서버로 전송하는 “입력 양식 컨테이너”다.
action: 제출 시 데이터를 보낼 URL을 지정한다.method: 전송 방식을 지정한다. 대표적으로get,post가 있다.enctype:method="post"일 때, 요청 바디의 데이터 인코딩(MIME 타입)을 결정한다.
예제처럼 enctype="multipart/form-data"는 파일 업로드 같은 바이너리 데이터가 포함될 때 사용한다.
HTTP 관점에서 보는 전송 방식
폼 제출은 결국 HTTP 요청을 만드는 행위이고, method/enctype에 따라 요청 형태가 달라진다.
POST + application/x-www-form-urlencoded(기본값)- 전송 형태:
key=value&key=value형태로 URL 인코딩되어 요청 바디에 들어간다.
- 전송 형태:
POST + multipart/form-data- 전송 형태: 텍스트 필드와 파일을 “파트(part)”로 나눠 전송하고, boundary로 구분한다.
즉, 파일 업로드가 섞이면 multipart/form-data를 선택하는 게 일반적이다.
입력 태그 설계 포인트 (name / label 연결)
폼에서 가장 중요한 속성은 name이다. 제출 시 서버로 전달되는 데이터의 key가 name으로 결정된다.
또한 label의 for는 입력 요소의 id와 연결되며, 접근성과 사용성이 좋아진다.
예제에서처럼:
<label for="userName">↔<input id="userName" ...>구조가 기본이다.required는 해당 입력값이 비어 있으면 제출을 막는 “필수 입력” 속성이다.
input/select/textarea 유형별 정리
input (한 줄 입력 + 다양한 타입)
<input>은 type에 따라 완전히 다른 UI/검증을 제공한다.
text,email,password: 대표 텍스트 입력(이메일은 형식 검증이 포함될 수 있음).radio: 같은name끼리 “1개만 선택”되는 그룹을 만든다.checkbox: 같은name을 여러 개 두면 “다중 선택” 형태가 된다.datetime-local,number: 날짜/시간 선택 UI, 숫자 입력 UI를 제공한다.file: 파일 선택 컨트롤이며,accept로 허용 파일 타입을 제한할 수 있다.
참고로 required는 여러 input 타입에서 지원된다.
select/option (드롭다운)
select는 드롭다운 컨트롤이고, option의 value가 실제 전송 값이 된다.
예제는 직업(role)을 고르는 단일 선택 드롭다운 형태다.
textarea (여러 줄 입력)
textarea는 여러 줄 텍스트 입력이며, rows, cols, placeholder로 입력 UI를 조절할 수 있다
submit/reset 버튼 동작 정리
폼 내부에서 버튼의 동작은 type에 따라 달라진다.
type="submit": 폼 제출type="reset": 입력값 초기화type="button": 아무 동작도 하지 않으며, 보통 JavaScript 이벤트와 연결
예제는 input 방식과 button 방식을 둘 다 보여주고 있어서, “태그가 달라도 type만 같으면 동작은 동일”하다는 걸 확인하기 좋다.
실습 코드 브라우저 실행 화면
