HTML만으로 만드는 학급 설문 폼 실습

이번 편은 실습 위주입니다

6편에서 폼의 기초를 배웠습니다. 이번 편에서는 실제로 쓸 수 있는 수준의 설문 폼을 처음부터 끝까지 완성합니다. 그 과정에서 입력 유효성 검사 속성도 함께 익힙니다.

입력 유효성 검사 속성들

HTML5부터는 JavaScript 없이도 간단한 입력 검사를 할 수 있습니다.

`required` — 필수 입력

<input type="text" required />

비워두고 제출 버튼을 누르면 자동으로 "이 필드를 작성하세요" 메시지가 뜹니다.

`minlength` / `maxlength` — 글자 수 제한

<!-- 최소 2글자, 최대 20글자 -->
<input type="text" minlength="2" maxlength="20" />

`min` / `max` — 숫자 범위

<!-- 1~100 사이 숫자만 -->
<input type="number" min="1" max="100" />

`pattern` — 정규식 패턴

<!-- 숫자 4자리만 허용 (학번 등) -->
<input type="text" pattern="[0-9]{4}" title="4자리 숫자를 입력하세요" />

`placeholder` — 힌트 텍스트

<input type="text" placeholder="예) 홍길동" />

실습: 학급 설문 폼 완성하기

아래 완성본 코드를 천천히 읽고, 직접 타이핑해서 만들어 보세요. 복사·붙여넣기보다 직접 치는 게 훨씬 빨리 외워집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>학급 설문지</title>
</head>
<body>

  <header>
    <h1>📋 학급 설문지</h1>
    <p>2026학년도 1학기 학급 만족도 조사입니다. 솔직하게 답해 주세요!</p>
  </header>

  <main>
    <form>

      <!-- 1. 기본 정보 -->
      <section>
        <h2>기본 정보</h2>

        <div>
          <label for="name">이름 <span>*</span></label><br />
          <input
            type="text"
            id="name"
            name="name"
            placeholder="홍길동"
            required
            minlength="2"
            maxlength="10"
          />
        </div>

        <br />

        <div>
          <label for="grade">학년</label><br />
          <select id="grade" name="grade" required>
            <option value="">-- 선택하세요 --</option>
            <option value="1">1학년</option>
            <option value="2">2학년</option>
            <option value="3">3학년</option>
          </select>
        </div>

        <br />

        <div>
          <label for="class">반</label><br />
          <input
            type="number"
            id="class"
            name="class"
            min="1"
            max="12"
            placeholder="반 번호"
          />
        </div>
      </section>

      <hr />

      <!-- 2. 학교 생활 -->
      <section>
        <h2>학교 생활</h2>

        <div>
          <p>가장 좋아하는 과목을 모두 선택하세요:</p>
          <label>
            <input type="checkbox" name="subject" value="korean" /> 국어
          </label>
          <label>
            <input type="checkbox" name="subject" value="math" /> 수학
          </label>
          <label>
            <input type="checkbox" name="subject" value="english" /> 영어
          </label>
          <label>
            <input type="checkbox" name="subject" value="science" /> 과학
          </label>
          <label>
            <input type="checkbox" name="subject" value="pe" /> 체육
          </label>
          <label>
            <input type="checkbox" name="subject" value="art" /> 미술
          </label>
        </div>

        <br />

        <div>
          <p>학교 급식 만족도:</p>
          <label>
            <input type="radio" name="lunch" value="5" required /> 매우 만족
          </label>
          <label>
            <input type="radio" name="lunch" value="4" /> 만족
          </label>
          <label>
            <input type="radio" name="lunch" value="3" /> 보통
          </label>
          <label>
            <input type="radio" name="lunch" value="2" /> 불만족
          </label>
          <label>
            <input type="radio" name="lunch" value="1" /> 매우 불만족
          </label>
        </div>

        <br />

        <div>
          <label for="activity">가장 즐거운 학교 활동:</label><br />
          <select id="activity" name="activity">
            <option value="">-- 선택하세요 --</option>
            <option value="sports">체육 대회</option>
            <option value="festival">축제</option>
            <option value="field-trip">현장 학습</option>
            <option value="club">동아리 활동</option>
            <option value="other">기타</option>
          </select>
        </div>
      </section>

      <hr />

      <!-- 3. 의견 -->
      <section>
        <h2>의견</h2>

        <div>
          <label for="suggestion">학교에 바라는 점:</label><br />
          <textarea
            id="suggestion"
            name="suggestion"
            rows="5"
            cols="50"
            placeholder="자유롭게 적어 주세요. (선택 사항)"
            maxlength="500"
          ></textarea>
        </div>

        <br />

        <div>
          <label>
            <input type="checkbox" name="agree" required />
            이 설문은 학급 개선을 위해서만 사용됩니다. 동의합니다.
          </label>
        </div>
      </section>

      <hr />

      <!-- 제출 버튼 -->
      <div>
        <button type="submit">제출하기</button>
        <button type="reset">다시 작성</button>
      </div>

    </form>
  </main>

  <footer>
    <p>© 2026 1학년 1반 | 설문 관련 문의: 담임 선생님께 문의하세요.</p>
  </footer>

</body>
</html>

코드를 완성한 뒤 확인할 것들

이름 필드를 비우고 제출 → 오류 메시지가 뜨나요?
반 번호에 100을 입력 → 최대값 초과 경고가 뜨나요?
동의 체크박스를 체크하지 않고 제출 → 막히나요?
다시 작성 버튼 → 모든 입력이 초기화되나요?

개선 아이디어

이 폼을 더 좋게 만들려면 무엇이 필요할까요?

지금은 디자인이 없어서 투박합니다. 다음 시리즈(CSS)를 배우면 예쁘게 꾸밀 수 있습니다.
제출 버튼을 눌러도 실제로 데이터가 전송되지 않습니다. 서버 연결은 백엔드 영역으로, 나중에 배우게 됩니다.
유효성 검사 메시지가 영어로 나옵니다. JavaScript를 배우면 한국어 메시지로 바꿀 수 있습니다.

직접 해보기 ✏️

위 설문지를 완성한 뒤, "우리 학교 급식 메뉴 투표" 폼을 새로 만들어 보세요.

포함할 내용:

이름 (필수)
가장 좋아하는 급식 메뉴 (라디오: 본인이 생각하는 메뉴 5개)
가장 싫어하는 급식 메뉴 (라디오)
추가됐으면 하는 메뉴 (텍스트 입력)
제출 버튼

정리

이번 편에서 배운 유효성 검사 속성:

속성	역할
`required`	필수 입력
`minlength` / `maxlength`	텍스트 글자 수 제한
`min` / `max`	숫자 범위 제한
`pattern`	정규식 패턴 검사

다음 편(마지막 HTML 편!)에서는 지금까지 배운 HTML을 모두 활용해 나만의 소개 웹페이지를 완성합니다.

이번 편은 실습 위주입니다

입력 유효성 검사 속성들

required — 필수 입력

minlength / maxlength — 글자 수 제한

min / max — 숫자 범위

pattern — 정규식 패턴

placeholder — 힌트 텍스트