Html - Last label refuses to show - the one where it asks about recommendation

HeatherFeather
August 3, 2023
273 views
3 votes
3 Answers

Would you recommend freeCodeCamp? Here is all the code so far. Everything else shows up just fine

<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us imrpove 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="" placeholder="Select your role">
      <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>
      </br>

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

I have searched the forums, as well as different online sites. I can’t figure out what I’m missing to display that ONE question

Tags: css html

Answers

The <select> element should be closed properly with </select>.

<html>
<head>
    <title>freeCodeCamp Survey Form</title>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF=8" lang="en">
</head>
<body>
    <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" name="recommend">Would you recommend freeCodeCamp to a friend?</label>
            <input type="radio" id="definitely" name="answer" value="definitely">Definitely</input>
            <input type="radio" id="notsure" name="answer" value="notsure">Not Sure</input>
            <input type="radio" id="no" name="answer" value="no">No</input>
        </div>
    </form>
</body>
</html>

You’re missing your select closing tag so the browser knows that the code below it is not part of the select and behave unexpectadly. Just add </select> after the last option and your label should show up.

Edit: Didn’t realize @Dulan Jayawickrama found the problem

<html>

<head>
  <title>freeCodeCamp Survey Form</title>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF=8" lang="en">
</head>

<body>
  <h1 id="title">freeCodeCamp Survey Form</h1>
  <p id="description">Thank you for taking the time to help us imrpove 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="" placeholder="Select your role">
        <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" name="recommend">Would you recommend freeCodeCamp to a friend?</label>
      <input type="radio" id="definitely" name="answer" value="definitely">Definitely</input>
      <input type="radio" id="notsure" name="answer" value="notsure">Not Sure</input>
      <input type="radio" id="no" name="answer" value="no">No</input>
    </div>

It’s your dropdown, you need to close it before adding the next question.

<html>
<body>
    <head>
        <title>freeCodeCamp Survey Form</title>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF=8" lang="en">
    </head>
        <body>
            <h1 id="title">freeCodeCamp Survey Form</h1>
            <p id="description">Thank you for taking the time to help us imrpove 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="" placeholder="Select your role">
        <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></br>   
        </select>    
      <br>
      <label for="recommend" name="recommend">Would you recommend freeCodeCamp to a friend?</label>
  
    <div>
    <input type="radio" id="definitely" name="answer" value="definitely">Definitely</input>
    <input type="radio" id="notsure" name="answer" value="notsure">Not Sure</input>
    <input type="radio" id="no" name="answer" value="no">No</input>
    </div>
  </body>
  </html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Last label refuses to show – the one where it asks about recommendation

Answers