Goal: Explore using jQuery to gather a variety of form input types by completing the exercises listed below.
:checkedrefer to when gathering input from radio buttons?
type="number"in an HTML form field, do we still need to use
.parseInt()when retrieving the value (assuming we need a number)?
Use a form to let the user fill out a survey. Ask them to fill in their name, their favorite foods, their favorite music, and any other information you feel like. Include all form input types we've covered so far (except checkboxes; we'll learn more about those next week!)
Create a website with a form on it to take the user's full name and address as if they were ordering a product from you. After they submit the form you should show them a receipt. Thank them for purchasing whatever it is you are selling, and be sure to use their full name. Then, reprint their address as a confirmation of shipping details.
Add CSS to your online store to make it look more professional, or inviting. Or add a stylistic theme that matches whatever your store is selling.
Collect additional information from the user in your form. For instance, if your online marketplace sells jewelry, include form fields denoting whether they're ordering a bracelet, necklace, or earrings. Then, make sure to include this extra information in the receipt you display back to the user.
Create an Address Book application that allows a user to add new contacts by filling out a form. List all contact names on the homepage. Users should be able to click a name to view the contact's details (such as their address, phone number, email address, and more).
At the end of the Calculator: User Interface lesson, we recommended you check out the jQuery documentation, especially the sections on Effects, Mouse Events, Form Events, Manipulation, and Traversing.
If you've completed all projects today and feel confident in the concepts they've covered, begin exploring these areas of the jQuery documentation. Experiment using methods listed in these sections throughout the projects you've created today.
For instance, you could add sliding transitions to objects as you hide/show them, alter CSS styles applied to an element when the user's mouse is hovering over it, attempt to empty areas of the DOM dynamically (perhaps your Address book could include a button to remove a contact?), and much, much more.
Lesson 13 of 13
Last updated June 8, 2020