Survey page needs a little help

Project Feedback
#1

https://codepen.io/jordancrowl/pen/PoGJxKQ?editors=1100

Hi! I gotta be honest. I’ve been struggling a bit with this survey page!

Questions:

How do I format the select box so its the same size as the other boxes?

How do I align the radio buttons in a column?

How do I get the label text to the right of my checkboxes?

How do I get the cursor in the additional comments box to be at the top left of the textarea box?

Annnnnd: anything else you might add or suggest with my coding so far in this project.

I think I definitely need to revisit flexbox. So any other additional resources you may suggest are appreciated.

Thanks for your help!

#2

Look at the CSS box-sizing property:

You’ll most likely need to wrap each label/input combo in a div and then you can use display: flex to align those divs in a single column.

In your HTML place the input tag before the label tag

Use a <textarea> instead of an <input>

Other suggestions:

  • Don’t use <br> to create vertical spacing. Use CSS.
  • For your radio button/check box groupings, take a look at the <fieldset> and <legend> tags:
    https://webaim.org/techniques/forms/controls#checkbox
  • <label>s need a for attribute to work correctly (since you are not wrapping the input with them)
2 Likes
#3

Thank you for your help @bbsmooth! After a breather, and your message, I took a fresh look at everything and I finally got it looking like a decent survey from the 90s! So satisfying. Thank you again.

#4

Your form is looking good @jojo4545 and I know you didn’t ask for feedback but there are a couple of things you can revisit;

  • Run your HTML code through the W3C validator
  • 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
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

When doing your styling, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

2 Likes
#5

Thanks @Roma! I made some adjustments. I have become very familiar with the width property now. I was having so many issues aligning items and going too crazy with margins and divs. I think I’ve sorted some of it out. My mobile view on codepen doesn’t look quite right though. The words are going out of the div.