20.10. Exercises: Launch Form

Hello, programmer. We need you to make a Rocket Simulation form. Please follow the steps below. Happy coding!

20.10.1. Part A: Setup

  1. From the main branch in your forms_chapter repository, create a new branch called rocket-form.

  2. In the new branch, create the rocket_sim.html and rocket.css files.

  3. Paste the following starter code into the HTML file:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Rocket Form</title>
      <link rel="stylesheet" type="text/css" href="rocket.css">
   </head>
   <body>
      <!-- TODO: Add your code here. -->
   </body>
</html>

  4. Paste this code into the CSS file.

    1
2
3
4
    label {
   display: block;
   margin: 10px;
}

    Tip

    display: block; formats an element as a block-type. In this case, each label (and its wrapped input) will start on a new line. Now you won’t need to use as many <br> elements to separate the rows in your form!

  5. Save and commit your work.

20.10.2. Part B: First Input

  1. Create a <form> with these attributes.

    1. Set method to "POST"

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

  2. Inside the form element, add a <label> and <input> for Test Name:

    <label>Test Name: <input type="text" name="test-name"/></label>

  3. Save your work, then open rocket_sim.html in your browser. What keeps you from submitting the form right now?

  4. Add a submit button called Run Simulation to your form.

    <button>Run Simulation</button>
<!-- OR -->
<input type="submit" value="Run Simulation"/>

  5. Enter a value into the test-name input and submit the form. Was the key/value pair properly sent to the server?

    Request Parrot page showing the key/value pair "test-name/Input success!"

    Data successfully sent to the parrot server.

  6. Save and commit your work before starting Part C.

20.10.3. Part C: More Inputs

  1. Add these five inputs to your form. Pay attention to the types and required values. Be sure to add a <label> for each input.

    Label

    Input Type

    Input Name

    Required Values

    Test Date

    date

    test-date

    Date format mm/dd/yyyy

    Rocket Type

    select

    rocket-type

    Options for Falcon, Saturn, Orion, and Terrier.

    Number of Engines

    number

    engine-count

    A whole number from 1 - 9.

    Wind Rating

    radio

    wind-rating

    Options for No Wind, Mild, and Strong (see note below).

    Use Autopilot

    checkbox

    autopilot

    on or off

  2. Note: Each wind-rating input needs to include a value attribute. For No Wind, set the value to 0. For Mild, set the value to 10. For Strong, set the value to 20.

  3. Add placeholder text to the test-name and engine-count input fields.

  4. Include an empty <option> element with the select input. Make it the default choice, set value="", and add the disabled attribute.

  5. Use the required attribute to add some validation. Prevent the form from being submitted if any input besides autopilot is left blank.

  6. Add a Scrub Launch button that resets the form.

    Example

    Before submitting, your form should look something like:

    The empty form on the left, and the completed form on the right.

    The empty and filled rocket simulation form.

    After submitting:

    The response from the parrot server, showing the key/value pairs set by the form submission.

  7. Save and commit your work before starting Part D.

20.10.4. Part D: Style the Form

  1. Add a centered heading to your form. Make the text a different color, font, and/or style compared to the labels.

  2. Add a border or a background color (or both) to the form.

  3. Center the Run Simulation and Scrub Launch buttons inside the form. Also, make them different colors.

  4. Divide the form into three parts: One for the test name and date, one for the rocket type and engine count, and one for the wind rating and autopilot.

  5. Align the test-name and test-date fields. Also, make the engine-count field shorter than the name and date boxes.

  6. Optional: Add more styling to the form and inputs! Feel free to include images or adjust the text/background color, margins, padding, borders, shading, font, etc. Have a little fun.

  7. Remember to save and commit your work.

A styled Rocket Simulation form.

Note: The LaunchCode rocket logo is trademarked.