Hi guys
doing my survey project
https://codepen.io/picklemyrickle/full/KKMOwYd
I am done with the HTML, and I want to make it pretty.
My idea is to make the whole survey inside a nice box, leaving the titles out of it, but I have no idea what to do next, I’ve been searching the internet for info and I am lost.
Also, how do I make my checkboxes and radio boxes align? cause everything seems so spread
Thanks in advance, I appreciate it.
Your survey is inside a box…it’s called #survey-form. Give it a different background color and you’ll see.
Maybe give it a little less width to see it better too.
Maybe start by revisiting the fieldset element lesson.
Design is something that’s hard to do. As long as your page passes all the tests and it’s responsive that is the main thing to concentrate on.
With your question, everyone who responds is going to give you something different to do…what their idea of a “good” design is. You’ll be inundated.
A couple of things that everyone should agree on for your page right now is;
and this last one is design related too…the very light background with white lettering does not give good contrast. Anyone with vision issue will have a hard time seeing the contents of your page. Try using this contrast checker to see how it measures up. (It will want the hex color and a quick search will give you converters)
Okay, I did pass the tests but with the W3C vaildator I see I have many mistakes in my html, I’ll fix them and watch the lesson.
Not sure what you mean by here.
When I say “User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox” I mean they should;
Toggle the selection means to choose / unchoose it (for a checkbox anyway) for a radio button it means to choose it.
The “label” is the word(s) that are alongside of the radio button / checkbox.
It’s working correctly for your checkboxes, not for the radio buttons.
It’s working with the checkboxes (unchoose)
But are you sure radio buttons supposed to be unchecked as well? You can choose a different option and it will uncheck the first one.
What I’m saying is that the radio buttons are unselected to start. The user should be able to click on the label to toggle (choose) that radio button. Then they should be able to click on the label for the next radio button and it should toggle the first one off and toggle the second one on.
Revisit this lesson and click on “indoor” (that’s the label), notice the radio button is selected. Then click on “outdoor” (that’s the label). Notice the first radio button is toggled off and the second one is toggled on (selected).
Okay, thanks unless I am wrong it seems fine, and I’ll take a look at the fieldset lesson.
I’ll update for another feedback once I feel comfortable enough.
From what I can see, it’s not.
To be clear. Do NOT click on the radio button to select. Click on the word(label) “Yes”. That should select the radio button. Currently it’s not.
The same with the other words(labels). Clicking on “No, I’m fine” or “Yeah but I’m scared” does not select. The only way to select is to literally click on the radio button itself.
Unless you’ve corrected it but didn’t save.
Ahhh okay, clicking on the word should select it , not the radio(circle) itself, yeah. I see the issue with the HTML I’ll fix it, thanks!
That’s correct. The word is better known as the label.
Yes, thanks for correcting me as well it’s good to speak the language too 