[HTML] form태그와 input태그

웹에서 회원가입, 로그인 같은 화면을 보면 대부분 입력창이 있음.

이때 사용되는 태그가 바로 `form`과 `input`임.

오늘은 이걸 다뤄보겠음

---

form 태그란?

`form`태그는 사용자가 입력한 데이터를 서버로 전송하기 위한 영역을 만드는 태그임

 

주 역할

• 입력 데이터를 하나의 묶음으로 관리
• 전송 방식 설정
• 데이터를 보낼 서버 주소 지정

기본 형태는 아래와 같음

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

• `action` -> 데이터를 보낼 서버 주소
• `method` -> 전송 방식 (GET 또는 POST)

`method`를 생략하면 기본값은 `GET` 방식으로 동작함

이는 아래에서 더 다루겠음

---

input 태그란?

`input`태그는 실제로 사용자 입력을 받는 칸을 만드는 태그임.
`type` 속성에 따라 입력 방식이 달라짐

 

자주 쓰는 `type` 종류

• `text` -> 일반 텍스트 입력
• `email` -> 이메일 형식 입력
• `password` -> 비밀번호 입력
• `number` -> 숫자 입력
• `tel` -> 전화번호 입력
• `radio` -> 라디오 버튼 (복수 선택 X)
• `checkbox` -> 체크박스 (복수 선택 O)
• `file` -> 파일 업로드
• `submit` -> 폼 전송 버튼

예시

<input type="text" placeholder="이름" />
<input type="email" placeholder="이메일" />
<input type="password" placeholder="패스워드" />
<input type="submit" value="회원가입" />

---

button 태그와 submit 버튼 차이

요약해서 보면:

• `<input type="submit">`
  → 폼을 서버로 전송하는 역할
• `<button>`
  → 기본 타입은 `submit`이지만,
  보통 스타일링이나 JS 기능 연결용으로 많이 사용됨

예시

<button type="submit">회원가입</button>

---

label 태그 사용하는 이유

`label`은 입력창에 이름을 붙이면서 input과 연결해 주는 역할을 함.
`for` 속성과 `input`의 `id`를 연결해서 사용함.

 

예시

<label for="man">남자</label> <input id="man" type="radio" name="gender" />

이렇게 작성하면 “남자” 텍스트를 클릭해도 라디오 버튼이 선택됨.

---

radio 버튼 정리

라디오 버튼은 여러 개 중 하나만 선택할 때 사용함.

 

핵심은 `name` 속성

<input type="radio" name="gender" id="man" /> <input type="radio" name="gender" id="woman" />

두 개의 name`이 같으면 하나만 선택 가능해짐.

---

checkbox 정리

체크박스는 여러 개를 동시에 선택 가능한 입력 방식임.

 

예시

<input type="checkbox" id="korean" /> <label for="korean">한국인</label>

 

---

GET 방식과 POST 방식 차이

`form`에서 가장 중요한 속성이 `method`임.

• `GET` 방식
  
  • 데이터가 URL에 그대로 붙어서 전송됨
  • 주소창에서 전송 데이터 확인 가능
  • 북마크 가능
  • 주로 조회, 검색 기능에 사용됨
• `POST` 방식
  
  • 데이터가 HTTP 요청 몸체(body)에 담겨 전송
  • URL에 데이터가 노출되지 않음
  • 보안적으로 GET보다 유리함
  • 로그인, 회원가입, 글 작성 시 주로 사용됨

예시

<form action="abc.com" method=""> <!-- 자동으로 GET -->
<form action="abc.com" method="post">

---

핵심 요약

• `form` → 입력 데이터를 서버로 보내는 전체 영역
• `input` → 실제 입력받는 요소
• `label` → input에 이름을 붙이고 클릭 영역 확장
• `GET` → 조회용, URL에 데이터 표시됨
• `POST` → 생성/수정용, 데이터가 숨겨져 전송됨