Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I need help please. My code so far but the first fieldset with the Enter Your details the Name, Email and number should be at the top but mine is at the button and also the radio buttons and the checkboxes are not aligned with eachother. I’ve tried multiple times to rectify my mistake but I don’t know what I’m doing wrong
Your code so far

/* file: index.Ext.html */













<!DOCTYPE html>
   <html lang="en">
    <head>
      <meta charset="utf-⁸8">
      <h1 id="title">SURVEY FORM</h1>
      <link rel="stylesheet" href="styles.css" /> 
    </head>
    <body>    
      <p id="description">Take a quick survey by filling these form please</p>
      <form id="survey-form">
      <fieldset>
        <legend>Enter Details</legend>
        <input id="name" type="text" required placeholder="Full Name">Full Name:</input>
        <input id="email" type="email" required placeholder="Enter Email">Enter Email:</input>
        <input id="number" type="number" min="8" max="16" placeholder="Phone Number">Phone number:</input>          
        <label id="name-label"></label>
        <label id="email-label"></label>
        <label id="number-label"></label>  
      </fieldset>
      <fieldset>
        <legend>which Episode was acted perfectly:</legend>
        <select id="dropdown" name="episode-select">
          <option value="">Select One</option>
          <option value="1">Episode I</option>
          <option value="2">Episode IV</option>
          <option value="3">Episode IX</option>
        </select>
      </fieldset>
      <fieldset>
        <legend>What's your favourite episode:</legend>
        <div> 
          <input type="radio" id="episode I" name="episode" value="episode I" /> 
          <label for="episode I">Episode I</label>
        </div>
        <div>
          <input type="radio" id="episode IX" name="episode" value="episode IX" />
          <label for="episode IX">Episode IX</label>
        </div>
        <div>
          <input type="radio" id="episode V" name="episode" value="episode V" />
          <label for="episode V">Episode V</label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Who Was Your favorite Cast:</legend>
        <div>
          <input type="checkbox" value="Michael Scofield" />
          <label for="Michael Scofield">Michael Scofield</label>
        </div>
        <div>
          <input type="checkbox" value="Sarah Tencredi" />
          <label for="Sarah Tencredi">Sarah Tencredi</label>
        </div>
        <div>
          <input type="checkbox" value="Burrows" />
          <label for="Burrows">Burrows</label>
        </div>
      </fieldset>
          <textarea id="review" name="review" placeholder="write a review here..."></textarea>
          <button id="submit">Submit</button>
      </form> 
    </body>
   </html>
    






























    

















    









    




/* file: styles.Ext.css */






























h1, p {
margin: none;
text-align: center;
color: white;
}

body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1C1C1C;
}

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
color: white;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3B3B4F;
}

label {
margin: 0.5rem 0;
display: inline;
}

input, textarea, select {
margin: 5px 0 0 0;
width: 100%;
min-height: 1em;
}

input, textarea {
background-color: #E5E5E5;
border: 1px solid #E5E5E5;
color: #000000;
}

Your mobile information:

23106RN0DA - Android 13 - Android SDK 33

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi @Zionmusa

The label element do not contain any text.

Try removing the width property for just the input selector.

Happy coding

4

Ok I’ve tried to remove the width for the input selector but the checkbox and the round button to click disappeared and also the first fieldset were so tiny.
I’ve removed the text from the label elements and put it in the input element

5

These are the label elements that require text:

Remove the input selector from this group:

6

Ok I add text to the label elements but it seems something isn’t right. I’m having duplicate of the Name, Email, and number text. Or are you saying something different? please make me understand and by the way I removed the input selector and it worked but now the problem I’m having is with my first fieldset element that contains the “Enter Your details”

7

If I add text to the label elements then my text becomes duplicate

8

It’s duplicate because you have added the texts with the input elements:

The input element is self-closing so you don’t need a closing tag for it. You can remove the texts from these input elements and then add the texts to your label elements. Make sure to organize each label element with the related input. If it’s a label for Name, place it with the input asking for Name. Connect your label elements with the inputs using the for attribute.
Hope this helps!

9

I did it. Thank you :pray:
I passed my first project, how can I share it on here so I can get a review?

10

Great job!
If you have a Codepen or Jsfiddle account, you can add your code there and share the link with us. Create a topic under the “Code Feedback” subforum, and share your project there.
Happy coding!