Responsive Web Design: Project 2 Survey form

Finally done!

The HTML was easy enough and I’m starting to get my head wrapped around the CSS a bit better.

I’m just having an issue with the checkboxes and radio buttons. I want the text to be to the right of the box. tried various things but no luck.

Can any of you guru’s help with some pointers and feedback please?

Thanks!

Carliess

2 Likes

Hi @Carliess !

Hahaha…nice throwback reference to Eminem :rofl:

I think the html would be easier to read if it were formatted.
Screen Shot 2021-06-11 at 11.43.10 AM

You have a lot of divs in here. Maybe you could add a class to a div wrapped around the group of radio buttons and then use flex box to achieve the result you are looking for.

You have a couple of errors in the html and css .
Run your code through the html validator and css codepen analyzer.

Hope that helps!

I’m glad someone got it! :smiley: Don’t really have anything to survey someone about, so Mom’s Spaghetti!

I think cause I was using the like a div…but I’ll give that a shot and see what’s up.

I tried formatting and using the analyzer in Codepen and found a few errors in the HTML and CSS, thanks for the tip!

the HTML validator didn’t work so I just copied all the HTML into it on the next tab over and found a few more errors. These are great tools, thanks again!

Hi, try to put input inside the label, Like this:
<label
< input id=“palms-sweaty” type=“checkbox” name=“symptoms”
value=“palms-sweaty”/>Palms Sweaty
</label

Sorry for missing > in tags comment does not showing them

Hello there, @Carliess

Try to avoid putting input tags inside label tags, to link some input with a label in the label you can use the attribute “for” targeting the “id” of the input.

MDN > Attibutes > For

@Edgar29 When someone puts an input tag inside a label tag, one puppy died with sadness somewhere in the world, try to avoid do that.

1 Like

Man dude, I like puppies… so I’ll change that right away!

So I’ve tried about 5 different things and still nothing. At least I’ve been learning lots about grid and flex, etc… It either all goes in to column or all into row, even when I’ve tried separating them each element. The ONLY thing I haven’t tried is throwing more div for and …that just seemed wrong…

Think its time for me to move on, or else I’ll have beaten dead horse to go along with those puppies.

If someone knows of a decent way to do this, let me know, cause I would still love to learn form this.

Thanks!

Hi @Carliess

My tip about DIVs is.

Things need to have a purpose, you used right to group the labels with the inputs, and wrong to wrap the fieldset, for example. The fieldset by self is a kind of a container to group things in forms, the is no need to wrap it with a DIV understand? And is nice to have some class attribute in these tags to the group. If don’t have a purpose you probably don’t need it.

Completely understand and agree. Since I’m still learning, I was experimenting and trying to troubleshoot how DIV reacts with a display:grid and flex to try to get my desired look.

My original code was a LOT cleaner! haha but its all good!

Thanks for the tips, I really appreciate it! I felt like fieldset was already acting like a container so i’m glad to get your confirmation.

Finally got it!

Basically I had to create a <div> for every element ( <input> and <label>) in order for it to properly behave inside a display: grid; , then I could properly manipulate it and have it go were I wanted.

Thank you guys for your feedback, help, clarifications, and tips!

It was just a simply survey, but I was just too picky and wanted it right. Now the Radio and Checkboxes are properly aligned and looking nice :smiley:

and here’s the code

don’t really need those classes of “r1” thru “r6” but its all good

WoW i did not know that input inside the label tag was bad form because i saw code like this many times.
Also last time i saw it at Freecodecamp survey form project example. Hope puppies are ok :smiley:

I’m not showing that as a bad practice in the documentation, can you please share the source that supports your advice?

Hi @Carliess

Here an extra tip, you have knowledge about the states “:hover”, “:focus” … right? Form elements have two very special “:valid” and “:invalid” that you can play with it, it works for tags “form” and “fieldset” too.

MDN > CSS > :valid

Because it isn’t.

I disagree. There is nothing wrong with nesting inputs inside labels. It’s also the correct semantic container to use for an input element if you need a container anyway.

Hello there, @Hensahi, @Edgar29, @lasjorg, and @Carliess

A long time ago …

People diagramed their websites using a lot of table tags, that was right? No, but was the tools developers had in the time to make the job done. You will see on the internet a lot of code, made by many people you probably need to ask for self if that was right if have a better way to do it with a same or better result.

In the link below you will see this explanation about when you must use inputs inside labels.

I can assure you that many people do this because they don’t know the “for” attribute or out of sheer laziness and lack of consideration for HTML.

But a good motive to you tries to avoid doing that is.

Generally, explicit labels are better supported by assistive technology.

W3C > Tutorials > Forms > Labels

But don’t take my word, if you have doubts about something do research the original source. =)

Hello @lasjorg

I am ok with disagreement, but exist better ways to do some things.

@adrianoenache I never said to only do an implicit connection of the elements.

There is absolutely nothing wrong with nesting input elements inside label elements, but doing so doesn’t mean you can’t create an explicit connection.

What I’m saying is, if you need a container the label element is not a bad choice. On the other hand, there is no need for excessive nesting when it’s not needed. So if you do not need a container, don’t nest the elements and remember to use the explicit connection.

@lasjorg Me either not, I said, “try to avoid”.

I understand your argument to use the label as a container and agree on some level, but doing this you are creating a limitation of what you can do with CSS because CSS can’t target the parent element.

Of course, you can use javascript to target the parent element and do something, but if depending on what you want to do you don’t need javascript to do it.

We can use CSS witchcraft and be happier =P

I find your explanation very solid, however, what makes me thing that may not be a mistake or bad practice is the fact that the tutorial here in FCC uses inputs nested within label (even when they have the for attribute and the MDN (the official documentation) does it that way as well.

I have no idea what you mean by that. You can target the parent just fine.

What you can’t do is ascend/traverse back up the tree starting from a child. That is a totally separate issue, which is in fact, rarely an issue.

We use containers all the time and it’s not a problem. You can’t avoid using containers and a lot of them have semantic value, like a header, nav, section, article, and so on.