유효성 검사와 스타일

<form action="/signup" method="POST">
  <!-- required: 필수 입력 -->
  <input type="text" name="name" required>

  <!-- minlength / maxlength: 글자 수 제한 -->
  <input type="password" name="pw"
         minlength="8" maxlength="20" required>

  <!-- pattern: 정규식 패턴 매칭 -->
  <input type="tel" name="phone"
         pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
         placeholder="010-1234-5678">

  <!-- min / max: 숫자 범위 -->
  <input type="number" name="age"
         min="1" max="150">

  <button type="submit">제출</button>
</form>

/* 유효한 입력 — 초록 테두리 */
input:valid {
  border: 2px solid #4ECDC4;
  outline: none;
}

/* 잘못된 입력 — 빨간 테두리 */
input:invalid {
  border: 2px solid #FF6B6B;
  outline: none;
}

/* 포커스 시 강조 */
input:focus {
  box-shadow: 0 0 0 3px rgba(78,205,196,0.3);
}