ORIENT/modules/system/assets/ui/docs/form.md

# Form

## Types

    <form class="form-elements" role="form">
        <div class="form-group span-left">
            <label>First name</label>
            <input type="text" name="" value="" class="form-control" />
        </div>

        <div class="form-group span-right">
            <label>Last name</label>
            <input type="text" name="" value="" class="form-control" />
        </div>

        <div class="form-group span-full">
            <label>Address</label>
            <input type="text" name="" value="" class="form-control" />
        </div>
    </form>

### Complete example

    <!-- Form Elements -->
    <form class="form-elements" role="form">

        <!-- Text Input (Left) -->
        <div class="form-group text-field span-left is-required">
            <label>Input Left</label>
            <input type="text" name="" value="" class="form-control" />
             <p class="help-block">Example below help text here.</p>
        </div>

        <!-- Text Input (Right) -->
        <div class="form-group text-field span-right is-required">
            <label>Input Right</label>
            <input type="text" name="" value="" class="form-control" />
            <p class="help-block">Example below help text here.</p>
        </div>

        <!-- Text Input (Full) -->
        <div class="form-group text-field span-full is-required">
            <label>Input Full</label>
            <p class="help-block before-field">Example above help text here.</p>
            <input type="text" name="" value="" class="form-control" />
        </div>

        <!-- Drop down -->
        <div class="form-group dropdown-field span-left">
            <label>Drop Down</label>
            <select class="form-control custom-select">
                <option selected="selected" value="2">Approved</option>
                <option value="3">Deleted</option>
                <option value="1">New</option>
            </select>
        </div>

        <!-- Grouped Drop down -->
        <div class="form-group dropdown-field span-right">
            <label>Grouped Drop Down</label>
            <select class="form-control custom-select">
                <optgroup label="NFC EAST">
                    <option>Dallas Cowboys</option>
                    <option>New York Giants</option>
                    <option>Philadelphia Eagles</option>
                    <option>Washington Redskins</option>
                </optgroup><optgroup>
                </optgroup><optgroup label="NFC NORTH">
                    <option>Chicago Bears</option>
                    <option>Detroit Lions</option>
                    <option>Green Bay Packers</option>
                    <option>Minnesota Vikings</option>
                </optgroup>
                <optgroup label="NFC SOUTH">
                    <option>Atlanta Falcons</option>
                    <option>Carolina Panthers</option>
                    <option>New Orleans Saints</option>
                    <option>Tampa Bay Buccaneers</option>
                </optgroup>
                <optgroup label="NFC WEST">
                    <option>Arizona Cardinals</option>
                    <option>St. Louis Rams</option>
                    <option>San Francisco 49ers</option>
                    <option>Seattle Seahawks</option>
                </optgroup>
                <optgroup label="AFC EAST">
                    <option>Buffalo Bills</option>
                    <option>Miami Dolphins</option>
                    <option>New England Patriots</option>
                    <option>New York Jets</option>
                </optgroup>
                <optgroup label="AFC NORTH">
                    <option>Baltimore Ravens</option>
                    <option>Cincinnati Bengals</option>
                    <option>Cleveland Browns</option>
                    <option>Pittsburgh Steelers</option>
                </optgroup>
                <optgroup label="AFC SOUTH">
                    <option>Houston Texans</option>
                    <option>Indianapolis Colts</option>
                    <option>Jacksonville Jaguars</option>
                    <option>Tennessee Titans</option>
                </optgroup>
                <optgroup label="AFC WEST">
                    <option>Denver Broncos</option>
                    <option>Kansas City Chiefs</option>
                    <option>Oakland Raiders</option>
                    <option>San Diego Chargers</option>
                </optgroup>
            </select>
        </div>

        <!-- Checkbox -->
        <div class="form-group checkbox-field span-left is-required">
            <div class="checkbox custom-checkbox">
                <input name="checkbox" value="1" type="checkbox" id="checkbox_1">
                <label for="checkbox_1">Enable Googie Berry Power-up</label>
                <p class="help-block">Use this checkbox to enable the Googie Berry power-up specifically for this page. You can configure the Googie Berry power-up on the System Settings and Dashboard page.</p>
            </div>
        </div>

        <!-- Switcher -->
        <div class="form-group switch-field span-right">
            <div class="field-switch">
                <label>Would you like fries with that?</label>
                <p class="help-block">Use this checkbox to enable the Googie Berry power-up specifically for this page. You can configure the Googie Berry power-up on the System Settings and Dashboard page.</p>
            </div>
            <label class="custom-switch">
                <input type="checkbox" />
                <span><span>On</span><span>Off</span></span>
                <a class="slide-button"></a>
            </label>
        </div>

        <!-- Radio List -->
        <div class="form-group radio-field span-left is-required">
            <label>Radio List</label>
            <p class="help-block before-field">Where should you propose to your beautiful girl?</p>

            <div class="radio custom-radio">
                <input name="radio" value="1" type="radio" id="radio_1">
                <label for="radio_1">Paris</label>
                <p class="help-block">Do not send new comment notifications.</p>
            </div>
            <div class="radio custom-radio">
                <input checked="checked" name="radio" value="2" type="radio" id="radio_2">
                <label for="radio_2">Dubai</label>
                <p class="help-block">Send new comment notifications only to post author.</p>
            </div>
            <div class="radio custom-radio">
                <input name="radio" value="3" type="radio" id="radio_3">
                <label for="radio_3">New Zealand</label>
                <p class="help-block">Notify all users who have permissions to receive blog notifications.</p>
            </div>
        </div>

        <!-- Checkbox List -->
        <div class="form-group checkboxlist-field span-right is-required">
            <label>Checkbox List</label>
            <p class="help-block before-field">What cars would you like in your garage?</p>

            <div class="checkbox custom-checkbox">
                <input id="checkbox-example1" name="checkbox" value="1" type="checkbox">
                <label class="choice" for="checkbox-example1"> Dodge Viper</label>
                <p class="help-block">Do not send new comment notifications.</p>
            </div>
            <div class="checkbox custom-checkbox">
                <input checked="checked" id="checkbox-example2" name="checkbox" value="2" type="checkbox">
                <label class="choice" for="checkbox-example2"> GM Corvette</label>
                <p class="help-block">Send new comment notifications only to post author.</p>
            </div>
            <div class="checkbox custom-checkbox">
                <input id="checkbox-example3" name="checkbox" value="3" type="checkbox">
                <label class="choice" for="checkbox-example3"> Porsche Boxter</label>
                <p class="help-block">Notify all users who have permissions to receive blog notifications.</p>
            </div>
        </div>

    </form>