My Survey Page - Feedback Please

Hey guys .Here is my survey page I made one for a gaming tournament.Please tellme wghat you think

Beautiful work @Psypher

1 Like

Like the look, and the header font makes me smile!

Couple things, though:

  • The form tag should also contain those radio buttons. The survey form is not only the personal info, but the whole thing. So move the form tag before the radio buttons.

  • The br and hr tags aren’t giving anything structural to the form. You can get much the same with pure CSS. Rather than using br tags, use padding-top or margin-top on the element just below where you’re using the break. And the hr tags can be just as easily done by giving an element a border-bottom to the #radio div.

Not saying you’re wrong to use <br/> and <hr/>, just that they don’t contribute anything meaningful to the HTML document itself. Instead, if you were to redesign the CSS of the form (suppose you decided to go with a wider layout, and put the two parts of the survey side-by-side), you now have tags that force a certain layout that you may not want there.

Also, you have a whole section of radio buttons that are contained in a div#radio – try making that div a fieldset instead. It becomes a meaningful tag – these are a set of like form fields. You can do the same with the personal info div, make that a fieldset, perhaps with the <legend>About me...</legend>.

1 Like

Thank you. Tried some new things wit this one

I’m glad

No, of course,. I welcome any improvements.

I changed

to fieldset. It creates a border box around the buttons. That’s supposed to happen?
I’ve done some of what you mentioned.

By default, a fieldset is defined with a border, but if you want a bottom border (like to replace your hr), you could add this to the rule for the #radio:

#radio {
/* Whatever other rules you have here */
border: 0;
border-bottom: 1px solid silver;
}

But what has happened is, you’ve defined a collection of form fields as a logical part. For a screen-reader, for instance, it may allow easer navigation between question sets. Now, you get to tinker with the CSS! Yaaay! :wink:

1 Like

Oh cool . Thanks a lot

@snowmonkey I’ve added more elements to my page.
Would you help me group the checkboxes in sets of 3? I think it would look better that way

That is what I did here:

take a look at how elements are nested and positioned

2 Likes

Thank you @ChrisCline1138 this helped a lot

you are welcome,
so glad I could help