Survey-Form feedback The Metal Survey

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: .

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

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:

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