이번 편은 실습 위주입니다#
6편에서 폼의 기초를 배웠습니다. 이번 편에서는 실제로 쓸 수 있는 수준의 설문 폼을 처음부터 끝까지 완성합니다. 그 과정에서 입력 유효성 검사 속성도 함께 익힙니다.
입력 유효성 검사 속성들#
HTML5부터는 JavaScript 없이도 간단한 입력 검사를 할 수 있습니다.
required — 필수 입력#
HTML
<input type="text" required />비워두고 제출 버튼을 누르면 자동으로 "이 필드를 작성하세요" 메시지가 뜹니다.
minlength / maxlength — 글자 수 제한#
HTML
<!-- 최소 2글자, 최대 20글자 -->
<input type="text" minlength="2" maxlength="20" />min / max — 숫자 범위#
HTML
<!-- 1~100 사이 숫자만 -->
<input type="number" min="1" max="100" />pattern — 정규식 패턴#
HTML
<!-- 숫자 4자리만 허용 (학번 등) -->
<input type="text" pattern="[0-9]{4}" title="4자리 숫자를 입력하세요" />placeholder — 힌트 텍스트#
HTML
<input type="text" placeholder="예) 홍길동" />실습: 학급 설문 폼 완성하기#
아래 완성본 코드를 천천히 읽고, 직접 타이핑해서 만들어 보세요. 복사·붙여넣기보다 직접 치는 게 훨씬 빨리 외워집니다.
HTML
<!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을 모두 활용해 나만의 소개 웹페이지를 완성합니다.
