Survey Form certification projet

HTML-CSS
1

Good afternoon,
I am doing this post today because I can’t figure out how to align my checkbox and put the text on the right of the checkbox. the vertical-align and position doesn’t seem to change anything.
Thank you in advance for your help!

HERE IS MY HTML AND CSS CODE FOR THE PROJET
** start of undefined **

Aupair Agency Survey Form

Thank you for taking the time to share your Aupair experience with us.

Name Email Age Which of these agencies was you sponsor ? Would you recommend your agency to a friend ? Yes No Others
What would you like to see improve ? Price Program Family Monthly meeting Salary Others
Use this space to describe your experience and explain your ideas for improvement Enter text here... Submit

** end of undefined **

** start of undefined **

h1, p {
text-align: center;
font-family: Verdana;
margin-bottom: 25;
}

fieldset {
border: none;
margin-left: 10;
margin-top: 20;
text-align: left;
}
input[type=“radio”] {
margin-left: 25px;
}
legend {
margin: 20 20;
}
select {
margin: 0 25 0 25;
width: 95%;
min-height: 3em
}
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
input[type=“text”] {
width: 100%;
min-height: 3em;
margin-top: 10;
}
input[type=“email”] {
width: 100%;
min-height: 3em;
margin-top: 10;
}
input[type=“number”] {
width: 100%;
min-height: 3em;
margin-top: 10;
}
input[type=“checkbox”] {
width: 17px;
height: 17px;
vertical-align: middle;
position: relative;
}
textarea {
margin-top: 15;
}
label {
display: block;
margin-top: 10;
}

** end of undefined **

1 Like
2

Hey there, welcome to the forum!
I see this is the first time you’ve posted. I complement your obvious persistence. It seems most people ask a question on the first project, but you’ve held out 'til now.

We really need to see your code. The way to make code display as code on most forums is with backticks. This is a backtick: “`” It’s not an apostrophe!

To display code type three backticks on a new line like this:
“```”
Then copy and past you code. After your code type three more backticks .

