Форма

Формы. Создавайте красивые формы с различными стилями и макетами.

Использование

Чтобы применить компонент Form, добавьте к элементу формы класс .uk-form.
Элементы управления формой расположены ниже.

Пример

Форма

Примечание В этом примере использовалась кнопка из компонента Button. Чтобы добавить верхний отступ для элементов формы, когда они "укладываются" в меньшие области просмотра, добавьте атрибут data-uk-margin из компонента Utility в родительский элемент.

Разметка

<form class="uk-form">

    <fieldset data-uk-margin>
        <legend>...</legend>
        <input type="text" placeholder="Текст">
        <input type="password" placeholder="Пароль">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
        <button class="uk-button">...</button>
        <label><input type="checkbox"> Флажок</label>
    </fieldset>

</form>

Rows

Добавьте класс .uk-form-row к элементу <div>, чтобы сложить элементы управления формы.

Пример

Заголовок группы..

Разметка

<form class="uk-form">
    <fieldset>
    <legend>...</legend>
    <div class="uk-form-row">
        <input type="text" placeholder="Текстовое поле">
    </div>
    <div class="uk-form-row">
        ...
    </div>
    </fieldset>
</form>

Control states

Предоставьте пользователю основную информацию через состояния обратной связи на элементах управления формы.

Disabled

Добавьте атрибут disabled в элемент управления формы, и он будет отключен.

Пример

Разметка

<input type="text" placeholder="" disabled>

Валидация состояния

Добавьте класс .uk-form-danger (сообщение об ошибке) или .uk-form-success (успешное уведомление) к элементу управления формы, чтобы уведомить пользователя о том, проверено ли значение.

Пример

Разметка

<input type="text" placeholder="" class="uk-form-danger">
<input type="text" placeholder="" class="uk-form-success">

Модификаторы управления

Модификаторы размера

Добавьте класс .uk-form-large или .uk-form-small к элементу <input>, <select> или <textarea>, чтобы сделать его больше или меньше.

Пример

Разметка

<input type="text" placeholder="" class="uk-form-large">
<input type="text" placeholder="" class="uk-form-small">

Модификаторы ширины

Добавьте класс .uk-form-width-large, .uk-form-width-medium, .uk-form-width-small или .uk-form-width-mini к элементу <input>, <select> или <textarea> для регулировки его ширины.

Пример

Разметка

<input type="text" placeholder="" class="uk-form-width-large">
<input type="text" placeholder="" class="uk-form-width-medium">
<input type="text" placeholder="" class="uk-form-width-small">
<input type="text" placeholder="" class="uk-form-width-mini">

Вы также можете применить классы .uk-width-* из компонента Grid к элементам управления формы. Это особенно полезно, если вы хотите, чтобы элементы формы расширялись на всю ширину родительского контейнера.

Пример

Разметка

<input type="text" placeholder="" class="uk-width-1-1">
<input type="text" placeholder="" class="uk-width-1-2">
<input type="text" placeholder="" class="uk-width-1-3">

Пустая и чистая форма

Добавьте класс .uk-form-blank , чтобы минимизировать стилизацию элементов управления формой.

Пример

Разметка

<input type="text" placeholder="Текстовое поле" class="uk-form-blank">

Подсказывающий текст справки

Используйте класс .uk-form-help-inline или .uk-form-help-block, чтобы добавить встроенный или блочный текст справки для элементов управления.

Пример

Класс .uk-form-help-inline создает интервал слева.

Класс .uk-form-help-block с подсказкой.

Класс .uk-form-help-block создает соответствующий пункт.

Разметка

<div class="uk-form-row">
    <input type="text" placeholder=""> 
    <span class="uk-form-help-inline">...</span>
</div>

<div class="uk-form-row">
    <input type="text" placeholder=""> 
    <p class="uk-form-help-block"><small>...</small></p>
</div>

<div class="uk-form-row">
    <textarea cols="" rows="" placeholder="">...</textarea>
    <p class="uk-form-help-block">...</p>
</div>

Модификаторы макета

В компоненте Form доступны два модификатора макета:

