Exercises: Forms

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

Form Data

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

Data Fields for the Rocket Simulation Form

Display NameInput TypeInput NamePossible Values
Test NametexttestNameNo limitations
Test DatedatetestDateDate format mm/dd/yyyy
Rocket TypeselectrocketTypeBrant, Lynx, Orion, Terrier
Number of Rocket BoostersnumberboosterCountA positive number less than 10
Wind RatingradiowindRatingNo Wind: with value 0, Mild: with value 10, Strong: with value 20
Use production grade serverscheckboxproductionServerson or off

Form Display

Your completed simulation form will look roughly like this:

Rocket simulation form with all input fields filled out 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

Starting Codebase

Code your solution within the javascript-projects/user-input-with-forms/exercises directory.

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"
    <form action="https://handlers.education.launchcode.org/request-parrot" method="POST">
   // the rest of your form fields go in here //
</form>

  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?

You can’t submit the form with a button to submit it!

  1. Add a <button>Run Simulation</button> to the <form>.
  2. Enter a value into the “testName” input and submit the form.
    1. Was the value properly submitted to the form handler?

Yes! At this point, your form should be able to handle input into the “testName” field.

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

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.