Project: The Survey Form 📋

It's time to build. This project focuses on pure HTML. Do not worry about CSS (styling) yet. It will look "ugly," and that is the point. We want perfect structure first.

Think of this as building the frame of a house before painting it. A beautiful exterior doesn't matter if the foundation is weak. Master semantic HTML now, and styling becomes much easier later.

What you'll practice:

Semantic HTML structure
Form elements and validation
Accessibility best practices
Label/input associations
Git workflow (commit, push)
Real-world project organization

1. Project Objective

Build a survey form for a fictional "DevConf 2026" developer conference. This survey collects feedback from attendees about their experience, interests, and likelihood to recommend the conference.

User Story:

As a conference organizer, I want to collect attendee feedback through a structured survey so I can improve future events and understand my audience better.

The Challenge: Create a fully functional, accessible HTML form that validates user input before submission—without writing a single line of CSS or JavaScript.

2. Requirements

Structural Requirements

1. Proper HTML5 Document Structure Your document must include:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevConf 2026 Survey</title>
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>

2. Semantic HTML Elements Use these semantic tags appropriately:

<header> - For the survey introduction
<main> - For the primary content (the form)
<form> - To wrap all form controls
<fieldset> - To group related form sections
<legend> - To label each fieldset

3. Header Content Include a clear introduction:

<h1> - Main title (e.g., "DevConf 2026 Attendee Survey")
<p> - Description explaining the survey's purpose
Optional: Add thank you message or estimated completion time

Example structure:

<header>
  <h1>DevConf 2026 Attendee Survey</h1>
  <p>Thank you for attending DevConf 2026! Your feedback helps us create better experiences. This survey takes approximately 3 minutes to complete.</p>
</header>

Form Requirements

Your form must collect the following information:

1. Personal Information (Fieldset)

Name (Required)

Input type: text
Must be required
Label: "Full Name" or "Name"
Suggested attributes: autocomplete="name"

Email (Required)

Input type: email
Must validate email format
Must be required
Label: "Email Address"
Suggested attributes: autocomplete="email"

Age (Optional)

Input type: number
Minimum: 18
Maximum: 99
Label: "Age"
Not required (some users prefer not to share)

2. Professional Background (Fieldset)

Current Role (Required)

Control type: <select> dropdown
Options must include:
- "Select your role" (placeholder, disabled)
- Student
- Junior Developer
- Mid-Level Developer
- Senior Developer
- Tech Lead
- Engineering Manager
- Other
Must be required

Years of Experience (Optional)

Input type: number
Minimum: 0
Maximum: 50
Label: "Years of Professional Experience"

3. Conference Feedback (Fieldset)

Would you recommend DevConf to others? (Required)

Control type: Radio buttons
Options:
- Definitely Yes
- Probably Yes
- Not Sure
- Probably Not
- Definitely Not
All radio buttons must share the same name attribute
One should be checked by default (optional but recommended)

How likely are you to attend next year? (Required)

Control type: Radio buttons
Options:
- Very Likely
- Likely
- Uncertain
- Unlikely
Must be required

4. Interest Areas (Fieldset)

What topics interest you? (Select all that apply)

Control type: Checkboxes
Options must include:
- Frontend Development
- Backend Development
- DevOps/Infrastructure
- Mobile Development
- AI/Machine Learning
- Data Science
- Cloud Computing
- Cybersecurity
Allow multiple selections
Not required (but at least one is recommended)

5. Additional Feedback (Fieldset)

What was your favorite session? (Optional)

Input type: text
Label: "Favorite Session or Speaker"
Not required

Comments or Suggestions (Optional)

Control type: <textarea>
Label: "Additional Comments or Suggestions"
Suggested attributes:
- rows="5"
- cols="50"
- maxlength="1000"
- placeholder="Tell us what you loved or what we can improve..."

6. Submission

Submit Button

Button type: submit
Text: "Submit Survey" or "Send Feedback"
Should be clearly visible and accessible

Optional Reset Button

Button type: reset
Text: "Clear Form"
Consider if this improves or harms user experience

Validation Requirements

Your form must enforce these validation rules:

✅ Name field - Cannot be submitted empty
✅ Email field - Cannot be submitted empty AND must match email format
✅ Role dropdown - Must have a selection (not the placeholder)
✅ Recommendation radio - At least one option must be selected
✅ Age - If provided, must be between 18-99
✅ Years of experience - If provided, must be between 0-50

How to implement:

Use required attribute on mandatory fields
Use type="email" for automatic email validation
Use min and max attributes on number inputs
Set first <option> with value="" and disabled selected for dropdowns

Testing Your Validation

