Hi, Please take a look at my project Survey Form. I would highly appreciate any feedback/suggestions. Thank you.
Button width of 20% is not good choice. Try controlling button width with padding
only. Also good idea to add resize: vertical;
to the textarea
@snigo Thank you very much for your suggestions I didn’t know about the resize thing. I have included that now. Also for button width, I removed the percentage and added px.
I don’t think the colors you chose go together. For desktop view I think you should make the width of the form smaller so that it’s easier to read. I also think you should make the dropdown bar the same size as the previous text forms so that it flows better visually.
Thank you for all the suggestions
- Add
box-sizing: border-box
to a universal selector at the top of the CSS. It will make sizing elements more predictable and make the select element the same width as the other inputs.
* {
box-sizing: border-box;
}
- Instead of using a percentage margin for the width of the form, I’d suggest using an auto margin and a max-width.
.container {
margin: auto;
max-width: 680px;
background: yellowgreen;
border-radius: 10px;
padding: 20px;
}
-
Because you have grouped the
textarea
with the other inputs in the selector you are setting the height of thetextarea
to 20px. That is not enough height for atextarea
element. I’d probably suggest not setting a height at all on the input elements and use padding and the natural size of the text (font-size, line-height) to control the size of the inputs. You can set a height on the select element, but using padding would work just as well. -
Instead of using
<br>
elements to have inline elements each on a new line, use or set container elements to be block-level elements so they each take up the full with. For example setting thelabel
element to display: block would let you not have to use the<br>
element. This is much more maintainable than using a bunch of br elements. -
Add
cursor: pointer
to the submit button.
@lasjorg Thank you for the detailed review on the project and also the suggestions you have made. I definitely try to apply these rules