<form>은 사용자 입력을 수집하여 서버로 **제출(submit)**합니다. 핵심 attribute는 action(보낼 곳)과 method(보내는 방식)입니다.
html
Email
Password
Sign up
사용자가 submit 버튼을 클릭하거나 Enter를 누르면, 브라우저는 name을 가진 모든 컨트롤을 모아 인코딩한 뒤 action으로 요청을 보냅니다.
<form method="get" action="/search"> <!-- 데이터가 URL에: /search?q=html -->
<form method="post" action="/login"> <!-- 데이터가 요청 본문(body)에 -->
name attribute는 필수입니다<input value="hi" /> <!-- ❌ name 없음 → 제출되지 않음 -->
<input name="message" value="hi" /> <!-- ✅ message=hi 로 제출됨 -->
name이 있는 컨트롤만 전송됩니다. 서버는 name으로 이를 읽습니다.
form.addEventListener("submit", (e) => {
e.preventDefault(); // fetch/AJAX로 처리하기 위해 전체 페이지 리로드를 막는다
const data = new FormData(form); // 모든 필드를 쉽게 읽는 방법
});
Form은 사용자가 서버로 데이터를 보내는 핵심 수단입니다.
action/method, name의 역할, GET vs POST 의미론, JS 처리를 위한 preventDefault를 이해하는 것은 입력이 있는 모든 웹 앱의 기초입니다.