Build a Project Form

HTML:

<DOCTYPE! html>
<html lang="en">
  <head>
    <title>Survey Form</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Survey Form</h1>
    <p id="description">Flyability Simulator Training Survey</p>
    <p id="description">Thank you for taking the time to help us improve the platform. Your feedback meants a lot to us!</p>

          <!-- Form section -->

    <form method="get"enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm" id="survey-form">
      <fieldset>
        <label for="name" id="name-label"> Name
          <input type="text" name="name" id="name" placeholder="Enter your name" required>
        </label>
        <label for="email" id="email-label"> Email
          <input type="email" name="email" id="email" placeholder="Enter your email" required>
        </label>
        <label for="age" id="number-label"> Age (optional)
          <input type="number" name="number" id="number" min="15" max="120" placeholder="Enter your age">
        </label>
      </fieldset>
       <!-- Current role section -->
    <fieldset>
      <label for="role"> Which option best describes your current role?
        <select id="dropdown">
          <option value=""> Student </option>
          <option value="Full Time Job"> Full Time Job </option>
          <option value="Full Time Learner"> Full Time Learner </option>
            <option value="Prefer not to say"> Prefer not to say </option>
            <option value="Other">  Other </option>
        </select>
      </fieldset>

         <!-- Recommendation section -->
      <fieldset>
      <label for="recommend"> Would you recommend it? <input type="radio" name="recommend" id="definitely" value="definitely" class="inline" required> Definitely </label>
      <label>
       <input type="radio" name="recommend" id="maybe" value="maybe" class="inline" required> Maybe</label>
      <label>
       <input type="radio" name="recommend" id="not-sure" value="not-sure" class="inline" required> Not Sure
      </label>
    </fieldset>
      
      <!-- Improvements section -->
    <fieldset>
      <label for="recommend"> What would you like to see improved? (Check all that apply)
        <input type="checkbox" name="improve" id="improve" value="simulations" class="inline" required> Simulations
      </label>
      <label>
       <input type="checkbox" name="improve" id="maybe" value="exercises" class="inline" required> Exercises
      </label>
      <label>
       <input type="checkbox" name="improve" id="not-sure" value="videos" class="inline" required> Videos
      </label>
    </fieldset>
          <!-- Feedback section -->
    <fieldset>
      <label>Additional feedback:
        <textarea name="comments" maxlength="500">
        </textarea>
    </label>
  </fieldset>
    <button type="submit" id="submit">Submit
    </button>
    </form>
  </body>
</html>

CSS:

          /* BODY */

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: black;
  color: white;
  font-family: monospace, sans-serif;
  font-size: 15px;
}
          /* TEXT */
h1 {
  padding-top: 20px;
  margin: 1.5 em auto;
  text-align: center;
  font-size: 30px;
}

 p {
  margin: 1.5 em auto;
  text-align: center;
  font-size: 18px;
  text-transform: 
}
          /* FORM */
form {
  width: 90%;
  margin: 0 auto;
  max-width: 500px;
  min-width: 300px;
  padding-bottom: 2em;
  background-color: #1b1b32;
  border: solid #1b1b32 2px;
  border-radius: 2%;
}
fieldset {
  border: none;
  padding: 0.8em 0;
}

label {
  display: block;
  margin: 0.2em 5 5 5;
}

input, select, textarea {
  margin-top: 3px;
  width: 100%;
}

input[placeholder] {
  font-family: monospace;
}

#dropdown {
  font-family: monospace;
}

.inline {
  width: unset;
  vertical-align: middle;
}

        /* SUBMIT */
button[type="submit"] {
  display: block;
  width: 40%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  color:white; background-color: #363639;
  border-color: white;
  border-radius: 8px;
  min-width: 300px;
}

A few of the things I have added to this page still don’t look quite right to me. Examples:

  • The radio and checkboxes textes are not aligned with the buttons themselves.
  • Some texts are not showing where they should.
    Could you please tell me how to improve this code?

Thank you in advance for your help on this!

  • Make sure you correctly close your label elements.

  • For vertical alignment of elements, flexbox is a good choice.

Example:

<label class="items-center gap-x-2">
  <input type="radio"> Yes 
</label>
input {
  margin: 0;
}

.items-center {
  display: flex;
  align-items: center;
}

.gap-x-2 {
  column-gap: 0.5rem;
}
1 Like

Hello @lasjorg ,

I left some labels open??? I didn’t have notice! I will double-check it all once more!
Thanks for spotting it!

Concerning the Display option, I am not sure of how I could better use it in this page. To which class/attribute would you apply it?

Thank you in advance for your help.

If you are talking about the flexbox alignment, the styles would go just on the label elements that contain the checkbox and radio elements (not all label elements). You can create new classes to be applied to just those label elements.

In the example I gave they are utility classes and you can just apply the classes to whatever element needs them.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.