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