이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ input type 별 (text/email/password/number) 차이
• ▸✅ label + for 의 접근성 의미
• ▸✅ 기본 클라이언트 검증 (required · pattern · minLength)

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

왜 form 이 필요한가

웹은 읽기 만 하는 곳이 아닙니다. 로그인·검색·결제·댓글 — 모두 사용자 입력 이 필요합니다. 그 입력을 받는 표준 도구가 <form>.

기본 구조

<form action="/api/login" method="POST">
    <label for="email">이메일</label>
    <input type="email" id="email" name="email" required>

    <label for="password">비밀번호</label>
    <input type="password" id="password" name="password" required minlength="8">

    <button type="submit">로그인</button>
</form>

• ▸action — 어디로 보낼지 (URL)
• ▸method — GET (검색·필터) / POST (생성·수정·로그인)
• ▸name — 서버가 받는 키 (req.body.email)
• ▸for ↔ id — label 과 input 연결 (접근성)

input 타입 — 브라우저가 알아서

<input type="text">       <!-- 일반 텍스트 -->
<input type="email">      <!-- 이메일 검증 + 모바일 키보드 -->
<input type="password">   <!-- 마스킹 -->
<input type="number">     <!-- 숫자 키보드 + 화살표 -->
<input type="tel">        <!-- 전화번호 키보드 -->
<input type="date">       <!-- 날짜 선택기 -->
<input type="file">       <!-- 파일 선택 -->
<input type="checkbox">   <!-- 체크박스 -->
<input type="radio">      <!-- 라디오 -->
<textarea></textarea>     <!-- 여러 줄 -->
<select><option></option></select>  <!-- 드롭다운 -->

type 만 바꾸면 브라우저가 알아서 적절한 UI·검증·키보드 제공. type 정확히 쓰는 게 접근성·UX의 첫걸음.

HTML5 검증

<input type="email" required pattern="[^@]+@[^@]+\.[^@]+">
<input type="number" min="1" max="100" step="1">
<input type="text" required minlength="2" maxlength="20">

JavaScript 없이도 기본 검증 자동. submit 시 잘못되면 브라우저가 차단 하고 메시지 표시.

> ⚠️ 하지만 서버 검증 도 반드시 필요. 클라이언트 검증은 UX 용, 서버 검증은 보안.

접근성 — label 의 중요성

<!-- ❌ 안 좋음 -->
<input type="text" placeholder="이름">

<!-- ✅ 좋음 -->
<label for="name">이름</label>
<input type="text" id="name" name="name">

label 이 시각장애인의 스크린리더 가 읽어주는 텍스트. placeholder 만으로는 부족합니다 (사라지므로).

한 번 정리

<form> + <input type="..."> + <button type="submit"> 만으로 기본 폼 완성. type 을 정확히 쓰면 브라우저가 대부분 알아서 해줍니다.

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 form 에 클라이언트 검증 (required, pattern, minLength) 추가해줘"
• ▸"이 input 들을 label 과 명시적으로 연결해줘"
• ▸"이 form submit 후 입력값 초기화 + 에러 메시지 표시 패턴 만들어줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.