[HTML] 09. form 태그 완전 정리 (사용자 입력의 시작)

[HTML] 09. form 태그 완전 정리 (사용자 입력의 시작)

form은 사용자의 입력을 서버로 보내는 역할을 합니다.
로그인, 회원가입, 검색창, 게시글 작성 등
웹사이트의 거의 모든 상호작용은 form에서 시작합니다.

---

1. form 기본 구조

<form action="서버주소" method="전송방식">
  입력 요소들
</form>

• action → 데이터를 보낼 주소
• method → 전송 방식 (GET / POST)

---

2. method의 차이 (GET vs POST)

① GET

• URL에 데이터가 노출됨
• 검색 기능에 사용
• 비밀번호 전송에 부적합

② POST

• 데이터가 URL에 보이지 않음
• 회원가입, 로그인에 사용
• 데이터 길이 제한이 적음

실무에서는 보안이 필요한 경우 POST를 사용합니다.

---

3. 기본 입력 예제

<form action="#" method="post">
  아이디: <input type="text" name="userid"><br>
  비밀번호: <input type="password" name="userpw"><br>
  <input type="submit" value="로그인">
</form>

Output

아이디:

비밀번호:

---

4. input 태그의 핵심 속성

• type → 입력 형태
• name → 서버로 전달되는 이름
• value → 기본값
• placeholder → 안내 문구
• required → 필수 입력

예제

<input type="text" placeholder="아이디 입력" required>

---

5. label 태그 (중요)

label은 입력창 설명 태그입니다.
접근성 측면에서 매우 중요합니다.

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

label을 클릭하면 입력창이 활성화됩니다.

---

6. textarea (여러 줄 입력)

<textarea rows="4" cols="30"></textarea>

---

7. select (선택 박스)

<select>
  <option>서울</option>
  <option>부산</option>
</select>

---

8. 실무에서 중요한 개념

• name 속성이 없으면 서버로 데이터가 전달되지 않음
• label을 반드시 연결
• POST는 HTTPS와 함께 사용
• form은 서버와 연결되는 구조

---

9. 핵심 정리

• form은 사용자 입력을 서버로 전송
• action과 method는 필수
• GET은 노출, POST는 비노출
• input, textarea, select가 핵심 요소

이제 HTML은 단순 구조가 아니라, 사용자와 상호작용하는 단계까지 왔습니다.