Формы

С помощью компонента Формы можно создавать красивые адаптивные формы.

Как использовать компонент Формы в Uikit 3

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

Класс Описание
.uk-input Добавьте этот класс для элемента <input>.
.uk-select Добавьте этот класс для элемента <select>.
.uk-textarea Добавьте этот класс для элемента <textarea>.
.uk-radio Добавьте этот класс для элемента <input type="radio">, чтобы стилизовать радио кнопку.
.uk-checkbox Добавьте этот класс для элемента <input type="checkbox">, чтобы стилизовать чекбоксы.
.uk-range Добавьте этот класс для элемента <input type="range">, чтобы стилизовать слайдер диапазона. 
<form>
    <select class="uk-select">
        <option></option>
        <option></option>
    </select>
    <textarea class="uk-textarea"></textarea>
    <input class="uk-radio" type="radio">
    <input class="uk-checkbox" type="checkbox">
    <input class="uk-range" type="range">
</form>

Добавьте класс .uk-fieldset к элементу <fieldset> и класс .uk-legend к элементу <legend>, чтобы задать набор полей и легенду формы.

  • Легенда 
  • <form>
    <fieldset class="uk-fieldset">

        <legend class="uk-legend">Легенда</legend>

        <div class="uk-margin">
            <input class="uk-input" type="text" placeholder="Input">
        </div>

        <div class="uk-margin">
            <select class="uk-select">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"></textarea>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-radio" type="radio" name="radio2" checked> A</label>
            <label><input class="uk-radio" type="radio" name="radio2"> B</label>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" checked> A</label>
            <label><input class="uk-checkbox" type="checkbox"> B</label>
        </div>

        <div class="uk-margin">
            <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
        </div>

    </fieldset>
</form>

Модификаторы состояния

Предоставьте пользователю информацию о состоянии элементов управления формы с помощью одного из следующих классов. Эти классы следует использовать для валидации форм UIkit.

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

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

  • <div class="uk-margin">
    <input class="uk-input uk-form-danger uk-form-width-medium" type="text" placeholder="form-danger" value="form-danger">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-success uk-form-width-medium" type="text" placeholder="form-success" value="form-success">
</div>

<div class="uk-margin">
    <input class="uk-input uk-form-width-medium" type="text" placeholder="disabled" value="disabled" disabled>
</div>

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

Добавьте один из классов к <input>, <select> или <textarea> для изменения его размера.

Класс Описание
.uk-form-large Этот класс увеличивает размер элемента.
.uk-form-small Этот класс уменьшает размер элемента . 
  • <form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="Большой">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Стандартный">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Маленький">
    </div>

</form>

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

Добавьте один из этих классов к эементу <input>, <select> или <textarea> для установки ширины.

Class Description
.uk-form-width-large Задает ширину 500px.
.uk-form-width-medium Задает ширину 200px.
.uk-form-width-small Задает ширину 130px.
.uk-form-width-xsmall Задает ширину 40px. 
  • <form>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-large" type="text" placeholder="Большой">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Средний">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-small" type="text" placeholder="Маленький">
    </div>

    <div class="uk-margin">
        <input class="uk-input uk-form-width-xsmall" type="text" placeholder="Очень маленький">
    </div>

</form>

Вы можете добавить классы семейства .uk-width-* из компонента Ширина для применения большего количества вариантов.

  • <form>
    <input class="uk-input uk-width-1-2" type="text" placeholder="uk-width-1-2">
</form>

Модификатор минимизации стилей

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

  • <form>
    <input class="uk-input uk-form-blank uk-form-width-medium" type="text" placeholder="Form blank">
</form>

Макет формы

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

Класс Описание
.uk-form-stacked Добавьте этот класс для отображения надписей над элементами управления.
.uk-form-horizontal Добавьте этот класс для отображения меток и элементов управления рядом.
.uk-form-label Добавьте этот класс для определения меток формы.
.uk-form-controls Добавьте этот класс для определения элементов управления формы. 
<form class="uk-form-stacked">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls">...</div>
    </div>
</form>
  • Радиокнопки

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

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">Текст</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Какой-то текст...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-select">Селект</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-stacked-select">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Радиокнопки</div>
        <div class="uk-form-controls">
            <label><input class="uk-radio" type="radio" name="radio1"> Опция 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Опция 02</label>
        </div>
    </div>

</form>

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

Используйте класс .uk-form-controls-text для качественного выравнивания флажков и переключателей при использовании их с текстом в горизонтальной компоновке.

