Codelab: Build a Survey Form
Build a complete survey form from scratch with multiple question types, datalist autocomplete, grouped fieldsets, validation, and responsive CSS styling.
Step 1: Set up the survey project
In this codelab, you'll build a survey form for a fictional product called "CloudNote" — a note-taking app that wants user feedback. This survey will use nearly every form element and technique you've learned in this module.
What you'll build: A multi-section survey with text inputs, radio buttons, checkboxes, a select dropdown, a datalist for autocomplete suggestions, a textarea, range sliders, validation, and polished CSS.
Setup instructions:
- Open your terminal
- Create a project folder:
mkdir survey-form && cd survey-form - Create your HTML file:
touch index.html - Open it in your code editor
Start with this boilerplate — note the viewport meta tag for mobile-friendly rendering:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudNote User Survey</title>
</head>
<body>
<h1>CloudNote User Survey</h1>
<p>Help us improve CloudNote! This survey takes about 3 minutes.</p>
</body>
</html>
Save and open in your browser to confirm you see the heading and intro text.