10. 사용자와 대화하기: 폼과 입력 요소 입문

지금까지 만든 웹페이지는 주로 "보여주는 화면"이었습니다. 제목을 보여주고, 문단을 보여주고, 링크와 이미지를 보여줬죠. 그런데 웹은 거기서 멈추지 않습니다. 웹은 질문도 하고, 답도 받고, 선택도 받습니다.

바로 이때 등장하는 주인공이 폼(form) 입니다. 폼을 배우면 웹페이지는 조용한 안내판에서, 사용자와 말을 주고받는 공간으로 바뀝니다.¹

이번 장에서는 <form>, <input>, <label>, <textarea>, <select>, <button>을 이용해 직접 입력 화면을 만들어 보겠습니다.

폼은 무엇일까요?

폼은 사용자의 입력을 모으는 공간입니다. 회원가입 창, 로그인 화면, 검색창, 댓글 작성 칸, 설문조사 페이지가 모두 폼의 예시입니다. 사용자가 입력한 값은 브라우저 안에서 잠깐 사용될 수도 있고, 서버로 전송되어 저장되거나 처리될 수도 있습니다.²

쉽게 말하면 폼은 웹페이지 속 작은 접수창입니다. 이름을 적고, 좋아하는 것을 고르고, 하고 싶은 말을 남기면, 웹페이지가 그 내용을 받아들이는 것이죠.

<form>: 입력 요소들을 감싸는 큰 상자

모든 폼은 보통 <form> 태그로 시작합니다.

<form>
  폼 요소들
</form>

<form>은 입력칸 하나를 만드는 태그가 아니라, 여러 입력 요소를 한 팀으로 묶는 태그입니다. 이 안에 있는 입력값들이 함께 제출됩니다.¹

조금 더 실제답게 쓰면 이렇게 생깁니다.

<form action="/submit" method="post">
  폼 요소들
</form>

여기서 초보자가 먼저 기억하면 좋은 속성은 두 가지입니다.

• action: 입력한 데이터를 어디로 보낼지 정하는 주소

• method: 어떤 방식으로 보낼지 정하는 값

• get, post: 가장 많이 쓰는 전송 방식

지금은 서버를 아직 배우지 않았으니, action과 method는 "나중에 입력값을 보낼 길을 정하는 설정" 정도로 이해하면 충분합니다.²

<label>과 <input>: 이름표와 입력칸

폼을 만들 때 가장 자주 만나는 조합은 <label>과 <input>입니다.

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

여기서 역할은 아주 분명합니다.

<label>은 입력칸의 이름표입니다. 사용자는 이 칸이 무엇을 입력하는 곳인지 알 수 있습니다. <input>은 실제로 값을 입력하는 칸입니다. 그리고 for와 id를 같은 값으로 맞추면 둘이 연결됩니다.³

예를 들어 위 코드에서는 for="username"과 id="username"이 서로 연결되어 있습니다. 그래서 라벨 글자를 클릭해도 입력칸에 커서가 들어갑니다. 이것은 사용하기 편할 뿐 아니라, 화면 읽기 도구를 쓰는 사람에게도 도움이 됩니다.³

<input>은 왜 이렇게 많이 쓰일까요?

<input>은 폼 세계의 만능 선수입니다. type 속성에 따라 모습과 역할이 달라지기 때문입니다.¹

가장 기본인 한 줄 입력

<label for="nickname">닉네임</label>
<input type="text" id="nickname" name="nickname">

type="text"는 가장 기본적인 한 줄 입력칸입니다. 이름, 닉네임, 제목처럼 짧은 글을 받을 때 사용합니다.

비밀번호 입력

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

type="password"는 입력한 글자가 점이나 별표처럼 가려져 보입니다. 실제 값이 사라지는 것은 아니고, 화면에만 숨겨지는 것입니다.

이메일 입력

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

type="email"은 이메일 형식에 맞는지 브라우저가 기본적으로 한 번 확인해 줍니다. 또한 모바일에서는 이메일 입력에 편한 키보드가 뜨기도 합니다.²

체크박스: 여러 개 선택 가능

<input type="checkbox" id="html" name="interest_html" value="html">
<label for="html">HTML</label>

체크박스는 여러 개를 동시에 선택할 수 있는 입력입니다.

라디오 버튼: 하나만 선택 가능

<input type="radio" id="morning" name="time" value="morning">
<label for="morning">오전</label>

