HTML Form은 사용자의 입력을 수집하고 서버에 전달하는 문서 구조다. 입력에 맞는 요소와 속성을 사용하면 브라우저의 키보드, 자동 완성, 기본 검증 기능을 활용할 수 있다.

🧱 폼의 기본 구조

<form action="/signup" method="post">
  <label for="email">이메일</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <button type="submit">가입하기</button>
</form>

• form: 입력 묶음과 제출 방식을 정의한다.
• label: 입력 요소의 목적을 설명한다.
• input, select, textarea: 형식에 맞는 값을 입력받는다.
• button: 제출, 초기화, 일반 동작을 수행한다.
• name: 제출할 데이터의 키가 된다. name이 없으면 일반적으로 전송 데이터에 포함되지 않는다.

🏷️ 입력 타입 선택

• email: 이메일 형식과 모바일 이메일 키보드를 제공한다.
• password: 입력 내용을 가리고 비밀번호 관리자의 연결을 돕는다.
• number: 수량처럼 실제 숫자 연산이 필요한 값에 사용한다.
• tel: 전화번호 입력에 적합한 키보드를 제공한다.
• date: 날짜 선택 인터페이스를 제공한다.
• checkbox: 여러 값을 독립적으로 선택할 때 사용한다.
• radio: 같은 name을 가진 선택지 중 하나를 고를 때 사용한다.

우편번호, 카드 번호처럼 숫자로 보이지만 계산하지 않는 값은 type="text"와 inputmode를 조합하는 편이 안전하다.

🛡️ 유효성 검사 계층

검증은 한 곳에만 두지 않고 역할에 따라 나눈다.

1. HTML 제약 검증: required, minlength, maxlength, min, max, pattern으로 즉시 확인한다.
2. 클라이언트 검증: 여러 필드의 관계나 비동기 중복 확인처럼 네이티브 속성만으로 어려운 규칙을 처리한다.
3. 서버 검증: 요청을 신뢰하지 않고 권한, 데이터 정합성, 보안 규칙을 최종 확인한다.

클라이언트 검증은 사용자 경험을 개선하지만 우회할 수 있으므로 서버 검증을 대체하지 않는다.

⚠️ 오류 메시지

• 어떤 입력에서 무엇이 잘못됐는지 구체적으로 설명한다.
• 색상만으로 오류를 구분하지 않는다.
• 오류가 난 입력에 aria-invalid="true"를 적용할 수 있다.
• aria-describedby로 입력과 도움말, 오류 메시지를 연결한다.
• 제출 실패 시 첫 번째 오류로 포커스를 이동하거나 오류 요약을 제공한다.

<label for="password">비밀번호</label>
<input
  id="password"
  name="password"
  type="password"
  minlength="8"
  aria-invalid="true"
  aria-describedby="password-error" />
<p id="password-error">비밀번호는 8자 이상 입력한다.</p>

💡 같이 알아둘 것

• placeholder는 예시값을 보여 주는 용도이며 label을 대체하지 않는다.
• autocomplete에 name, email, current-password 같은 토큰을 지정하면 입력 부담이 줄어든다.
• 제출 버튼에는 기본값인 type="submit"을 명시하고, 일반 버튼에는 type="button"을 지정한다.
• 파일 업로드와 민감한 값은 서버에서 크기, 형식, 권한을 다시 검사한다.

🔗 참고 자료

• MDN: HTML forms — 폼 구성과 입력 유형을 다룬다.
• MDN: Constraint validation — 브라우저 내장 유효성 검사 API를 설명한다.
• WHATWG: Forms — form, input 등 폼 관련 명세다.