Survey Form Queries

In the following html code … there has always been an addition of …id=“dropdown-label” or (something-label) but there was no such mention of that particular id in the css code. Also was used but there was no mention of “survey-form” in the css code … There were many instances of such occurences … any explanations ?

HTML CODE -->

FCC: Survey Form

Survey Form

<main role="main" class="">

  <div class="main">
    <p id="description">Tell me your interest in freeCodeCamp and coding!</p>

    <div id="form-area">
      <form id="survey-form">
        <div class="form-item">
          <label id="name-label" for="name">Name:</label></br>
          <input id="name" type="text" name="name" required placeholder="Your name"></br>

          <label id="email-label" for="email">Email:</label></br>
          <input id="email" type="email" name="email" required placeholder="email@example.com"></br>

          <label id="number-label" for="number">Age:</label></br>
          <input id="number" type="number" name="number" max="999" min="0" placeholder="30"></br>
        </div>

        <!-- select box -->
        <div class="form-item">
          <label id="dropdown-label" for="dropdown">Which option best describes your current role?</label></br>
          <select id="dropdown">
            <option value="" disabled selected>Select an option</option>
            <option value="1">Student</option>
            <option value="2">Full Time Job</option>
            <option value="3">Full Time Learner</option>
            <option value="4">Prefer not to say</option>
            <option value="5">Other</option>
          </select></br>
        </div>

        <!-- radio button -->
        <div class="form-item">
          <label>What are your experience in coding?</label></br>
          <input type="radio" name="recommend" value="0">freeCodeCamp is the first code learning project for you</br>
          <input type="radio" name="recommend" value="1">You have tried other coding lessons</br>
          <input type="radio" name="recommend" value="2">You have developed something as a personal project</br>
          <input type="radio" name="recommend" value="3">You already have experience as a professional developer</br>
        </div>

        <!-- checkbox -->
        <div class="form-item">
          <label>What are you willing to learn at freeCodeCamp?</label></br>
          <input type="checkbox" name="improve" value="0">HTML</br>
          <input type="checkbox" name="improve" value="1">CSS</br>
          <input type="checkbox" name="improve" value="2">JavaScript</br>
          <input type="checkbox" name="improve" value="3">Other</br>
        </div>

        <!-- textarea -->
        <div class="form-item">
          <label id="comment-label" for="comment">Comment:</label></br>
          <textarea id="comment" rows="3"></textarea>
        </div>

        <div id="submit-btn">
          <input id="submit" class="button" type="submit" value="Submit">
        </div>
      </form>
    </div>
    <!-- end form-area -->

  </div>

</main>

<footer class="header-footer">
  <div class="footer">
    <div class="center">
      This page was built as a code learning project at <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </div>
    <div class="center">
     
    </div>
  </div>
</footer>

CSS CODE ---->

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 0;
font-family: Sunflower;
–main-color: hsl(104, 29%, 31%);
background-color: #dceace;
}

a:link {
color: hsl(0, 0%, 90%);
}

a:visited {
color: hsl(0, 0%, 70%);
}

a:hover {
color: hsl(0, 0%, 98%);
}

a:active {
color: hsl(0, 0%, 100%);
}

.main {
border-style: solid;
border-radius: 10px;
border-width: 1px;
border-color: #b4c4ae;
background-color: #f2f4ef;
margin: 2em 1em;
padding: 1em;
color: var(–main-color);
}

#description {
text-align: center;
}

.form-item {
padding: 1rem;
}

label {
font-weight: bold;
}

#comment {
width: 100%;
}

.button {
display: block;
margin: 0 auto;
border-radius: 8px;
color: white;
padding: 10px 20px;
background-color: var(–main-color);
border: none;
}

.button:hover {
background-color: hsl(104, 29%, 40%);
}

.header-footer {
background-color: var(–main-color);
width: 100%;
text-align: center;
color: white;
}

The ids are required by the test (to fulfill the user stories).

They are not used for styling because using ids for CSS isn’t best practice. It is fairly common to have ids in the HTML that are not used for CSS, but for JavaScript.

Ohh, that kinda helped me but a more elaborate answer would have helped more … Thanks for the reply :blush: