4. 🧾 HTML 폼(Form)과 입력(Input) 완벽 가이드 — 사용자와 상호작용하는 웹의 핵심

---

HTML에서 **form(폼)**은 단순히 정보를 입력받는 도구가 아니라,
사용자와 웹을 연결하는 핵심 인터페이스다.

회원가입, 로그인, 검색창, 주문서 등
대부분의 웹서비스가 폼을 통해 데이터를 주고받는다.

이번 글에서는 폼의 구조, 입력요소, 유효성 검증까지
한 번에 이해할 수 있도록 단계별로 정리한다.

---

💡 1. Form의 기본 구조 이해하기

“폼(form)은 데이터를 입력받아 서버로 전송하는 HTML 영역이다.”

기본 문법 👇

<form action="/submit" method="post"> 
  <label for="username">이름:</label> 
  <input type="text" id="username" name="username" required> 
   
  <button type="submit">제출</button> 
</form> 

속성 설명

action	데이터를 전송할 서버 주소
method	전송 방식 (get 또는 post)
name	서버에서 데이터를 식별하는 이름
required	필수 입력 지정

💬 method="get"은 URL에 데이터를 포함하고,
method="post"는 본문(body)에 숨겨서 전송한다.
👉 로그인·회원가입은 post, 검색은 get을 주로 사용한다.

---

🧱 2. Input 태그 — 모든 입력의 중심

<input>은 가장 많이 쓰이는 HTML 요소 중 하나다.
타입에 따라 다양한 입력 형식을 제공한다.

---

🔹 기본 입력 타입

타입 설명 예시

text	일반 텍스트 입력	이름, 아이디
password	비밀번호 입력 (● 표시)	로그인
email	이메일 형식 검증	user@email.com
number	숫자 입력	나이, 수량
tel	전화번호 입력	010-xxxx-xxxx
url	웹 주소 입력	https://example.com
search	검색창 스타일 입력	검색 필드

<input type="text" placeholder="이름을 입력하세요"> 
<input type="email" required> 
<input type="number" min="0" max="100"> 

💡 placeholder는 입력 예시,
required는 비워두면 제출 불가하게 만든다.

---

🔹 날짜·시간 입력

<input type="date"> 
<input type="time"> 
<input type="datetime-local"> 

✅ 브라우저에서 기본 달력 UI를 제공한다.
별도 JS 라이브러리 없이도 손쉽게 날짜 선택 가능.

---

🔹 체크박스 & 라디오 버튼

<label><input type="checkbox" name="interest" value="html"> HTML</label> 
<label><input type="checkbox" name="interest" value="css"> CSS</label> 
 
<label><input type="radio" name="gender" value="male"> 남성</label> 
<label><input type="radio" name="gender" value="female"> 여성</label> 

타입 특징

checkbox	여러 개 선택 가능
radio	동일한 name 내에서 1개만 선택 가능

💬 name 속성으로 그룹화한다는 점이 핵심이다.

---

🔹 파일 업로드

<input type="file" accept=".jpg, .png" multiple> 

속성 설명

accept	허용 파일 형식 지정
multiple	여러 개 파일 선택 허용

💡 실무에서는 업로드한 파일을 JavaScript나 백엔드에서 처리한다.

---

📋 3. label 태그 — 접근성과 사용성의 핵심

“label은 사용자 입력을 돕는 가장 중요한 시맨틱 요소”

<label for="email">이메일:</label> 
<input type="email" id="email"> 

✅ for 속성과 input의 id가 연결되어야 한다.
이 구조가 있으면 라벨을 클릭해도 입력창이 활성화된다.

💬 접근성 도구(스크린리더)도 label을 읽어주기 때문에 필수 요소다.

---

🧩 4. select, textarea — 확장 입력 요소

🔹 드롭다운 선택 (select)

<label for="job">직업 선택:</label> 
<select id="job" name="job"> 
  <option value="developer">개발자</option> 
  <option value="designer">디자이너</option> 
  <option value="pm">기획자</option> 
</select> 

💡 selected 속성으로 기본값 지정 가능.

---

🔹 여러 줄 입력 (textarea)

<label for="message">메시지:</label> 
<textarea id="message" rows="4" cols="40" placeholder="내용을 입력하세요"></textarea> 

✅ <textarea>는 닫는 태그가 반드시 필요하다.
줄바꿈, 긴 텍스트 입력에 사용된다.

---

⚙️ 5. 버튼 태그 — 행동을 정의하는 요소

<button type="submit">제출</button> 
<button type="reset">초기화</button> 
<button type="button" onclick="alert('클릭!')">클릭 이벤트</button> 

타입 설명

submit	폼 데이터 전송
reset	입력값 초기화
button	단순 동작(JS 이벤트 등)

💡 button 태그는 <input type="button">보다 확장성이 높아 실무에서 선호된다.

---

🧮 6. fieldset & legend — 그룹화된 입력 영역

<form> 
  <fieldset> 
    <legend>회원 정보</legend> 
    <label>이름: <input type="text" required></label> 
    <label>이메일: <input type="email"></label> 
  </fieldset> 
</form> 

✅ 관련 입력 요소를 논리적으로 묶어 가독성을 높인다.
접근성 측면에서도 중요한 구분 역할을 한다.

---

🔒 7. HTML만으로 가능한 기본 유효성 검증

HTML은 기본적으로 입력값을 자동 검사하는 기능을 제공한다.

속성 기능

required	필수 입력
pattern	정규식 검증
min, max	숫자/날짜 범위 제한
maxlength	최대 글자 수 제한

예시 👇

<input type="text" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="010-0000-0000"> 

💡 JavaScript 없이도 간단한 검증은 충분히 가능하다.

---

🧠 8. get vs post 차이 요약

방식 특징 사용 예시

GET	URL에 데이터 포함 (?key=value)	검색, 필터
POST	HTTP Body에 데이터 포함	로그인, 회원가입

💬 GET은 주소창에 노출되므로 보안이 필요한 데이터에는 부적합하다.

---

⚡ 9. 실무 예제 — 회원가입 폼 구조

<form action="/register" method="post"> 
  <fieldset> 
    <legend>회원가입</legend> 
 
    <label for="name">이름</label> 
    <input type="text" id="name" name="name" required> 
 
    <label for="email">이메일</label> 
    <input type="email" id="email" name="email" required> 
 
    <label for="password">비밀번호</label> 
    <input type="password" id="password" name="password" minlength="8" required> 
 
    <label>성별</label> 
    <input type="radio" name="gender" value="male"> 남성 
    <input type="radio" name="gender" value="female"> 여성 
 
    <label for="agree"> 
      <input type="checkbox" id="agree" required> 이용약관 동의 
    </label> 
 
    <button type="submit">가입하기</button> 
  </fieldset> 
</form> 

✅ 이 구조는

• 시맨틱 라벨 구조
• 필수 입력 검증
• 라디오/체크박스
• 접근성 향상
  모두 충족한다.

---

🧭 10. 마무리 — “폼은 단순한 입력이 아니라, 사용자 경험이다”

폼을 잘 만든다는 건 단순히 input을 나열하는 게 아니라,
사용자가 오류 없이, 빠르게, 편하게 데이터를 보낼 수 있게 돕는 것이다.

💬 “좋은 폼은 사용자에게 생각할 시간을 주지 않는다.”

다음 편에서는
✅ 5. HTML5 API 실전 활용 — video, audio, canvas, iframe
을 통해 멀티미디어와 상호작용 기능을 다뤄보자.

---