Поля форм

SIMAI Framework содержит поля, позволяющие получать информацию от пользователя.

Примеры отображения

Темное на светлом

Не активное поле
Наведение
Активное поле
Заполнено
Заблокировано
Проверка пройдена
Ошибка

Светлое на темном

Не активное поле
Наведение
Активное поле
Заполнено
Заблокировано
Проверка пройдена
Ошибка
<div class="sf-form sf-form-label">
    <input type="text" class="sf-form-control" id="field-1" />
    <label for="field-1">Введите ваш логин</label>
</div>

Размеры полей

<div class="sf-form sf-form-label mb-4">
    <input type="text" class="sf-form-control sf-form-control-lg" id="field-1-lg" />
    <label for="field-1-lg">Large input</label>
</div>
<div class="sf-form sf-form-label mb-4">
    <input type="text" class="sf-form-control" id="field-2-md">
    <label for="field-2-md">Medium input</label>
</div>
<div class="sf-form sf-form-label mb-4">
    <input type="text" class="sf-form-control sf-form-control-sm" id="field-3-sm">
    <label for="field-3-sm">Small input</label>
</div>

Поля с иконкой

<div class="sf-form sf-form-label">
    <i class="far fa-envelope prefix"></i>
    <input type="text" class="sf-form-control" id="field-1-icon">
    <label for="field-1-icon">Адрес электронной почты</label>
</div>

Указатели

<div class="sf-form sf-form-label">
    <input placeholder="Placeholder" type="text" class="sf-form-control" id="field-1-placeholder" />
    <label class="active" for="field-1-placeholder">Placeholder</label>
</div>

Макет формы

По умолчанию поле формы занимает 100% ширины доступного места и Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form groups

The .sf-form class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other element. 

<div class="sf-form sf-form-label mb-3">
    <input type="text" class="sf-form-control" id="field-1-group" placeholder="Example input">
    <label for="field-1-group" class="active">Example label</label>
</div>
<div class="sf-form sf-form-label">
    <input type="text" class="sf-form-control" id="field-2-group" placeholder="Another input">
    <label for="field-2-group" class="active">Another label</label>
</div>

Сетка формы

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. 

<form>
    <div class="row">
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="First name" />
            </div>
        </div>
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="Last name" />
            </div>
        </div>
    </div>
</form>

Ряд формы

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. 

<form>
    <div class="form-row">
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="First name">
            </div>
        </div>
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="Last name">
            </div>
        </div>
    </div>
</form>

More complex layouts can also be created with the grid system.

<form>
    <div class="form-row">
        <div class="col-md-6">
            <div class="sf-form sf-form-label mb-3">
                <input type="email" class="sf-form-control" id="field-1-row" placeholder="Email">
                <label for="field-1-row" class="active">Email</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="sf-form sf-form-label mb-3">
                <input type="password" class="sf-form-control" id="field-2-row" placeholder="Password">
                <label for="field-2-row" class="active">Password</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="sf-form sf-form-label mb-3">
                <input type="text" class="sf-form-control" id="field-3-row" placeholder="1234 Main St">
                <label for="field-3-row" class="active">Address</label>
            </div>
        </div>
        <div class="col-md-12">
            <div class="sf-form sf-form-label mb-3">
                <input type="text" class="sf-form-control" id="field-4-row" placeholder="Apartment, studio, or floor">
                <label for="field-4-row" class="active">Address 2</label>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-6">
            <div class="sf-form sf-form-label">
                <input type="text" class="sf-form-control" id="field-5-row" placeholder="New York City">
                <label for="field-5-row" class="active">City</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="sf-form sf-form-label mb-3">
                <input type="text" class="sf-form-control" id="field-6-row" placeholder="11206-1117">
                <label for="field-6-row" class="active">Zip</label>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Горизонтальные формы

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline. 

