Survey Form: Numerous Issues

  1. For the life of me I can’t vertically center my checklist while keeping both the check-boxes and text inline.

  2. 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.

  3. 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?

  4. 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>
.super-container {
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/forum/uploads/2014/07/universe-backgrounds-21.jpg);
}

* {
  font-family: Andale Mono, monospace;
  color: white;
}

#title {
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
}

#description {
  text-align: center;
  font-size: 18px;
}

.container {
  width: 50%;
  clear: both;
  margin: auto;
  font-color: black;
  padding-top: 25px;
  padding-bottom: 10px;
  height: 650px;
  
}

#firstname {
  width: 50%;
  border: 1px solid black;
}

#lastname {
  width: 50%;
  border: 1px solid black;
}

#email {
  width: 50%;
  border: 1px solid black;
}

#number-label {
  width: 15%;
  border: 1px solid black;
}

select option {
  color: black;
}

#dropdown {
  border: 1px solid black;
}

#imp {
  text-align: center;
}

ul li {
  display: inherit;
}

#more {
  text-align: center;
}

#ta {
  color: black;
  margin: auto;
  display: block;
  border: 1px solid black;
}

#submit {
  width: 10%;
  color: black;
  border: 1px solid black;
  margin: auto;
  display: block;
}

Dunno if this helps, but…

If you change your text fields, you can center them?

<label>* First Name: </label>

and in the CSS…

form {
  width: 80%;
  margin: 0 auto;
}

label, input {
  display: inline-block;
}

label {
  width: 30%;  
}

Hi.
I have been looking at your form.

  • use display: flex property for this.
#list {
display:flex;
justify-content:center;
}
  • You have not added the </select> closing tag for the question above it.
  • wrap both label and input inside a div and apply display:flex property.
  • add margin for left right and top seperately
#submit {
  width: 100px;
	height:30px;
  color: black;
  border: 1px solid black;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	display:block;
}
  • 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.

2 Likes

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>
.super-container {
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/forum/uploads/2014/07/universe-backgrounds-21.jpg);
  height: 100%;
}

* {
  font-family: Andale Mono, monospace;
  color: white;
}

#title {
  text-align: center;
  font-size: 30px;
}

#description {
  text-align: center;
  font-size: 18px;
}

.container {
  width: 50%;
  clear: both;
  margin: auto;
  font-color: black;
  padding-top: 25px;
  padding-bottom: 10px;
}

#firstname {
  width: 50%;
  border: 1px solid black;
}

#lastname {
  width: 50%;
  border: 1px solid black;
  margin-top: 10px;
}

#email {
  width: 50%;
  border: 1px solid black;
  margin-top: 10px;
}

#number-label {
  width: 15%;
  border: 1px solid black;
  margin-top: 10px;
}

select option {
  color: black;
}

#dropdown {
  border: 1px solid black;
  margin-top: 10px;
}

#radio-label {
  margin-top: 1px;
}

#imp {
  text-align: left center;
}

#list {
  display: flex;
  justify-content: left center;
}

#more {
  text-align: center;
}

#ta {
  color: black;
  margin: auto;
  display: block;
  border: 1px solid black;
}

#submit {
  width: 10%;
  color: black;
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  display: block;
}

Sorry I missed typed, Updated.
What I meant was:

  • 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>
.abc {
  display:flex;
}

Can you post the link of your codepen after making the above changes. It will help to understand the problem better

Yeah sorry, should have done that originally. https://codepen.io/greevesh/pen/ajJeKr

  • The small circles are the bullets of your unordered list elements. You can remove them by simply setting list style to none.
li {
  list-style-type: none;
}
  • Your width of submit button is less, it’s not completely showing the text. Increase its width a bit.
  • to move #list closer you can either set margin-bottom of #imp to be 0 OR, you can set #list margin-top to a negative value.
1 Like