Survey form. Feedback please

Code Feedback
1

Hello!
I finished the Survey form. The work is so-so, I guess))
But I would like to know the main weak points. What should I pay attention to? Please give me feedback.

2

Your form looks good @n0vum. A couple of 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 7/17 user stories.
  • You have a couple of different id's that you use more than one time.
1 Like
3

Thanks for the answer!
Could you explain the first point for me? I did not quite understand what you mean. Where can I see how many points are completed correctly?

4

@n0vum, the script is how you would run the tests. When you fork the pen that script is there. Just copy it from my post, paste it into the HTML section of your code. You will see a green hamburger menu in the upper left of your page. Click on it, select Survey Form and the push the button. If any tests fail you’ll see a red button. Click on it and it will open and you can scroll to see which test(s) failed and a brief explanation of what the test was looking for and what it found that made the test fail.

1 Like
5

Wow! Thanks a lot! I didn’t know I could check the page like that.
Haw… such a deplorable result! ;))

1 Like
6

Not deplorable. Quick and easy to rectify.

7

I totally overlooked the important moment as a unique ID :woman_facepalming:.
This is how useful feedback is!

1 Like
8

I always look at accessibility when evaluating web pages, so I won’t stop now :slight_smile:

  • At larger font sizes the ‘Choose the restaurant’ text is completely cut-off in the drop down. You have set the height to 30px on the <select> which is keeping it from growing as the font size increases, so I would remove that. I would suggest you not set a width on it either.
  • The three inputs at the top are not quite as affected by font size changes but they have a height set on them as well which is unnecessary.
  • Depending on the font size/browser width, I can make it so that the ‘7’ in the ‘March 7’ radio button and the ‘quiz’ in the ‘Smart quiz’ checkbox have dropped down by themselves to a separate line. While maybe not an urgent accessibility issue it doesn’t look as professional as it could. Use styling to keep the radio button/check box and its associated text in one line.
  • The default keyboard focus outline in my browser is not adequate for this page, especially with the background colors used in the image. I would suggest you make it much more obvious (use a wider outline with a bolder color perhaps).
  • <textarea> and <select> should have a <label> (just put the text above each inside the label)
  • You don’t need the <a> inside of the button, you can just have ‘Submit’
  • When you want to group radio buttons together so that the user selects just one of them then use a <fieldset>:
    https://webaim.org/techniques/forms/controls#radio
  • You can also use a <fieldset> for the check boxes as well:
    https://webaim.org/techniques/forms/controls#checkbox
  • You might want to graphically denote in some way which input fields are required. The only way to know that right now is to click the submit button.
2 Likes
9

Thank you very much for the detailed analysis of my page. These are very helpful notes! I’ll re-read them in the morning and try to apply.

10

You have used many fonts. You only need 2 different fonts maximum, in my opinion.
From there you can use bold and italics if you need to add emphasis.

You will notice most websites obey this rule.

1 Like
11

Thanks! I didn’t know about this rule.

1 Like