I can' t make the second fieldset appear

Question

Hi guys I wanted to ask a question, I was doing the FCC survey exam and while I was adding some inputs in the second fieldsets I noticed that the page doesn't let me see it.. any advise?

body {}

label {
  display: block;
  margin: 0.5rem;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Whats your favourite videogame?</title>
  <link rel="stylessheet" href="styles.css">
</head>

<body>
  <h1 id="title"> WHATS YOUR FAVOURITE VIDEOGAME?</h1>
  <p id="description"> Please fill up the survey to help find the most popular videogames </p>
  <form id="survey-form">
    <fieldset>
      <label>Name: <input id="name" type="text" required /></label>
      <label>Age (optional): <input id="age" type="number" min="10" max="120" /></label>
      <label>Email: <input id="email" type="email" required /></label>
      <label>What do you do for living?
    <select id="job">
      <option value""> (Select one) </option> 
      <option value"1"> Student </option>
      <option value"2"> Full time job </option>
      <option value"3"> Prefer not to say </option>
      <option value"4"> Other </option>
 </fieldset>

<fieldset>
      <label>How much do you play? <input type="text">  
</fieldset>  
</body> 

</html>

score 2 · Accepted Answer · answered Aug 29 '22 at 17:26

It's just because you are missing to close many elements in your code.
Morover you do not need to wrap your input in label tags, html has for attribute with label tagw which help you to link, label with correct input field. The only logic is id attribute of that input should match with the for attribute of label.
And please be careful while closing tags you are starting the tags but not closing them that's the reason your second fieldset was not appearing. and also visit this post for more knowledge.

body {}

label {
  display: block;
  margin: 0.5rem;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Whats your favourite videogame?</title>
  <link rel="stylessheet" href="styles.css">
</head>

<body>
  <h1 id="title"> WHATS YOUR FAVOURITE VIDEOGAME?</h1>
  <p id="description"> Please fill up the survey to help find the most popular videogames </p>
  <form id="survey-form">
    <fieldset>
      <label for="name">Name: </label><input id="name" type="text" required />
      <label for="age">Age (optional):</label> <input id="age" type="number" min="10" max="120" />
      <label for="email">Email:</label> <input id="email" type="email" required />
      <label for="job">What do you do for living?</label>
      <select id="job">
        <option value ""> (Select one) </option>
        <option value "1"> Student </option>
        <option value "2"> Full time job </option>
        <option value "3"> Prefer not to say </option>
        <option value "4"> Other </option>
      </select>
    </fieldset>

    <fieldset>
      <label for="money">How much do you play?</label> <input id="money" type="text">
    </fieldset>
  </form>
</body>

</html>

I can' t make the second fieldset appear

1 Answers1