Test each validation rule:

Try submitting empty form - Should show error on name field
Fill only name - Should show error on email field
Enter invalid email (like "test" or "test@") - Should show format error
Enter age below 18 or above 99 - Should show range error
Leave required radio buttons unselected - Should prevent submission

If browser shows error messages and prevents submission, your validation works! 🎉

Accessibility Requirements

Your form must be accessible:

✅ Every input has an associated label using for/id attributes
✅ Related inputs grouped in <fieldset> with <legend>
✅ Required fields clearly marked (visually with asterisk)
✅ Logical tab order (keyboard navigation works properly)
✅ Descriptive button text (not just "Submit")

Example of good label association:

<label for="full-name">Full Name <span aria-label="required">*</span></label>
<input type="text" id="full-name" name="name" required>

3. Project Setup & Deliverables

Step 1: Create Project Structure

# Navigate to your learning repository
cd ~/path/to/learntodev-journey

# Create project folder
mkdir survey-form

# Navigate into it
cd survey-form

# Create the HTML file
touch index.html

# Open in VS Code
code index.html

Step 2: Build Your Form

Start with the HTML boilerplate, then add sections incrementally:

Recommended build order:

Document structure (DOCTYPE, html, head, body)
Header with title and description
Form element with basic attributes
Personal information fieldset
Professional background fieldset
Conference feedback fieldset
Interest areas fieldset
Additional feedback fieldset
Submit button
Test and validate

Development tips:

Save frequently (Ctrl/Cmd + S)
Open index.html in browser to preview
Refresh browser after each change
Test validation by trying to submit incomplete forms
Use VS Code's HTML IntelliSense for autocomplete

Step 3: Test Thoroughly

Functionality checklist:

[ ] Form opens in browser without errors
[ ] All fields display correctly
[ ] Tab key navigates through inputs logically
[ ] Required fields prevent submission when empty
[ ] Email validation works
[ ] Number ranges enforce correctly
[ ] Radio buttons allow only one selection per group
[ ] Checkboxes allow multiple selections
[ ] Clicking labels focuses corresponding inputs
[ ] Submit button is clickable

Accessibility testing:

[ ] Navigate entire form using only keyboard (Tab, Space, Enter)
[ ] Test with WAVE Browser Extension
[ ] Validate HTML at W3C Validator

Step 4: Git Workflow

Commit your work with meaningful messages:

# Check status
git status

# Stage your file
git add index.html

# Commit with descriptive message
git commit -m "Add DevConf 2026 survey form with validation"

# Push to GitHub
git push origin main

Git best practices for this project:

Commit after completing each major section
Write descriptive commit messages
Push regularly to back up your work

Example commit progression:

git commit -m "Add HTML boilerplate and header structure"
git commit -m "Add personal information fieldset with validation"
git commit -m "Add professional background section"
git commit -m "Add conference feedback radio buttons"
git commit -m "Add interest checkboxes and additional feedback textarea"
git commit -m "Complete form with submit button and final validation"

Step 5: Verify Deployment

Push to GitHub
Visit your repository at github.com/YOUR-USERNAME/learntodev-journey
Navigate to survey-form/index.html
Click the file to view it

Optional: Enable GitHub Pages Host your form live on the web:

Go to repository Settings
Navigate to "Pages" in left sidebar
Under "Source," select main branch
Click "Save"
Visit https://YOUR-USERNAME.github.io/learntodev-journey/survey-form/

4. Starter Template

Here's a basic structure to get you started (fill in the details):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevConf 2026 Survey</title>
</head>
<body>
  
  <header>
    <h1><!-- Your title here --></h1>
    <p><!-- Your description here --></p>
  </header>

  <main>
    <form action="#" method="POST">
      
      <!-- Personal Information -->
      <fieldset>
        <legend>Personal Information</legend>
        
        <!-- Name input -->
        
        <!-- Email input -->
        
        <!-- Age input -->
        
      </fieldset>

      <!-- Professional Background -->
      <fieldset>
        <legend>Professional Background</legend>
        
        <!-- Role select dropdown -->
        
        <!-- Years of experience -->
        
      </fieldset>

      <!-- Conference Feedback -->
      <fieldset>
        <legend>Conference Feedback</legend>
        
        <!-- Recommendation radio buttons -->
        
        <!-- Likelihood to attend radio buttons -->
        
      </fieldset>

      <!-- Interest Areas -->
      <fieldset>
        <legend>Interest Areas</legend>
        
        <!-- Interest checkboxes -->
        
      </fieldset>

      <!-- Additional Feedback -->
      <fieldset>
        <legend>Additional Feedback</legend>
        
        <!-- Favorite session input -->
        
        <!-- Comments textarea -->
        
      </fieldset>

      <!-- Submit Button -->
      <button type="submit">Submit Survey</button>
      
    </form>
  </main>

