Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

Hello,

I want to make all elements in form tag be centered but when I changed form {margin: 10px auto;} like in the previous lesson , it has not changed

Can you please tell me where I am wrong?

Your code so far

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Khảo sát</title>
  </head>
  <body>
    <h1 id="title">Khảo sát chuyến đi du lịch Hạ Long</h1>
    <p id="description">Cảm ơn vì đã dành thời gian giúp cuộc đi chơi vui hơn</p>

    <div id="form-survey">
      <form id="survey-form">
        <fieldset>
          <label id="name-label" for="name"> 
            <legend>Họ và tên</legend>
            <input id="name" type="text" placeholder="Nhập họ và tên" required>
          </label>
          <label id="email-label" for="email">
              <legend>Email</legend>
              <input id="email" type="email" placeholder="Nhập email" required>
          </label>
          <label id="number-label" for="number">
              <legend>Tuổi (tùy)</legend>
              <input id="number" type="number" placeholder="Nhập tuổi" min="6" max="120">
          </label>
          <label>
              <select id="dropdown">
                  <option disabled>Bạn đang làm gì?</option>
                  <option>Học sinh</option>
                  <option>Đi làm thêm</option>
                  <option>Đi làm chính</option>
                  <option>Không muốn nói</option>
                  <option>Khác</option>
              </select>
          </label>
          <label>
              <legend>Bạn thấy chuyến đi chơi này vui không?</legend>
              <label for="chac-chan">
                <input id="chac-chan" type="radio" name="answer" class="inline"> Chắc chắc  
              </label>
              <label for="vui">
                <input id="vui" type="radio" name="answer" class="inline"> Vui
              </label>
              <label for="k-vui">
                <input id="k-vui" type="radio" name="answer" class="inline"> Không vui
              </label>
          </label>
          <label>
              <legend>Bạn muốn đi đâu tiếp theo (chọn điểm đến)</legend>
              <label for="">
                <input id="hp" type="checkbox" value="hp" class="inline"> Hải Phòng
              </label>
              <label for="dl">
                <input id="dl" type="checkbox" value="dl" class="inline"> Đà Lạt
              </label>
              <label for="dn">
                <input id="dn" type="checkbox" value="dn" class="inline"> Đà Nẵng
              </label>
              <label for="h">
                <input id="h" type="checkbox" value="h" class="inline"> Huế
              </label>
              <label for="ct">
                <input id="ct" type="checkbox" value="ct" class="inline"> Cần Thơ
              </label>
              <label for="hb">
                <input id="hb" type="checkbox" value="hb" class="inline"> Hòa Bình
              </label>
          </label>
          <label>
              <legend>Bạn có ý kiến gì không?
              </legend>
              <textarea placeholder="Cho ý kiến bạn vào đây..."></textarea>
          </label>
          <input id="submit" type="submit">
      </form>
    </div>
  </body>
</html>

h1, p {
    text-align: center;
  }
  
  body {
    color: white;
    background-color: #28283C;
    font-size: 25px;
    font-family: Arial;
  }
  
  form,
  input[type="submit"] {
    background-color: rgba(40, 40, 60, 0.8);
    width: 90vw;
    margin: 0 auto;
    padding: 20px;
  }
  
  label {
    display: block;
    padding: 10px
  }
  
  input,
  textarea {
    width: 80%;
    font-size: 0.75em;
    color: rgb(128, 128, 128);
    border-radius: 5px;
    border-color: rgba(40, 40, 60, 0.8);
    padding: 5px 5px;
  }
  
  .inline {
    display: inline;
    width: unset
  }
  
  #dropdown {
    height: 2em;
    width: 80%;
    margin: 0.5em auto;
    font-size: 0.75em;
    color: rgb(128, 128, 128);
  }

Your browser information:

The user agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Survey Form: Build a Survey Form

2

Hello there!
I believe your problem can be solved by using flexbox on the form container to center your elements.

3

Hi Khoi, welcome to fcc community.

Your form is already centered with this rule:

    width: 90vw;
    margin: 0 auto;

in your CSS:

But if you meant you want all elements inside the form to be centered, then you can use

text-align: center;
2 Likes
4

Yes,
but now i need the input elements are in center and each of the legend tags is on the left of their input.

Can you give me some advice?

5

Is this what you meant?

image
image1913×1408 149 KB

1 Like
6

Absolutely! Please provide me with your solution. Thank you!

7

There are some problems with your HTML structure. But I’ll talk about it later.

Using your current form structure:

form
   fieldset
      label
         legend
         input
      label   
         select
      label
         legend
         textarea
      submit button

Here is what you’re gonna do:

Set the fieldset element inside the form to display as a flex with flex-direction is column and align-items is center

Now all the label elements which are children of fieldset will be flex items.
Set a width for those labels, for example, 60%

Set the width of all input, select, textarea to be 100%

2 Likes
8

There are some issues with your HTML.
You should use a HTML Validator like this one to check for issues.

