책에 포함된 노트비개발자를 위한 HTML: 가장 쉽게 시작하는 웹페이지 만들기

입력 양식으로 방문자와 소통하기

2026-07-09Views 4약 7분생성형 AI 활용

Summary

입력 양식은 방문자와 나누는 작은 대화입니다

지금까지 만든 웹페이지는 주로 우리가 준비한 내용을 방문자에게 보여 주는 방식이었습니다. 소개 글을 보여 주고, 이미지를 넣고, 링크를 걸고, 표로 정보를 정리했습니다.

이번에는 방향이 조금 달라집니다. 방문자가 우리에게 무언가를 적어 보내는 공간을 만듭니다. 문의하기, 행사 신청하기, 예약 요청하기, 간단한 설문 작성하기 같은 페이지가 여기에 해당합니다.

예를 들어 작은 공방의 원데이 클래스 신청 페이지를 떠올려 봅시다. 방문자에게 다음 정보를 받고 싶을 수 있습니다.

이름
이메일 주소
듣고 싶은 수업
남기고 싶은 메시지

이런 입력 칸들을 한데 묶은 영역을 HTML에서는 폼이라고 부릅니다. 폼은 종이 신청서와 비슷합니다. 종이 신청서에 이름 칸, 연락처 칸, 선택 항목, 남기는 말 칸이 있듯이, HTML 폼에도 여러 입력 요소가 들어갑니다.

입력 양식으로 방문자와 소통하기 AI 생성 이미지

`form`은 입력 칸들을 한 묶음으로 감쌉니다

폼 전체를 만들 때는 form 태그를 사용합니다.

<form>
  <!-- 입력 칸들이 이 안에 들어갑니다 -->
</form>

form은 방문자가 입력하는 여러 칸을 하나의 제출 영역으로 묶습니다. 비유하자면 form은 신청서 종이 한 장이고, 그 안에 이름 칸, 이메일 칸, 선택 칸, 메시지 칸이 놓입니다.

실제 페이지 안에서는 보통 이런 위치에 들어갑니다.

<main>
  <section>
    <h2>원데이 클래스 신청</h2>
    <p>참여를 원하시면 아래 내용을 남겨 주세요.</p>

    <form>
      <!-- 입력 요소 -->
    </form>
  </section>
</main>

여기서 중요한 점은 form 자체가 눈에 띄는 입력 칸을 만드는 태그는 아니라는 것입니다. form은 입력 칸들을 담는 바구니에 가깝습니다. 실제로 글자를 입력하는 칸은 input, 긴 글을 쓰는 칸은 textarea, 고르는 칸은 select, 제출 버튼은 button으로 만듭니다.

이름과 이메일 입력 칸 만들기

가장 자주 쓰는 입력 요소는 input입니다. input은 한 줄짜리 입력 칸을 만들 때 사용합니다.

먼저 이름을 받는 칸을 만들어 보겠습니다.

<label for="user-name">이름</label>
<input type="text" id="user-name" name="userName">

브라우저에서는 대략 이렇게 보입니다.

이름 [ ]

여기서 새로 나온 것이 몇 가지 있습니다.

label은 입력 칸의 이름표입니다. 화면에 "이름"이라고 보여 주는 역할을 합니다. input은 실제로 방문자가 글자를 입력하는 칸입니다.

type="text"는 이 칸이 일반 글자를 입력하는 칸이라는 뜻입니다. 이름, 회사명, 짧은 답변처럼 한 줄로 적는 정보에 어울립니다.

id="user-name"은 이 입력 칸에 붙인 고유한 이름입니다. 같은 HTML 문서 안에서 특정 입력 칸을 가리키기 위해 사용합니다.

name="userName"은 나중에 이 값이 제출될 때 어떤 이름으로 전달될지 정하는 속성입니다. 화면에 직접 보이지는 않지만, 제출 데이터를 다룰 때 중요합니다.

이메일 입력 칸은 type만 바꾸면 됩니다.

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

type="email"이라고 쓰면 브라우저는 이 칸이 이메일 주소를 받는 곳이라는 사실을 압니다. 그래서 모바일에서는 이메일 입력에 맞는 키보드를 보여 주기도 하고, 제출할 때 이메일 형식이 너무 이상하면 알려 주기도 합니다.

HTML이 모든 실수를 완벽하게 막아 주지는 않습니다. 그래도 type을 알맞게 쓰면 브라우저가 도와줄 수 있는 일이 많아집니다.

`label`은 입력 칸과 꼭 연결해 주세요

입력 칸 옆에 그냥 글자만 써도 화면에는 비슷하게 보일 수 있습니다.

<p>이름</p>
<input type="text">

하지만 이 방식은 좋은 방법이 아닙니다. "이름"이라는 글자와 입력 칸이 HTML 구조상 연결되어 있지 않기 때문입니다.

