Форма

Легко создавать формы с разной разметкой и стилями, которые будут прекрасно выглядеть.

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

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

Пример

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

Разметки

<form class="uk-form"&GT;

    <fieldset data-uk-margin&GT;
        <legend&GT;...</legend&GT;
        <input type="text" placeholder=""&GT;
        <input type="password" placeholder=""&GT;
        <select&GT;
            <option&GT;...</option&GT;
            <option&GT;...</option&GT;
        </select&GT;
        <button class="uk-button"&GT;...</button&GT;
        <label&GT;<input type="checkbox"&GT; ...</label&GT;
    </fieldset&GT;

</form&GT;

Строк

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

Пример

Разметки

<form class="uk-form">
    <fieldset>
        <legend>...</legend>
        <div class="uk-form-row">...</div>
        <div class="uk-form-row">...</div>
    </fieldset>
</form>

Контрольные состояния

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

Инвалидов

Добавить 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-* классы Грид компонент для элементов управления формы. Это особенно полезно, если вы хотите, чтобы элементы управления форм продлить на всю ширину родительского контейнера.

Пример

Разметки

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

Форма бланк

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

Пример

Разметки

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

Текст справки

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

Пример

Разметки

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

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

Разметка модификаторов

Существует две разметки свободных модификаторов: .uk-form-stacked и .uk-form-horizontal. Оба требуют элементов управления формы обернув с .uk-form-row классом для того, чтобы сложить их. Метки нуждаются в .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> элемент. Это означает, если вы используете наборы полей, вы можете иметь различные формы, разметки за каждый набор полей.

Форма свалили

Добавить .uk-form-stacked класс для отображения меток на верхней части управления.

Пример

Формы горизонтальной

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

Пример

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

Если вы используете текст и чекбоксы или радиокнопки в форме элементы управления, просто добавьте .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">

    <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>

</form>

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

Это пример того, как добавить иконку от Компонента иконок к форме.

Пример

Разметки

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

Форма расширенного

Форма может быть расширена с помощью параметра Форма расширенного компонента стиль радио и чекбокс входов.