Survey Form - Build a Survey Form

Tell us what’s happening:

i cannot seem to get the checkbox to appear inline with the text after it. it is either appearing after of on top

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Skincare Survey Form</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css"/>
    </head>
  <body>
    <h1 id="title">Skincare Routines</h1>
    <p id="description"/>Tell us about your skincare routine</p>
    <form id="survey-form"></form>
    <fieldset>
      <label for="name-label">Name <input id="name-label" type="text" name="Name" placeholder="Jane" required></label>
      <label for="email-label">Email <input id="email-label" type="email" name="Email" required placeholder="janedoe@gmail.com"></label>
      <label for="number-label">Age (optional) <input id="number-label" min="18" max="120" type="number" placeholder="18"></label>
    </fieldset>
  <fieldset>
    <label for="skin-type">Which would you say is your skin type?</label>
      <select id="dropdown" name="skin-type">
        <option value="0">select one</option>
        <option value="1">Oily Skin</option>
        <option value="2">Dry Skin</option>
        <option value="3">Combination Skin</option>
      </select>
    </label>
    </fieldset>
  <fieldset>
    <label>Which brand would you recommend to your friends?</label>
      <label for="garnier"><input type="radio" id="garnier" name="brand" class="inline" checked>Garnier</label>
      <label for="cerave"><input type="radio" id="cerave" name="brand" class="inline">CeraVe</label>
      <label for="olay"><input type="radio" id="olay" name="brand" class="inline">Olay</label>
  </fieldset>
<fieldset>
  <label for="steps">Which products are included in your current skincare routine? (check all that apply)</label>
  <input type="checkbox" class="inline" id="cleanser">Cleanser</input>
  <input type="checkbox" class="inline" id="toner" checked>Toner</input> 
  <input type="checkbox" class="inline" id="spot-treatment">Spot treatment</input>
  
  <input type="checkbox" class="inline" id="serum">Serum</input>
  <input type="checkbox" class="inline" id="moisturizer">Moisturizer</input>
  </fieldset>
<label for="comments">Additional comments:
  <textarea id="comments" rows="3" cols="10" placeholder="Applying sunscreen is also advantageous..."></textarea>
  <input type="submit" value="Submit">
</form>
</body>
</html>
/* file: styles.css */
body{
  background-color: #f0f8ff;
 width:100%; 
}
h1, p{
  text-align: center;
}
fieldset{
 border: none;
  padding: 2rem 0;
}
input{
  width: 100%;
  margin: 10px 0 0 0;
  background-color: #e6e6fa;
  border: 1px solid #e6e6fa;
  
  
}
.inline{
  display: inline;
}
textarea{
  width: 100%;
  border: 1px solid;
  border-color: #73c2fb
}
input[type="submit"]{
  display: block;
  width: 60%;
  margin: 1em auto;
  font-size: 1.1rem;
  background-color: #ffc1cc;
  min-width: 300px;
  height: 2em;
}
input[type="checkbox"]{
  display: inline-block;
  width: 20px ;
  height: auto;
}


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Survey Form - Build a Survey Form

Hii @ chatambudzajessica29

There are identified issues, you can check these points.

  • Paragraph Tag Closure:
    Issue: <p id="description"/>

  • Unclosed label Tag in Skin Type Fieldset:
    Issue: <label for="skin-type">Which would you say is your skin type?</label>

  • Wrong Input Type for Checkboxes:
    Issue: <input type="checkbox" class="inline" id="cleanser">Cleanser</input>

  • Invalid Input Tag Closure in Checkboxes:
    Issue: <input type="checkbox" class="inline" id="cleanser">Cleanser

  • Unused <label> Tag in Skin Type Fieldset:
    Issue: <label></label>

  • Unclosed form Tag:
    Issue: <form id="survey-form"></form>