Hello, I am trying to write the survey form and was really pleased with it to start with. However suddenly I have the content spilling out of the survey-form. There are a few other niggly issues but I dont understand why this has happened. I tried adjusting the max height but it didn’t make a difference.
One other issue I have got is that the question "who do you usually go on holiday with never seems to appear in the form. Can someone explain why this is?
Thanks in advance
Steve
I had to remove one closing div tag which wasn’t linked but other than that they all have closing tags. I know the script is probably quite chaotic. I was heading in 1 direction then changed part way through. Do you think its worth starting over?
Thanks, I would prefer to fix as you are right about that. Strange that removing individually doesn’t have much impact but both combined makes it drop in. Looks like Im going to have to be sherlock for the night. Thanks
HTML can get surprisingly complex and unwieldy if you are not careful when writing it.
Propper indentation is very important. It shows the hierarchal structure of the code, makes it legible and maintainable. Without it, only a machine can understand it.
Whitespace is your friend, use it. Give each logical section room to breathe, use line breaks to separate chunks of code.
Use comments to mark the start and end of the logical sections (i admit i often fail to heed my own words here).
Example
Compare this:
<div class="radio">
<label for="radio">Who do you usually go on holiday with?</label>
<div><input type="radio" id="family" name="radio" value="none">
<label for="family">Family</label></div>
<div><input type="radio" id="friends" name="radio" value="none">
<label for="friends">Friends</label>
</div>
<div><input type="radio" id="alone" name="radio" value="none">
<label for="alone">Alone<label></div>
<div><input type="radio" id="other" name="radio" value="none"><label for="other">Other:<label><input type="text" name="other"></div>
</div>
To this:
<!-- RADIO GROUP START -->
<div class="radio">
<label for="radio">Who do you usually go on holiday with?</label>
<div>
<input type="radio" id="family" name="radio" value="none">
<label for="family">Family</label>
</div>
<div>
<input type="radio" id="friends" name="radio" value="none">
<label for="friends">Friends</label>
</div>
<div>
<input type="radio" id="alone" name="radio" value="none">
<label for="alone">Alone</label>
</div>
<div>
<input type="radio" id="other" name="radio" value="none">
<label for="other">Other:</label>
<input type="text" name="other">
</div>
</div>
<!-- RADIO GROUP END -->
I know the formatting may not be how you wrote it, it may be a result of pasting. But it perfectly makes my point, and is how your code is being presented. Also, this is meant as educational information.
The p element has semantic meaning, you seem to be using the more as a generic container, use the div element for that.
The stylesheet link goes in the head, not the body (In Codepen, Settings > HTML tab > Stuff for head).
You have an extra comma in your font-family on the body.
font-family: 'segoe ui', tahoma, geneva, , verdana, sans serif;
Personally, I would suggest using an editor like VS Code to do the work. Then copy paste into Codepen. And, once you get more seasoned, tools like Emmet can really help you write both faster and cleaner (I know Codepen has emmet support I’m just saying).