FCC Survey Form Done

Hello fam, i just completed the second project on R.W.B
I will really appreciate every feedback in order to improve my coding quality and
style of this page.

One question please, i couldn’t figure out how to wrap my whole form in one
container that is different from the background…I will appreciate an answer to this…Thank you!

Here’s the link to my project:

Overall the design is looking good.

I have some suggestions

  1. Make the form elements left aligned
  2. Some more margin between question and answers
  3. You could increase the textarea’s height and width may be rows=“5” cols=“30”
  4. You could also style your submit button

You don’t need to wrap it in a container, rather you could use the form tag itself as a selector and style it.
Maybe like this

form {
  background: #eee;
  width: 75vw;
  margin: auto;
}
1 Like

Your page looks good @TheMoneyKing. Some things to revisit;

  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    Reference MDN Docs
1 Like

Thank you for your feedback, i really appreciate it…
Just implemented these, and it looks better than before.

Please do check it out when you have time…Thank you!

I really appreciate your feedback, thank you.

One thing, I couldn’t understand the toggle aspect…i googled and read up, but when i tried applying what i read on my form, everything went out of place.

Mind explaining the “User’s should be able to click on the label to toggle a selection, not just the radio button/checkbox” a bit more in detail for me please

I’m not sure what you mean by “everything went out of place”.

To toggle a a selection means to turn it on and off. In other words, when you click on a checkbox and select it you turn it on. Clicking on the checkbox again turns it off.
What I’m saying is that user’s should be able to not only click on the checkbox or radio button but, they should also be able to click on the label to toggle their selection.
There is an error in your code that prevents this for the radio buttons.

Awesome work!

I just discovered a bug in your form, try clicking on Julian Palacios or Raul Gonzalez you will see 1895 or 1910 checked.
This is because you have duplicate IDs.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

I’d suggest you go through HTML Forms tutorial.

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