Компонент Форма 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" 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="…">