Survey Form - Build a Survey Form

HTML-CSS
1

Hi there! I have been working on this for a few days now, I just can’t figure out why the #name-label isn’t working. Any help is greatly appreciated!
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!doctype HTML>
<link rel="stylesheet" href="styles.css">
<h1 id="title"> Juli's Survey </h1>
<p id="description"> I'm making a survey form with freeCodeCamp.  Exciting!! </p>
<form id="survey-form"><br>
Name <label id="name-label"><input type="text" id="name" class="labels" placeholder="Enter your name" required>
</label> </input>
<label id="email-label"> </label> <br>
<p>
Email <input id="email", label id="email",type="email" placeholder="Enter Email Here"  required> </input>
<label id="number-label"><input="please enter your name"> </label> <br>

<p>Number <input id="number" type="number" name="num" inputmode="numeric" min="1" max="9"  placeholder="1-9" id="number-label" required> </input> 
<p>
<select name="dropdown" id="dropdown">
  <option value="Option 1"> Option 1 <option value="Option 2"> Option 2 </select>
<p>
<input type="radio" name="radio options" value="press"> Radio options here </input>

<input type="radio" name="radio options" value="press"> Radio options here too </input>
<p> <input type="checkbox" value="press"> 
Tick 1
<p> <input type="checkbox" value="value"> Tick 2
<p> <input type="checkbox" value="value"> Tick 3
 <p> <input type="checkbox" value="value"> Tick 4
 <p> <input type="checkbox" value="value"> Tick 5
 </input>
<p> Additional Comments?
<textarea> </textarea>
<p>
<input type="submit" id="submit" value="Submit">



 </form>
 </HTML>
 </link>

/* file: styles.css */
body {
  width: auto;
  left-margin: 30px;
  color:purple;
  background-image: url("https://blogs.nasa.gov/webb/wp-content/uploads/sites/326/2022/07/jupiter_hi_res_atmo-1-1016x1024.png");
  padding-top: 5px;
  padding-bottom: 10px;
}
form {
  color: brown;
    text-shadow: 2px 2px white;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: 20px;
  color: rgb(7, 5, 5);
  padding: 16px 32px;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Start by validating the HTML and fixing it.
https://validator.w3.org/nu/#textarea

Anyway, the label text should be inside the label elements.

1 Like
3

input is self-closing so remove any of these</input>

Your label is empty at the moment. To give it some text, you need to put something in between the opening tag of the label and the closing tag of the label.

(an example can be seen by looking at the code in the cat photo project)

4

This is a fantastic resource, thank you!

I now get this message:
image

My code looks a lot cleaner now, so thanks.

5

Thank you! It turned out that my < label id=“name/number/email-label” > needed to be before the word email in order to describe it. So chuffed. Many thanks.

1 Like
6

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