9. Know your forms

Requirements

• Develop HTML form UI which includes, at least, the following attributes
  • Form title
  • Date field
  • Time field
  • Phone number field
  • Password field
  • Email field
  • Range selection field
  • Color selection field
  • Single value choice field (select) with option groups (optgroup)
  • Multiple value choice field (select)
  • Autocomplete field (datalist)
  • Long text field (textarea)
  • Agree with terms and conditions field
  • Radio selection fields (at least 2 options)
  • Submit button
• At least two fields have to be displayed inline in two separate columns (50% width each)
• At least two groups/sections of fields with dedicated title which describes them
• Don’t use 3th party plugins/libraries
• The design is meant to show a form example. You don’t have to follow it, feel free to style, add or remove any extra elements
• ⭐ Meet the following accessibility requirement:
  • No “critical” or “serious” level issues on the axe dev tools extension
  • No issues reported from the automated tests in the Accessibility Insights for Web extension

Design preview

Resources

• optgroup MDN
• range MDN
• tel MDN
• date MDN
• time MDN
• multiple attribute MDN
• datalist MDN
• contenteditable MDN
• Accessibility insights for web Chrome extension
• Axe dev tools Chrome extension

Learn more

• Learn forms web.dev
• Learn forms MDN
• Aria patterns
• How to test UIs for accessibility
• Rules of aria

Discussion topics

• Different columns implementations
• Grid vs flex
• New controls, unique attributes
• Client side validation
• Unique CSS selectors and combinations