Survey Form Project Issue

Hello everyone!

I have recently been working on the Survey Form Project, and I have finally completely finished the HTML portion of the project. With that being said, I have only passed 16 of the 17 tests. The one test that I seem to be having an issue with is User Story #13: “Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.”

I have added the id and name attributes to the code, but I’m not certain what the issue is. Could I get a few other eyes to take a look and see if I’m just overlooking something?

The inputs type radio must have same name attribute not the same ids. Always, ids must be unique.

1 Like

Hello Morgan,

The test is failed, becasue none of your radio buttons have any value! technically having radio buttons without any value is redundant, considering following code(your work):

<label>
        <input id="why" type="radio" name="why" class="radio">
        I play games for fun.
      </label>
      <br>
      <label>
        <input id="why" type="radio" name="why" class="radio">
        I play games for work.
      </label>
      <br>
      <label>
        <input id="why" type="radio" name="why" class="radio">
        I play games for work and for fun.
      </label>

Since none of the radio buttons come with value, so when you submit the form, no matter what radio button user clicked why= will be sent to the server. So server has no clue what does it mean!?
Cow considering following radio buttons

<input  type="radio" name="color" value="lime">
<input  type="radio" name="color" value="yellow">
<input  type="radio" name="color" value="cyan">

Each radio comes with a dedicated value(logical), But they have same name(logical), so it means user may select only one of these radios. When user select second one, value yellow for parameter color will be sent to server when form is submit. So server(backend, you will code it soon of course) have a clue now, becasue color parameter got a value.

But now back to your code, since radio buttons ain’t got any value, so they look redundant(bug), so simple add each radio a random unique value could pass the test.

Now about your checkbox, your checkbox come with same names. This is not an issue, just a note, when you have 3 checkbox with same names, and user selects all of them, then backend(server) will grab all of three values with a same parameter name. For easier work, some devs tend to have unique name for each checkbox.
Also consider if you don’t give a unique-name checkbox any value, it’s okay. If user checks and submit the button, then empty value(or yes, on) with associate checkbox name will be sent to the server. Since it’s about yes,no so easy to find out if the checkbox was selected.

Also you may not place <!DOCTYPE HTML> for your HTML hosted page, you may remove it, but have it when page is standalone.

Now about the rest of your work, I really like the simple/plain design. Simple design is the best design. Just note if you think designing, UI/UX is kind of hard(same for me), so you should not think you are a bad coder! NO! Someone has good creativity process, someone doesn’t(I think I just sold it out when I was child)

Your page has some small issues, but they are not so critical. First it’s about default text instead of placeholder for textarea elements. please fix.

You set label for radio and checkbox buttons, really good. but you forgot to use label for combobox and textfield about pronounce

I suggest you add a disabled/hidden and default option for your combobox, something like this.

Beside the page is responsive, but I suggest you may add some spacing between elements, and make elements a little bigger. It’s very appreciated for mobile view. Same about line-height, having more line height could be great.

I also suggest you may have a grid 2-col layout for desktop which turns into a 1-col layout in mobile. You may check this.

This is not critical, but this is recommended to escape especial characters like double-quote when you want to treat them as simple text, considering following text part in your code:

<br>
  What is your favorite game? If you don't have one or cannot think of it, type "N/A" in the space provided.
  <br>

note the "N/A", this could be better as

<p>
What is your favorite game? If you don't have one or cannot think of it, type &quot;N/A&quot; in the space provided.
</p>

please note using paragraph tag, and escaped double quote as &quot;

It’s better to use paragraph(p) tag when you want to host a text in your page. Paragraph tag works like a block section, so you won’t need any break (br) tag anymore. You may use span tag for inline text too.

Since there is no CSS, so I assume it’s completed, I hope you could come up with some styling for it to make it cooler as it keeps it’s simple attitude.

And just as @sorinr stated, each element should come with a unique id.

Keep going on great work, hope to see some more great wok and progress from you Morgan. happy programming.

1 Like

@sorinr and @NULL_dev Thank you both for the feedback! I have made the changes suggested and can get started on the CSS! I just wanted to make sure that all of the HTML was finished and corrected before going into designing the form! I will update this thread with the finished project when it is complete and ready for feedback on the CSS side!