설문 양식 만들기
발행: (2026년 1월 31일 오전 01:00 GMT+9)
3 min read
원문: Dev.to
Source: Dev.to
프로젝트 개요
DEV에 몇 개의 글을 올렸음에도 불구하고, 어제 freeCodeCamp에서 HTML Tables and Forms 퀴즈를 완료할 수 있었습니다. 그 덕분에 Build a Survey Form—Responsive Web Design 커리큘럼의 첫 번째 인증 프로젝트에 도전하게 되었습니다.
이 프로젝트는 16개의 사용자 스토리를 따릅니다. 모든 스토리를 충족하면 프로젝트가 완료된 것으로 간주됩니다. 이전 실습과 마찬가지로 완성된 결과물 예시와 시작용 HTML 보일러플레이트를 제공합니다.
시작 보일러플레이트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<!-- Content will go here -->
</body>
</html>폼 구현
먼저 <h1> 헤딩, 설명 문단, 그리고 폼 자체를 배치하면서 본문을 구조화했습니다. 폼에는 다음이 포함됩니다:
- 텍스트, 이메일, 숫자 필드(숫자 필드는 드롭다운으로 선택)
- 체크박스
- 라디오 버튼
- 추가 의견을 위한 텍스트 영역
예시를 그대로 복사하기보다는 DEV Community 피드백 폼을 직접 만들어 개인적인 색을 입혔습니다.
완성된 설문 폼 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Survey Form</title>
</head>
<body>
<h2>DEV Community Feedback Form</h2>
<p>Help us improve our community by filling in this form.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
<p>Which option best describes your current experience level?</p>
<select name="experience" id="experience">
<option value="">Select your experience</option>
<option value="beginner">Beginner</option>
<option value="junior">Junior</option>
<option value="senior">Senior</option>
</select>
<p>Would you recommend DEV Community to a friend/colleague?</p>
<label><input type="radio" name="recommend" value="yes" /> Yes</label>
<label><input type="radio" name="recommend" value="no" /> No</label>
<p>What would you like to see improved? (Check all that apply)</p>
<label><input type="checkbox" name="improve" value="articles" /> Articles</label>
<label><input type="checkbox" name="improve" value="moderation" /> Moderation</label>
<label><input type="checkbox" name="improve" value="onboarding" /> Onboarding</label>
<p>Any further suggestions to improve our community?</p>
<textarea name="suggestions" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>다음 단계
Responsive Web Design 인증의 HTML 파트는 거의 완료되었으며, 남은 것은 접근성 섹션뿐입니다. 다음 번에 그 부분에 대해 더 자세히 공유하겠습니다. 언제나 그렇듯—코딩을 계속하세요!