입력 칸의 이름은 label로 만드는 것이 좋습니다.

<label for="user-name">이름</label>
<input type="text" id="user-name" name="userName">

label의 for 값과 input의 id 값이 같으면 두 요소가 연결됩니다.

<label for="user-name">이름</label>
<input id="user-name">

여기서는 둘 다 user-name입니다.

이렇게 연결하면 좋은 점이 있습니다.

첫째, 사용자가 "이름"이라는 글자를 클릭해도 입력 칸이 선택됩니다. 작은 차이처럼 보이지만, 휴대폰 화면에서는 꽤 편합니다.

둘째, 화면 읽기 도구를 사용하는 사람에게도 이 입력 칸이 무엇을 받는 칸인지 더 분명하게 전달됩니다. HTML에서 의미에 맞는 태그를 쓰는 일이 중요한 이유가 여기서도 이어집니다.

셋째, 나중에 코드를 읽는 사람도 어떤 설명이 어떤 입력 칸과 연결되는지 쉽게 알 수 있습니다.

선택 항목은 `select`로 만들 수 있습니다

방문자가 여러 항목 중 하나를 고르게 하고 싶을 때는 select를 사용할 수 있습니다. 예를 들어 듣고 싶은 수업을 고르는 칸을 만들어 보겠습니다.

<label for="class-type">신청할 수업</label>
<select id="class-type" name="classType">
  <option value="candle">캔들 만들기</option>
  <option value="soap">비누 만들기</option>
  <option value="flower">꽃다발 만들기</option>
</select>

select는 선택 상자 전체를 만듭니다. 그 안의 option은 각각의 선택지입니다.

화면에서는 보통 아래로 펼쳐지는 목록처럼 보입니다.

신청할 수업 [캔들 만들기 ▼]

option 태그 안에 적은 글자는 방문자에게 보이는 문구입니다. value는 제출될 때 사용되는 값입니다.

<option value="candle">캔들 만들기</option>

방문자는 "캔들 만들기"를 보지만, 데이터로는 candle이라는 값이 전달될 수 있습니다. 지금은 이 차이를 깊게 외울 필요는 없습니다. 화면에 보이는 말과 실제로 전달되는 값을 나누어 쓸 수 있다는 정도만 이해하면 충분합니다.

긴 메시지는 `textarea`에 받습니다

이름이나 이메일처럼 짧은 내용은 input으로 충분합니다. 하지만 문의 내용, 요청 사항, 자기소개처럼 여러 줄로 적을 수 있는 내용은 textarea를 사용합니다.

<label for="message">남기고 싶은 말</label>
<textarea id="message" name="message" rows="5"></textarea>

textarea는 여는 태그와 닫는 태그가 모두 있습니다.

<textarea></textarea>

input처럼 한 줄로 끝나지 않는다는 점을 기억해 주세요.

rows="5"는 입력 칸을 대략 5줄 높이로 보여 달라는 뜻입니다. 방문자가 꼭 5줄만 쓸 수 있다는 뜻은 아닙니다. 처음 화면에 보이는 높이를 정하는 정도로 생각하면 됩니다.

제출 버튼은 `button`으로 만듭니다

입력 칸을 다 만들었다면, 방문자가 내용을 보내기 위해 누를 버튼이 필요합니다.

<button type="submit">신청 내용 보내기</button>

button은 버튼을 만드는 태그입니다. type="submit"은 이 버튼이 폼을 제출하는 버튼이라는 뜻입니다.

버튼 문구는 구체적으로 쓰는 것이 좋습니다.

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

이렇게만 써도 틀리지는 않습니다. 하지만 아래처럼 쓰면 방문자가 버튼을 눌렀을 때 무슨 일이 일어나는지 더 분명합니다.

<button type="submit">문의 내용 보내기</button>

또는 행사 신청 페이지라면 이렇게 쓸 수 있습니다.

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

버튼 문구도 링크 문구와 비슷합니다. "무엇을 하는 버튼인지"가 드러나면 좋습니다.

간단한 신청 폼 완성하기

이제 이름, 이메일, 선택 항목, 메시지, 제출 버튼을 모두 합쳐 보겠습니다.

<section>
  <h2>원데이 클래스 신청</h2>
  <p>참여를 원하시면 아래 내용을 남겨 주세요.</p>

  <form>
    <p>
      <label for="user-name">이름</label><br>
      <input type="text" id="user-name" name="userName">
    </p>

    <p>
      <label for="user-email">이메일</label><br>
      <input type="email" id="user-email" name="userEmail">
    </p>

    <p>
      <label for="class-type">신청할 수업</label><br>
      <select id="class-type" name="classType">
        <option value="candle">캔들 만들기</option>
        <option value="soap">비누 만들기</option>
        <option value="flower">꽃다발 만들기</option>
      </select>
    </p>

    <p>
      <label for="message">남기고 싶은 말</label><br>
      <textarea id="message" name="message" rows="5"></textarea>
    </p>

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

