FCC-Survey Form Project Feedback (Complete)

Code Feedback
1

Hello Campers!
My second project of the Responsive Web Design certification is complete! Here is the link: https://codepen.io/joesh/full/GRJeRVM Please go through it and give your feedback! The feedbacks help me become better everyday!
Thank you

2

A few things:

  • The for attribute on your Age label does not point to the id on the associated input. You donā€™t have idā€™s on the check box inputs/textarea so the labels arenā€™t working for those either. To test all your labels, click on the text for each one. Clicking on the text should make the keyboard focus switch to the input. For example, when I click on ā€œAgeā€ the keyboard focus should go to the input box below it.
  • If you want to be extra nice to people who depend on accessibility then put both the radio buttons and check boxes in a fieldset/legend
    https://webaim.org/techniques/forms/controls#checkbox
  • Set the max width on your form in ā€˜emā€™ instead of ā€˜pxā€™. As I increase the text size the form width should also increase.
  • Placeholder text should not be used to provide instructions. You should have those age restrictions in plain text on the page. You could put them in the label itself or you could put them below the input and then use aria-describedby to associate them with the input.
    https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/
    Placeholder text is really meant to provide a hint/example of what you want the user to put in the field. So instead of just saying ā€œEnter your nameā€ you should provide an example of how you want someone to format their name. Same with Email. As for the comment box, I doubt placeholder text is needed at all (but it might be a requirement for this project?).

Overall, very nice job.

1 Like
3

Hello, itā€™s pretty good project.

1 Like
4

Thanks for the detailed feedback and corrections @bbsmooth! People like you make coding fun and the learning curve smooth. I appreciate you! Let me make the changes.

5

Thanks for your feedback @Konrad.L :blush:

6

Your form looks good @joshem. In addition, you correctly nested your radio buttons like this;
<label for="maybe"><input type="radio" id="maybe" name="choice" value="maybe">May Be</label>
and because of that users can click on the label or the radio button to select it.

But you didnā€™t do that for your checkboxes;
<label for="improvement-1" id="improvement-1"><input type="checkbox" id="" value="front-end-projects" name="">Front-end Projects</label>
For some reason you put the id in the label and left the id in the input blank.
If you correct it youā€™ll see that users can click on the checkbox or the label to select it.

  • By leaving those id's blank you throw another error. An id must be unique in the document.
  • You didnā€™t close your button element correctly. botton does not equal button
1 Like
7

Thank you for your detailed feedback @Roma you make me look forward to submit the next challenge! Always grateful for this experience. I am on it.