📝 04. Form & Input 완전 정복: 제발 서버 믿지 마세요

<!-- ❌ 영철이의 최초 회원가입 폼 -->
<form>
  <input placeholder="이메일" />
  <input placeholder="비밀번호" />
  <button>가입하기</button>
</form>

<form
  action="/api/signup"     <!-- 데이터를 보낼 URL (생략 시 현재 URL) -->
  method="post"            <!-- HTTP 메서드: get | post | dialog -->
  enctype="application/x-www-form-urlencoded"  <!-- 파일 업로드 시 multipart/form-data -->
  novalidate               <!-- 브라우저 기본 유효성 검사 끄기 (커스텀 검사 시 사용) -->
>
  ...
</form>

<!-- 파일을 포함한 폼은 반드시 enctype="multipart/form-data" -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
</form>

<!-- ✅ 타입을 제대로 쓰면 브라우저가 기본 검사를 해줌 -->
<form method="post" action="/api/signup">
  <!-- 이메일 형식 자동 검사 + 모바일에서 이메일 키보드 표시 -->
  <input type="email" name="email" required />
 
  <!-- 비밀번호: 입력값 *로 마스킹 -->
  <input type="password" name="password" minlength="8" required />
 
  <!-- 숫자 범위 제한 + 모바일 숫자 키보드 -->
  <input type="number" name="age" min="14" max="120" />
 
  <!-- 날짜 선택 UI 자동 표시 -->
  <input type="date" name="birthdate" />
 
  <!-- 체크박스 -->
  <input type="checkbox" name="terms" required />
 
  <!-- 라디오: 같은 name끼리 그룹 -->
  <input type="radio" name="gender" value="male" />
  <input type="radio" name="gender" value="female" />
 
  <!-- 파일 선택, accept로 허용 타입 제한 -->
  <input type="file" name="photo" accept="image/png, image/jpeg" />
 
  <!-- 검색용: clear(X) 버튼 기본 제공 -->
  <input type="search" name="q" />
 
  <!-- 숨겨진 데이터 전송 -->
  <input type="hidden" name="csrf_token" value="abc123" />
 
  <button type="submit">제출</button>
</form>

<!-- 방법 1: for-id 연결 (권장) -->
<label for="email">이메일</label>
<input type="email" id="email" name="email" required />
 
<!-- 방법 2: 감싸기 (id 없어도 됨) -->
<label>
  비밀번호
  <input type="password" name="password" minlength="8" required />
</label>
 
<!-- ❌ 절대 안 되는 것: label 없이 placeholder만 -->
<input type="text" placeholder="이름을 입력하세요" />
<!-- 스크린리더가 "편집 상자"라고만 읽음 -->

<fieldset>
  <legend>배송지 정보</legend>
  <label for="address">주소</label>
  <input type="text" id="address" name="address" required />
  <label for="zip">우편번호</label>
  <input type="text" id="zip" name="zip" pattern="\d{5}" />
</fieldset>

<!-- HTML로만 구현하는 기본 유효성 검사 -->
<form method="post" action="/api/signup">
  <label for="email">이메일</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  />
 
  <label for="pw">비밀번호 (8자 이상)</label>
  <input
    type="password"
    id="pw"
    name="password"
    minlength="8"
    required
  />
 
  <!-- pattern: 한국 전화번호 형식 (010-XXXX-XXXX) -->
  <label for="tel">전화번호</label>
  <input
    type="tel"
    id="tel"
    name="tel"
    pattern="010-\d{4}-\d{4}"
    title="010-XXXX-XXXX 형식으로 입력해주세요"
  />
 
  <button type="submit">가입하기</button>
</form>

// ❌ 비제어 컴포넌트 (Uncontrolled): React가 폼 값을 모름
function SignupForm() {
  const emailRef = useRef<HTMLInputElement>(null);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 제출 시점에만 ref로 값 가져옴
    console.log(emailRef.current?.value);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" ref={emailRef} />
    </form>
  );
}
 
// ✅ 제어 컴포넌트 (Controlled): React state가 폼 값을 제어
function SignupForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 실시간으로 state에서 최신 값 사용 가능
    console.log({ email, password });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">이메일</label>
      <input
        type="email"
        id="email"         {/* JSX에선 htmlFor, id로 label 연결 */}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <label htmlFor="pw">비밀번호</label>
      <input
        type="password"
        id="pw"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        minLength={8}      {/* JSX에선 camelCase */}
        required
      />
      <button type="submit">가입하기</button>
    </form>
  );
}

<!-- A -->
<input type="text" placeholder="이름 입력" />
 
<!-- B -->
<label for="name">이름</label>
<input type="text" id="name" name="name" />
 
<!-- 가 -->
<p>이름</p>
<input type="text" name="name" aria-label="이름" />
 
<!-- 라 -->
<label>이름: <input type="text" name="name" /></label>