HTML Survey Form #number-label

HTML-CSS
1

I am getting an error when testing whether the #number-label, #name-label, and #email-labels are empty. The other ids have the exact same conditions as far as I can tell and they all pass. Anyone able to tell me what I am missing?

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="styles.css">
<h1 id="title">Page Title</h1>
<p id="description">Short Description</p>
<form id="survey-form">
  <label id="name-label"><input placeholder="Name" id="name" type="text" required /></label>

  <label id="email-label"><input placeholder="Email" id="email" type="email" required /></label>

  <label id="number-label"><input placeholder="Number"         id="number" type="number" min="1" max="5"></label>

  <select type="select" id="dropdown">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label>Option 1: <input type="radio" name="radio-1" value="radio-1" /></label>
  <label>Option 2: <input type="radio" name="radio-1" value="radio-1" /></label>
  <label>Option 1: <input type="checkbox" name="checkbox-1" value="check-1" /></label>
  <label>Option 2: <input type="checkbox" name="checkbox-1" value="check-2" /></label>
  <textarea></textarea>
  <input id="submit" type="submit" />
</form>
</body>
</html>

/* file: styles.css */
body {
background-color: pink;
width: 500px
}

#title {
margin: 0 auto;
text-align: center;
}

#description {
text-align: center;
}

#name-label {
display: block;
text-align: center;
margin: 1em auto;
}

#name {
color: blue;
}

#email-label {
display: block;
text-align: center;
margin: 1em auto;
}

#email {
color: red;
}

#number-label {
display: block;
text-align: center;
margin: 1em auto;
}

#number {
color: red;
}



  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49

Challenge: Build a Survey Form

Link to the challenge:

2

“Your #name-label should not be empty.”

Your HTML:

<label id="name-label"><input placeholder="Name" id="name" type="text" required /></label>

If there is no text between the opening and closing label tags then the label is empty. An input does not count because it is an input field, not text.

I can definitely see how this can be confusing though. I think the test should probably be worded a little better to make it clear that the label needs actual text.

1 Like
3

Ahh, I thought since they included the hashtag they were talking about the CSS code, not the label itself. Thank you so much!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.