In the Forms video, we learned:

  • The HTML structure of a form
  • The .submit() function
  • event.preventDefault()
  • Using .val() to gather the input values from the form
  • Variable scope

Okay, now it's your turn.

  • Follow along with the video and make a Mad Libs of your own.
  • Make a form letter where the user inputs their name, and they get back a letter addressed to them. Feel free to use lorum ipsum for the text of the letter. Use Bootstrap and your knowledge of CSS to make the letter look like a letter.
  • Create a page that asks the user to type something into a field, and when they submit the form, have the page say it back to them in all uppercase.
  • 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.
  • Create a website for booking appointments with you. The user should enter their name, the date they would like for their appointment, as well as the start and end times. Again, after they submit the form you should show them a confirmation page telling them that the booking was successful, and be sure to reprint all the information they entered into your form for confirmation.
  • 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. Explore some of the other input types. You can read about them here. For example, you can have them pick a favorite color with <input id="color" name="color" class = "form-control" type="color">.