Looks good! Good luck on your programming journey.
Looks good.
-
Make sure your checkbox labels are associated with the inputs (clicking the text should tick the checkbox).
-
Add
resize: vertical
to yourtextarea
styles, so the user can’t drag the box horizontally. You might also want to give it a minimum height. -
I don’t really mind the vertical space you have between the different part of the form, but it does make the form very tall. I might lower some of the spacing a little, so the user doesn’t have to scroll as much.
Keep it up.
Great work! Looks good on my phone. One comment: the input for the age probably should be type number?
Otherwise everything looks great.
It is type number. Maybe it just looks wrong on your phone?
Oh weird. I was able to type characters in
Hi there!
Welcome to the forum. Great work. Keep it up.
I’m not surprised to hear there are browser inconsistencies.
Firefox has a bug for it.
If you look at the specs you can see what counts as a valid number input might depend (the green note box). So I guess it is up to the implementers.
https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)
Not sure about Safari. But on Chrome, I can’t just type in letters.
Last thing I would have thought is that the input field would still have inconsistent behaviour in browsers. I was using safari (and I could type anything).
I did think that as well first. But after reading the specs, there are cases where decimal numbers are not the only valid input for a number.
But I do agree it isn’t good with such inconsistencies, I think it would be better if there was an attribute you could set to allow non-decimal numbers (like Roman numerals or whatnot).
Thank you so much for the kind words and encouragement! I really appreciate it. I’m excited to keep improving and learning as I progress through this journey. If you have any tips or advice for a beginner like me, I’d love to hear them!
Hi lasjorg,
Thanks again for your helpful feedback! I’ve gone ahead and made the changes you suggested:
Checkbox Labels: I’ve now associated the labels with the checkboxes, so clicking the text will tick the box as expected.
Textarea: I added resize: vertical to the textarea styles and set a minimum height to improve the user experience. Now the box can’t be resized horizontally.
Form Spacing: I reduced the vertical spacing between sections to make the form more compact, which should reduce the need for scrolling.
Here’s Survey Form the updated live version if you’d like to take another look! I’m always open to more feedback and suggestions.
Thanks again for your support!
giving this another shot. Please note these are all nice-to-have improvements. You’ve done great work.
your text color for the title text (and the sentence below it) needs greater contrast. I would just go with white.
For the rest of the form, I’d use the w3 color picker tool to pick a font color that is a shade lighter to improve the contrast there as well. https://www.w3schools.com/colors/colors_picker.asp
The submit button is a tad too long? I think I would make sure the margins visually match up on the left and right for it as the rest of the page.
Also for the submit button, I would look at using a larger font-weight and spacing out the letters more with the letter-spacing property for better readability and impact.
I will also suggest that you adjust the line-height property of your form to be 1.5 for a more readable and accessible layout. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
I note also that one of the titles “what is your favorite of …” needs to be corrected from a grammatical perspective and should start with a capital W.
Your radio buttons and checkboxes appear to be indented slightly too far to the left. They probably should line up directly under the questions they belong to or be slightly indented to their right.
Thank you so much for your detailed feedback, lasjorg! I’ve implemented the following improvements based on your suggestions:
Changed the title and subtitle text to white for better contrast.
Used the W3 color picker to lighten the form text for improved readability.
Adjusted the size and margins of the submit button, and added more letter-spacing and increased font-weight for better impact.
Increased the line-height to 1.5 for a more readable layout.
Fixed the grammatical issue with “What is your favorite of …”.
Aligned the radio buttons and checkboxes directly under the questions.
You can check out the revised version of the project here: Survey Form.
Your feedback has been incredibly helpful! If you have any further thoughts, I’d love to hear them. Thanks again!
hey! I think you mean me not lasjorg there, but you’re very welcome!
Oops! You’re right—my apologies for the mix-up