Forms and Validations

Forms and Validations는 프론트엔드에서 사용자가 데이터를 입력하고 제출하는 과정을 관리하고, 그 데이터가 올바른지 확인하기 위한 핵심 기능이다. 이를 통해 사용자와 애플리케이션 간의 상호작용을 원활하게 하고 보안을 강화할 수 있다.

---

1. HTML Forms 기본 구조

HTML 폼은 사용자가 입력 데이터를 전송할 수 있는 UI 구성 요소다.

1.1. 기본 폼 태그

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">Submit</button>
</form>

주요 속성

1. action: 데이터를 전송할 URL.
2. method: 전송 방식 (GET 또는 POST).
   • GET: URL에 데이터를 포함하여 전송.
   • POST: URL이 아닌 HTTP 본문에 데이터를 포함하여 전송.

1.2. 폼 입력 요소

HTML에는 다양한 입력 요소가 있어 사용자가 여러 종류의 데이터를 입력할 수 있다.

텍스트 입력

• <input type="text">, <textarea>: 사용자로부터 텍스트를 입력받음.

<label for="comment">Comment:</label>
<textarea id="comment" name="comment" rows="4"></textarea>

라디오 버튼

• 사용자에게 하나의 옵션만 선택하게 함.

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

체크박스

• 사용자에게 여러 옵션을 선택하게 함.

<label>
  <input type="checkbox" name="agree" required> I agree to the terms
</label>

드롭다운

• 여러 옵션 중 하나를 선택.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="kr">Korea</option>
  <option value="us">USA</option>
</select>

날짜 및 시간

• <input type="date">, <input type="time"> 등.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

---

2. HTML5의 Validation

HTML5는 폼 유효성 검사를 기본 제공하여 자바스크립트 없이도 데이터 검증이 가능하다.

1. required: 필수 입력 필드.
2. pattern: 정규식을 사용하여 입력 형식을 검증.
3. min, max: 숫자 또는 날짜 범위 제한.
4. maxlength, minlength: 입력 가능한 문자 길이 제한.
5. type: 특정 데이터 유형을 강제 (예: email, url).

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="age">Age (18-60):</label>
  <input type="number" id="age" name="age" min="18" max="60">
  
  <button type="submit">Submit</button>
</form>

---

3. 보안 고려 사항

1. 서버 검증 필수: 클라이언트 검증은 쉽게 우회될 수 있으므로 서버에서 추가 검증 필요.
2. XSS 방지: 입력 데이터를 HTML로 렌더링하기 전에 항상 이스케이프 처리.
3. CSRF 보호: 폼에 CSRF 토큰을 포함하여 공격 방지.