For example:

  • A legend element can’t be a child of a label element.

legend element always goes with fieldset element, like in this example.

  • The element label must not appear as a descendant of the label element.
  • The label element may contain at most one input, select, textarea descendant.

Don’t use label to wrap a group of form elements.
Use fieldset with legend, or use a div. For example:

<div class="form-group">
  <label>Gender</label>

  <div>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">Male</label>
  </div>

  <div>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">Female</label>
  </div>
</div>
1 Like
9

I have changed, but the screen is not what I expected.

fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input,
textarea {
  width: 100%;
  font-size: 0.75em;
  color: rgb(128, 128, 128);
  border-radius: 5px;
  border-color: rgba(40, 40, 60, 0.8);
  padding: 5px 5px;
}
10

You missed this step:

All the flex items have to have the same witdth. Otherwise, it will look like the center part in this image but vertically:

image
image366×511 52 KB

Btw, this is a good guide on how to use Flexbox:

2 Likes
11

I have changed a lot!! Thank you very much for your advice. It helped me a lot throughout this period.

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Khảo sát</title>
  </head>
  <body>
    <h1 id="title">Khảo sát chuyến đi du lịch Hạ Long</h1>
    <p id="description">Cảm ơn vì đã dành thời gian giúp cuộc đi chơi vui hơn</p>
    <form id="survey-form">
      <fieldset>
        <label id="name-label" for="name">Họ và tên</label>
          <input id="name" type="text" placeholder="Nhập họ và tên" required>
        <label id="email-label" for="email">Email</label>
            <input id="email" type="email" placeholder="Nhập email" required>
        <label id="number-label" for="number">Tuổi (tùy)</label>
        <input id="number" type="number" placeholder="Nhập tuổi" min="6" max="120">
        <label>Bạn đang làm gì?</label>
          <select id="dropdown">
              <option disabled>Bạn đang làm gì?</option>
              <option>Học sinh</option>
              <option>Đi làm thêm</option>
              <option>Đi làm chính</option>
              <option>Không muốn nói</option>
              <option>Khác</option>
          </select>
        <label>Bạn thấy chuyến đi chơi này vui không?</label>
          <label for="chac-chan">
            <input id="chac-chan" type="radio" name="answer" class="inline"> Chắc chắc  
          </label>
          <label for="vui"> 
            <input id="vui" type="radio" name="answer" class="inline"> Vui
          </label>
          <label for="k-vui">
            <input id="k-vui" type="radio" name="answer" class="inline"> Không vui
          </label>
        <label>Bạn muốn đi đâu tiếp theo (chọn điểm đến)</label>
          <label for="hp">
            <input id="hp" type="checkbox" value="hp" class="inline"> Hải Phòng
          </label>
          <label for="dl">
            <input id="dl" type="checkbox" value="dl" class="inline"> Đà Lạt
          </label>
          <label for="dn">
            <input id="dn" type="checkbox" value="dn" class="inline"> Đà Nẵng
          </label>
          <label for="h">
            <input id="h" type="checkbox" value="h" class="inline"> Huế
          </label>
          <label for="ct">
            <input id="ct" type="checkbox" value="ct" class="inline"> Cần Thơ
          </label>
          <label for="hb">
            <input id="hb" type="checkbox" value="hb" class="inline"> Hòa Bình
          </label>
        <label for="idea">Bạn có ý kiến gì không?</label>
          <textarea id="idea" placeholder="Cho ý kiến bạn vào đây..."></textarea>
        <input id="submit" type="submit">
      </fieldset> 
    </form>
  </body>
</html>

h1, p {
  text-align: center;
}

fieldset {
  display: flex;
  flex-direction: column;
  align-items: center;
}

fieldset label {
  width: 80%;
}

body {
  color: white;
  background-color: #28283C;
  font-size: 25px;
  font-family: Arial;
}

form {
  background-color: rgba(40, 40, 60, 0.8);
  width: 90vw;
  margin: 0 auto;
  padding: 20px;
}

#submit {
  background-color: rgba(40, 40, 60, 0.8);
  width: 60vw;
  font-size: 25px;
  margin-top: 20px;
}

label {
  display: block;
  padding: 10px
}

input,
textarea {
  width: 80%;
  font-size: 0.75em;
  color: rgb(128, 128, 128);
  border-radius: 5px;
  border-color: rgba(40, 40, 60, 0.8);
  padding: 5px 5px;
}

.inline {
  display: inline;
  width: unset
}

#dropdown {
  height: 2em;
  width: 80%;
  font-size: 0.75em;
  color: rgb(128, 128, 128);
}

textarea {
width: 80%;
height: 5em;
}
2 Likes
12

@toan’s recommendations are excellent. Layout problems can almost always be solved with flexbox. One other resource that I personally found very helpful on my journey is https://flexboxfroggy.com. It’s a game that teaches you flexbox as you play it, and I found learning really effortless playing it. Have fun!

Nicolas

2 Likes