Формы и компоненты форм

Формы в наше время являются неотъемлемой частью сайта, где есть какие-либо поля ввода. PipUI имеет в себе компонент быстрой стилизации всех существующих элементов форм и даже больше.

Авторизация

Имя пользователя

Данное поле является обязательным

Пароль

Данное поле является обязательным

Запомнить меня

Забыли пароль?

HTML

<div class="w-50 mx-auto window breakpoint-768-i"> <div class="text-center"><h4>Авторизация</h4></div> <div class="input-block pt-20"> <label for="example-form-1">Имя пользователя</label> <input type="text" placeholder="Введите имя пользователя" id="example-form-1" required> <div class="input-helper">Данное поле является обязательным</div> </div> <div class="input-block"> <label for="example-form-2">Пароль</label> <input type="password" placeholder="Введите пароль" id="example-form-2" required> <div class="input-helper">Данное поле является обязательным</div> </div> <div class="grid columns-2 gap-20"> <div> <label><input type="checkbox"> Запомнить меня</label> </div> <div class="text-right"> <a href="#">Забыли пароль?</a> </div> </div> <div class="pt-20 text-center"> <button class="btn">Авторизоваться</button> </div> </div>

Для работы простейших полей ввода не потребуется вводить дополнительные классы или иные атрибуты. Стилизация сработает автоматически по умолчанию для всех тегов input, textarea, select

HTML

HTML

HTML

HTML

<select> <option>Simple select</option> <option>Option #1</option> <option>Option #2</option> </select>

HTML

Checkbox Radio

HTML

<label><input type="checkbox"> Checkbox</label> <label><input type="radio"> Radio</label>

Вы так же можете использовать и стилизованные элементы checkbox и radio, как это представлено ниже

HTML

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

Имя пользователя

HTML

<div class="input-block"> <label for="example-form-3">Имя пользователя</label> <input type="text" id="example-form-3" placeholder="Имя пользователя"> </div>

Класс .input-helper внутри блока .input-block создает скрытый блок информации, который появляется при наведении на .input-block

Имя пользователя

Скрытая информация, появляющаяся при наведении

HTML

<div class="input-block"> <label for="example-form-3">Имя пользователя</label> <input type="text" id="example-form-3" placeholder="Имя пользователя"> <div class="input-helper">Скрытая информация, появляющаяся при наведении</div> </div>

Выберите файл

HTML

<div class="input-block"> <label for="example-form-5">Выберите файл</label> <input type="file" id="example-form-5"> </div>

До и после формы ввода, можно добавить дополнительные компоненты, например, иконку или checkbox. Для этого необходимо обернуть поле ввода в класс .input-append, для добавления компонента после формы или .input-prepend, для добавления перед формой. Данные классы можно использовать как отдельно, так и вместе. Для определения самого блока компонента, используйте классы .append и .prepend соответствующе рядом с полем ввода

Подтвердите, что Вы не робот

HTML

<div class="input-block"> <label for="example-form-4">Подтвердите, что Вы не робот</label> <div class="input-append input-prepend"> <input type="text" id="example-form-4" placeholder="Введите ДА и отметьте галочку"> <div class="prepend"><i class="fa-regular fa-user"></i></div> <div class="append"><input type="checkbox"></div> </div> </div>

Форма выбора файла так же иожет быть стилизована стандартными средствами CSS, посредством помещения самого поля выбора файла внутрь блока с классом .input-block-file. Всё остальное его содержимое будет отображаться как обычно

Выбрать файл

HTML

<label class="input-block-file"> <input type="file"> <span class="btn"><i class="fa-regular fa-upload"></i> Выбрать файл</span> </label>

Помимо всего прочего, Вы можете обернуть форму типа textarea в класс .textarea для поддержки пронумерованной формы и некоторых особенностей

HTML