개념

• 사용자로부터 데이터를 입력받아 서버로 전송하기 위한 입력 양식을 만드는 컨테이너 요소
• 다양한 입력 요소들을 포함하여 구성된다.

특징

• action 속성으로 데이터를 전송할 서버 URL을 지정한다.
• method 속성으로 GET 또는 POST 방식을 선택할 수 있다.

관련 태그

label

• 폼 컨트롤 요소들의 레이블 역할을 한다.
• 주로 입력 필드와 연결하여 사용한다.
• 레이블을 클릭하면 연결된 입력 요소가 자동으로 선택된다.
• for 속성을 사용하거나, 요소를 내부에 포함하는 방법이 있다
• button, input type="button" 등은 자체적으로 레이블 역할을 하므로 label이 필요 없다.
• 단독으로 사용하면 안된다.

input

• 사용자의 입력을 받기 위한 상호작용 컨트롤을 생성한다.
• type 속성은 사용자가 입력할 수 있는 데이터의 형태와 입력 방식을 지정한다.
• HTML5에서 추가된 타입들은 구형 브라우저에서 지원하지 않을 수 있음
• 모바일 환경에서는 올바른 타입 선택이 키보드 최적화로 직결된다.
• 폼 검증 로직을 줄이고 브라우저의 내장 검증 기능을 활용하여 개발 효용성을 높일 수 있다.
• type 예시: text, password, radio, checkbox, button, submit, reset, file, number, email, url, search, tel, color, range, date, datetime-local, time, month, week, hidden, image

주의사항

• name 속성이 있는 양식 요소만 서버로 전송된다.
• 민감한 데이터는 POST 방식을 사용해야 한다. GET 방식은 URL에 노출되므로 보안에 취약하다.
• GET 방식은 URL 길이 제한이 있으므로 대량 데이터 전송에는 POST를 사용한다.

예시

<!-- 회원가입 폼 예시 -->
<form action="/register" method="post">
  <!-- 이름 입력 필드 -->
  <label for="username">사용자명:</label>
  <input type="text" id="username" name="username" required>
  
  <!-- 이메일 입력 필드 -->
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>
  
  <!-- 비밀번호 입력 필드 -->
  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required>
  
  <!-- 성별 선택 라디오 버튼 -->
  <fieldset>
    <legend>성별</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">남성</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">여성</label>
  </fieldset>
  
  <!-- 취미 선택 체크박스 -->
  <label>취미:</label>
  <input type="checkbox" id="reading" name="hobbies" value="reading">
  <label for="reading">독서</label>
  <input type="checkbox" id="sports" name="hobbies" value="sports">
  <label for="sports">운동</label>
  
  <!-- 제출 버튼 -->
  <button type="submit">회원가입</button>
  <!-- 초기화 버튼 -->
  <button type="reset">초기화</button>
</form>