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

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

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.