Build a Survey Form: passing tests, but

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Class Survey</title>
    <link rel="stylesheet" href="styles.css"/>
    <h1 id="title">How did we do?</h1>
    <p id="description">Please complete this survey to receive your completion certificate for this course.</p>
<form id="survey-form">
  <label id="name-label" for="name">Name: <input id="name" type="text" placeholder="First Last" required /></label>
  <label id="email-label" for="email">Email: <input id="email" type="email" placeholder="" required /></label>
    <legend>Which course are you reviewing?</legend>
    <label for="intro-html"> <input id="intro-html" type="radio" name="course" class="inline" value="a" checked /> Intro to HTML </label><label for="css-dummies"> <input id="css-dummies" type="radio" name="course" class="inline" value="b"/> CSS for Dummies </label> <label for="python-pro"><input id="python-pro" type="radio" name="course" class="inline" value="c" /> Python for Pros</label>
  <label id="number-label" for "number">Rate this course on a scale of 0 - 5 where 0 = Not Satisfied at all, 3 = Neutral, and 5 = Very Satisfied: <input id="number" type="number" min="1" max="5" placeholder="X"/></label>
  </label id="dropdown-label" for="dropdown">Would you recommend this course to a colleague? <select id="dropdown" name="dropdown" required >
  <option value="">Choose One</option>
  <option value="1">Yes</option>
  <option value="2">No</option>
    <label for="setting">What types of courses interest you? (Select all that apply)<input id="setting" name="setting" type="checkbox" class="checker" value="ip" checked>In-person </input> <input id="setting" name="setting" type="checkbox"class="checker" value="ol">Live E-class </input> <input id="setting" name="setting" type="checkbox" class="checker" value="or">Pre-recorded </input> 
  <label for="future">Tell us what subjects you would like to see us cover in the future:<textarea id="future" name="future" rows="4" cols="42" placeholder="I'd like to learn more about..."></textarea></label>
  <input id="submit" type="submit" value="Submit" />

I’m stuck. My code is passing all tests – but there’s still something wrong and I can’t figure it out. I don’t want to just submit it because I know this is a good learning opportunity but, at the moment, I’m more frustrated than enlightened.

The problem lies between where my dropdown section ends and the checkbox section begins. For some reason, it’s not displaying the border at the bottom of that fieldset (under the dropdown question) as it is with the other fieldsets and the text for the label attached to the checkbox options isn’t showing up. When you view the preview, it actually has the drop down and the start of the check box options all on the same line. I feel like that description doesn’t make much sense, so here’s a photo of what I’m seeing (notice the border under the previous fieldset which included name and email):

I’ve tried deleting, retyping, reordering – no success. What am I missing?

Check that. Your label is not correct for select element

1 Like

u haven’t added closing select element. Add closing select element after your all option element. One more mistake in label where id is set to “number-label” in that label element u haven’t add the assignment operator.

1 Like

In addition to what they @hasanzaib1389 @prabhakarsingh8722 have said,

this is what @prabhakarsingh8722 points to.

And in your option elements you can add disabled attribute to the first option which is Choose One so that no one can select it and they need to select another option (Yes or No).

Also, in your checkbox inputs, you can’t set multiple elements to the same id. Only one element can have that unique id. What you did will not work as you expect. If you click on other label’s text, it will check the first checkbox with the idsetting.

So you can assign a new unique id for each checkbox and assign each of those new ids to its corresponding for attribute in a new label element with the suitable text you want.

For example:

<input id="std" type="checkbox" name="role">
<label for="std">Student</label>

This will make at first the checkbox square and next to it on the right, the text “the label”.

Lastly, ANY input element doesn’t need a closing tag, just like the img tag.

I think you used the closing tag to include the text but this is the label usage(to “link” each text to its appropriate checkbox). As I see, you didn’t close the input tag here:

1 Like

Thank you all! It’s going to take me some time to sort through your responses and make the corrections. But I really appreciate you each taking the time and spelling it out in terms I’m mostly sure I understand (I guess I’ll know for sure once I see whether I can fix it – it is only day 2 for me, after all)!

1 Like

Quick question: this would mean I don’t need to assign values to each of those checkboxes since each will have an individual id, right?

If you mean the value attribute, you still have to use that attribute for each checkbox.

because the id can be used as you used it to “link” a clickable label for each checkbox.

the value attribute is used with the name attribute as you did here:

If this radio is selected and then the user submitted the form, if you asked a simple question…
what data does this form send actually?

The answer is simple, let’s assume that this radio button above is selected and the form is submitted. What is being sent here is the name and the value attributes of that radio button.

As this: name=value (key-value pairs), based on what you had specified for this radio button this is what is being sent though: course=a, and i don’t want to distract you with more information about this but in summary this is sent to a back-end system or something like that so now whenever you look at this: course=a you can easily now know what the user actually selected because you know which radio button had this value of a.

Just like if you have a text input, you get its value from what the user had typed in it. But how do you get the value of something the user can only click on it? that’s the value attribute role for it. The user know what is the value of this radio button from its label and in back-end you know what value the user selected from the value attribute.

As you see, the id attribute here isn’t used at all.

In summary, the id is typically used for identifying elements in the HTML document or DOM and to associate for example a labal with a radio button.
( you can now understand better why i said that you can’t have multiple elements with the same id cause HOW would you know which element you want from all these having the same id)

On the other hand, the value attribute is being used for other tasks and processes in the back-end with the attribute name.