Finally made it ! Any feedback is appreciated!
Great job! I’m a fan of that gentle gradient background and those stylized
Nice work! I really like the background colors and font used.
If you want to improve your project, I’ve found a few things you could change:
ul for the radios and checkboxes which is fine, however it would improve UX and accessibility if I could click on the label to check / uncheck these. Right now I need to be exactly over each checkbox to click it, which is quite little space and bad UX. It’s common best-practice to link the label with its associated input like so:
<label for="name">Your Name</label> <input type="radio" id="name"> <!--use id="" to link to the label-->
You’ve done this exact thing in the first three inputs, so it makes sense to apply the same technique to all inputs.
Something else I would change is the background color of the
select fields. It feels a little weird that they are green while all the other inputs are white. This is personal preference, but I would make them have the same color.
My last tip is to set the width of the first 3
label elements, so the right-hand inputs align like in a column. You could set a width of 100px which would be enough. Remember to set
display: inline-block, otherwise the width won’t work.
Thank you for all the feedback! I’ve made some adjustments on my form and learnt some things. @andreasremdt Actually I did not understand the function of
label tag, but now it’s clear to me. I also changed the color of two dropdown menu and realized it was a color compatibility issue, so now it looks fine to me
Hello, looking great, the placeholder text for name email and age is touching the left side of the input box, i would add a little padding there.
I haven’t quite pin point it yet, but the location of the submit button, right after the check box my eyes looks to the comment box then the distance from the comment box to the submit button is a bit far away, like the flow of the template is top down then zig zag to the button, Im not sure if its a thing or its just me.