soc-core/src/html/elements/components_forms.html

Core sass framework based on Bootstrap

<a name="socforms"></a>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="page-header">
                <h1>Soc Forms <small>Responsive form styling
                    <span class="label label-default">Wrap</span>
                </small></h1>
            </div>
        </div>

        <div class="col-xs-12">
            <p>Soc Forms are built upon the Bootstrap form style. The 'soc-form' is simplified however, in stead of using different
                bootstrap classes to style your form, only a single 'soc-form' class must be added to the form element. This
                will create a horizontal form on large screens and change itself to a vertical one on smaller devices.</p>
            <p>Guidelines for implementation</p>
            <ul>
                <li>Wrap entire form in a form element with the 'soc-form' class set</li>
                <li>Wrap label and its corresponding input element in a div</li>
                <li>Wrap the input element in a div as well</li>
                <li>Add one or more buttons at the end of the form</li>
                <li>It is recommended to always combine inputs with labels because screen readers might have trouble with the
                    form if they are omitted
                </li>
                <li>Don't apply css classes to any of the elements within the form</li>
            </ul>
            <p>Style options are available to change details of the form. Use the following classes next to 'soc-form' to change
                the form:</p>
            <ul>
                <li>'inline': Creates an inline form in which elements float</li>
                <li>'compact': Uses narrower elements (cannot be used together with inline)</li>
                <li>'btn-left': Places the buttons on the left hand side</li>
                <li>'hidden-labels': Removes the labels from screen but keeps them for screenreaders</li>
                <li>'vertical': Skips the responsive part and goes straight to the vertical form layout</li>
            </ul>
        </div>

        <div class="col-sm-12">
            <h3>Regular form</h3>
            <form action="" class="soc-form">
                <div>
                    <label for="i1">Label 1</label>
                    <div><input type="text" id="i1" placeholder="item 1"></div>
                </div>
                <div>
                    <label for="i2">Longer labels will wrap when they can't fit the page</label>
                    <div><input type="text" id="i2" placeholder="item 2"></div>
                </div>
                <div>
                    <label for="i3">Label 3</label>
                    <div><input type="text" id="i3" placeholder="item 3"></div>
                </div>
                <div>
                    <label for="i4">Label 4</label>
                    <div><input type="text" id="i4" placeholder="item 4"></div>
                </div>
                <button class="btn-danger">Cancel</button>
                <button type="submit">Save</button>
            </form>
        </div>

        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>form.soc-form>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}</code></pre>
            </span></div>
        </div>

        <div class="col-sm-12">
            <h3>Inline form with hidden labels</h3>
            <form action="" class="soc-form inline hidden-labels">
                <div>
                    <label for="i1">Label 1</label>
                    <div><input type="text" id="i1" placeholder="item 1"></div>
                </div>
                <div>
                    <label for="i2">Label 2</label>
                    <div><input type="text" id="i2" placeholder="item 2"></div>
                </div>
                <div>
                    <label for="i3">Label 3</label>
                    <div><input type="text" id="i3" placeholder="item 3"></div>
                </div>
                <div>
                    <label for="i4">Label 4</label>
                    <div><input type="text" id="i4" placeholder="item 4"></div>
                </div>
                <button type="submit">Save</button>
            </form>
        </div>

        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>form.soc-form.inline.hidden-labels>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}</code></pre>
            </span></div>
        </div>

        <div class="col-sm-12">
            <h3>Compact form with buttons on the left</h3>
            <form class="soc-form compact btn-left">
                <div>
                    <label for="i1">Label 1</label>
                    <div><input type="text" id="i1" placeholder="item 1"></div>
                </div>
                <div>
                    <label for="i2">Label 2</label>
                    <div><input type="text" id="i2" placeholder="item 2"></div>
                </div>
                <div>
                    <label for="i3">Label 3</label>
                    <div><input type="text" id="i3" placeholder="item 3"></div>
                </div>
                <div>
                    <label for="i4">Label 4</label>
                    <div><input type="text" id="i4" placeholder="item 4"></div>
                </div>
                <button type="submit">Save</button>
                <button class="btn-danger">Cancel</button>
            </form>
        </div>

        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>form.soc-form.compact.btn-left>(div>(label[for="i$"]{Label $}+div>input#i$[type="text" placeholder="item $"]))*4+button[type="submit"]{Save}+button.btn-danger{Cancel}</code></pre>
            </span></div>
        </div>

        <div class="col-sm-12">
            <h3>Vertical Form with different elements</h3>
            <form action="" class="soc-form vertical">
                <div>
                    <label for="text">Text</label>
                    <div><input type="text" id="text" placeholder="item 3"></div>
                </div>
                <div>
                    <label for="number">Numbers</label>
                    <div><input type="number" id="number"></div>
                </div>
                <div>
                    <label for="cb">Checkbox</label>
                    <div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="1" />
                                Check 1
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="2" />
                                Check 2
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="3" />
                                Check 3
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <label for="cb">Checkbox inline</label>
                    <div>
                        <div class="checkbox-inline">
                            <label>
                                <input type="checkbox" value="1" />
                                Check 1
                            </label>
                        </div>
                        <div class="checkbox-inline">
                            <label>
                                <input type="checkbox" value="2" />
                                Check 2
                            </label>
                        </div>
                        <div class="checkbox-inline">
                            <label>
                                <input type="checkbox" value="3" />
                                Check 3
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <label for="cb">Radiobutton</label>
                    <div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="alternateRadios" id="radioOGM" value="1" >
                                Radio 1
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="alternateRadios" id="radioOGM" value="2" checked>
                                Radio 2
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <label for="cb">Radiobutton inline</label>
                    <div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio" name="inlineradio" id="radioOGM" value="3" checked>
                                Radio 3
                            </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio" name="inlineradio" id="radioOGM" value="4" checked>
                                Radio 4
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <label for="dropdown">Dropdown</label>
                    <div><select name="" id="dropdown">
                    <option value="">option 1</option>
                    <option value="">option 2</option>
                    <option value="">option 3</option>
                    <option value="">option 4</option>
                    <option value="">option 5</option>
                    <option value="">option 6</option>
                    <option value="">option 7</option>
                    <option value="">option 8</option>
                    <option value="">option 9</option>
                    <option value="">option 10</option>
                </select></div>
                </div>
                <div>
                    <label for="static">Static</label>
                    <div>
                        <p class="form-control-static" id="static">This is static</p>
                    </div>
                </div>
                <button type="submit">Save</button>
            </form>
        </div>
    </div>
</div>