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 (36 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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> 
        <p> 
            <strong>Operating Systems</strong>  
            <br> 
            <span class="small">Mark all operating systems you use more than once per week</span> 
            <br> 
            <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> 
        <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 (36 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

More Content

Tables
Using tables for tabular data

Website Content
Typography, images, forms, tables, etc.

Writing for the Web
Writing style guidelines for web content contributors

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.