Organizing Forms Using Fieldsets

It's better to use fieldsets to organize your for sections because the markup is more readable. You can also style these elements however you like.

by Yolanda Robles

HTML

<form>
    <fieldset>
        <legend>General</legend>
        <label>First Name
            <input name="firstname"/>
        </label>
        <label>Last Name
            <input name="lastname"/>
        </label>
    </fieldset>
    <fieldset>
        <legend>Preferences</legend>
        <label>Send tons of spam
            <input name="spam" type="checkbox"/>
        </label>
    </fieldset>
</form>

CSS

body {
    font: 0.8em Georgia, serif;
    margin: 2.5em;
}

fieldset {
    padding: 2em;
    border: none;
}

fieldset > :not(legend) {
    margin-left: 0.5em;
}

label {
    display: block;
    clear: both;
}

legend {
    font-weight: bold;
    font-size: 1.7em;
    border-bottom: 1px solid;
    width: 100%;
}

input:not([type=checkbox]) {
    float: right;
    margin-right: 55%;
    border: 1px solid;
}