HTML <form>이란?

HTML <form>은 사용자로부터 입력을 받아 서버로 데이터를 전송하기 위한 태그이다.
로그인, 회원가입, 검색, 게시글 작성 등 대부분의 웹 입력 화면의 기반이 된다.

---

<form> 기본 구조

<form action="/submit" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">전송</button>
</form>

핵심 속성

속성	설명
action	데이터를 전송할 서버 URL
method	전송 방식 (get, post)
name	서버에서 파라미터 식별용
enctype	데이터 인코딩 방식

---

GET vs POST 차이

GET 방식

<form action="/search" method="get">
    <input type="text" name="keyword">
</form>

• URL에 쿼리스트링으로 데이터 노출
• 캐싱 가능
• 길이 제한 있음
• 조회(Search)에 적합

예:

/search?keyword=java

---

POST 방식

<form action="/login" method="post">
    <input type="text" name="id">
    <input type="password" name="pw">
</form>

• HTTP Body로 데이터 전송
• URL에 노출되지 않음
• 길이 제한 없음
• 로그인, 등록, 수정에 적합

---

주요 Form 입력 요소

<input>

<input type="text">
<input type="password">
<input type="email">
<input type="checkbox">
<input type="radio">

type	설명
text	일반 문자열
password	비밀번호
checkbox	다중 선택
radio	단일 선택
submit	폼 전송

---

<textarea>

<textarea name="content"></textarea>

• 여러 줄 텍스트 입력
• 게시글, 설명 입력에 사용

---

<select>

<select name="role">
    <option value="user">USER</option>
    <option value="admin">ADMIN</option>
</select>

• 드롭다운 선택 UI
• value 값이 서버로 전송됨

---

name 속성의 중요성

<input type="text" name="email">

• 서버에서는 email이라는 key로 값 수신
• name이 없으면 전송되지 않음

Spring MVC 예:

@PostMapping("/login")
public String login(String email, String password) {
}

---

enctype (파일 업로드 시 필수)

<form action="/upload" method="post" enctype="multipart/form-data">

enctype	설명
application/x-www-form-urlencoded	기본값
multipart/form-data	파일 업로드
text/plain	테스트용

---

submit 버튼 동작 방식

<button type="submit">전송</button>

• 클릭 시 form 내부 input들을 수집
• action URL로 method 방식에 따라 전송
• JS로 submit 이벤트 제어 가능

---

자주 쓰는 패턴

Enter 키 제출 방지

<form onsubmit="return false;">

---

JavaScript로 submit 제어

<form id="myForm">

document.getElementById("myForm").submit();

---

Spring + Thymeleaf 연계 예시

<form th:action="@{/users}" method="post">
    <input type="text" name="name">
</form>

---

<form> 사용 시 주의사항

• GET으로 민감 정보 전송 금지
• name 누락 주의
• 중첩 form 불가 (HTML 표준 위반)
• CSRF 토큰 처리 필요 (Spring Security)

---

정리

• <form>은 브라우저 → 서버 데이터 전달의 핵심
• action, method, name이 가장 중요
• GET은 조회, POST는 변경 작업에 사용
• 백엔드(Spring MVC)와 매우 밀접한 연관