My first Survey Form - good, bad, ok? Would love critiques

Hey there :wave:, I’d love to read some feedback on my first survey form. Please let me know what you think. Thank you guys! :raised_hands:

1 Like

very nice!!! but be carefull with the radio options.
Try to remove the options that are marked by default.

1 Like

Hi @arjusgit, your form looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes xx/xx user stories.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Don’t use the <br> element to force spacing. Use margin and/or padding in CSS.
  • Make the age field a little wider so it shows the placeholder text
  • Don’t preselect choices for the user
1 Like

Technically having an initial checked state is just a way to require the user to make a selection without actually adding the required attribute. Which really isn’t needed if an initial checked state is added.

If a selection is required then it is considered a best practice to have an initial checked state.

4.10.5.3.4 The required attribute

Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.

I did, however, notice that you have two inputs both with a checked attribute (only the last will apply).

2 Likes

I’m sorry, I don’t get it. Do you mean name, value? Thank you

Hi @Roma. I think I solved every problem you mentioned. Could you please check it again? Thank you

Looks good @arjusgit. Couple of things.

  • Read what lasjorg had to say. My bad about telling you not to have something selected. It’s your choice if you want to do it.
  • Run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • you have a couple of things to clean up in your HTML