Survey Form - Build a Survey Form CSS Problem

Tell us what’s happening:
Hello, I have a problem in that my rendered HTML structure is perfect but I have a problem with my CSS and how the page looks. If you look at the 2nd & 3rd fieldset elements I have children elements which are label and inside the input element is an input element. After I’ve wrote my CSS my input elements render quite horribly. I want my checkbox and radiobuttons to be on the left hand side of the text but the rendered part has the text at the bottom but the with the input elements dead middle of the page. The problem starts when I edit the section on my css script where I set my input, textarea, select elements to have a width of 100%, margin of 10% 0 0 0 as well as min-height to 2em.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1 id="title">Survey Form</h1>
    <p id="description">We appreciate your participation in our industry. Please take the survey & leave any comments or suggestions below to help with future improvements.</p>

    <form id="survey-form" action="" method="post" />

    <fieldset>
        <label for="name" id="name-label"> Name <input type="text" id="name" placeholder="Enter your name" required /></label>
        <label for="email" id="email-label"> Email <input type="email" id="email" placeholder="Enter your email" required /></label>
        <label for="number" id="number-label"> Age (optional) <input type="number" id="number" min="18" max="35" placeholder="Age" /></label>
    </fieldset>

    <fieldset>
        <label>Are you currently a studying?</label>
        <label for="radioYes"><input type="radio" name="studying" id="radioYes" value="yes"> Yes</label>
        <label for="radioNo"><input type="radio" name="studying" id="radioNo" value="no"> No</label>
        <label for="radioNotToSay"><input type="radio" name="studying" id="radioNotToSay" value="nottosay"> Prefer Not To Say</label>
    </fieldset>

    <fieldset>
        <label>Which platform do you use?</label>
        <label for="windows"><input type="checkbox" name="windows" id="windows" value="win"> Windows</label>
        <label for="macos"><input type="checkbox" name="macos" id="macos" value="mac"> Mac OS</label>
        <label for="linux"><input type="checkbox" name="linux" id="linux" value="lin"> Linux</label>
    </fieldset>

    <fieldset>
        <label>What is your favourite feature of freeCodeCamp?</label>
        <select name="" id="dropdown">
            <option value="">Select an option</option>
            <option value="challenges">Challenges</option>
            <option value="projects">Projects</option>
            <option value="community">Community</option>
            <option value="opensource">Open Source</option>
        </select>
    </fieldset>

    <label for="comments">Any comments or suggestions?</label>
    <textarea name="comments" id="textareasection" cols="30" rows="10"></textarea>

    <input type="submit" value="Submit" id="submit">

    </form>
</body>
</html>
/* file: styles.css */
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    font-size: 16px;
    /* font-family: 'Courier New', Courier, monospace; */
    /* background-color: black; */
    /* color: white; */
}

h1, p {
    text-align: center;
    margin: 1em auto; /* margin deals with space around the element */
}

form {
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto; /* since the width of this element is fix, we set the space around the element from the top to be 0 & sides to auto (which means let the browser decide according to the browser */
    padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0; /* padding deals with space "inside" the element & we set the top and bottom to 2rem as well as the sides to 0 */
    /* border-bottom: 3px solid #3b3b3b; */
}

/* this will set the any fieldset element where the type of border bottom is select to change to none */

/* fieldset:last-of-type {
    border-bottom: none;
} */

label {
    display: block; /* we're setting the label element to be a block type in order for it to appear in line by line */
    margin: 0.5rem 0;
}

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

textarea, input {
    border: 1px solid black;
    color: white;
}

input[type="submit"] {
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: azure;
    border-color: white;
    min-width: 300px;
    color: black;
}

Screenshot of the problem

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/117.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

First hint. I would start with not making the width of those inputs 100%.

Second hint, you might want to consider using something like flexbox to align the input and its text.

2 Likes

Thank you, so much Bruce! Your hints pointed to the right direction.

I tried what you suggested. If I make the input’s width not 100% they become small and unattractive but since. If i increase the each inputs width individually I run back to the same problem. Another question is how would I select the text of an input[type=“checkbox”] for example? I haven’t been experienced through the curriculum enough so I haven’t reached the part of using a flexbox. So, I will come back when I’ve reached that point.

Do you understand what is happening by setting the checkbox and radio button widths to 100%? That means they take up the entire width of the page and thus you can’t put any text next to them. If you want to make them bigger than the default then you can still set a width on them (something like 2rem perhaps). You just can make the width so big that text won’t be able to fit beside them like you want it to.

The text for the checkbox is directly in the label element, so you need to target the label for each checkbox. Of course, a lot of your other inputs also have their text in a label, so if you really just wanted to target the text for the checkboxes then it’s not as easy as just targeting the label since that would target text in all labels. So you’ll need to figure out a way to just target the text in the checkbox labels.

P.S. When you use a fieldset to group radio buttons or checkboxes, the question text should be in a legend, not a label.

1 Like

Wow, this explanation has been so helpful. In that I have now a clear understanding of what I was doing. I am so grateful for your help and patience.

Using the label for the question text on my fieldset’s is I was following how the curriculum was going about it. When I looked at MDN for reference I saw that they used a legend and not a label. I was confused but thank you for

1 Like

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