Survey-Form Feedback and help

Code Feedback
1

I’d like to now how to fix the margin of the inputs, it’s being 100% of the div and not taking the padding, and other critics are welcome as well :slight_smile:

Here’s the code: https://codepen.io/Jorge79/pen/LYEKvbe

2

The inputs are taking up 100% of your green box because you have them set that way:

#text > input {
	width: 100%;
	margin-top: 2px;
	margin-bottom: 15px;
}

You’re missing the ‘for’ attribute on a lot of your <label>s so they aren’t working correctly.

Personally, I think the black text on green opaque background is too hard to read, especially with the busyness of the background image. I know you have the opacity set at 0.8 and that seems like a lot but I would make it even closer to 1.

3

Yes, i understood the problem, i was looking for the solution, i searched and the didn’t find a good solution.
Thanks for the advice about the labels and the color, i’m going to fix right now. And if you could help me with the width input i apreciatte much more :slight_smile:

4

I’m assuming you want to center your inputs with some padding on the sides. I googled “css centering elements” and found several links. This one seems pretty good:

There are so many options out there for centering that you should be able to find one that works for you. Also, it might make things a little easier if you wrapped all of your elelments inside of your form in a <div>.

1 Like
5

No man. The inputs are being centered but the witdth still stretching, thanks for the help.
I did putting the box-sizing: boder-box, don’t remember if it has a task of this in the curriculum, but worked perfectly

6

Hi @JorgeSantos, some things to revisit on your form;

  • Don’t use the <br> tag to force spacing. Use margin and/or padding in CSS.
  • Review the lessons on creating a set of radio buttons and creating a set of checkboxes.
    • Users should be able to click the label. You don’t have things nested correctly.
    • Also, the value of the for attribute of the label element must be the id of a non-hidden form control.
2 Likes
7

Hello Roma, i was expecting your review.
How do i break line without <br> tag?

8

@JorgeSantos, there are a few things you can do. First off, please read this, paying attention to the section on Accessibility Concerns.

You can group like parts in <div>'s. Another thing to investigate is possibly wrapping checkboxes and radio buttons in <fieldset> although you can stick with a <div>

1 Like