freeCodeCamp调查表单中推荐询问Label无法显示问题求助

核心原因 #

你把推荐相关的<label>和<div>嵌套在了未闭合的<select>标签内部，而浏览器规定<select>只能包含<option>或<optgroup>元素，内部的其他内容会被解析为无效并忽略，这就是推荐label无法显示的关键原因。

具体错误点及修复 #

• 未闭合的<select>标签：必须在所有<option>结束后添加</select>，将后续内容移出<select>范围。
• 错误的第一个<option>写法：原标签未闭合，且占位符逻辑不规范，应改为<option value="" disabled selected>Select your role</option>（通过disabled+selected实现默认选中且不可选的占位效果）。
• 表单action属性语法错误：action:是错误写法，需改为action="https://survey-form.freecodecamp.rocks/"（用等号而非冒号）。
• 错误的<input>闭合方式：<input>是自闭合标签，无需</input>，直接结束即可。

修复后的完整代码 #

<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve our platform</p>
<form id="survey-form" action="https://survey-form.freecodecamp.rocks/">
  <label for="name" id="name-label">Name</label><br>
  <input id="name" type="text" placeholder="Enter your name" required><br>
  <label id="email-label">Email</label><br>
  <input required type="email" id="email" name="email" placeholder="Enter your email address"><br>

  <label id="number-label">Age</label><br>
  <input type="number" id="number" name="age" min="13" max="125" placeholder="Age"><br>
  <label for="role" id="question">Which option best describes your current role?</label>
  <select id="dropdown">
    <option value="" disabled selected>Select your role</option>
    <option value="Student">Student</option>
    <option value="Full time job">Full-time job</option>
    <option value="Full time learner">Full-time learner</option>
    <option value="Other">Other</option>
  </select><br>

  <div>
    <label for="recommend">Would you recommend freeCodeCamp to a friend?</label>
    <input type="radio" id="definitely" name="answer" value="definitely"> Definitely
    <input type="radio" id="notsure" name="answer" value="notsure"> Not Sure
    <input type="radio" id="no" name="answer" value="no"> No
  </div>
</form>

内容的提问来源于stack exchange，提问作者HeatherFeather