Компонент Форма

Создание красивых форм с различными стилями. Модификаторы. Создание вертикальной и горизонтальной форм. Как вставить иконку в input. Использование, разметка и примеры.

Form: Создание

С чего начать

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

Класс Описание
.uk-input Добавьте этот класс к элементам <input>.
.uk-select Добавьте этот класс к элементам <select>.
.uk-textarea Добавьте этот класс к элементам <textarea>.
.uk-radio Добавьте этот класс к элементам <input type="radio"> для создания группы радиокнопок (переключателей).
.uk-checkbox Добавьте этот класс к элементам <input type="checkbox"> для создания флажков (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" name="f_name" 
                   placeholder="Текстовое поле" aria-label="Input" required>
        </div>

        <div class="uk-margin">
            <select class="uk-select" name="f_select" aria-label="Выбор опций">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" name="f_message" 
                      placeholder="Текстовая область" aria-label="Текстовая область" required></textarea>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-radio" type="radio" name="f_radio_1" checked> А</label>
            <label><input class="uk-radio" type="radio" name="f_radio_1"> Б</label>
        </div>

        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" name="f_checkbox_a" checked> А</label>
            <label><input class="uk-checkbox" type="checkbox" name="f_checkbox_b"> Б</label>
        </div>

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

        <div>
            <input class="uk-button uk-button-primary" type="submit" value="Отправить" formaction="URL">
        </div>

    </fieldset>
</form>
Заголовок формы 
<form class="uk-width-1-2@m uk-margin-auto" action="#" method="POST">
	<input type="hidden" name="f_title" value="Form">
	
    <fieldset class="uk-fieldset">
        <legend class="uk-legend uk-text-center">Заголовок формы</legend>

        <div class="uk-margin">
            <input class="uk-input" type="text" name="f_pib" placeholder="ФИО" aria-label="ФИО" title="ФИО" minlength="2" pattern="^[\p{L}\s\-]{2,}$" required>
        </div>
        <div class="uk-margin">
            <input class="uk-input" type="tel" name="f_tel" placeholder="Телефон" aria-label="Телефон" minlength="9" maxlength="20" required>
        </div>
        <div class="uk-margin">
            <input class="uk-input" type="email" name="f_email" placeholder="E-mail" aria-label="E-mail" minlength="6" maxlength="64" required>
        </div>
        <div class="uk-margin">
            <textarea class="uk-textarea" name="f_message" placeholder="Сообщение" aria-label="Сообщение" rows="4" minlength="24"></textarea>
        </div>
        
        <div class="uk-margin">
            <input class="uk-checkbox uk-disabled" type="checkbox" name="f_agree" id="form_agree" value="да" checked>
            <label class="uk-form-label uk-disabled" for="form_agree">Согласен на обработку данных</label>
        </div>
        
        <div class="uk-margin-top uk-text-center">
            <button type="submit" class="uk-button uk-button-default">Отправить</button>
        </div>
        
    </fieldset>
</form>

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

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

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

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

<fieldset class="uk-fieldset">
    <div class="uk-margin">
        <input class="uk-input uk-form-danger uk-form-width-medium" type="text" name="f_danger" placeholder="form-danger" value="form-danger" aria-label="Danger">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-success uk-form-width-medium" type="text" name="f_success" placeholder="form-success" value="form-success" aria-label="Success">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" name="f_disabled" placeholder="disabled" value="disabled" aria-label="Disabled" disabled>
    </div>
</fieldset>

Модификатор «Размер»

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

Класс Описание
.uk-form-large Добавьте этот класс, чтобы увеличить размер элемента.
.uk-form-small Добавьте этот класс, чтобы уменьшить размер элемента. 
<form name="f_size">
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-large" type="text" name="f_text_large" placeholder="Large">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" name="f_text_default" placeholder="По умолчанию">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium uk-form-small" type="text" name="f_text_small" placeholder="Small">
    </div>
</form>

Модификаторы «Ширина»

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

Класс Описание
.uk-form-width-large Будет установлена ширина 500px.
.uk-form-width-medium Будет установлена ширина 200px.
.uk-form-width-small Будет установлена ширина 130px.
.uk-form-width-xsmall Ширина элемента будет 40px. 
<form name="f_width">
    <div class="uk-margin">
        <input class="uk-input uk-form-width-large" type="text" name="f_text_Large" placeholder="Large">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" name="f_text_Medium" placeholder="Medium">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-small" type="text" name="f_text_Small" placeholder="Small">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-xsmall" type="text" name="f_text_XSmall" placeholder="XSmall">
    </div>
</form>

К элементам управления формы можно применять классы .uk-width-* из компонента Ширина. 

<form>
    <div class="uk-margin">
        <input class="uk-input uk-width-1-1" type="text" name="f_text_1-1" placeholder="uk-width-1-1">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-width-1-2" type="text" name="f_text_1-2" placeholder="uk-width-1-2">
    </div>
</form>

Модификатор «Blank»

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

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

Макет формы

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

HTML-элемент <label> представляет собой подпись к элементу пользовательского интерфейса. Элемент <label> связывает текст с определённым элементом формы.

Класс Описание
.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>
Radio

<form class="uk-form-stacked">
    <div class="uk-margin">
        <label class="uk-form-label" for="form-stacked-text">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">Select</label>
        <div class="uk-form-controls">
            <select class="uk-select" id="form-stacked-select">
                <option>Select Option 01</option>
                <option>Select Option 02</option>
            </select>
        </div>
    </div>
    <div class="uk-margin">
        <div class="uk-form-label">Radio</div>
        <div class="uk-form-controls">
            <label><input class="uk-radio" type="radio" name="radio1"> Radio Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Radio Option 02</label>
        </div>
    </div>
</form>

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

Для горизонтального отобржения подписей добавьте класс uk-form-horizontal к родительскому HTML-тегу <form>. Используйте класс uk-form-controls-text для лучшего выравнивания флажков (checkbox) и радиокнопок (переключателей) при использовании их с текстом в горизонтальном макете. 

<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">Text</label>
        <div class="uk-form-controls">
            <input class="uk-input" id="form-horizontal-text" type="text" placeholder="Какой-то текст&#8230;">
        </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>Option 01</option>
                <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"> Radio Option 01</label><br>
            <label><input class="uk-radio" type="radio" name="radio1"> Radio Option 02</label>
        </div>
    </div>
</form>

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

Вы можете использовать внутри формы иконки из компонента Векторные иконки.

Добавьте к элементу <span> класс .uk-form-icon. Сгруппируйте его с элементом <input>, добавив класс .uk-inline из компонента Utility в элемент контейнера вокруг обоих.

Иконка должна быть расположена первой в разметке.

По умолчанию иконочный значок будет размещен в левой части формы. Чтобы расположить иконку с правой стороны, добавьте класс .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" name="f_text_user" aria-label="Пользователь">
        </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" name="f_text_lock" aria-label="Текст">
        </div>
    </div>
</form>

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

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

<div class="uk-inline">
    <a class="uk-form-icon uk-form-icon-flip" href="" uk-icon="icon: user" aria-label="Открыть"></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" name="f_text_pencil" aria-label="Редактор">
        </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="url" name="f_text_link" aria-label="Ресурс">
        </div>
    </div>
    <div class="uk-margin">
        <div class="uk-inline">
            <a class="uk-form-icon" href="#" uk-icon="icon: image"></a>
            <input class="uk-input" type="text" name="f_text_image" aria-label="Название изображения">
        </div>
    </div>
</form>

Grid

Форма и сетка Grid

Используя UIkit, вы также можете использовать компоненты Grid и Width при построении макета формы. 

<form class="uk-grid-small" uk-grid>
    <div class="uk-width-1-1">
        <input class="uk-input" type="text" placeholder="100" name="f_text_100" aria-label="100">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" name="f_text_50" aria-label="50">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" name="f_text_25" aria-label="25">
    </div>
    <div class="uk-width-1-4@s">
        <input class="uk-input" type="text" placeholder="25" name="f_text_10" aria-label="10">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" name="f_text_20" aria-label="20">
    </div>
    <div class="uk-width-1-2@s">
        <input class="uk-input" type="text" placeholder="50" name="f_text_30" aria-label="30">
    </div>
</form>

Пользовательские элементы формы [input type="file"], [select]

Чтобы заменить элемент с атрибутом type="file" (выбор, загрузка файла) или HTML тэг <select> (содержит меню опций, список с одним или множественным выбором), собственным HTML-содержимым, таким как кнопка или текст, добавьте в элемент контейнера атрибут uk-form-custom.

Файл: Стилизация кнопки input type="file"

Используйте кнопку или текст в качестве выбора (загрузки файла).

<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-primary" 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="Выбрать файл" name="f_text_file" disabled>
        </div>
        <button class="uk-button uk-button-primary">Отправить</button>
    </div>
</form>

Заметка Состояние наведения и фокуса для uk-form-custom по умолчанию не стилизовано, но вы можете использовать для этого соседний родственный селектор.

Пользовательский тег select

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

<div uk-form-custom="target: true">
    <select>
        <option></option>
        <option></option>
    </select>
    <button type="button"></button>
</div>

Примеры

<form>
    <div class="uk-margin">
        <div uk-form-custom="target: true">
            <select name="f_select_1">
                <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 name="f_select_2">
                <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 name="f_select_3">
                <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>

Параметры для атрибута

При использовании компонента Form к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Вы можете добавить эту опцию к атрибуту uk-form-custom. Узнать больше.

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

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.formCustom(element, options);

Доступность

Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента формы.

Если нет элемента <label> связанного с элементом формы, задайте свойство aria-label для элемента управления веб-формы, чтобы описать его значение. 

<input class="uk-input" type="text" aria-label="…">