[HTML] 폼(Form) 사용해보기

폼(Form)이란?

HTML에서 폼은 사용자가 데이터를 입력하거나 선택해서 서버로 전송 가능하게 만드는 UI 영역이다.

즉, 회원가입 폼이나 로그인 폼 같은 사용자 <-> 웹서버 사이의 데이터 교환 통로라고 보면 된다.

기본구조

• <form> 안에 여러 입력 요소(<input>, <select>, <textarea> 등)가 들어간다.
• 사용자가 데이터를 입력하거나 선택하여 제출(submit) 버튼을 누르면, <form>의 action 속성에 지정된 주소로 데이터가 전송된다.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">제출</button>
</form>

• action: 데이터를 보낼 서버 주소
• method: 전송 방식 (GET: URL에 노출, POST: 본문에 숨김)

여기를 참고하면 기본적인 코드 예시와 출력을 함께 볼 수 있다.

주요 태그 정리

태그	역할
<form>	입력 양식 전체를 감싸는 컨테이너
<input>	텍스트, 비밀번호, 체크박스, 라디오 등 다양한 입력 필드
<select> + <option>	드롭다운 선택 리스트
<textarea>	여러 줄 입력 (예: 자기소개)
<button> 또는 <input type="submit">	제출 버튼

<input>의 다양한 타입

타입	설명	예시
text	일반 텍스트 입력	이름, 닉네임
password	비밀번호 입력	비밀번호
number	숫자만 입력	나이, 수량
email	이메일 형식 입력	사용자 이메일
radio	하나만 선택	성별
checkbox	여러 개 선택 가능	관심사
file	파일 업로드	첨부파일

<select> 드롭다운 메뉴

여러 선택지 중 하나를 고를 때 사용된다.

<select name="job">
  <option value="dev">개발자</option>
  <option value="des">디자이너</option>
</select>

<select>는 외형만 있고, 실제 선택지는 <option> 안에 넣는다.

value 값이 서버로 전송된다.

<textarea> 여러 줄 입력

긴 글을 쓸 때 사용한다.

<textarea name="about" rows="4" cols="50" placeholder="자기소개를 작성해주세요"></textarea>

줄 수와 칸 수는 rows와 cols로 조절한다.

<button> 제출·취소·클릭용 버튼

<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button">클릭만</button>

type 속성에 따라 동작이 달라진다.

• submit: 폼 제출 (기본값)
• reset: 폼 내용 초기화
• button: 아무 동작 없음 (자바스크립트용)