<input type="radio" id="afternoon" name="time" value="afternoon">
<label for="afternoon">오후</label>

라디오 버튼은 같은 name 값을 가진 항목끼리 한 묶음이 됩니다. 그래서 그중 하나만 고를 수 있습니다.¹

초보자가 여기서 가장 많이 헷갈리는 점은 이것입니다. 라디오 버튼이 한 팀으로 동작하려면 id가 아니라 name이 같아야 합니다.

꼭 기억할 속성: id, for, name

폼을 쓰다 보면 비슷해 보이는 속성이 여럿 나옵니다. 하지만 역할은 다릅니다.

• id: 요소를 구별하는 고유한 이름. 주로 label과 연결할 때 사용

• for: label이 어떤 입력칸을 설명하는지 가리키는 값

• name: 폼이 제출될 때 서버로 전달되는 데이터의 이름

특히 name은 정말 중요합니다. 사용자가 값을 입력했더라도 name이 없으면 제출할 때 그 값이 빠질 수 있습니다.¹

예를 들어 아래 코드에서 사용자가 "민지"를 입력하면, 전송될 때는 username=민지처럼 이름표가 붙어서 전달됩니다.

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

즉, id는 화면 안에서 구별하기 위한 이름에 가깝고, name은 전송할 때 쓰는 이름에 가깝습니다.

긴 글은 <textarea>로 받기

한 줄짜리 입력칸으로는 자기소개나 문의 내용을 쓰기 불편합니다. 그럴 때는 <textarea>를 사용합니다.⁴

<label for="message">메시지</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea>

<textarea>는 여러 줄 입력이 가능한 태그입니다. Enter 키를 눌러 줄바꿈도 할 수 있습니다.

여기서 재미있는 차이도 하나 있습니다. <input>은 닫는 태그가 없지만, <textarea>는 여는 태그와 닫는 태그가 모두 있습니다. 그래서 기본 내용을 넣고 싶다면 value 속성 대신 태그 사이에 적습니다.²

<textarea id="intro" name="intro">안녕하세요!</textarea>

고르기 입력은 <select>로 만들기

선택지가 정해져 있다면 사용자가 직접 타이핑하게 하기보다, 고르게 만드는 편이 더 편할 때가 많습니다. 이럴 때 <select>를 씁니다.⁴

<label for="job">관심 분야</label>
<select id="job" name="job">
  <option value="frontend">프론트엔드</option>
  <option value="backend">백엔드</option>
  <option value="design">디자인</option>
</select>

<select>는 드롭다운 목록을 만들고, 그 안의 <option>이 실제 선택지입니다.

사용자 눈에는 "프론트엔드"처럼 글자가 보이지만, 실제로 제출될 때는 value에 적힌 값이 사용됩니다. 만약 value="frontend"라면 전송값은 frontend입니다.⁴

<button>: 마지막에 행동을 일으키는 태그

입력을 다 받았다면 이제 버튼이 필요합니다.

<button type="submit">보내기</button>

폼 안의 버튼은 특히 type을 꼭 써 주는 습관을 들이는 것이 좋습니다.⁴

버튼은 보통 이렇게 나뉩니다.

• type="submit": 폼을 제출함

• type="reset": 입력값을 처음 상태로 되돌림

• type="button": 기본 동작 없음, 나중에 자바스크립트와 함께 사용

초보자에게는 submit이 가장 중요합니다. 사용자가 입력한 내용을 "이제 보낼게요!" 하고 알리는 버튼이기 때문입니다.

참고로 <button>은 폼 안에 들어가면 기본적으로 제출 버튼처럼 동작할 수 있으므로, 헷갈리지 않게 항상 type을 명시하는 편이 좋습니다.⁴

자주 쓰는 보조 속성도 알아두기

폼은 태그만 알아도 만들 수 있지만, 몇 가지 속성을 알면 훨씬 친절한 화면이 됩니다.

<input
  type="text"
  id="name"
  name="name"
  placeholder="이름을 입력하세요"
  required
>

여기서 자주 보는 속성은 다음과 같습니다.

• placeholder: 입력 예시나 힌트를 흐리게 보여 줌

• required: 꼭 입력해야 제출되도록 함

• value: 기본값을 미리 넣어 둠

하지만 placeholder는 어디까지나 힌트일 뿐입니다. 이름표 역할은 하지 못하므로, label을 대신할 수는 없습니다.³

직접 만들어 보기: 간단한 신청 폼

