A very raw survey form (but passed 17/17) :) Please give some feedback

Hello,
1st I would like to point out I am newbiest of newbies when it comes to coding.
After redoing responsive web design html/ss courses for 3 times I’ve finally got enough practise to pass the survey form test. For now I’ve focused solely on passing it 17/17, so mainly it is done in HTML. I know it looks very raw but I will finish styling it as well. For now please give me some feedback according to html side. Whether it is messy or kind of ok.

Also the questions is: for sure I am not able to remember every commend. So couple times I’ve googled how to use inputs or labels. I hope it doesn’t count as cheating. If it is cheating then should I memorise all the rules, commends etc and redo it?

Survey Form

Please insert your link using :link: no </>

1 Like

Your form looks good @Spychu1993. 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 syntax/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
  • Change the cursor to a pointer when hovering over the submit button
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.

No one can remember all commands. You are expected to search. Most developers spend a major part of their day searching.

Blockquote* 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 ’ box.

So If I understand you correctly in this editor I can put everything after opening body tag and before closing it. And everything before body like head tag I should put in that box? Please see screenshot. I don’t quite understand why. I’ve checked what boilerplate is. So in order to omit continually typing basics like doctype and head we can just get straight to coding? So this is a time saver?

Edit: I’ve put:

<!DOCTYPE html>
<html>
  <head>
    <title>Survey-Form</title>
  </head>
</html>

in that setting’s box and the code works just fine. The other thing is when I’ve put whole code (with doctype etc) in " W3C validator ." 1st suggestion it showed is:

Warning : Consider adding a lang attribute to the html start tag to declare the language of this document.”

So in the end I have to keep typing tags like body and above in the main editor area so I can cacth the missing things like lang tag etc.

Blockquote * Run your HTML code through the W3C validator .
There are HTML syntax/coding errors you should be aware of and address.

Done it now and wow, lots of mistakes and typos. I will try to get it right. I guess this is how I learn how to write clean code?

Blockquote * User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox

So I should be able to hover over some functions and see something like this?
toggle

I can’t toggle it anywhere :frowning: or my english is that bad and I don’t understand the meaning behind verb “toggle” lol

Thank you so much @Roma for feedback. I hope you’ll stick in here for sometime and guide me further! :slight_smile:

Edit: I’ve managed to get the pointer while hovering over submit button and got my code clear of all errors W3C validator was showing. Should I make it a habit to push my code through validator?

Regarding codepen providing the boilerplate you can read all about it in their official documentation.

By toggle I mean change state. If you click a checkbox it toggles on, that is, it’s selected. Click it again and it toggles off, that is, not selected.
In my feedback I was saying that for the radio buttons and checkboxes that user’s should also be able to click the labels to toggle the selection.
Looks like you’ve figured that out.

It’s a good idea to check that your code is devoid of errors.

Codepen divides html and css editors. So in order to check my css code for errors should I just add <style (css) </style into html window and then copy it all to validator?

btw: how to quote your words with your name just like you do with mine?

Not necessary. If you look at the bottom of the W3C window it tells you what it checks and also gives links to other tools. One of which is CSS.
But the CSS analyzer for codepen is pretty good so you can just use it.

Highlight the line and then click “quote” to have it put into the body of the response.

Great, thanks. I will comeback soon when I finish styling that survey form.

Can someone tell me how to align input text, email, age forms in one straight line? I mean so they all start and end in one length.
I tried using display: table; margin; padding etc. I’m helpless lol
align

edit: block value seems to be the closest but all lines are still not aligned. The Age form is always a little bit to the left, before name and email

The code: survey

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.