# Survey-Form Feedback and help

**URL:** <https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048>\
**Category:** I Built This\
**Created:** [February 13, 2020, 8:36pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048 "2020-02-13T20:36:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![JorgeSantos](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@JorgeSantos](https://forum.freecodecamp.org/u/JorgeSantos)\
**Post date:** [February 13, 2020, 8:36pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/1 "2020-02-13T20:36:48Z")

</div>

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 🙂

Here’s the code: [https://codepen.io/Jorge79/pen/LYEKvbe](https://codepen.io/Jorge79/pen/LYEKvbe)

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [February 13, 2020, 11:14pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/2 "2020-02-13T23:14:19Z")

</div>

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

```auto
#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.

---

<div class="post-metadata">

**Author:** ![JorgeSantos](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@JorgeSantos](https://forum.freecodecamp.org/u/JorgeSantos)\
**Post date:** [February 14, 2020, 8:21pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/3 "2020-02-14T20:21:06Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [February 14, 2020, 9:30pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/4 "2020-02-14T21:30:55Z")

</div>

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:

> **[Centering in CSS: A Complete Guide | CSS-Tricks](https://css-tricks.com/centering-css-complete-guide/)**
>
> Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to

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

---

<div class="post-metadata">

**Author:** ![JorgeSantos](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@JorgeSantos](https://forum.freecodecamp.org/u/JorgeSantos)\
**Post date:** [February 15, 2020, 3:17am UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/5 "2020-02-15T03:17:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [February 17, 2020, 11:14pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/6 "2020-02-17T23:14:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JorgeSantos](https://avatars.discourse-cdn.com/v4/letter/j/b9e5f3/32.png) [@JorgeSantos](https://forum.freecodecamp.org/u/JorgeSantos)\
**Post date:** [March 3, 2020, 2:37am UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/7 "2020-03-03T02:37:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [March 3, 2020, 12:42pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/8 "2020-03-03T12:42:40Z")

</div>

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

> **[: The Line Break element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)**
>
> The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

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>`

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:40pm UTC](https://forum.freecodecamp.org/t/survey-form-feedback-and-help/350048/9 "2021-06-01T13:40:01Z")

</div>

Closed on June 1, 2021, 1:40pm UTC


