1

I'm new to HTML/CSS and had some questions about my CodeCamp project

  1. How do I move the label and input to the center of the form? I've tried using text-align: center on my row class but it only separates the label and input.

  2. Why are the checkboxes not grouped together? I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be.

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #ea8a8a;
}

#title {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#description {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#outer-form {
  border-radius: 10px;
  background-color: #ebd5d5;
  padding-bottom: 10px;
}

.row {}

.label {
  color: #685454;
  display: inline-block;
  text-align: right;
  float: left;
  padding-top: 5px;
  width: 190px;
  margin-right: 20px;
}

#name {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px;
}

#email {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#number {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#dropdown {
  height: 30px;
  margin-top: 5px;
  margin-bottom: 14px;
  display: inline-block;
  vertical-align: middle;
  horizontal-align: bottom;
  margin-left: 20px;
  width: 120px
}

input[type=radio] {
  margin-left: 20px;
  margin-bottom: 30px;
  vertical-align: baseline;
  margin-top: 20px;
}

input[type=checkbox] {
  margin-left: 20px;
  vertical-align: baseline;
}

#comments {
  margin-top: 10px;
  margin-bottom: 5px;
  vertical-align: middle;
  margin-left: 20px;
  width: 150px;
  height: 50px;
}

#submit {
  background-color: #ea8a8a;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 160px;
  width: 100px;
  height: 40px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">

<h1 id="title">Doge Adoption Form</h1>

<div id="outer-form">

  <p id="description">Please fill out the questionare below</p>

  <form id="survey-form">

    <div class="row">
      <label class="label" id="name-label" for="name">Name: </label>
      <input id="name" placeholder="Enter your name" required> </input>
    </div>

    <div class="row">
      <label class="label" id="email-label" for="email">Email: </label>
      <input id="email" type="email" placeholder="Enter your email" required> </input>
    </div>

    <div class="row">
      <label class="label" id="number-label" for="age">Age: </label>
      <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input>
    </div>

    <div class="row">
      <text class="label">What is your favorite dog: </text>
      <select id="dropdown">
        <option value="Pomeranian"> Pomeranian</option>
        <option value="Beagle"> Beagle</option>
        <option value="German Shepard"> German Shepard</option>
      </select>
    </div>

    <div class="row">
      <label class="label">How likely are you to pick up doge poop:</label>
      <input type="radio" name="odds" value="very likely"> Very Likely
      <input type="radio" name="odds" value="not likely"> Not Likely
    </div>

    <div class="row">
      <label class="label"> What tricks will you teach (select all that apply)</label>
      <input type="checkbox" name="trick" value="Sit">Sit<br>
      <input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
      <input type="checkbox" name="trick" value="Roll over">Roll over<br>
      <input type="checkbox" name="trick" value="Speak">Speak<br>
    </div>



    <div class="row">
      <label class="label">Any additional information?</label>
      <textarea id="comments" placeholder="Enter your comment here..."></textarea>
    </div>

    <div class="row">
      <input id="submit" type="submit" value="Submit">
    </div>

  </form>

</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89
Trav
  • 135
  • 1
  • 2
  • 11
  • What do you mean by Why are the checkboxes not grouped together? For the first part try: `#survey-form{ width: 400px; margin: 0 auto; }` – Katie.Sun Nov 08 '18 at 03:59
  • Hello. Thanks for the suggestion on the part. So currently the radio buttons and the check boxes are on the right of the form. But for some reason, the text for them overlaps to the left side of the form where the labels are supposed to be, which I don't want. – Trav Nov 08 '18 at 20:35
  • I think you'll want to wrap those in a div -- it would probably be a good idea to do so for all of your inputs. Look at https://www.w3schools.com/howto/howto_css_responsive_form.asp -- except instead of using the col-75 classes use sizes that allow you to keep the middle of the page the center of the form. There are a million ways to do this, though. Also look out for using padding and margins at the same time -- that really only helps when you have a border. I would just use margins. – Katie.Sun Nov 08 '18 at 21:49

2 Answers2

1

Look at this answer, I have added two styles in your page:

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}

#survey-form for make the form alignment into center.

.div50 is to divide div as 50% of the parent div.

{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: #ea8a8a;
}

#title {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#description {
  color: #685454;
  text-align: center;
  padding: 10px;
}

#outer-form {
  border-radius: 10px;
  background-color: #ebd5d5;
  padding-bottom: 10px;
}

.row {}

