Super Serious Survey

Hi coder, I used the syntax from the sample form and spent a ton of time on the content to make it as funny as possible. Can you please give me some feedback on it? https://codepen.io/Muallim/full/VJobPz
thank you in advance

Great! How to get rid of oily face? TNT.

What do you mean by you “used the syntax”? Do you mean you copied the code? You should review the use of labels and their corresponding inputs.

The first thing I do when I finish a form is test it by clicking everything. Clicking each label should focus the input but only some do. Here are some instant results you’d see:

The questions for the radio buttons are not labels. At the very least they are <p>s

The radio buttons are coded as if they are a single group yet there are three questions so only one answer is possible for nine buttons.

Change your HTML so that the radio button and label are in the correct order to fix alignment problem and simplify CSS

You re-use ids, don’t. Make them classes.

On a textarea don’t use inline style attributes height and width. Attributes rows and cols should be used.

Submit button should be inside the form.

A realistic user age range would be nice.

Thank you. It turns out programming is a serious profession where most things are formal and done in a certain way but life is serious too and too much seriousness usually leads to depression. That’s why I decided to make it fun…

First of all, thank you for taking the time to write a thorough review of my project.

But since English is not my first language, I’m not really sure what you mean by “Clicking each label should focus the input but only some do”. should the label have a blue border to show that the focus is on it?

I coded the radio buttons as a group because I just wanted to make it fun. If I was doing it for a company, I would definitely use the buttons for what they are designed to be used.

Thank you for the tip about using classes instead of divs!

On a textarea don’t use inline style attributes height and width . Attributes rows and cols should be used. – I didn’t know this. Thank you for this too.

Ahh, okay so i’m not supposed to be able to answer three questions okay.:rofl:

That was classes instead of repeating the ids

I can click a checkbox or radio button and it gets checked. And if <label for=""> is used I can click the label for the checkbox or the label for the radio button to check it too. Therefor looking at the screenshot above I was not able to check boxes because <label for=""> wasn’t used.

This also works for the other input types except it inserts a cursor instead (focus). You missed using <label for=""> on an input box near the top of your form.

Ahhh now it makes sense. Thank you so much for your time. You Rock!

I think I got it.


Instead of using dislay: flex; and position:relative; the #feedback textarea should span the 2nd, 3rd and 4th columns of the comment row. You can use the line based placement here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
:clap: