Survey Form Feedback - Market Survey Form

Code Feedback
1

Here’s my Survey Form
Any and all critiques are most welcome! :wink: :wink:
W3C validator : Document checking completed. No errors or warnings to show.
W3C CSS Validator : Congratulations! No Error Found.

2

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
      (The one for HTML misses things which is why I recommend W3C)
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button (and clear button)
  • When using the keyboard to go through your form the user has no indication of when they are on the ‘clear’ or ‘submit’ button
1 Like
3

Just a few quick accessibility suggestions:

  • For the radio button/check box groupings, you are not using <label> correctly. The <label> should be paired with each <input> (and make sure you include the for attribute, which means you need to give each <input> an id). The entire grouping should be wrapped in a <fieldset> using a <legend> for the question.

  • All of the other <label>s need for attributes too.

  • As @Roma pointed out, there is no keyboard focus indicator on the buttons:

#clear, #submit {
  ...
  outline: none;
  ...
}

Setting outline to none is a big accessibility no-no because it removes the focus indicator for keyboard users. Instead, customize the outline so it looks good with your page’s styling.

Bottom line, make sure every <input> has an associated <label> and that the for attribute on the <label> points to the id on the <input>.

1 Like
5

@Roma @bbsmooth Thank you for your suggestions :innocent: :innocent:

6

@Roma @bbsmooth may be now it is good
Survey Form
I used <fieldset <legend and now the submit and clear have cursor: pointer and hover effect ,
code valid with W3C (head tag just for W3C validator) and codepen analyze for both HTML and CSS

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.