Feedback on Survey Form project

Code Feedback
1

Hi everyone - it would be great to have feedback on my Survey Form project -

Many thanks!

2

Nice work, looks good. I could access the form with keyboard only (accessibility), which is important, and the structure is easy to understand.

I found some errors in your HTML though. If you run the source code through a validator, it’ll show you some issues.

  1. You are re-using IDs in your markup, which is not valid. An ID can only be present once in the entire page, that’s its purpose. IDs refer to unique elements. Your radio elements all use the same ID <div id="recommend-item"></div>. You should remove the IDs or give each element a unique one, like id="item-1", id="item-2" and so on.
  2. Your label <label id="fruits-label" class="wide-label" for="fruits"> refers to an input with an ID of fruits, but your desired select input doesn’t have this ID. Instead, it’s given the ID of dropdown. So, you need to put the attribute for="dropdown" onto your label in order to make it valid.
  3. The same applies for your label at the bottom <label id="comments-label" for="comments">, which is associated with the textarea. But the textarea doesn’t have any ID, so there is no valid relation between these two. You need to add id="coments" to your textarea.

IDs can relations between elements can give you a hard time, so it’s always good to validate your HTML using for example this validator: https://validator.w3.org/
It will point you to exactly these kinds of mistakes that are easily fixable.

1 Like
3

Wow, thanks Andreas! I missed all of those really basic things, partly because of previous versions (“fruits” for “gender” was for an earlier version with “bananas…apples, etc”. The requirement for particular id names to pass the test (e.g. “dropdown”) is a bit odd as I would have chosen “gender” there.

Now it’s passed the W3 markup too.