.label {
  color: #685454;
  display: inline-block;
  text-align: right;
  float: left;
  padding-top: 5px;
  width: 190px;
  margin-right: 20px;
}

#name {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px;
}

#email {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#number {
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  width: 110px
}

#dropdown {
  height: 30px;
  margin-top: 5px;
  margin-bottom: 14px;
  display: inline-block;
  vertical-align: middle;
  horizontal-align: bottom;
  margin-left: 20px;
  width: 120px
}

input[type=radio] {
  margin-left: 30px;
  margin-bottom: 15px;
  vertical-align: baseline;
  margin-top: 10px;
}

input[type=checkbox] {
  margin-left: 30px;
  vertical-align: baseline;
}

#comments {
  margin-top: 10px;
  margin-bottom: 5px;
  vertical-align: middle;
  margin-left: 20px;
  width: 150px;
  height: 50px;
}

#submit {
  background-color: #ea8a8a;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 160px;
  width: 100px;
  height: 40px;
}

#survey-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.div50 {
  float: left;
  width: 50%;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">

<h1 id="title">Doge Adoption Form</h1>

<div id="outer-form">

  <p id="description">Please fill out the questionare below</p>

  <form id="survey-form">

    <div class="row">
      <label class="label" id="name-label" for="name">Name: </label>
      <input id="name" placeholder="Enter your name" required>
    </div>

    <div class="row">
      <label class="label" id="email-label" for="email">Email: </label>
      <input id="email" type="email" placeholder="Enter your email" required>
    </div>

    <div class="row">
      <label class="label" id="number-label" for="age">Age: </label>
      <input id="number" min="18" max="99" type="number" placeholder="Age:" required>
    </div>

    <div class="row">
      <text class="label">What is your favorite dog: </text>
      <select id="dropdown">
        <option value="Pomeranian"> Pomeranian</option>
        <option value="Beagle"> Beagle</option>
        <option value="German Shepard"> German Shepard</option>
      </select>
    </div>

    <div class="row">
      <div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div>
      <div class="div50">
        <input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br>
        <input type="radio" name="odds" value="not likely"> <label>Not Likely</label>
      </div>
    </div>

    <div class="row">
      <div class="div50">
        <label class="label"> What tricks will you teach (select all that apply)</label>
      </div>
      <div class="div50">
        <input type="checkbox" name="trick" value="Sit">Sit<br>
        <input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
        <input type="checkbox" name="trick" value="Roll over">Roll over<br>
        <input type="checkbox" name="trick" value="Speak">Speak<br>
      </div>
    </div>



    <div class="row">
      <label class="label">Any additional information?</label>
      <textarea id="comments" placeholder="Enter your comment here..."></textarea>
    </div>

    <div class="row">
      <input id="submit" type="submit" value="Submit">
    </div>

  </form>

</div>
vishnu
  • 2,848
  • 3
  • 30
  • 55
  • Hey thanks so much. This helped with the centering of the form. Do you know why the radio buttons and checkboxes are overlapping on the left side of the form where the labels are supposed to be? I've tried stretching the margins but it doesn't work. – Trav Nov 08 '18 at 20:36
0

here is the code for u first of all a neat and clear alignment of a form you should write the code using bootstarp.

put this links also for working the code dear.

 <!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Signingroup Financial</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">


    <div class="row">
        <div class="sg_formslist">
            <div class="col-sm-12 col-md-12">

             <div id="Selection-1-container" >
                <form  class="form-horizontal" id="form1">
                    <div class="col-sm-12 ">
                        <div class="col-sm-2">
                        </div>
                            <div class="col-sm-6">

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="customer_name" Placeholder="Customer Name"  required>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="col-sm-12">
                                    <label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
                                    <div class="col-sm-6">
                                        <div class="radio"  required>
                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="female" checked>
                                            Female
                                          </label>

                                          <label >
                                            <input type="radio" name="Selection" id="Selection-1" value="male" >
                                            Male
                                          </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                          <div class="form-group">
                            <div class="col-sm-12">
                                <label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
                                <div class="col-sm-6">
                                    <textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
                                </div>
                            </div>
                          </div>

                            <div class="form-group text-right">
                                <i class="fa fa-paper-plane plnay" ></i>
                                <input type="submit" class="btn btn-info" value="Submit ">
                            </div>
                        </div>
                        <div class="col-sm-3">
                        </div>
                    </div>
                    </div>
                </form>
                </div>

            </div>
        </div>

</div>

let you try this code its working.

Iswarya Swaminadhan
  • 115
  • 14