Компонент Форма : 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"> </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> А</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"> </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>
Макет формы
Элемент <label>
представляет собой подпись к элементу пользовательского интерфейса. Элемент <label>
связывает текст с определённым элементом формы.
Определите подпись к элементу и элементы управления и примените сложенный или горизонтальный макет к элементам формы. Модификаторы макета могут быть добавлены к любому родительскому элементу, например к элементу <fieldset>
. Это позволяет иметь разные макеты форм для каждого набора полей.
Класс | Описание |
---|---|
.uk-form-stacked |
Добавьте этот класс для отображения подписей сверху элементов управления. |
.uk-form-horizontal |
Добавьте этот класс для отображения подписей и элементов управления рядом. |
.uk-form-label |
Add this class to define form labels. |
.uk-form-controls |
Add this class to define 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-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"></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
Используя UIkit 3, вы также можете использовать компоненты 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>
Пользовательские элементы формы
Чтобы заменить выбор / загрузку файла (file
) или список с одним или множественным выбором (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>
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>
Опции компонента
Вы можете добавить эту опцию к атрибуту uk-form-custom
. Узнать больше.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
target |
CSS selector, Boolean | false | Значение отображаемой цели. |
JavaScript
Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.
Инициализация
UIkit.formCustom(element, options);