Survey Form Review needed

Code Feedback
1

Hello Campers, I kindly need a review on the project on Survey Form. Here is the link https://codepen.io/byronesonga/pen/JjMKEKN

2

Your page looks good @Songa. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (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 syntax/coding errors you should be aware of and address.
  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
  • 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.
    Reference MDN Docs
    Reference DevDocs
    • Ideally, placeholder text should not mirror the label. It should be used to inform the user of the format of the required input
3

Hey Songa.

The Form looks good.


Consider removing the <br> that are being used to separate the Input Boxes.
Right now, there is one <br> missing, and it is causing the Age and Year of Birth boxes to cluster:
Screenshot 2022-03-20 1.13.39 PM



This can be fixed, by removing the <br> and replacing them with CSS, adding a margin to the top and bottom of the .form-control input

  .form-control input,
        .form-control select,
        .form-control textarea {
            border: 1px solid #777;
            border-radius: 2px;
            font-family: inherit;
            padding: 10px;
            display: block;
            width: 95%;
            margin-top:20px;
            margin-bottom:20px;
        }



THE CSS VERSION:
Screenshot 2022-03-20 1.13.31 PM

4

Thank you so much on the feedback, I have improved all the suggestions. Here is the link to the survey form https://codepen.io/byronesonga/pen/JjMKEKN

1 Like
5

Did you save your changes @Songa?

Asking because the only br element I see removed is the one where you were told how to fix it. There are still quite a few others.
Also, user’s are unable to select radio buttons / checkboxes by clicking on the labels. Reading the error messages after running your code through the aforementioned W3C validator should help. You can also revisit the radio buttons lesson and the checkboxes lesson.

Edit:
Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.