25.10. Exercises: Forms

Hello programmer, we need you to make a Rocket Simulation form.

25.10.1. Form Data

This is the kind of data the Rocket Simulation form will need to process.

Data Fields for the Rocket Simulation Form
Display Name Input Type Input Name Possible Values
Test Name text testName No limitations
Test Date date testDate Date format mm/dd/yyyy
Rocket Type select rocketType Brant, Lynx, Orion, Terrier
Number of Rocket Boosters number boosterCount A positive number less than 10
Wind Rating radio windRating No Wind: with value 0, Mild: with value 10, Strong: with value 20
Use production grade servers checkbox productionServers on or off

25.10.2. Form Display

Your completed simulation form will look roughly like this:

Rocket simulation form with all input fields filled out.

Submitted Values


25.10.3. Starting Codebase

Code your solution in this repl.it.

25.10.4. Instructions

Please follow the steps below and good luck!

  1. Create a <form> with these attributes.

    1. Set method to "POST"
    2. Set action to "https://handlers.education.launchcode.org/request-parrot"

    Check your solution.

  2. Add a <label> and <input> for Test Name to the <form>.

    1. <label>Test Name <input type="text" name="testName"/></label>.
  3. Can you submit the form now? What is missing?

    Check your solution.

  4. Add a <button>Run Simulation</button> to the <form>.

  5. Enter a value into the "testName" input and submit the form.

    1. Was the value properly submitted to the form handler?

    Check your solution.

  6. Repeat steps 2 and 5 for the remaining data fields from the data table.

    1. Pay attention to the input types and possible options.
    2. Don't forget to add a <label> for each input.

25.10.5. Bonus Mission

Use an event handler and the submit event to validate that all inputs have values. Do NOT let the form be submitted if inputs are empty.