For the life of me I can’t vertically center my checklist while keeping both the check-boxes and text inline.
Secondly, I can’t seem to have my radio-list appear properly either. They have tiny circles to the left of them and the label won’t even appear.
Also, I’m unable to get my input box above the radio buttons to appear to the right of the above question. Is there any way I can have it show an arrow as well so the user can notice there are options?
Finally, I would like to raise the submit button so there is some space between it and the bottom of the page. I tried using lower padding but no change.
Sorry for the list and here is my code:
<div class="super-container">
<h1 id="title">Survey</h1>
<p id="description">Tell us how it's going at CodePlanet</p>
<!-- beginning of the form that requests personal info-->
<div class="container">
<form id="survey-form">
* First Name:
<input id = "firstname" type= "text" name= "firstname" description="Inputs first name of the user"><br><br>
* Last Name:
<input id = "lastname" type="text" name="lastname" description="Inputs last name of the user"><br><br>
* Email:
<input id = "email" type="email" name="email" description="Inputs email address of the user"><br><br>
* Age:
<input id="number-label" type="number" min="0" max="150" name="age" description="Inputs age of the user"><br><br>
<!--dropdown menu -->
Which option best describes your current role? <select id="dropdown">
<option value = "1">Student</option>
<option value = "2">Full time job</option>
<option value = "3">Part time job</option>
<option value = "4">Prefer not to say</option>
<option value = "5">Other</option><br><br>
<!-- radio buttons -->
<div id = "radio-label">
<label for = "options">Would you recommend us to a friend?</label>
</div>
<div id = "radio-list">
<ul>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "1" type = "radio" class = "options"/>Yes
</label>
</li>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "2" type = "radio" class = "options"/>Maybe
</label>
</li>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "3" type = "radio" class = "options"/>No
</label>
</li>
</ul>
</div>
<!-- checkboxes -->
<p id = "imp">Improvements to be made:</p>
<div id = "list">
<ul>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Front-end development</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Back-end development</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Challenges</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Forum</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Open source community</label></li>
</ul>
</div>
<!-- additional info -->
<p id = "more">Anything further to add?</p>
<textarea id = "ta" rows = "4" cols = "50"></textarea><br>
<input type = "submit" id = "submit" value = "Submit" name = "submit">
</form>
</div>
</div>
Addiditionaly. It would be better if you apply your img to body as applying to super-container leaves margins. Also see this link for applying the image properly to full page.
link :https://www.w3schools.com/howto/howto_css_full_page.asp
also do not use <br> for spacing. Use margin and padding instead. <br> is used to create line breaks in texts/paragraphs.
Also, you have provided a fixed container height:650px which might cause problem if item inside exceed it. It would be better to set it to auto.
Thank you, you’ve been a huge help so far but could you re-explain this part: “wrap both label and inside and input inside a div and apply display:flex property.”. Also, how can I remove the dots that come beside my radio and check-list? Finally,
I’m unable to move my check-list closer to the “Improvements to be made” title. How would I go about doing this?
<body class="super-container">
<h1 id="title">Survey</h1>
<p id="description">Tell us how it's going at CodePlanet</p>
<!-- beginning of the form that requests personal info-->
<div class="container">
<form id="survey-form">
* First Name:
<input id = "firstname" type= "text" name= "firstname" description="Inputs first name of the user">
<br>* Last Name:
<input id = "lastname" type="text" name = "lastname" description = "Inputs last name of the user">
<br>* Email:
<input id = "email" type="email" name="email" description="Inputs email address of the user">
<br>* Age:
<input id="number-label" type="number" min="0" max="150" name="age" description="Inputs age of the user">
<!--dropdown menu -->
<br><br>Which option best describes your current role? <select id="dropdown">
<option value = "1">Student</option>
<option value = "2">Full time job</option>
<option value = "3">Part time job</option>
<option value = "4">Prefer not to say</option>
<option value = "5">Other</option></select>
<!-- radio buttons -->
<div id = "radio-label">
<label for = "options"><br>Would you recommend us to a friend?</label>
</div>
<div id = "radio-list">
<ul>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "1" type = "radio" class = "options"/>Yes
</label>
</li>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "2" type = "radio" class = "options"/>Maybe
</label>
</li>
<li class = "radio">
<label>
<input name = "radio-buttons" value = "3" type = "radio" class = "options"/>No
</label>
</li>
</ul>
</div>
<!-- checkboxes -->
<p id = "imp">Improvements to be made:</p>
<div id = "list">
<ul>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Front-end development</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Back-end development</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Challenges</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Forum</label></li>
<li>
<input type = "checkbox" class = "checklist" value = "check-option"/>
<label for = "check-option">Open source community</label></li>
</ul>
</div>
<!-- additional info -->
<p id = "more">Anything further to add?</p>
<textarea placeholder = "Please tell us..." id = "ta" rows = "4" cols = "50"></textarea>
<input type = "submit" id = "submit" value = "Submit" name = "submit">
</form>
</div>
</body>
wrap both label and input inside a div and apply display:flex property.
<div class="abc">
<label>*First Name:</label>
<input id = "firstname" type= "text" name= "firstname" description="Inputs first name of the user">
</div>