[HTML] 폼 태그

👩🏼‍💻 <form> 기본 구조

<form action="/submit" method="post">
  ...
</form>

• action: 데이터를 전송할 URL
• method: 전송 방식 (get, post)
• enctype: 인코딩 타입 (예: multipart/form-data)

---

✅ 주요 입력 필드 (<input>)

기본 유형

타입	설명
text	일반 텍스트
password	비밀번호
checkbox	체크박스
radio	라디오 버튼
file	파일 업로드
submit	제출 버튼
reset	초기화 버튼
hidden	화면에는 없지만 데이터 전송용
button	일반 버튼

<input type="hidden" name="userId" value="123">

---

HTML5 특수 입력 타입

<input type="email" placeholder="이메일">
<input type="tel" placeholder="전화번호">
<input type="url" placeholder="웹주소">
<input type="number" min="1" max="10">
<input type="date">
<input type="time">
<input type="color">

• min, max, step: 숫자/날짜 범위 제한
• pattern="[a-zA-Z]+": 정규식 유효성 검사
• maxlength, required, readonly, disabled: 속성 조합

---

✅ <label> 태그

<label for="username">아이디</label>
<input id="username" type="text" name="username">

• for 속성은 연결된 input의 id와 일치해야 함

---

✅ fieldset, legend로 폼 그룹핑

<fieldset>
  <legend>로그인 정보</legend>
  <input type="text" name="id">
  <input type="password" name="pwd">
</fieldset>

• 접근성 향상 및 시맨틱 구조 제공

---

✅ 파일 업로드 + 기타 속성

<form enctype="multipart/form-data">
  <input type="file" name="file" accept=".jpg, .png" multiple>
</form>

• accept: 파일 타입 제한
• multiple: 다중 파일 선택 허용

---

✅ 드롭다운 & 선택 요소

<select name="lang">
  <option value="html">HTML</option>
  <option value="css" selected>CSS</option>
</select>

<datalist id="colorList">
  <option value="red">
  <option value="blue">
</datalist>

<input list="colorList">

---

✅ <textarea>

<textarea name="message" rows="4" cols="30" placeholder="메시지를 입력하세요"></textarea>

---

✅ 버튼 타입 정리

<button type="submit">전송</button>
<button type="reset">초기화</button>
<button type="button" onclick="alert('클릭!')">버튼</button>

---

✅ form 속성 정리 요약

속성	설명
action	전송할 URL
method	GET/POST 방식 지정
enctype	전송 데이터 인코딩 (파일 전송 시 필요)
target	전송 결과를 특정 iframe 등에 출력

<form action="result.html" target="resultFrame">
  ...
</form>
<iframe name="resultFrame"></iframe>

---

✅ 동적 버튼 활성화 예시 (JS 연동)

<input type="checkbox" id="agree" onchange="document.querySelector('#sendBtn').disabled = !this.checked">
<button id="sendBtn" disabled>전송</button>

---

폼 요소는 실무에서 매우 중요하다.
로그인, 회원가입, 게시판, 검색창 등 대부분의 사용자 입력은 form을 통해 처리되고,
정확한 속성 활용은 UX, 보안, 접근성 모두에 영향을 미친다.