</body>
</html>

5. Success Criteria

Your project is complete when:

✅ HTML is valid - No errors in W3C Validator
✅ All requirements met - Every field from spec is included
✅ Validation works - Can't submit incomplete form
✅ Accessible - WAVE shows no critical errors
✅ On GitHub - Committed and pushed to repository
✅ Tested - Works in at least 2 browsers (Chrome, Firefox, Safari, Edge)

Verification Test

Open your index.html in the browser. Try to submit the form without entering anything.

If the browser prevents submission and highlights the first empty required field with an error message, you did it right! 🎉

Advanced test: Navigate the entire form using only your keyboard (Tab, Space, Enter). If you can complete and submit the form without touching your mouse, your accessibility is excellent.

6. Common Mistakes to Avoid

❌ Forgetting for and id connection between labels and inputs
❌ Using placeholder as label replacement
❌ Not grouping related inputs with <fieldset>
❌ Missing required attribute on mandatory fields
❌ Using same name for checkboxes (they should share names)
❌ Using different name for radio buttons in same group (they must share)
❌ Forgetting value attribute on radio/checkbox inputs
❌ Not testing form submission and validation

7. Bonus Challenges

Once you've completed the basic requirements, try these enhancements:

Level 1: Enhanced Validation

Add pattern attribute to validate name (letters and spaces only)
Add minlength to comments textarea (at least 10 characters if filled)
Add custom title attributes explaining validation requirements

Level 2: Better UX

Add placeholder text with helpful examples
Include autocomplete attributes for better browser autofill
Add a character counter hint for textarea (e.g., "Maximum 1000 characters")

Level 3: Accessibility Excellence

Add aria-describedby for helpful hints
Mark required fields with aria-required="true"
Add aria-invalid="true" and error messages (requires JavaScript)

Level 4: Advanced Features

Add a "favorite programming language" field with datalist autocomplete
Include a file upload for "session photo" (remember enctype="multipart/form-data")
Add a date picker for "date attended"

Level 5: Real Functionality

Connect to a form backend like Formspree or Netlify Forms
Actually receive submissions via email
Add a thank you message after submission

8. Reflection Questions

After completing the project, reflect on these questions:

What was the most challenging part? (Understanding validation? Accessibility?)
Which input type was new to you?
How many times did you reference MDN or other documentation? (That's good!)
What would you do differently if you rebuilt this?
How would CSS improve this form? (You'll do this in the next phase!)

Document your answers in a REFLECTION.md file in the same folder. This metacognition improves learning retention.

9. Resources

Reference Documentation:

Validation Help:

Accessibility:

WebAIM Form Accessibility
WAVE Extension - Test your form

Testing:

W3C HTML Validator
Can I Use - Check browser compatibility

Inspiration: Look at real survey forms for ideas (but don't copy code):

Google Forms
Typeform
SurveyMonkey
Conference registration forms

10. What's Next?

After completing this project, you'll have:

✅ A portfolio piece demonstrating HTML proficiency
✅ Practical experience with forms and validation
✅ Understanding of accessibility requirements
✅ Git workflow practice
✅ A project on your public GitHub

Next steps in your journey:

Phase 2: CSS Fundamentals - Style this form beautifully
Phase 3: JavaScript Basics - Add interactivity and dynamic validation
Phase 4: Advanced Features - Form submission, data handling, error messages

This project is designed to be revisited. You'll return to style it with CSS, add JavaScript functionality, and eventually connect it to a backend. Keep your code clean and semantic now—future you will thank you.

Ready to Build?

Your Task:

Create survey-form/index.html in your repository
Build the DevConf 2026 survey with all required fields
Test validation and accessibility
Commit and push to GitHub
Share your repository URL (in a Discord community, with a friend, or in your learning journal)

Time Estimate: 2-4 hours for first attempt

Don't aim for perfection—aim for completion. You can always refine later. The goal is to practice and build confidence.

When you're done, take a screenshot of your form in the browser and celebrate! You've just built a real, functional web form from scratch. That's a significant milestone in your developer journey. 🚀

Remember

Perfect code doesn't exist, but functional code does.

Your first form won't be perfect. That's expected and completely fine. Professional developers constantly refactor and improve their code. The difference between a beginner and a professional isn't making perfect code the first time—it's the willingness to iterate and improve.

Build it, test it, push it, learn from it. Then build something better next time.

You've got this! 💪