FEWD Week #8: Forms

Description

This week, you'll be practicing your form skills: you have the option of adding a form to your final project, finishing the Relaxr form that will be started in class, or building a form for CitiPix. The form you build must include at least three different types of HTML form elements and some light CSS styling. I'm giving you an example of a form that renders well on the web and mobile devices, as well as an example, with starter code, of a registration form you could build for Relaxr.

Real-World Applications

• Be able to apply the proper HTML and CSS styles to create a modern web form
• Revisit applications and projects to iterate on code you've written

Technical Requirements

• Use at least three different types of HTML5 form elements: input, textarea, select, radio button, dropdown, checkbox
• If using multiple pages on your final, link to your sign-up page from different pages in your application. If it is a single-page site, try linking to the form on your page using a button and in-page anchor tags
• Style forms lightly using CSS
• Make sure a user's password is not visible when they are entering it (if this doesn't make sense for your final project, go ahead and put it in your code and leave it commented out until I can review)

Bonus

• Use responsive media queries to allow for proper rendering on mobile devices
• Use jQuery and display an error message if any of the input fields are left blank upon submission
• To replicate application flow, add another page that says "Thanks for Relaxing with us!" after submission
• There is another mockup of an "application" form in the starter code for c

Resources

• W3Schools: Form Elements
• W3Schools: Input Types
• MDN: Styling HTML Forms
• Webdesign.com: Form Validation with CSS3/HTML5
• CSS-Tricks.com: Tips for Creating Great Web Forms
• jQuery API Docs: .val( ) function

Example forms

Evaluation / Submission

Please either submit this as a new assignment, or incorporate it into your final project. If doing the latter, please include the "password" field but feel free to comment it out so it doesn't throw off the look/feel of your final.

I will evaluate against the solution code and your use of technical elements. I will provide a numeric grade on a scale: does not meet expectations (0); meets expectations (1); exceeds expectations (2). If you decide to build a form as part of their final project, I will be grading it as part of the final project. The maximum possible score on this assignment is 10/10. Bonus sections are completely optional.