Day 59 - 실습 - 간단한 설문조사
🎯 학습 목표
- 실제 설문조사 폼 제작해보기
- form과 input을 실전에서 활용하기
- 다양한 입력 필드 조합하기
- 폼의 전체 구조 완벽하게 이해하기
- 사용자 친화적인 폼 디자인하기
📌 오늘의 실습 목표
💡 무엇을 만들까요?
오늘은 "웹 학습 만족도 설문조사" 폼을 만들어봅니다!
이름, 이메일, 학습 기간, 만족도 등을 입력받는 실제 설문조사 폼을 직접 제작하면서 지금까지 배운 내용을 종합적으로 활용해봅시다.
💻 완성 예제
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 학습 만족도 설문조사</title>
</head>
<body>
<h1>웹 학습 만족도 설문조사</h1>
<form action="survey.php" method="post">
<h2>기본 정보</h2>
<p>이름: <input type="text" name="name" required placeholder="홍길동" /></p>
<p>이메일: <input type="text" name="email" required placeholder="example@email.com" /></p>
<p>나이: <input type="text" name="age" maxlength="3" placeholder="예: 25" /></p>
<h2>학습 정보</h2>
<p>학습 기간 (개월): <input type="text" name="duration" placeholder="예: 3" /></p>
<p>현재 수준: <input type="text" name="level" placeholder="초급/중급/고급" /></p>
<p>학습 목표: <input type="text" name="goal" placeholder="예: 웹 개발자 취업" /></p>
<h2>의견</h2>
<p>가장 도움된 내용: <input type="text" name="helpful" placeholder="예: form 태그" /></p>
<p>개선이 필요한 내용: <input type="text" name="improve" placeholder="자유롭게 작성해주세요" /></p>
</form>
</body>
</html>
🔍 코드 분석
1️⃣ 폼 시작 부분
<form action="survey.php" method="post">
분석:
action="survey.php": 설문 데이터를 survey.php로 전송method="post": POST 방식 (개인정보 포함)
2️⃣ 필수 입력 필드
<p>이름: <input type="text" name="name" required placeholder="홍길동" /></p>
분석:
name="name": 서버에서 "name"으로 데이터 수신required: 반드시 입력해야 제출 가능placeholder="홍길동": 입력 예시 표시
3️⃣ 글자 수 제한 필드
<p>나이: <input type="text" name="age" maxlength="3" placeholder="예: 25" /></p>
분석:
maxlength="3": 최대 3자까지만 입력 가능 (예: 999)- 나이는 보통 3자리면 충분 (실제로는 type="number" 사용 권장)
4️⃣ 구조화된 섹션
<h2>기본 정보</h2> <!-- 기본 정보 입력 필드들 --> <h2>학습 정보</h2> <!-- 학습 정보 입력 필드들 --> <h2>의견</h2> <!-- 의견 입력 필드들 -->
분석:
- h2 태그로 섹션을 나누어 가독성 향상
- 관련 필드들을 그룹화하여 사용자가 이해하기 쉽게
🌟 실전 데모
📋 웹 학습 만족도 설문조사 (시연용)
※ 이 폼은 시연용이며 실제로 전송되지 않습니다.
💡 실습 과제
✏️ 실습 1: 회원가입 폼 만들기
다음 조건을 만족하는 회원가입 폼을 만들어보세요:
- action="register.php", method="post"
- 필수 입력: 아이디(userid), 비밀번호(password), 이름(name)
- 선택 입력: 전화번호(phone), 주소(address)
- 아이디는 최대 15자, 비밀번호는 최대 20자
- 각 필드에 적절한 placeholder 추가
✏️ 실습 2: 예약 폼 만들기
레스토랑 예약 폼을 만들어보세요:
- 예약자 이름 (필수)
- 연락처 (필수, 전화번호 형식)
- 예약 날짜 (힌트: "YYYY-MM-DD")
- 예약 시간 (힌트: "HH:MM")
- 인원 수 (최대 2자리)
- 특별 요청사항
도전: h2 태그로 섹션을 나누어 보세요 (예약자 정보 / 예약 정보)
✏️ 실습 3: 고객 의견 수렴 폼
제품에 대한 고객 의견을 수집하는 폼을 만들어보세요:
- 고객명, 이메일 (필수)
- 제품명 (초기값: "EPUB 제작 도구")
- 사용 기간 (개월 단위)
- 만족도 (placeholder: "1-10점 사이")
- 추천 의향 (placeholder: "예/아니오")
- 상세 의견 (최대 200자)
⚠️ 주의사항과 팁
🎯 폼 디자인 원칙
- 논리적 순서 - 위에서 아래로, 간단한 것부터 복잡한 것 순
- 그룹화 - 관련 필드들을 h2, h3로 묶어 정리
- 명확한 레이블 - "이름:", "이메일:" 등 무엇을 입력할지 명확히
- 적절한 placeholder - 입력 형식이나 예시를 보여줌
- 필수/선택 구분 - required 속성으로 필수 항목 명시
💪 실전 팁
- name 작명 규칙
- 영문 소문자 사용 (username, email, phone)
- 여러 단어는 밑줄로 연결 (first_name, phone_number)
- 의미있고 일관성 있게
- 입력 검증
- HTML5 속성 활용 (required, maxlength)
- 실제로는 JavaScript로 추가 검증
- 서버에서도 반드시 재검증 필요
- 사용자 경험
- 너무 많은 필드는 피하기 (10개 이내 권장)
- 진행 상태 표시 (1/3, 2/3, 3/3)
- 저장/임시저장 기능 제공
🌟 비유와 예시
📄 서류 작성
웹 폼은 종이 서류와 같습니다:
- 섹션 제목 (h2): "신청자 정보", "신청 내용"
- 입력란 (input): 이름 _________, 주소 _________
- 필수 표시 (required): 별표(*) 또는 "필수" 표시
- 안내 문구 (placeholder): (예: 홍길동)
🏥 병원 접수
병원 접수 양식과 비슷합니다:
- 환자 기본 정보 (이름, 생년월일, 연락처)
- 진료 정보 (진료 과목, 증상)
- 보험 정보 (보험 종류, 보험증 번호)
각 섹션을 나누고, 필수 항목을 표시하고, 예시를 제공하는 방식이 동일합니다!
📝 시험 답안지
시험 답안지의 구조:
- 응시자 정보 (이름, 수험번호) - 필수
- 객관식 답안 (1번, 2번, 3번...)
- 주관식 답안 (서술형 답안란)
각 칸마다 무엇을 쓸지 정해져 있고, 반드시 채워야 할 부분이 표시되어 있죠!
📝 요약 정리
✅ 오늘 실습한 내용
- 실제 설문조사 폼을 form과 input 태그로 제작했습니다
- 필수 입력(required)과 선택 입력을 구분했습니다
- placeholder로 입력 예시를 제공했습니다
- maxlength로 적절한 입력 제한을 설정했습니다
- h2 태그로 섹션을 나누어 가독성을 높였습니다
🔑 핵심 포인트
- 구조화: 관련 필드를 그룹으로 묶기
- 명확성: 레이블과 placeholder로 안내
- 검증: required와 maxlength로 입력 제한
- 사용자 경험: 논리적 순서와 적절한 힌트
🧠 퀴즈
📚 이해도 체크
- 설문조사처럼 개인정보를 수집할 때 권장되는 method는?
① GET
② POST
③ PUT
④ DELETE - 입력 필드에 예시를 보여주는 속성은?
① value
② example
③ placeholder
④ hint - 다음 중 폼 디자인 원칙으로 옳지 않은 것은?
① 관련 필드를 그룹화한다
② 가능한 많은 정보를 한 번에 수집한다
③ 필수와 선택을 구분한다
④ 명확한 레이블을 사용한다 - 나이 입력란의 적절한 maxlength 값은?
① maxlength="1"
② maxlength="3"
③ maxlength="10"
④ maxlength 없이 - 폼의 섹션을 나눌 때 적절한 태그는?
① p 태그
② h2 또는 h3 태그
③ input 태그
④ form 태그
정답: 1-②, 2-③, 3-②, 4-②, 5-②
📚 참고 자료
🔗 더 알아보기
- 폼 디자인 베스트 프랙티스: 사용자 친화적 폼 만들기
- 입력 검증: JavaScript와 HTML5로 실시간 검증
- 접근성: label 태그와 ARIA 속성 활용
- CSS 스타일링: 아름다운 폼 디자인
- 다양한 input type: email, tel, number, date 등
Day 59 - 실습 - 간단한 설문조사 | EPUB 제작 365일 마스터 과정
'AI로 배우는 epub 시리즈' 카테고리의 다른 글
| Day 61 - 긴 인용 - blockquote 태그 (1) (0) | 2026.02.05 |
|---|---|
| Day 60 - 월간 프로젝트 - 나만의 웹페이지 (0) | 2026.02.04 |
| Day 58 - 텍스트 입력 - input text (0) | 2026.02.02 |
| Day 57 - 폼 기본 - form 태그 (0) | 2026.02.01 |
| Day 56 - 주간 복습 + 퀴즈 (0) | 2026.01.31 |