Компонент Форма 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>
-
-
<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>
-
-
<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="Какой-то текст…"> </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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.formCustom(element, options);
Доступность
Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента формы.
Если нет элемента <label>
связанного с элементом формы,
задайте свойство aria-label
для элемента управления веб-формы,
чтобы описать его значение.
<input class="uk-input" type="text" aria-label="…">