Feedback on my survey project

please give feed back on my survey form. test button is not running on my code pen.https://codepen.io/fanzozo/pen/orjxmy

Hi @Fanie, your form looks good. Some things to think about;

  • it’s hard to see the placeholder font for name, email, age & comments. Why not make the font white so it’s easier to see against that background.
  • put a label around Salads so I can select the label like I can with the other choices.
  • change the cursor to a pointer when hovering over the Submit button
  • it’s a nit but if you’ve ever filled out a form on-line you may have noticed that required fields are marked with an asterisk. If it’s not required, not put an asterisk beside it.
  • some of your words/letters are hard to see against the background picture. Maybe decrease the opacity

hi i have made some changes on my survey form like you said, please have a look at the new version.
thanks. https://codepen.io/fanzozo/full/mZPgzV

Looks good.

  1. The age label and input do not have matching for and id attribute values.

  2. The Salads checkbox is missing its label.

  3. Add cursor: pointer; to the #submit button.

  4. Change the color of the placeholder text, you can use the ::placeholder selector to target all placeholder text.

::placeholder {
  color: white;
}
  1. I would give the first three inputs a bit more padding and increase the width of the select elements. See if you can line them up with the inputs.
1 Like

Hi @Fanie, it look really good.
@lasjorg beat me to the punch with a few suggestions I was going to make such as;

  • the Salads checkbox missing its label
  • changing the cursor to a pointer
  • add using ::placeholder to target your placeholder text color and changing it to white

Good job!

changes made. your input is appreciated. https://codepen.io/fanzozo/full/mZPgzV

changes made. https://codepen.io/fanzozo/full/mZPgzV

Very good. Couple of things.
You want users to be able to click on the checkbox or the label associated with the checkbox. (Same with the radio button) When @lasjorg and I mentioned that Salads is missing the label it’s easy to see because clicking on the word Salad doesn’t check the box. Clicking on the other words in your list selects/deselects the box.

The reason it’s not working for Salads is your missing the opening <label> element. Currently you have;

<li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Salads</label></li>

what you need to have is;

<li class="checkbox"><label><input name="prefer" value="2" type="checkbox" class="userRatings">Salads</label></li>

You can only use an id once. You have two id’s with the name ‘dropdown’
codepen provides you with validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. It will point out errors like this.

Once again, you’ve done well. Keep coding!

  1. Change the for value on the age label to number so it matches the input id.

<label id="number-label" for="number">* Age: </label>

  1. Trying doing the width on the input/select elements like this instead.
width: 100%;
max-width: 280px; /* maybe 320px for the select elements */
  1. Remove the vertical margin (top/bottom) you have on the input/select elements and move it to the containing divs (.rowTab).
.rowTab {
  margin: 20px 0;
}
  1. Remove the height on the select elements and set the padding on them to be the same as on the input elements (15px).

  2. Maybe increase the font-size a bit on the ::placeholder and .dropdown (maybe 1.2em and 0.8em respectively).

thanks for the in put , i made some changes like you suggested. but every time i try to analyse html it always return cols and rows needed for text area and i’m not sure if i know what that means can you help,

The row and cols are textarea attributes, they look like this:

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

They are not actually required in HTML5, they were in HTML4.1.

Not sure what validator Codepen uses these days but they were using what is now a pretty old tool. Anyway, you can ignore that warning.

You should, however, fix the id warning. You can not use the same id more than one time.

The id ‘dropdown’ appears more than once in the document.

1 Like

I didn’t know that. Thanks for pointing that out.

@Fanie Cool looking background image. However, the background image is competing with the text. It is hard to read the text. I think you should reduce the transparency by 25% - 50% so that the text will be easier to read.