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.
-
The age label and input do not have matching
for
andid
attribute values. -
The Salads checkbox is missing its label.
-
Add
cursor: pointer;
to the#submit
button. -
Change the color of the placeholder text, you can use the ::placeholder selector to target all placeholder text.
::placeholder {
color: white;
}
- 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.
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!
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!
- Change the
for
value on the age label tonumber
so it matches the inputid
.
<label id="number-label" for="number">* Age: </label>
- Trying doing the width on the input/select elements like this instead.
width: 100%;
max-width: 280px; /* maybe 320px for the select elements */
- 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;
}
-
Remove the height on the select elements and set the padding on them to be the same as on the input elements (15px).
-
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.
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.