Skip to content

Style all the form inputs that will be needed for the eCommerce website.

Notifications You must be signed in to change notification settings

ltw-webdev-4/forms

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Style all the form inputs that will be needed for the eCommerce website.

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published