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

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

Создание

С чего начать

Добавьте один из следующих классов, чтобы сформировать элементы управления формы внутри элемента <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" placeholder="Input" aria-label="Input">
        </div>
        <div class="uk-margin">
            <select class="uk-select" aria-label="Select">
                <option>Опция 01</option>
                <option>Опция 02</option>
            </select>
        </div>
        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea" aria-label="Текстовая область"></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> А</label>
            <label><input class="uk-radio" type="radio" name="radio2"> Б</label>
        </div>
        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label><input class="uk-checkbox" type="checkbox" checked> А</label>
            <label><input class="uk-checkbox" type="checkbox"> Б</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>
    </fieldset>
</form>
  • Заголовок формы
    Согласен на обработку данных 
  • <form class="form_1 uk-width-1-2@m uk-margin-auto" action="" method="POST">
	<fieldset class="uk-fieldset">
		<legend class="uk-legend uk-text-center">Заголовок формы</legend>

		<input type="hidden" name="Форма" value="1">

		<div class="uk-margin">
			<input class="uk-input" name="Имя" type="text" placeholder="Имя" required>
		</div>
		<div class="uk-margin">
			<input class="uk-input" name="Телефон" type="tel" placeholder="Телефон" minlength="9" maxlength="16" required>
		</div>
		<div class="uk-margin">
			<input class="uk-input" name="E-mail" type="email" placeholder="E-mail" required>
		</div>
		<div class="uk-margin">
			<textarea class="uk-textarea" name="Сообщение" placeholder="Сообщение" rows="4"></textarea>
		</div>
		<div class="uk-margin">
			<input class="uk-checkbox uk-disabled" type="checkbox" checked value="да"> Согласен на обработку данных
		</div>
		<div class="uk-margin uk-text-center">
			<button type="submit" class="uk-button uk-button-default">Отправить</button>
		</div>
	</fieldset>
</form>

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

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

Класс Описание
.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="Large">
    </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="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>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-large" type="text" placeholder="Large">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-medium" type="text" placeholder="Medium">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-small" type="text" placeholder="Small">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-form-width-xsmall" type="text" placeholder="XSmall">
    </div>
</form>

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

  • <form>
    <div class="uk-margin">
        <input class="uk-input uk-width-1-1" type="text" placeholder="uk-width-1-1">
    </div>
    <div class="uk-margin">
        <input class="uk-input uk-width-1-2" type="text" 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" 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">
        </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" 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">
        </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>
    <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">
        </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">
    </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>

Пользовательские элементы формы [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="Выбрать файл" 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>
                <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>

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

При использовании компонента 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="…">