HTML 폼 태그 기초 정리하기

HTML에서 사용자의 입력을 받을 때는 폼 태그를 사용합니다.

예를 들어 로그인, 회원가입, 검색창, 문의하기 화면은 대부분 폼으로 만들어집니다.

이 글에서는 HTML 폼을 만들 때 자주 사용하는 태그를 정리합니다.

이 글에서 다루는 내용

• form
• input
• label
• button
• textarea
• select

폼이란 무엇일까?

폼은 사용자가 값을 입력하고 제출할 수 있는 영역입니다.

쉽게 말하면 웹페이지 안에 있는 입력 종이입니다.

예를 들어 회원가입 화면을 생각해보면 다음과 같은 입력 항목이 있습니다.

• 아이디
• 비밀번호
• 이름
• 이메일
• 자기소개
• 관심 분야
• 가입 버튼

이런 입력 영역 전체를 HTML에서는 폼으로 만들 수 있습니다.

form 태그

form 태그는 입력 요소들을 감싸는 태그입니다.

사용자가 입력한 값을 서버로 보낼 때 사용합니다.

<form>
  <input type="text" />
  <button type="submit">제출</button>
</form>

form 안에는 input, button, textarea, select 같은 입력 태그들이 들어갈 수 있습니다.

form 태그의 기본 구조

<form action="/signup" method="post">
  <input type="text" name="username" />
  <button type="submit">가입하기</button>
</form>

여기서 action은 데이터를 보낼 주소입니다.

method는 데이터를 보내는 방식입니다.

처음에는 너무 깊게 외우기보다 이렇게 이해하면 됩니다.

• action: 어디로 보낼지
• method: 어떤 방식으로 보낼지

input 태그

input 태그는 한 줄 입력을 받을 때 사용합니다.

아이디, 비밀번호, 이메일, 검색어 같은 값을 입력받을 수 있습니다.

<input type="text" name="username" />

input은 type에 따라 입력 방식이 달라집니다.

자주 사용하는 input type

예시는 다음과 같습니다.

<input type="text" name="username" />
<input type="password" name="password" />
<input type="email" name="email" />

각 입력값을 구분하려면 name 속성을 사용합니다.

서버에서는 이 name을 기준으로 어떤 값인지 구분합니다.

label 태그

label 태그는 입력 요소의 이름표 역할을 합니다.

사용자에게 이 입력칸이 무엇을 입력하는 곳인지 알려줍니다.

<label for="username">아이디</label>
<input id="username" type="text" name="username" />

여기서 중요한 것은 label의 for 값과 input의 id 값이 같아야 한다는 점입니다.

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

이렇게 연결하면 사용자가 이메일 글자를 클릭해도 입력칸이 선택됩니다.

작은 차이처럼 보이지만 실제 사용성에는 꽤 중요합니다.

button 태그

button 태그는 버튼을 만들 때 사용합니다.

폼 안에서는 주로 제출 버튼으로 사용됩니다.

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

button에는 type을 적어주는 것이 좋습니다.

button type 종류

예시는 다음과 같습니다.

<button type="submit">제출</button>
<button type="button">중복 확인</button>
<button type="reset">초기화</button>

버튼의 목적이 헷갈리지 않도록 type을 명확히 적는 편이 좋습니다.

textarea 태그

textarea 태그는 여러 줄의 긴 글을 입력받을 때 사용합니다.

문의 내용, 자기소개, 게시글 내용처럼 긴 문장을 입력할 때 적합합니다.

<label for="message">문의 내용</label>
<textarea id="message" name="message"></textarea>

input type="text"는 한 줄 입력에 가깝고, textarea는 여러 줄 입력에 가깝습니다.

<textarea name="intro" rows="5" cols="30"></textarea>

rows는 세로 줄 수를 의미합니다.

cols는 가로 글자 수를 의미합니다.

다만 실제 디자인은 보통 CSS로 조절하는 경우가 많습니다.

select 태그

select 태그는 여러 선택지 중 하나를 고를 때 사용합니다.

드롭다운 메뉴라고 생각하면 됩니다.

<label for="job">직무 선택</label>
<select id="job" name="job">
  <option value="frontend">프론트엔드</option>
  <option value="backend">백엔드</option>
  <option value="designer">디자이너</option>
</select>

select 안에는 option 태그를 넣습니다.

사용자에게 보이는 글자는 option 태그 안의 텍스트입니다.

서버로 전달되는 값은 value 속성입니다.

예를 들어 사용자가 백엔드를 선택하면 서버에는 backend라는 값이 전달됩니다.

폼 태그를 한 번에 사용한 예시

아래는 간단한 회원가입 폼 예시입니다.

<form action="/signup" method="post">
  <div>
    <label for="username">아이디</label>
    <input id="username" type="text" name="username" />
  </div>

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

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

  <div>
    <label for="intro">자기소개</label>
    <textarea id="intro" name="intro"></textarea>
  </div>

  <div>
    <label for="interest">관심 분야</label>
    <select id="interest" name="interest">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
  </div>

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

처음에는 코드가 길어 보일 수 있습니다.

하지만 구조를 나눠서 보면 어렵지 않습니다.

• form: 입력 영역 전체
• label: 입력칸 이름표
• input: 한 줄 입력
• textarea: 여러 줄 입력
• select: 선택 목록
• button: 제출 버튼

label을 꼭 같이 쓰는 이유

입력칸만 있어도 화면은 만들 수 있습니다.

<input type="text" name="username" />

하지만 이 코드만 보면 사용자는 무엇을 입력해야 하는지 알기 어렵습니다.

그래서 보통 label을 함께 사용합니다.

<label for="username">아이디</label>
<input id="username" type="text" name="username" />

label은 화면을 보는 사람뿐만 아니라 스크린 리더 같은 보조 기술에도 도움이 됩니다.

그래서 입력 태그를 만들 때는 label도 같이 작성하는 습관을 들이는 것이 좋습니다.

input과 textarea 차이

input과 textarea는 둘 다 글자를 입력받을 수 있습니다.

하지만 쓰임이 다릅니다.

간단히 말하면 짧은 값은 input, 긴 글은 textarea를 사용하면 됩니다.

select는 언제 사용할까?

select는 사용자가 직접 입력하기보다 정해진 값 중에서 고르게 하고 싶을 때 사용합니다.

예를 들어 다음과 같은 상황에 어울립니다.

• 지역 선택
• 직무 선택
• 카테고리 선택
• 문의 유형 선택

<select name="category">
  <option value="question">문의</option>
  <option value="bug">버그 신고</option>
  <option value="etc">기타</option>
</select>

사용자가 마음대로 입력하면 값이 제각각일 수 있습니다.

하지만 select를 사용하면 정해진 값만 받을 수 있어서 데이터를 처리하기 편합니다.

정리

HTML 폼은 사용자의 입력을 받기 위한 구조입니다.

form은 입력 요소 전체를 감싸는 태그입니다.

input은 한 줄 입력을 받을 때 사용합니다.

label은 입력칸의 이름표 역할을 합니다.

button은 버튼을 만들 때 사용합니다.

textarea는 여러 줄의 긴 글을 입력받을 때 사용합니다.

select는 정해진 선택지 중 하나를 고를 때 사용합니다.

처음에는 태그를 외우기보다 “어떤 입력을 받을 때 어떤 태그를 쓰는지”를 기준으로 이해하는 것이 좋습니다.