Once we see your code we can help you out. (:

3

here is my code :
“```”

Aupair Agency Survey Form

Thank you for taking the time to share your Aupair experience with us.

Name Email Age Which of these agencies was you sponsor ? Would you recommend your agency to a friend ? Yes No Others What would you like to see improve ? (check all that apply)
Price
Program
Family
Monthly meeting
Salary
Others
Use this space to describe your experience and explain your ideas for improvement Enter text here... Submit

** end of undefined **

** start of undefined **

h1, p {
text-align: center;
font-family: Verdana;
margin-bottom: 25;
}

fieldset {
border: none;
margin-left: 10;
margin-top: 20;
text-align: left;
}
input[type=“radio”] {
margin-left: 25px;
}
legend {
margin: 20 20;
}
select {
margin: 0 25 0 25;
width: 95%;
min-height: 3em
}
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #9029AF;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
input[type=“text”] {
width: 100%;
min-height: 3em;
margin-top: 10;
background-color:
}
input[type=“email”] {
width: 100%;
min-height: 3em;
margin-top: 10;
}
input[type=“number”] {
width: 100%;
min-height: 3em;
margin-top: 10;
}
input[type=“checkbox”] {
width: 17px;
height: 17px;
vertical-align: middle;
position: relative;
}
textarea {
margin-top: 15;
}
label {
display: block;
margin-top: 10;
}
“```”

4

I’m sorry @laurine.chalopet . I came across wrong. You don’t need qoutation marks around your backticks. I only put those there so that the backticks wouldn’t format my text like code.

You can always look in the preview pane to see how you message looks before you send it.

5 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 id="title">Aupair Agency Survey Form</h1>
    <p id="description">Thank you for taking the time to share your Aupair experience with us.</p>
    <form id="survey-form">
      <fieldset>
      <label id="name-label">Name
      <input required id="name" type="text" placeholder="enter your name here"/>
      </label>
      </fieldset>
      <fieldset>
      <label id="email-label">Email
      <input required id="email" type="email" placeholder="enter your email here"/>
      </label>
      </fieldset>
      <fieldset>
      <label id="number-label">Age
      <input id="number" type="number" min="0" max="100" placeholder="age"/>
      </label>
      </fieldset>
      <legend>Which of these agencies was you sponsor ?</legend>
      <select id="dropdown">
<option>Select an option</option>
   <option>Aupair in America</option>
   <option>Cultural Care</option>
     <option>EurAupair</option>
     <option>AupairCare</option>
     <option>Others</option>
       </select>
       <legend>Would you recommend your agency to a friend ?</legend>
<input type="radio" name="answer" value="yes"/>Yes
       <input type="radio" name="answer" value="no"/>No
       <input type="radio" name="answer" value="others"/>Others
       <fieldset>
<label id="checkbox">What would you like to see improve ? (check all that apply)</label>
<div class="inline">
<label for="price" class="inline">Price
<input type="checkbox" id="price" value="price"/>
</label></div>
<div class="inline">
<label for="program" class="inline">Program
  <input type="checkbox" id="program" value="program"/>
  </label></div>
  <div class="inline">
  <label for="family" class="inline">Family
    <input type="checkbox" id="family" value="family"/>
    </label></div>
    <div class="inline">
    <label for="monthly meeting" class="inline">Monthly meeting
      <input type="checkbox" id="montlhy meeting" value="montlhy meeting"/>
      </label></div>
      <div class="inline">
      <label for="salary" class="inline">Salary
        <input type="checkbox" id="salary" value="salary"/>
        </label></div>
        <div class="inline">
        <label for="others" class="inline">Others
        <input type="checkbox" id="others" value="others"/>
        </label></div>
        </fieldset>
        <fieldset>
       <label id="textarea">Use this space to describe your experience and explain your ideas for improvement</label>
       <textarea rows="10" cols="100">Enter text here...</textarea>
       </fieldset>
       <button id="submit">Submit</button>
    </form>
    </body>
6

Great Job @laurine.chalopet ! I’ll check and see what your problem is.

7

Sorry I just understand how to put my HTML here !

8

That’s okay. (:grinning: Just do your CSS the same way.

9 
h1, p {
  text-align: center;
  font-family: Verdana;
  margin-bottom: 25;
}

fieldset {
  border: none;
  margin-left: 10;
  margin-top: 20;
  text-align: left;
}
input[type="radio"] {
  margin-left: 25px;
}
legend {
  margin: 20 20;
}
select {
  margin: 0 25 0 25;
  width: 95%;
  min-height: 3em
}
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #9029AF;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}
input[type="text"] {
  width: 100%;
  min-height: 3em;
  margin-top: 10;
  background-color: 
  }
  input[type="email"] {
  width: 100%;
  min-height: 3em;
  margin-top: 10;
  }
  input[type="number"] {
  width: 100%;
  min-height: 3em;
  margin-top: 10;
  }
  input[type="checkbox"] {
    width: 17px;
    height: 17px;
    vertical-align: middle;
    position: relative;
}
textarea {
margin-top: 15;
}
label {
  display: block;
  margin-top: 10;
  }
10

Your code passes. You must have a browser extension or cookies causing trouble. If you need help fixing the talk to @zuhameer6 .

11

oh I was seeking for help in my CSS code to align my checkbox and putt my text in the right. So you think I can’t because of my browser?

12

Think you made a typo, put a semi colon over 3em in select

13

thank you I fix that ! But it did not fix my checkboxes problem …

14

Oops! No. I’m sure your browser has nothing to do with it. My mistake. I thought you couldn’t pass the challenge. That’s usually the problem people have. I’ll look at your code.

15

To get your text to the right side of the checkbox move your input from the left, to the right side of your label text in your HTML. Like this:

<label for="price" class="inline"><input type="checkbox" id="price" value="price"/>Price</label>

What do you mean by “align my checkbox?”

I’m impressed that your actually taking the trouble to make your project look nice. Keep going!

16

How’s it going @laurine.chalopet ?

17

THANK YOU SO MUCH!!!

18

it works ! I was stuck on that since 1 hours! So silly ! haha!

19

When I was first learning the language I ran into just the same bump. It took my whole afternoon to figure it out!

It’s important to realize how much html affects your pages looks. :wink:

1 Like
20

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.