Forms

Examples and usage guidelines for form and input styling.

Text Input States #

The following shows the styling of various text input states

Text Area States #

The following shows the styling of various text area states

Checkbox Input States #

The following shows the styling of various checkbox input states

Radio Input States #

The following shows the styling of various radio input states

All Other Supported Input Types #

    <form onsubmit="return false;">
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-color"
            >Input Type Color</label>
            <input
                class="display-block margin-0"
                id="input-color"
                type="color"
                name="color"
                value="#00818A"
            >
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-date"
            >Input Type Date</label>
            <input placeholder="Select Date" id="input-date" type="date" name="date">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-email"
            >Input Type Email</label>
            <input value="admission@mountunion.edu" id="input-email" type="email" name="email">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-password"
            >Input Type Password</label>
            <input id="input-password" type="password" name="password">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-number"
            >Input Type Number</label>
            <input id="input-number" type="number" name="number">
        </div>
        <div class="margin-b">
            <label
                class="display-block"
                for="input-range"
            >Input Type Range</label>
            <input type="range" id="input-range" name="range">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-search"
            >Input Type Search</label>
            <input placeholder="Search" id="input-search" type="search" name="search">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-tel"
            >Input Type Tel</label>
            <input value="+18009926682" id="input-tel" type="tel" name="tel">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-url"
            >Input Type Url</label>
            <input id="input-url" value="https://mountunion.edu" type="url" name="url">
        </div>
        <div class="margin-b">
            <label
                class="display-block margin-1-b"
                for="input-list"
            >Input List</label>
            <input class="white-bg" id="input-list" list="input-list-options">
            <datalist id="input-list-options">
                <option value="Option 1">
                <option value="Option 2">
                <option value="Option 3">
            </datalist>
        </div>
        <div class="margin-b">
            <input class="display-inline-block" type="submit" value="Submit">
        </div>
    </form>