Loading... 
Loading exercise code...

Exercise: Form Stage 3 - Advanced Features

Objectives

In this stage, you will:

  • Learn form validation techniques
  • Understand required fields and constraints
  • Practice pattern matching for input validation
  • Implement accessibility best practices
  • Complete your third treasure hunt challenge
  • Prepare for the final form project

Advanced Form Attributes

Validation:

  • required - Field must be filled before submission
  • pattern - Regular expression for input validation
  • minlength / maxlength - String length validation
  • min / max - Number range validation
  • step - Increment for number inputs

Accessibility:

  • aria-label - Invisible label for screen readers
  • aria-describedby - Link to description text
  • aria-required - Mark required fields
  • aria-invalid - Mark invalid inputs

Input Constraints:

  • disabled - Disable a field
  • readonly - Can’t be edited but included in form
  • placeholder - Hint text in the field

Form Validation Best Practices

  • Validate on both client-side (HTML/JavaScript) and server-side
  • Give clear error messages
  • Highlight problematic fields
  • Use appropriate input types
  • Test with assistive technologies

The Final Challenge Awaits

You’re almost there! Complete this stage to unlock the final comprehensive form project.

Your Challenge:

  • Pay attention to validation rules
  • Fill in all required fields
  • Match the pattern if specified
  • Move to the final form project

Next Steps

  1. Test the validation by submitting incomplete forms
  2. Try entering invalid data to see error messages
  3. Learn what makes a good form experience
  4. Proceed to the Final Form Project!