Survey Form Feedback

Code Feedback
1

Hey guys!

I recently completed my first HTML/CSS project: Survey Form.

I would love to hear some feedback on what I could improve, code and layout wise :smiley:

Here is the link to my github repo: GitHub - coalsticks/Survey-Form: Simple static HTML survey form using pure CSS.

I can post the code here too if you would like :smiley:

2

Hey, this looks pretty good. I have a few suggestions to improve the accessibility of your form though.

  • The select needs an actual label. The use of a fieldset here doesn’t give the select an actual accessible name. The legend element is used to give a group of inputs a group name. My suggestion would be to change the fieldset to a label and use the for attribute to link the label to the select.

  • Change the div.main-container to a main.main-container. Best practice is to always put the main content in a main element.

  • Zoom the page up to 400% and notice what happens. This is happening because you are setting the width of the form using vw units, so the width will only change if you make the browser window bigger. But when you zoom in you need the width of the form to increase in order to deal with the larger text. So use a unit that is independent of the browser size and will take into account the larger font size, such as rem units.

3

Thank you!

Regarding your first point, is fieldset/legend not accessible as well? If I wrap the select within the legend, would it work, or is that incorrect?

Would it make sense for the html to look like this:

 <fieldset />
      <legend>Would you recommend the event to a friend? (required)
           <label for="dropdown" class="dropdown">
                  <select id="dropdown">
                      <option class="option-selection" value="">(select an option)</option>
                      <option class="option-selection" value="Yes">Yes</option>
                      <option class="option-selection" value="No">No</option>
                  </select>
            </label>
      </legend>
 </label>

Or is the legend redundant in this case?

Alternatively, is this the markup you suggested (should legends be used in conjunction to fieldsets only)?

<label for="dropdown" class="dropdown">
     Would you recommend the event to a friend? (required)
           <select id="dropdown">
                  <option class="option-selection" value="">(select an option)</option>
                  <option class="option-selection" value="Yes">Yes</option>
                   <option class="option-selection" value="No">No</option>
             </select>
</label>

For the last point you mentioned, that made a lot of difference! I was wondering how to get it more responsive, like in the course’s form. Are the components inside the form responsive after using the units such as rem? Or is more required for it to be responsive?

4

You only need to use a fieldset and legend when you are grouping more than one input. In this case, you just have a select, which is technically one input, so you don’t need a fieldset and legend for this at all. The question text for the select should be in a label and the you associated the label with the select using the for attribute on the label. So your second example is the correct way to do it.

5

Got it! Thank you so much :smiley: