Survey Form Test Question

While I’m stumbling through this test I’m seeing code in the sample test form within the form element like this: div class=“form-group” and again inside the input element I see this: class=“form-control”. What is a “form-group” class inside each div? What is a “form control” class inside each input section? Are they related and what is their function. The tests pass without this code. Thanks very much. James

1 Like

I would suggest you look at the example project code and see if you can figure it out.
https://codepen.io/freeCodeCamp/pen/VPaoNP

If you still have questions just ask.

I have looked at the example project code many times. Sorry, no clue yet . I also looked at several other survey forms from other students and none of them has this code, so maybe I’m not the only person who doesn’t know what it is. I googled it and it looks like it does something cool but the professional lingo is a little too complicated for me to understand (yet). Anyway, if you like explain it, I’d love to learn something. Thanks.

1 Like

What part of the CSS do you not understand?

.form-group {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

Edit: They are really just containers, but the .form-control has some CSS specific to input elements.

Also, full disclosure. Both the names and a few of the properties are taken from Bootstrap (with some tweaks as I remember).

1 Like

Hi @james,
thank you for your question.
I think that they are related. The form is a set of small “divs” in a single “div”. Each “div” has its specific properties. For example, the “form-group” class is the container for each of the input elements. It’s just a way of representing the content. The “form-controller” class is not a “container” like the “form-group” class, but It stylizes the elements of each container. Look at the CSS code and change some values to see the effect.

.form-group {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}

.form-control {
  display: block;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}type or paste code here

Thank you sir. It’s going to be a long trip…

1 Like

With the will of course! Good coding!