Beta Survey Form. Feedback appreciated

Code Feedback
1

i don’t know how it works, but it kinda does. feedback appreciated

1 Like
2

@Alemrv,

Beautiful responsive form! I like the combination of colors, icons and the font. Excellent use of flex! It passes the HTML and CSS validators.

A few things to consider:

  1. Radio and Checkbox labels: For accessibility reasons, all your form elements including radio buttons and checkboxes should have their own labels. Adding a label to these elements also enables the user to click on the text instead of having to click directly in the radio button or checkbox. I see that you created labels for the group of radio buttons and checkboxes but this is invalid, to do that you will have to use the <fieldset> and <legend> elements.
  2. Units of 0: Consider changing 0px to just 0 as suggested by CSS Lint and other sources (it shows up once in your CSS).
  3. Background shorthand property: The background property that you used is a shorthand property that can also set the background-position, background-size, background-repeat & background-attachment properties and semms to be the generally recommended way to do it.
  4. Default select: You can add the property selected to the ‘Select an option’ option in the dropdown, this will make it the default which was probably intended. Also, the value property on this option was left blank.
1 Like
3

@Alemrv Great design! I agree with all of @yoizfefisch’s comments. I’d like to add a couple of other things I noticed:

  • CSS ID Selectors: Even though some may disagree, a common CSS opinion is to avoid using ID selectors whenever possible. The ID Selectors section of Interneting is Hard has a short and simple explanation of one of the reasons:

    The problem is, if we wanted to share this style with another button, we’d have to give it another unique id attribute. … For this reason, ID selectors are generally frowned upon. Use class selectors instead.

  • Nesting CSS Selectors: There are a couple of CSS selectors that are possibly more specific than they need to be, #email-label > i and #number-label > i. These types of child selectors may lead to problems when using this code in the future. Since our projects are relatively basic at this stage, I think it’s a good idea to develop good habits early on. The cssguidelin.es section on specificity does a good job of explaining all of the issues regarding CSS specificity and why one wants to keep specificity as low as possible.

Well done! :sunny:

1 Like