summary	time	deliverables
Style all the form inputs that will be needed for the eCommerce website.	3 hours	Pattern library

Forms & fields

Overview

• Continue work on your ecommerce-pattern-library
• We’re not styling the form page this week—we’re styling the individual form inputs and fields.
• Figure out all the different form fields needed for your checkout form and style them individually—each form field in its own HTML file:
  • Text inputs?
  • Labels?
  • Email inputs?
  • Date pickers?
  • Text areas?
  • Checkboxes? Should they be custom designed?
  • Radio buttons? Should they be custom designed?
  • Are there questions with large chunks of text? How do those look?
  • Fieldsets?
  • Different sizes?
• You can group some inputs together, if their association is special, to show how they should be designed, like username/password fields—but remember you’re not making the page, so you won’t likely need too many of these.
• Style the error messages & validation states too for when the form wasn’t filled in properly.
• Don’t use the <form> tag at all—we’ll be combining each field piece together into a <form> later when we build pages.

---

Details

• How many patterns?: It’s completely up to you—it’s your website design. Call the teacher over if you want confirmation.
• Multi-file: Each different type and functional form field should have its own HTML file—we’re designing components not pages.
• Do I need to design every possible form input: Yes.
• When & why: In the config.yml files describe when to use each new pattern you create.

---

Hand in

Show teacher for marks during next class.