Feedback on Survey Form - JC2295

Hello Everyone,

I’ve just finished my first iteration of the survey form project for responsive web design and would really appreciate it if you all could give me some feedback. I’ve tried to incorporate flexbox into it to improve it’s responsiveness but I’m still very inexperienced using it so any help in that regard would be greatly appreciated as well.

Here is the link to my Survey Form: Survey Form

Kind Regards,

Jonathan

Your form looks good @JoJo2295. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Run your CSS code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    After running through the validator this issue may be cleaned up
  • Change the cursor to a pointer when hovering over the submit button
  • It’s a nit but, placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.

A suggestion. It’s okay that you used flexbox but for a simple form like this it’s not needed.
You can use max-width/height and relative units like %, em, rem and vw on elements to keep everything responsive instead of fixed dimensions.
There was a lesson on the fieldset element for better accessibility. While the lesson only mentions radio buttons it can also be use to group checkboxes. And help you to style them.
Things will line up better if the checkboxes / radio buttons are on the left side of their respective labels.

1 Like

Thankyou very much for the feedback you’ve helped me a lot. Is running code through a validator standard practice in industry or is it more like a training wheel?

I use it constantly because I know I’ve probably made a mistake somewhere along the line. I think of it more as a tool.
Browsers are very forgiving and little coding errors may not show up as the browser will do its best to render the code. But while one browser may render the code the way you expect, another browser may interpret it differently.

Makes sense, thankyou for letting me know, I appreciate the help.