Оба модификатора требуют, чтобы элементы управления формы были обернуты классом .uk-form-row , чтобы сложить их. <label>`ы нуждаются в классе .uk-form-label, а сами элементы управления должны быть обернуты в класс .uk-form-controls.

Разметка

<form class="uk-form uk-form-stacked">
    <div class="uk-form-row">
        <label class="uk-form-label" for="">...</label>
        <div class="uk-form-controls">...</div>
    </div>
</form>

Примечание Модификаторы макета также могут быть добавлены к элементу <fieldset>. Это означает, что если вы используете <fieldset>`ы, вы можете иметь разные макеты форм для каждого отдельного <fieldset>`а.

Форма - эффект «Сложены»

Добавьте класс .uk-form-stacked для отображения <label>`ов поверх элементов управления.

Пример

Радиокнопка input

Флажок input

Смешанные элементы управления

Разметка (расширенный вариант)

<form class="uk-form uk-form-stacked">

    <div class="uk-form-row">    <!-- Text input -->
        <label class="uk-form-label" for="form-s-it">Текстовое поле</label>
        <div class="uk-form-controls">
            <input type="text" id="form-s-it" placeholder="Ввод текста">
        </div>
    </div>
    <div class="uk-form-row">
        <label class="uk-form-label" for="form-s-ip">Поле для пароля</label>
        <div class="uk-form-controls">
            <input type="password" id="form-s-ip" placeholder="Пароль">
        </div>
    </div>

    <div class="uk-form-row">    <!-- Select field -->
        <label class="uk-form-label" for="form-s-s">Выберите</label>
        <div class="uk-form-controls">
            <select id="form-s-s">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Textarea -->
        <label class="uk-form-label" for="form-s-t">Многострочное текстовое поле</label>
        <div class="uk-form-controls">
            <textarea id="form-s-t" cols="30" rows="5" placeholder="Текстовое поле Textarea"></textarea>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Radio input -->
        <span class="uk-form-label">Радиокнопка input</span>
        <div class="uk-form-controls">
            <input type="radio" id="form-s-r" name="radio"> <label for="form-s-r">Radio input</label><br>
            <input type="radio" id="form-s-r1" name="radio"> <label for="form-s-r1">1</label>
            <label><input type="radio" name="radio"> 2</label>
            <label><input type="radio" name="radio"> 3</label>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Checkbox input -->
        <span class="uk-form-label">Флажок input</span>
        <div class="uk-form-controls">
            <input type="checkbox" id="form-s-c"> <label for="form-s-c">Checkbox input</label><br>
            <input type="checkbox" id="form-s-c1"> <label for="form-s-c1">1</label>
            <label><input type="checkbox"> 2</label>
            <label><input type="checkbox"> 3</label>
        </div>
    </div>
    
    <div class="uk-form-row">    <!-- Mixed controls -->
        <span class="uk-form-label">Смешанные элементы управления</span>
        <div class="uk-form-controls">
            <input type="checkbox" id="form-s-mix1"> <label for="form-s-mix1">Checkbox input</label>
            <input type="number" id="form-s-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-s-mix2">Number input</label>
            <select id="form-s-mix3" class="uk-form-small">
                <option selected="selected">Option 01</option>
                <option>Option 02</option>
            </select>
            <label for="form-s-mix3">Select field</label>
        </div>
    </div>

</form>

Форма - эффект «Горизонталь»

