25.10. Exercises: Forms

Hello programmer, we need you to make a Rocket Simulation form. Please follow the steps below and good luck!

Code your solution in this repl.it.

  1. Create a <form> with these attributes.
    1. Set method to "POST"
    2. Set action to "https://handlers.education.launchcode.org/request-parrot"
  2. Add a <label> and <input> for Test Name to the <form>.
    1. <label>Test Name <input type="text" name="testName"/></label>.
Display Name Input Type Input Name Possible Values
Test Name text testName No limitations
  1. Can you submit the form now? What is missing?
  2. Add a <button>Run Simulation</button> to the <form>.
  3. Enter a value into the "testName" input and submit the form.
    1. Was the value properly submitted to the form handler?
  4. Next add these five inputs to the <form>.
    1. Pay attention to the types and possible options.
    2. Also add a <label> for each input.
Display Name Input Type Input Name Possible Values
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

Example

What the form will look like before submission.

Rocket simulation form with all input fields filled out.

Submitted Values

testName=Moon+Shot
testDate=2020-07-16
rocketType=Lynx
boosterCount=3
windRating=10
productionServers=on

25.10.1. 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.