Rocket Form

Exercises: Launch Form ====================== Hello, programmer. We need you to make a Rocket Simulation form. Please follow the steps below. Happy coding! Part A: Setup ------------- #. From the ``main`` branch in your ``forms_chapter`` repository, create a new branch called ``rocket-form``. #. In the new branch, create the ``rocket_sim.html`` and ``rocket.css`` files. #. Paste the following starter code into the HTML file: .. sourcecode:: html :linenos: Rocket Form #. Paste this code into the CSS file. .. sourcecode:: css :linenos: label { display: block; margin: 10px; } .. admonition:: 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 ``
`` elements to separate the rows in your form! #. Save and commit your work. Part B: First Input ------------------- #. Create a ``

`` with these attributes. a. Set ``method`` to ``"POST"`` b. Set ``action`` to ``"https://handlers.education.launchcode.org/request-parrot"``. #. Inside the ``form`` element, add a ```` and ```` for ``Test Name``: .. sourcecode:: html Test Name: #. Save your work, then open ``rocket_sim.html`` in your browser. What keeps you from submitting the form right now? #. Add a submit button called *Run Simulation* to your form. .. sourcecode:: html #. Enter a value into the ``test-name`` input and submit the form. Was the key/value pair properly sent to the server? .. figure:: figures/exercises-partB.png :alt: Request Parrot page showing the key/value pair "test-name/Input success!" Data successfully sent to the parrot server. #. Save and commit your work before starting Part C. Part C: More Inputs ------------------- #. Add these five ``inputs`` to your form. Pay attention to the types and required values. Be sure to add a ```` for each input. .. list-table:: :header-rows: 1 * - 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`` #. *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``. #. Add placeholder text to the ``test-name`` and ``engine-count`` input fields. #. Include an empty ``