Overview of the survey form project

Project Feedback
#1

Any feedback on my survey form would be much appreciated.
(https://codepen.io/aeslehc/full/mdOVyGM)

#2

Howdy. Iā€™m not exactly sure what you mean by your statement ā€œMobile friendly Test failed.ā€ Can you be more specific?

As for your form, a few suggestions:

  • Every <input>, <select>, and <textarea> needs a <label>.
  • Make the <textarea> much larger by default.
  • The white text on that background is too hard to read, must be a much darker color.
  • Everything is centered except for the Age input. I would center that as well.
  • For the radio button/check box groupings, consider using a fieldset/legend combo. This will be much more accessible.
  • The <form> and the <p> directly above it should be wrapped in a <main>.
#3

Hiii! Thank you for the assistance. :grinning:

Iā€™ve amended most of the things you suggested and I really found the fieldset/legend combo helpful, will definitely be making use of this.

Regarding the age input, looking at the screen I wanted the age input to be in line with the name and email inputs so I didnā€™t center it.

#4

This is what it looks like in my browser:

screenshot
screenshot866Ɨ210 53.1 KB

#5

Your form looks good @aeslehc. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code youā€™d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ā€˜Settingsā€™ button, then HTML and add it into the ā€˜Stuff for <head>ā€™ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. Thatā€™s what CSS is for.
#6

@bbsmooth thanks, Iā€™ve centered it now.

#7

@Roma Thanks for the assistance. Iā€™ve run the code through the W3C validator and it gives me an error regarding stray input tags. Iā€™m not sure how to fix that.

#8

You can revisit this lesson where the input element was first introduced and see what the possible issue is.

Thereā€™s also searching. For instance using a search term like ā€œhtml input tagā€

As a suggestion switch the Syntax Highlighting on Codepen to help catch errors. Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

Hope that helps.

#9

@Roma thanks for the help. Iā€™ve corrected the issue :sweat_smile:

1 Like