데이터 수집과 전송을 위한 폼(form) 태그

form 태그란?

웹에서 사용자로부터 데이터를 입력받고 서버로 전송할 때 사용하는 핵심 요소가 바로 <form> 태그이다.
로그인, 회원가입, 검색창 등 우리가 일상적으로 사용하는 대부분의 입력 기능이 폼을 기반으로 동작한다.

form 태그의 기본 구조


<form action="/submit" method="POST">
  <!-- 입력 요소들 -->
  <input type="text" name="username" />
  <button type="submit">제출</button>
</form>

<form> 태그는 데이터를 어디로(action), 어떻게(method) 보낼지를 정의한다.

주요 속성

① action

데이터를 전송할 URL을 지정한다. 생략 시 현재 페이지 URL로 전송된다.


<form action="/api/login">...</form>

② method

HTTP 전송 방식을 지정한다. GET과 POST 두 가지를 사용한다.

method	특징
GET	데이터가 URL 쿼리스트링에 포함됨. 검색, 조회에 적합
POST	데이터가 요청 body에 포함됨. 로그인, 회원가입 등 민감한 데이터에 적합


<!-- GET: /search?query=html -->
<form action="/search" method="GET">
  <input type="text" name="query" />
  <button type="submit">검색</button>
</form>
 
<!-- POST: body에 데이터 포함 -->
<form action="/api/login" method="POST">
  <input type="text" name="email" />
  <input type="password" name="password" />
  <button type="submit">로그인</button>
</form>

③ enctype

파일 업로드 시 반드시 multipart/form-data로 설정해야 한다.


<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="profile" />
  <button type="submit">업로드</button>
</form>

enctype 값	설명
`application/x-www-form-urlencoded`	기본값. 일반 텍스트 데이터 전송
`multipart/form-data`	파일 업로드 시 사용
`text/plain`	디버깅 용도로 간혹 사용

입력 요소 (Input Elements)

① input 태그

type 속성으로 다양한 입력 형태를 만들 수 있다.


<!-- 텍스트 -->
<input type="text" name="username" placeholder="이름을 입력하세요" />
 
<!-- 비밀번호 -->
<input type="password" name="password" />
 
<!-- 이메일 -->
<input type="email" name="email" />
 
<!-- 숫자 -->
<input type="number" name="age" min="1" max="100" />
 
<!-- 날짜 -->
<input type="date" name="birthday" />
 
<!-- 체크박스 -->
<input type="checkbox" name="agree" value="yes" /> 동의합니다
 
<!-- 라디오 버튼 -->
<input type="radio" name="gender" value="male" /> 남성
<input type="radio" name="gender" value="female" /> 여성
 
<!-- 파일 -->
<input type="file" name="attachment" />
 
<!-- 숨김 필드 -->
<input type="hidden" name="token" value="abc123" />

② textarea 태그

여러 줄의 텍스트를 입력받을 때 사용한다.


<textarea name="message" rows="5" cols="40" placeholder="내용을 입력하세요"></textarea>

③ select 태그

드롭다운 목록을 만들 때 사용한다.


<select name="country">
  <option value="">선택하세요</option>
  <option value="kr">대한민국</option>
  <option value="us">미국</option>
  <option value="jp">일본</option>
</select>

multiple 속성을 추가하면 다중 선택이 가능하다.


<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

④ button 태그


<!-- 폼 제출 -->
<button type="submit">제출</button>
 
<!-- 폼 초기화 -->
<button type="reset">초기화</button>
 
<!-- 단순 버튼 (폼 제출 안 함) -->
<button type="button" onclick="handleClick()">클릭</button>

type="button"을 명시하지 않으면 기본값이 submit이므로, 폼 안에서 일반 버튼을 만들 때는 반드시 type="button"을 지정해야 한다.

⑤ label 태그

<label>은 입력 요소와 텍스트를 연결하여 접근성을 높인다. 라벨을 클릭해도 해당 입력 요소에 포커스가 맞춰진다.


<!-- for와 id를 연결 -->
<label for="email">이메일</label>
<input type="email" id="email" name="email" />
 
<!-- label로 감싸기 -->
<label>
  이름
  <input type="text" name="name" />
</label>

유효성 검사 속성

HTML5부터 자바스크립트 없이도 기본적인 유효성 검사를 적용할 수 있다.


<form action="/submit" method="POST">
  <!-- 필수 입력 -->
  <input type="text" name="username" required />
 
  <!-- 최소/최대 길이 -->
  <input type="password" name="password" minlength="8" maxlength="20" required />
 
  <!-- 패턴 정규식 -->
  <input type="text" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="010-1234-5678" />
 
  <!-- 숫자 범위 -->
  <input type="number" name="quantity" min="1" max="99" />
 
  <button type="submit">제출</button>
</form>

속성	설명
`required`	필수 입력 필드 지정
`minlength` / `maxlength`	텍스트 최소/최대 길이
`min` / `max`	숫자, 날짜의 최솟값/최댓값
`pattern`	정규식 패턴으로 형식 검사

fieldset과 legend

관련된 입력 요소들을 시각적으로 묶을 때 사용한다.


<form action="/register" method="POST">
  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름</label>
    <input type="text" id="name" name="name" required />
 
    <label for="birth">생년월일</label>
    <input type="date" id="birth" name="birth" />
  </fieldset>
 
  <fieldset>
    <legend>계정 정보</legend>
    <label for="email">이메일</label>
    <input type="email" id="email" name="email" required />
 
    <label for="pw">비밀번호</label>
    <input type="password" id="pw" name="pw" minlength="8" required />
  </fieldset>
 
  <button type="submit">회원가입</button>
</form>

실전 예제 - 로그인 폼


<form action="/api/auth/login" method="POST">
  <fieldset>
    <legend>로그인</legend>
 
    <label for="email">이메일</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="example@email.com"
      required
    />
 
    <label for="password">비밀번호</label>
    <input
      type="password"
      id="password"
      name="password"
      minlength="8"
      required
    />
 
    <input type="checkbox" id="remember" name="remember" value="true" />
    <label for="remember">로그인 상태 유지</label>
 
    <button type="submit">로그인</button>
    <button type="button" onclick="location.href='/register'">회원가입</button>
  </fieldset>
</form>