<form>
    <div class="row">
        <label for="field-8-row" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <div class="sf-form mb-3">
                <input type="email" class="sf-form-control" id="field-8-row" placeholder="Email">
            </div>
        </div>
    </div>
    <div class="row">
        <label for="field-9-row" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <div class="sf-form mb-3">
                <input type="password" class="sf-form-control" id="field-9-row" placeholder="Password">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Размер колонок

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7. 

<form>
    <div class="form-row">
        <div class="col-7">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="City">
            </div>
        </div>
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="State">
            </div>
        </div>
        <div class="col">
            <div class="sf-form">
                <input type="text" class="sf-form-control" placeholder="Zip">
            </div>
        </div>
    </div>
</form>

Текстовое поле

<div class="row">
    <div class="col-md-6">
        <div class="sf-form sf-form-label">
            <textarea type="text" id="field-1-textarea" class="sf-form-control" rows="3"></textarea>
            <label for="field-1-textarea">Basic textarea</label>
        </div>
    </div>
    <div class="col-md-6">
        <div class="sf-form sf-form-label">
            <i class="fa fa-pencil prefix"></i>
            <textarea type="text" id="field-2-textarea" class="sf-form-control" rows="3"></textarea>
            <label for="field-2-textarea">Icon Prefix</label>
        </div>
    </div>
</div>

A fully material design experience requires potential for textarea to auto-resize, depending on the amount of content within. It is achieved using .md-textarea-auto. 

<div class="sf-form sf-form-label">
    <textarea type="text" id="field-3-textarea" class="sf-form-control" rows="2"></textarea>
    <label for="field-3-textarea">Auto-resizing textarea</label>
</div>

Подсказки

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.

Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<div class="sf-form sf-form-label mt-0">
    <input type="password" id="field-1-small" class="sf-form-control" aria-describedby="field-1-small-help">
    <label for="inputPassword5MD">Password</label>
    <small id="field-1-small-help" class="text-muted">
        Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters,
        or emoji.
    </small>
</div>

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

Must be 8-20 characters long. 
<div class="sf-form sf-form-label mt-0">
    <input type="password" id="field-1-muted" class="sf-form-control" aria-describedby="field-1-muted-help">
    <label for="field-1-muted">Password</label>
    <small id="field-1-muted-help" class="text-muted">
        Must be 8-20 characters long.
    </small>
</div>

Цветовая схема

Светлая тема

Темная тема

<div class="sf-form sf-form-label form-default mb-3">
    <input type="text" id="field-2-color" class="sf-form-control">
    <label for="field-2-color" >Цвет Default</label>
</div>
<div class="sf-form sf-form-label form-primary  mb-3">
    <input type="text" id="field-3-color" class="sf-form-control">
    <label for="field-3-color" >Цвет Primary</label>
</div>
<div class="sf-form sf-form-label form-secondary  mb-3">
    <input type="text" id="field-1-color" class="sf-form-control">
    <label for="field-1-color" >Цвет Secondary</label>
</div>
<div class="sf-form sf-form-label form-success mb-3">
    <input type="text" id="field-4-color" class="sf-form-control">
    <label for="field-4-color" >Цвет Success</label>
</div>
<div class="sf-form sf-form-label form-info mb-3">
    <input type="text" id="field-5-color" class="sf-form-control">
    <label for="field-5-color" >Цвет Info</label>
</div>
<div class="sf-form sf-form-label form-warning mb-3">
    <input type="text" id="field-6-color" class="sf-form-control">
    <label for="field-6-color" >Цвет Warning</label>
</div>
<div class="sf-form sf-form-label form-danger mb-3">
    <input type="text" id="field-7-color" class="sf-form-control">
    <label for="field-7-color" >Цвет Danger</label>
</div>

Счетчик символов

Use a character counter in fields where a character restriction is in place.

Input field

<div class="sf-form sf-form-label">
    <input id="field-1-counter" type="text" length="10" class="sf-form-control">
    <label for="field-1-counter">Input text</label>
</div>

Для текстового поля

<div class="sf-form sf-form-label">
    <textarea id="textarea-1-counter" class="sf-form-control" length="120" rows="3"></textarea>
    <label for="textarea-1-counter">Type your text</label>
</div>