<form class="uk-form-horizontal">
    <div>
        <label class="uk-form-label"></label>
        <div class="uk-form-controls">...</div>
    </div>
    <div>
        <div class="uk-form-label"></div>
        <div class="uk-form-controls uk-form-controls-text">...</div>
    </div>
</form>
  • Radio

  • <form class="uk-form-horizontal uk-margin-large">

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-text">Текст</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Какой-то текст...">
        </div>
    </div>

    <div class="uk-margin">
        <label class="uk-form-label" for="form-horizontal-select">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-horizontal-select">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls uk-form-controls-text">
            <label><input class="uk-radio" type="radio" name="radio1"> Опция 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Опция 02</label>
        </div>
    </div>

</form>

Формы и иконки

Вы можете использовать формы вместе с иконками из компонента Иконки. Добавьте класс .uk-form-icon к элементу <span>. Сгруппируйте их с элементами <input> и добавьте класс .uk-inline из компонента Utility component к родительскому контейнеру. Иконка должна стоять первой в разметке. По умолчанию иконка будет размещена в левой части формы. Чтобы изменить ее положение, задайте класс .uk-form-icon-flip.

<div class="uk-inline">
    <span class="uk-form-icon" uk-icon="icon: user"></span>
    <input class="uk-input">
</div>

  • <form>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon" uk-icon="icon: user"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>

Кликабельные иконки

Чтобы включить действие, например, открыть модальное окно, используйте элементы <a> или <button> и добавьте в них иконку.

<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user"></a>
    <input class="uk-input">
</div>

  • <form>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
            <input class="uk-input" type="text">
        </div>
    </div>

</form>

Формы и сетка

Вы можете использовать компоненты Сетка и Ширина для создания сложных макетов форм.

  • <form class="uk-grid-small" uk-grid>
    <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50">
    </div>
</form>

Пользовательская разметка

Чтобы заменить входные файлы или выбрать формы с вашим собственным содержимым HTML, например, кнопка или текст, добавьте атрибут uk-form-custom к родительскому элементу.

Файл

Используйте кнопку или текст в качестве элемента загрузки файла.

<div uk-form-custom>
    <input type="file">
    <button type="button"></button>
</div>
  • Это текст
    Загрузить 
  • <form>

    <div class="uk-margin">
        <div uk-form-custom>
            <input type="file">
            <button class="uk-button uk-button-default" type="button" tabindex="-1">Селект</button>
        </div>
    </div>

    <div class="uk-margin">
        <span class="uk-text-middle">Это текст</span>
        <div uk-form-custom>
            <input type="file">
            <span class="uk-link">Загрузить</span>
        </div>
    </div>

    <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
            <input type="file">
            <input class="uk-input uk-form-width-medium" type="text" placeholder="Выбрать файл" disabled>
        </div>
        <button class="uk-button uk-button-default">Отправить</button>
    </div>

</form>

Селекты

Используйте кнопку, текст или ссылку в качестве формы выбора. Задайте опцию target: SELECTOR к атрибуту uk-form-custom, чтобы выбрать, где должен отображаться select. target: true выберет соседний элемент в разметке.

<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>
  • Опция 01
    Опция 01 
  • <form>

    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select>
                <option value="1">Опция 01</option>
                <option value="2">Опция 02</option>
                <option value="3">Опция 03</option>
                <option value="4">Опция 04</option>
            </select>
            <span></span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:last-child">
            <select>
                <option value="1">Опция 01</option>
                <option value="2">Опция 02</option>
                <option value="3">Опция 03</option>
                <option value="4">Опция 04</option>
            </select>
            <span class="uk-link">
                <span uk-icon="icon: pencil"></span>
                <span></span>
            </span>
        </div>
    </div>

    <div class="uk-margin">
        <div uk-form-custom="target: > * > span:first-child">
            <select>
                <option value="">Выберите...</option>
                <option value="1">Опция 01</option>
                <option value="2">Опция 02</option>
                <option value="3">Опция 03</option>
                <option value="4">Опция 04</option>
            </select>
            <button class="uk-button uk-button-default" type="button" tabindex="-1">
                <span></span>
                <span uk-icon="icon: chevron-down"></span>
            </button>
        </div>
    </div>

</form>

Опции компонента

Вы можете добавлять следующие опции к атрибуту uk-form-custom. Подробнее об атрибутах

Опция Значение По умолчанию Описание
target CSS selector, Boolean false Значение цели для отображения селекта.

JavaScript

Подробнее о JavaScript компонентах.

Инициализация

UIkit.formCustom(element, options);