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

Your completed simulation form will look roughly like this:

Submitted Values

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

Code your solution in this repl.it.

Please follow the steps below and good luck!

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.
Add a <label> and <input> for Test Name to the <form>.
1. <label>Test Name <input type="text" name="testName"/></label>.
Can you submit the form now? What is missing?

Check your solution.
Add a <button>Run Simulation</button> to the <form>.
Enter a value into the "testName" input and submit the form.
1. Was the value properly submitted to the form handler?
Check your solution.
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.

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.