Survey Form Page_

I like the simplicity of it. But also am looking to see if it can be improved.

https://codepen.io/gtrman97/pen/PobarPP

1 Like

@gtrman97 You passed all the test in the survey form congrats for that
Screenshot (63)

but it should be improved a lot!

  1. You should be specific on what topic you created this survey form
  2. Run your code through https://validator.w3.org/
  3. Use more CSS to improve

Hi @gtrman97 !

I think your page looks good.

A few things.

You should add the cursor pointer to the submit button.

You don’t need to include html and head tags for codepen.

<html>
  <head>
    <title></title>
  </head>

You shouldn’t use br tags like this.

<br><br>

Use css instead. Remember that labels and inputs are inline elements so you will need to change the display and then add space using the margin property.

You could use the padding shorthand property here

  padding-top: 15px; 
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px; 

Padding shorthand

padding:15px;

https://www.w3schools.com/css/css_margin.asp

Hope that helps!

Ok thanks I got rid of the br tags but when I added display: block; to the computer it threw the computer checkboxes off like crazy.

There are things that can be improved @gtrman97. 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 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
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

I don’t often comment on styling because I’m not the best at it but maybe review this lesson to group your like fields. The lesson only talks about radio buttons but can be applied to more than just the radio buttons.

I think you can make it work by setting the display of the label to block.
You can also wrap the radio and checkboxes in divs and use flexbox to place them in a row and center them.

You can also put the select and options in a div which is already block level.

There are ways to make the form without using br tags :grinning:

Working with forms are hard at first and it would be easier to just use br tags.
But it would be a misuse of the br tags.

Just take your time experimenting with making the form without br tags and you will learn some cool tricks along the way.

Kinda makes me wonder why they included them in the language in the first place.

According to documentation, they really should be used when line breaks are significant like in a poem or address.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

There are times when you can use br tags but here wouldn’t be one of them.

I ran it through the validator and I didn’t see any problems.

What exactly do you mean by this?

I like to space the selections out a bit is that bad practice?

Ok I think I made it better now.

https://codepen.io/gtrman97/pen/PobarPP

Would this be considered responsive?

1 Like

I think it looks better :grinning:

For devices under 400px the description text gets cutoff a little bit.
You can check for responsiveness by narrowing the browser as small as it goes. You can also change the view in the editor to make your browser really small.

I think you can cut down on repetition by using classes here instead of ids.

#name {
  margin: 10px; 
}
#email {
  margin: 10px; 
}
#number {
  margin: 10px; 
}
#dropdown {
  margin: 10px; 

}

You can also review that link on the margin shorthand property because it will come in handy for larger projects.

It is just an alternative to stuff like this

textarea {
  margin-top: 15px; 
  margin-bottom: 15px;  
}

Keep up the good work! :grinning:

I tried shrinking it as far as it would go and nothing got cut off. I think it’s because there’s very little content on this page so there’s not much to be cut off making it appear that nothing is being cut off. Which view in editor makes it really small?

I tried wrapping a div around the first three contact inputs and using that same margin: 10px; but it does not have even close to the same effect.

And oddly enough writing

textarea {
  margin-top: 15px; 
  margin-bottom: 15px;  
}

makes it centered. When I just do margin: 15px; it pushes the text box off to the right for some reason.

If you leave it full screen than the lowest break point is I think 500px. But if you change the view like show in the image earlier then you can make the browser window smaller. I don’t think you need to worry about something crazy like 100px because that is crazy small. But it is something to think about screens that are 300px and above.

I don’t think you need to do all of that. Just create a class and apply that class to each html element you want styled the same way.

Then you can write this in your css(or whatever class name you want)

input-options{
margin:10px;
}

That’s because you are telling the computer to add a margin of 15px on all sides.

If you just want it on the top and bottom you have to write this

textarea {
margin:15px 0;  
}

This means top and bottom will get 15px and right/left gets 0
That is the cool thing about the shorthand property :grinning:

Each radio button and each checkbox has a label. User’s should be able to click on the label to select. They shouldn’t have to click on just the little radio button or checkbox to make their selection.

There’s nothing wrong with it. But it seems like maybe you didn’t look at the provided link to see how you can group like fields to make things look more organized.

It’s not really that important in terms of web development, but you should use some different fonts other than the ones given to you as standard fonts. That will make your page look better.

One last thing i forgot, try and use flexbox for positioning, it’ll make your life easier a lot, and then combine that with margin and padding.
Other than that, the page looks simple and direct.
Well done !