Добавьте класс .uk-form-horizontal для отображения <label>`ов и элементов управления рядом.

Пример

Радиокнопка input

Флажок input

Смешанные элементы управления

Разметка (расширенный вариант)

<form class="uk-form uk-form-horizontal">

    <div class="uk-form-row">    <!-- Text input -->
        <label class="uk-form-label" for="form-s-it">Текстовое поле</label>
        <div class="uk-form-controls">
            <input type="text" id="form-s-it" placeholder="Ввод текста">
        </div>
    </div>
    <div class="uk-form-row">
        <label class="uk-form-label" for="form-s-ip">Поле для пароля</label>
        <div class="uk-form-controls">
            <input type="password" id="form-s-ip" placeholder="Пароль">
        </div>
    </div>

    <div class="uk-form-row">    <!-- Select field -->
        <label class="uk-form-label" for="form-s-s">Выберите</label>
        <div class="uk-form-controls">
            <select id="form-s-s">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Textarea -->
        <label class="uk-form-label" for="form-s-t">Многострочное текстовое поле</label>
        <div class="uk-form-controls">
            <textarea id="form-s-t" cols="30" rows="5" placeholder="Текстовое поле Textarea"></textarea>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Radio input -->
        <span class="uk-form-label">Радиокнопка input</span>
        <div class="uk-form-controls">
            <input type="radio" id="form-s-r" name="radio"> <label for="form-s-r">Radio input</label><br>
            <input type="radio" id="form-s-r1" name="radio"> <label for="form-s-r1">1</label>
            <label><input type="radio" name="radio"> 2</label>
            <label><input type="radio" name="radio"> 3</label>
        </div>
    </div>

    <div class="uk-form-row">    <!-- Checkbox input -->
        <span class="uk-form-label">Флажок input</span>
        <div class="uk-form-controls">
            <input type="checkbox" id="form-s-c"> <label for="form-s-c">Checkbox input</label><br>
            <input type="checkbox" id="form-s-c1"> <label for="form-s-c1">1</label>
            <label><input type="checkbox"> 2</label>
            <label><input type="checkbox"> 3</label>
        </div>
    </div>
    
    <div class="uk-form-row">    <!-- Mixed controls -->
        <span class="uk-form-label">Смешанные элементы управления</span>
        <div class="uk-form-controls">
            <input type="checkbox" id="form-s-mix1"> <label for="form-s-mix1">Checkbox input</label>
            <input type="number" id="form-s-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-s-mix2">Number input</label>
            <select id="form-s-mix3" class="uk-form-small">
                <option selected="selected">Option 01</option>
                <option>Option 02</option>
            </select>
            <label for="form-s-mix3">Select field</label>
        </div>
    </div>

</form>

Текст в элементах управления формы

Если вы используете текст и флажки или радиокнопки в элементах управления формы, добавьте класс .uk-form-controls-text для правильного выравнивания текста.

Разметка

<div class="uk-form-controls uk-form-controls-text">
    ...
</div>

Вертикальное расстояние в элементах управления формы

Если вы создаете абзацы в элементах управления формы, добавьте класс .uk-form-controls-condensed, чтобы уменьшить расстояние.

Пример

Смешанные элементы управления

Разметка

<div class="uk-form-controls uk-form-controls-text">
    <p class="uk-form-controls-condensed">...</p>
    <p class="uk-form-controls-condensed">...</p>
</div>

Разметка (расширенный вариант)

<form class="uk-form uk-form-stacked">

    <div class="uk-form-row">
        <span class="uk-form-label">Смешанные элементы управления</span>
        <div class="uk-form-controls uk-form-controls-text">

            <p class="uk-form-controls-condensed">
                <input type="checkbox" id="form-h-mix1"> <label for="form-h-mix1">Checkbox input</label>
                <input type="number" id="form-h-mix2" min="0" max="10" value="5" class="uk-form-width-mini uk-form-small"> <label for="form-h-mix2">Number input</label>
                <select id="form-h-mix3" class="uk-form-small">
                    <option selected="selected">Option 01</option>
                    <option>Option 02</option>
                </select>
                <label for="form-h-mix3">Select field</label>
            </p>

            <p class="uk-form-controls-condensed">
               ...
            </p>

        </div>
    </div>

</form>

Form и Grid

Это пример того, как использовать формы с компонентом Grid.

Пример

Разметка

<form class="uk-form">

    <div class="uk-grid">
        <div class="uk-width-1-2">
            <input type="text" placeholder="" class="uk-width-1-1">
        </div>
        <div class="uk-width-1-4">
            <input type="text" placeholder="" class="uk-width-1-1">
        </div>
        <div class="uk-width-1-4">
            <input type="text" placeholder="" class="uk-width-1-1">
        </div>
    </div>
    
    <div class="uk-grid" data-uk-grid-margin>
        <div class="uk-width-medium-1-2">
            <input type="text" placeholder="" class="uk-width-1-1">
        </div>
        <div class="uk-width-medium-1-2">
            <input type="text" placeholder="" class="uk-width-1-1">
        </div>
    </div>

</form>

Форма и иконки

Вы также можете использовать в формах иконки из компонента Icon. Это пример того, как добавить иконку/значек.

Пример

Разметка

<div class="uk-form-icon">
    <i class="uk-icon-calendar"></i>
    <input type="text">
</div>

Пример с поиском

Разметка

<form class="uk-form" data-uk-margin>
    <div class="uk-form-icon uk-form-icon-flip">
        <i class="uk-icon-search"></i>
        <input type="text" placeholder="Поиск по сайту">
    </div>
</form>

Расширенная форма

Форма легко может быть расширена с помощью компонента Form advanced для стилизации радиокнопок и флажков (checkbox).