이제 지금까지 배운 태그를 한 번에 모아 보겠습니다. 아래 예제는 초보자가 가장 먼저 만들어 보기 좋은 형태의 신청 폼입니다.

<form action="#" method="post">
  <h2>HTML 체험단 신청서</h2>

  <p>
    <label for="name">이름</label><br>
    <input type="text" id="name" name="name" placeholder="이름을 입력하세요" required>
  </p>

  <p>
    <label for="email">이메일</label><br>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>
  </p>

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

  <p>
    좋아하는 시간대<br>
    <input type="radio" id="morning" name="time" value="morning">
    <label for="morning">오전</label>

    <input type="radio" id="night" name="time" value="night">
    <label for="night">저녁</label>
  </p>

  <p>
    배우고 싶은 것<br>
    <input type="checkbox" id="learn-html" name="learn_html" value="html">
    <label for="learn-html">HTML</label>

    <input type="checkbox" id="learn-css" name="learn_css" value="css">
    <label for="learn-css">CSS</label>
  </p>

  <p>
    <label for="level">현재 느낌</label><br>
    <select id="level" name="level">
      <option value="beginner">완전 초보예요</option>
      <option value="curious">조금 궁금해요</option>
      <option value="excited">당장 만들어 보고 싶어요</option>
    </select>
  </p>

  <p>
    <label for="message">하고 싶은 말</label><br>
    <textarea id="message" name="message" rows="5" cols="30" placeholder="자유롭게 적어 보세요"></textarea>
  </p>

  <p>
    <button type="submit">신청하기</button>
  </p>
</form>

이 코드를 브라우저에서 열어 보면, 이제 웹페이지가 가만히 있지 않고 사용자의 입력을 기다리는 모습을 볼 수 있습니다. 마치 종이 포스터가 갑자기 설문조사 부스로 진화한 느낌입니다.

이 예제에서 꼭 눈여겨볼 점

이 예제는 단순해 보여도 폼의 핵심이 다 들어 있습니다.

먼저, 모든 입력 요소가 <form> 안에 들어 있습니다. 그래서 하나의 폼으로 묶입니다. 이름과 이메일처럼 짧은 입력은 <input>으로 받고, 긴 글은 <textarea>로 받습니다. 정해진 선택지는 <select>나 라디오 버튼, 체크박스로 구성했습니다. 마지막에는 <button type="submit">으로 제출 동작을 만들었습니다.

즉, 폼은 태그 하나로 완성되는 것이 아니라, 여러 태그가 협력해서 만들어지는 구조입니다. 혼자서는 그냥 입력칸일 뿐이지만, 함께 모이면 진짜 "대화 화면"이 됩니다.

초보자가 자주 하는 실수

처음 폼을 만들면 비슷한 실수를 자주 합니다. 미리 알고 가면 훨씬 덜 헷갈립니다.

• label의 for와 input의 id를 다르게 적는 실수

• name을 빼먹어서 제출할 값이 제대로 전달되지 않는 실수

• 라디오 버튼의 name을 각각 다르게 적어서 한 개만 선택되지 않는 실수

• <button>에 type을 쓰지 않아 의도치 않게 제출되는 실수

폼이 이상하게 보인다면, 먼저 이 네 가지를 확인해 보세요. 생각보다 자주 여기서 문제가 생깁니다.

이번 장의 핵심 정리

이 장에서 기억해야 할 가장 중요한 문장은 이것입니다.

폼은 사용자 입력을 받기 위한 공간이고, 입력 요소들은 각자 맡은 역할이 있다.

• <form>은 전체를 묶는다.

• <input>은 한 줄 입력이나 선택 입력을 만든다.

• <label>은 입력칸의 이름표다.

• <textarea>는 여러 줄 글을 받는다.

• <select>는 정해진 선택지를 고르게 한다.

• <button>은 제출 같은 행동을 일으킨다.

여기까지 익히면 이제 여러분은 단순한 페이지를 만드는 단계를 넘어, 사용자와 상호작용하는 페이지를 만들 수 있게 됩니다. 다음 장에서는 한 걸음 더 나아가, 이 입력 요소들을 더 의미 있게 배치하고 더 많은 사람이 편하게 사용할 수 있도록 만드는 방법을 만나게 됩니다.

참고

¹W3Schools HTML Forms

²MDN Forms and buttons in HTML

³MDN Your first form

⁴W3Schools HTML Form Elements