여기서는 각 입력 묶음을 p 태그로 감쌌습니다. 지금 단계에서는 입력 칸끼리 너무 붙어 보이지 않도록 가볍게 나누는 용도입니다. 나중에 CSS를 배우면 여백과 배치를 더 보기 좋게 다듬을 수 있습니다.

<br>은 줄바꿈을 위해 사용했습니다. 실제 서비스에서는 CSS로 줄 배치를 조정하는 경우가 많지만, 지금은 HTML 폼의 구조를 먼저 익히는 것이 목적입니다.

코드를 복사해서 body 안에 넣고 브라우저에서 열어 보세요. 이름을 입력하고, 이메일을 입력하고, 수업을 골라 보고, 메시지도 써 볼 수 있습니다.

HTML만으로는 내용을 저장하기 어렵습니다

여기서 꼭 현실적인 이야기를 해야 합니다.

HTML로 폼 화면을 만들 수는 있습니다. 방문자가 이름을 입력하고, 이메일을 입력하고, 메시지를 쓰는 화면까지는 만들 수 있습니다.

하지만 HTML만으로는 그 내용을 어딘가에 저장하거나, 내 이메일로 자동 전송하기 어렵습니다.

종이 신청서에 비유해 보겠습니다. HTML 폼은 신청서 양식을 인쇄해 책상 위에 올려 둔 것과 비슷합니다. 하지만 누군가 작성한 신청서를 수거하고, 정리하고, 담당자에게 전달하는 사람이나 시스템은 따로 필요합니다.

웹에서도 마찬가지입니다. 폼에 적힌 내용을 실제로 처리하려면 보통 다음 중 하나가 필요합니다.

서버 프로그램
폼 제출을 받아 주는 외부 서비스
쇼핑몰, 홈페이지 빌더, 노코드 도구에서 제공하는 문의 기능
구글 폼 같은 별도 설문 도구

그래서 처음 HTML을 배울 때는 "입력 화면을 만드는 것"과 "입력된 내용을 실제로 받는 것"을 나누어 생각하면 좋습니다.

HTML은 입력 화면의 구조를 만듭니다. 어디에 이름을 쓰고, 어디에 이메일을 쓰고, 어떤 항목을 고르고, 어떤 버튼을 누를지 정합니다.

그다음 제출된 내용을 저장하거나 보내는 일은 다른 기술이나 서비스가 맡습니다.

`action`과 `method`는 보내는 위치와 방식입니다

폼을 실제로 제출하려면 form 태그에 추가 정보를 적는 경우가 많습니다.

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

action은 폼 내용을 어디로 보낼지 적는 속성입니다. method는 어떤 방식으로 보낼지 적는 속성입니다.

하지만 지금 직접 만든 HTML 파일에서 위 코드를 쓴다고 해서 자동으로 신청 내용이 저장되는 것은 아닙니다. /apply라는 주소에서 데이터를 받아 처리하는 준비가 되어 있어야 합니다.

따라서 처음에는 이렇게 이해하면 충분합니다.

form: 여러 입력 칸을 하나로 묶는 영역
action: 제출 내용을 보낼 곳
method: 제출 내용을 보내는 방식
실제 저장과 전송: 서버나 외부 서비스가 필요

이 구분을 알고 있으면 나중에 홈페이지 제작 서비스나 폼 서비스를 사용할 때 안내 문구가 훨씬 덜 낯설게 느껴집니다.

이번에 기억할 것

문의하기, 신청하기, 설문 작성 페이지는 특별한 마법으로 만들어지지 않습니다. 대부분은 form 안에 여러 입력 요소를 넣어 만든 구조입니다.

한 줄 입력은 input, 긴 글 입력은 textarea, 선택 상자는 select, 버튼은 button으로 만듭니다. 그리고 각 입력 칸에는 무엇을 적어야 하는지 알려 주는 label을 연결해 주는 것이 좋습니다.

마지막으로, HTML은 입력 양식의 모양과 구조를 만드는 역할을 합니다. 방문자가 적은 내용을 실제로 저장하거나 이메일로 보내려면 별도의 서비스나 서버가 필요합니다.

이 차이를 알고 있으면 폼을 훨씬 현실적으로 이해할 수 있습니다. 이제 웹페이지는 단순히 보여 주는 문서에서, 방문자가 반응을 남길 수 있는 공간으로 한 걸음 넓어졌습니다.

책 목록

비개발자를 위한 HTML: 가장 쉽게 시작하는 웹페이지 만들기

전체 목차 보기