Build a Survey Form ttwwss

Hey guys, check out my survey form. Tell me what you think!

I would order the objects so the text begin in a straight line, also the buttons should be straight from top to down, now you have buttons on different vertical levels which makes navigation on the website more difficult.

Your form looks good @zortron756. 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.
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • 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.

I followed the instructions on MDN and I have to admit that my form looks better. But it’s still not quite right. I want to move the section and label toward the center of the form and don’t know how. It is very baffling :frowning:

It is looking better @zortron756.

A suggestion, rather than having every element as a list item why not break them out separately. Take another look at the form in the lesson and review the lesson regarding fieldset. The lesson only references wrapping the radio buttons but it can be used elsewhere.
Another thing you can review is having the radio buttons and checkboxes before the label (that is on the left rather than the right).

You’re doing good.

1 Like

I have made some of the changes that you suggested, but I’m baffled at what to do next.

@zortron756, it looks better with the radio buttons and checkboxes to the left of the label.

What I meant by using the fieldset element was to separate the sections rather than wrapping them up together.
I quickly put together this sample pen using your code with minor changes.

  1. wrapped different areas in their own fieldset element to show how they can be used to group
  2. with the radio buttons I left them as you had them
  3. with the checkboxes I nested the input within the label (this was one of the lessons) and also give it some simple styling just to show the difference

Coming up with a design is tough. It’s something that gets a little better with time or maybe we struggle with it always. You’ve maybe seen and interacted with a form on line before so that could give you ideas.

You passed the tests and that’s the important part. The rest was suggestions from me to perhaps make it a little better for the users.