Forms

Creating forms

Overview

Forms on stlouis-mo.gov go inside .content-block divs, and usually are presented with one form item per line, with the label above the input.

Form inputs must have labels attached, and text inputs should have a size appropriate for its content. For example, a field for a phone number should not be longer than necessary for a formatted 10-digit phone number. An email address field should not be so short that most addresses would not fit inside. 

(required)


Operating Systems

Mark all operating systems you use more than once per week



Basic form
<div class="content-block">
    <form>
        <p>
            <label for="name">Your Name</label>
            <span class="small">(required)</span>
            <br>
            <input type="text" name="name" id="name" size="30">
        </p>
        <p>
            <label for="status">Current Status</label>
            <br>
            <select name="status" id="status">
                <option value="1">Happy</option>
                <option value="2">Sad</option>
                <option value="3">Ambivalent</option>
            </select>
        </p>
        <fieldset>
            <legend>Operating Systems</legend>
            <p>Mark all operating systems you use more than once per week</p>
            <p>
                <input type="checkbox" value="1" name="os" id="os1">
                <label for="os1">Windows</label>
                <br>
                <input type="checkbox" value="2" name="os" id="os2">
                <label for="os2">Mac OS X</label>
                <br>
                <input type="checkbox" value="3" name="os" id="os3">
                <label for="os3">Linux</label>
            </p>
        </fieldset>
        <p>
            <input type="submit">
        </p>
    </form>
</div>

Horizontal Form Layout

Sometimes we use a horizontal form layout, usually for creating data filters. For these we use a .list-group with the added class .list-group-form-flex.




Horizontal form layout
<div class="content-block">
    <ul class="list-group list-group-form-flex">
        <li>
            <label for="status">Status</label>
            <br>
            <select name="status" id="status">
                <option value="0">All</option>
                <option value="1">Active</option>
                <option value="2">Retired</option>
            </select>
        </li>
        <li>
            <label for="title">Title</label>
            <br>
            <select name="title" id="title">
                <option value="0">All</option>
                <option value="1">Secretary</option>
                <option value="2">CEO</option>
                <option value="3">Accountant</option>
            </select>
        </li>
        <li>
            <label for="department">Department</label>
            <br>
            <select name="department" id="department">
                <option value="0">All</option>
                <option value="1">Personnel</option>
                <option value="2">Web Development</option>
                <option value="3">SLDC</option>
            </select>
        </li>
        <li>
            <input type="submit" value="Filter">
        </li>
    </ul>
</div>

Help Us Improve This Page

Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.