Survey-Form feedback The Metal Survey

Code Feedback
1

Hi everyone! I once again ask for your feedback on a project. This is for project number two, Survey Form: https://codepen.io/bofmar/full/KKzwQBN .The project passes all the tests but I would like to hear from the opinion of the community about the methods I used. As before any and all feedback is welcome :smiley: .

2

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

  • Donā€™t use <br> to force line breaks or spacing. Thatā€™s what CSS is for.
  • Youā€™re forcing users to select ā€œAlternativeā€ whether they want to or not.
  • Change the cursor to a pointer when hovering over the submit button
1 Like
3

Hi @Roma !

Iā€™m sorry that it took me an entire day to reply to your message. I took your advise and changed the code accordingly but I have some questions:

  • I took out the <br> elements and replaced them with <div></div>. Is that good practice, or should I specifically use css to create line breaks? If so, could you point me to a guide where I could read more about how to do it?

  • I took out the important from the checkbox for ā€œAlternativeā€ but that raised a question to me. I only put it there in the first place because I thought it would behave similar to how it does in the radio-buttons aka force the user to select one from the group. In hindsight it makes sense why it would not behave that way. But how do I go about making sure that the user needs to select at least one checkbox? I tried looking online but the solutions I found used javascript which we are explicitly forbidden from using for these projects.

Also thank you for providing the link to the line break elementā€™s definition as that has really helped me understand what I am supposed to use that for.

Thank you so much for taking the time to look at my page. You rock. :smiley:

5

There are a few ways to do it. My main point was that you not use <br> to force line breaks or spacing. The linked article explains the accessibility issues. At the end of this Iā€™ll attach a snippet of another way this can be accomplished.

The project text says ā€œYou can use HTML, JavaScript, and CSS to complete this project.ā€

Another way to group radio buttons w/out using the <br> element.
The HTML section for the radio buttons;

<fieldset class="fieldset">
  <legend>What is the most important instrument in a metal band:</legend>
    <label for="radio1"><input type="radio" name="radio" id="radio1" value="guitar" required>Guitar</label>
    <label for="radio2"><input type="radio" name="radio" id="radio2" value="bass">Bass</label>
    <label for="radio3"><input type="radio" name="radio" id="radio3" value="drums">Drums</label>
    <label for="radio4"><input type="radio" name="radio" id="radio4" value="vocals">Vocals</label>
</fieldset>

The corresponding CSS section;

.fieldset {
  display: inline-grid;
  text-align: left;
}
1 Like