폼(form)

mskimdev·2026년 5월 19일

basics form html input

HTML

목록 보기

6/8

폼 — form, input, button

로그인 화면, 회원가입, 검색창, 댓글 입력 — 사용자가 무언가를 입력하고 서버로 전송하는 곳이면 어디든 폼이 있다. HTML에서 사용자 입력을 받는 모든 요소가 폼과 관련된 태그들이다.

form 태그

<form>은 입력 요소들을 감싸고, 데이터를 어디로 어떻게 전송할지 정의한다.

<form action="/login" method="post">
  <!-- 입력 요소들 -->
</form>

action — 데이터를 전송할 서버 URL
method — 전송 방식
- get — URL에 데이터가 붙어서 전송 (검색, 조회)
- post — 요청 본문에 데이터가 담겨 전송 (로그인, 회원가입)

input 태그

가장 다양하게 쓰이는 입력 요소다. type 속성으로 종류를 지정한다.

<!-- 텍스트 입력 -->
<input type="text" placeholder="이름을 입력하세요">

<!-- 비밀번호 (입력 내용이 가려짐) -->
<input type="password" placeholder="비밀번호">

<!-- 이메일 (형식 자동 검증) -->
<input type="email" placeholder="이메일">

<!-- 숫자 -->
<input type="number" min="0" max="100">

<!-- 날짜 선택 -->
<input type="date">

<!-- 파일 업로드 -->
<input type="file">

<!-- 체크박스 -->
<input type="checkbox"> 동의합니다

<!-- 라디오 버튼 (같은 name으로 묶어야 하나만 선택됨) -->
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

<!-- 숨겨진 값 (화면에 안 보임) -->
<input type="hidden" name="userId" value="123">

<!-- 범위 슬라이더 -->
<input type="range" min="0" max="100" value="50">

<!-- 색상 선택 -->
<input type="color">

label 태그

<label>은 입력 요소에 설명을 붙인다. <label>을 클릭하면 연결된 입력 요소가 활성화된다.

<!-- for 속성과 id로 연결 -->
<label for="username">아이디</label>
<input type="text" id="username">

<!-- input을 label 안에 넣는 방법 -->
<label>
  비밀번호
  <input type="password">
</label>

<label> 없이 placeholder만 쓰면 접근성이 떨어진다. 스크린 리더가 읽을 수 없기 때문이다.

textarea — 여러 줄 입력

<textarea rows="5" cols="40" placeholder="내용을 입력하세요"></textarea>

<input>은 한 줄, <textarea>는 여러 줄 입력에 쓴다.

select — 드롭다운

<select name="city">
  <option value="">도시를 선택하세요</option>
  <option value="seoul">서울</option>
  <option value="busan">부산</option>
  <option value="daegu">대구</option>
</select>

selected 속성을 붙이면 기본 선택값이 된다.

<option value="seoul" selected>서울</option>

button 태그

<!-- 폼 제출 -->
<button type="submit">로그인</button>

<!-- 폼 초기화 -->
<button type="reset">다시 입력</button>

<!-- 폼 제출 없이 자바스크립트 실행용 -->
<button type="button">클릭</button>

<input type="submit">과 <button type="submit">은 같은 역할을 한다. <button>이 내부에 HTML을 넣을 수 있어 더 유연하다.

폼 전체 예시

<form action="/signup" method="post">
  <label for="name">이름</label>
  <input type="text" id="name" name="name" required>

  <label for="email">이메일</label>
  <input type="email" id="email" name="email" required>

  <label for="password">비밀번호</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <label>
    <input type="checkbox" name="agree"> 이용약관에 동의합니다
  </label>

  <button type="submit">가입하기</button>
</form>