Survey Form Radio

Survey Form Radio
0

#1

Tell us what’s happening:
Due to alignment problems with my last survey form I have restarted and I am using the same code as FCC. For whatever reason though, I am having similar issues as before. My first radio button is floating in the dropdown div and its label is nowhere to be seen.
Take a look

Your code so far
Survey Form


#2

You have many missing closing tags. You did not close your <select> tag, which is causing your radio button to float in the dropdown.

I strongly suggest indenting your code to make it more readable. If you indent your code, you would easily see it is missing the closing select tag. Also, you have some extra closing div tags (</div>) which are not needed. Since you are using Codpen, there is a nice feature called Tidy, which will attempt to indent your code for you. It is not perfect, but a does a good job. To use Tidy, you can click on the dropdown menu on the upper right sectin of the HTML module in the pen. In fact, there is a Tidy feature for the CSS and JavaScript modules for you.

You will also notice a feature called Analyze, which will warn you if it finds syntax problems.

I fixed all your syntax issues and properly indented your code (see below).

<h1 id=title>
  College Survey
</h1>
<h2 id=description>
  What is your experience in University?
</h2>
<form id="survey-form" method="get">
  <div>
    <div class="labels">
      <label id="name-label" for="name">*Name</label>
    </div>
    <div class="rightTab">
      <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
    </div>
  </div>
  <div>
    <div class="labels">
      <label id="email-label" for="email">*E-mail</label>
    </div>
    <div class="rightTab">
      <input type="email" name="email" id="email" class="input-field" placeholder="Enter your e-mail">
    </div>
  </div>
  <div>
    <div class="labels">
      <label id="number-label" for="number">*Age</label>
    </div>
    <div class=rightTab>
      <input class="input-field" type="number" min="12" max="99" placeholder="Enter your age">
    </div>
  </div>
  <div>
    <div class="labels">
      <label for="currentPos">
        What is your current class level?
      </label>
    </div>
    <div class="rightTab">
      <select id="dropdown" name="currentPos" class="dropdown">
        <option selected disabled value>
          Select an option
        </option>
        <option value="freshman">
          Freshman
        </option>
        <option value="sophomore">
          Sophomore
        </option>
        <option value="senior">
          Senior
        </option>
        <option value="postgrad">
          Post Grad
        </option>
      </select>
    </div>
  </div>
  <div>
    <div class="labels">
      <label for="challenge">Rate the difficulty of your classes</label>
    </div>
    <div class="rightTab">
      <ul style="list-style: none;" id="challenge">
        <li class="radio">
          <label>Easy<input name="radio-buttons" value="1" type="radio" class="challenge"></label>
        </li>
        <li class="radio">
          <label>Moderate<input name="radio-buttons" value="2" type="radio" class="challenge"></label>
        </li>
        <li class="radio">
          <label>Intense<input name="radio-buttons" value="3" type="radio" class="challenge"></label>
        </li>
      </ul>
    </div>
  </div>
  <!--Closing Form Div VVVV-->
</form>

FYI - You were also missing a closing ul tag (</ul>) on your unorderd list.


#3

lol that’s great, thank you!
As for the extra /div, they are in the original code so I just followed suit. I thought they were as a container for the label and input but I took them out and nothing changed.

Thanks again