폼과 입력 요소

1. form 태그 — 데이터를 서버로 전송하는 컨테이너

<form action="/submit" method="POST">
  ...입력 요소들...
  <button type="submit">제출</button>
</form>

속성	역할	예시
action	데이터를 전송할 서버 URL	action="/login"
method	전송 방식 (GET: URL에 노출, POST: 숨김)	method="POST"

비밀번호·개인정보가 포함된 폼은 반드시 method="POST"를 사용합니다. GET 방식은 URL에 데이터가 노출되어 보안에 취약합니다.

2. input 태그 타입 완전 정복

<!-- 텍스트 입력 -->
<input type="text" placeholder="이름을 입력하세요" name="name">

<!-- 이메일 (자동 형식 검사) -->
<input type="email" placeholder="example@email.com" name="email">

<!-- 비밀번호 (입력 내용 숨김) -->
<input type="password" placeholder="비밀번호" name="password">

<!-- 숫자 (위아래 화살표) -->
<input type="number" min="1" max="100" value="1" name="qty">

<!-- 날짜 선택 -->
<input type="date" name="birthday">

<!-- 체크박스 -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">이용약관에 동의합니다</label>

<!-- 라디오 버튼 (같은 name끼리 하나만 선택) -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>

<!-- 파일 업로드 -->
<input type="file" accept="image/*" name="profile">

<!-- 숨김 값 (사용자에게 보이지 않음) -->
<input type="hidden" name="token" value="abc123">

<!-- 범위 슬라이더 -->
<input type="range" min="0" max="100" value="50" name="volume">

3. label 태그 — 접근성의 핵심

label은 입력 필드에 설명을 붙여주는 태그입니다. label을 클릭하면 연결된 input이 포커스됩니다.

<!-- 방법 1: for-id 연결 (권장) -->
<label for="username">아이디</label>
<input type="text" id="username" name="username">

<!-- 방법 2: 감싸기 방식 -->
<label>
  아이디
  <input type="text" name="username">
</label>

placeholder는 label의 대체제가 아닙니다. 입력을 시작하면 placeholder가 사라져 무엇을 입력해야 하는지 잊기 쉽습니다. label과 placeholder를 함께 사용하세요.

4. textarea, select, button

<!-- textarea: 여러 줄 텍스트 입력 -->
<label for="msg">문의 내용</label>
<textarea id="msg" name="message" rows="5" cols="40"
          placeholder="내용을 입력하세요."></textarea>

<!-- select: 드롭다운 메뉴 -->
<label for="city">도시 선택</label>
<select id="city" name="city">
  <option value="">선택하세요</option>
  <option value="seoul">서울</option>
  <option value="busan" selected>부산 (기본값)</option>
  <option value="jeju">제주</option>
</select>

<!-- button 타입 3가지 -->
<button type="submit">폼 제출</button>   ← form 데이터 전송
<button type="reset">초기화</button>    ← 폼 입력 값 리셋
<button type="button">일반 버튼</button> ← JS 이벤트 연결용

5. 유효성 검사 속성

required    — 필수 입력 (비어 있으면 제출 불가)
minlength   — 최소 글자 수
maxlength   — 최대 글자 수
min / max   — 숫자·날짜 범위
pattern     — 정규표현식 패턴 검사

예시:
<input type="text" name="id"
       required minlength="4" maxlength="20"
       pattern="[a-zA-Z0-9]+"
       title="영문+숫자 4~20자">

6. 실전 예제 — 로그인 폼

<form action="/login" method="POST" novalidate>
  <div>
    <label for="email">이메일</label>
    <input type="email" id="email" name="email"
           placeholder="example@email.com" required>
  </div>
  <div>
    <label for="pw">비밀번호</label>
    <input type="password" id="pw" name="password"
           placeholder="8자 이상" minlength="8" required>
  </div>
  <div>
    <input type="checkbox" id="remember" name="remember">
    <label for="remember">로그인 상태 유지</label>
  </div>
  <button type="submit">로그인</button>
</form>

관련 검색어  ·  HTML폼태그, input타입, label태그접근성, HTML유효성검사, select태그, textarea, 로그인폼HTML