Формы

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

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

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

Простой пример формы

Input

<input type="text" class="input" placeholder=".input">

<input type="text" class="input focus" placeholder=".input.focus">

<input type="text" class="input" readonly placeholder=".input:readonly">

<input type="text" class="input" disabled placeholder=".input:disabled">

Пример работы кода выше

Select

<select class="input">
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>

<select class="input focus">
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>

<select class="input" disabled>
    <option value="0">Item #1</option>
    <option value="1">Item #2</option>
</select>

Multiple

Класс .input поддерживает и мультиселекторы

<select class="input" multiple>
    <option value="1">Item #1</option>
    <option value="2">Item #2</option>
    <option value="3">Item #3</option>
    <option value="4" disabled>Item #4 (disabled)</option>
    <option value="5">Item #5</option>
    <option value="6">Item #6</option>
</select>

Пример работы селекторов

Textarea

<textarea class="input" placeholder=".input"></textarea>

Javascript

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

Для инициализации достаточно использовать следующий скрипт

<textarea class="input" id="textarea1" placeholder=".input"></textarea>

<script>new PipUI.Textarea('#textarea1');</script>

File

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

<label class="input-file btn"><input type="file">Выберите файл</label>

Checkbox

На данный момент флажки и переключатели плохо поддаются изменениям стандартных стилей браузеров, но мы так же нашли из этого выход.

<label><input type="checkbox" class="input"> Check it!</label>

Radio

<input type="radio" name="radio_example1" checked class="input">
<input type="radio" name="radio_example1" class="input">

Switch

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

<label class="input-switch"><input type="checkbox" class="input"></label>

Input Block

Блоки помогают использовать дополнительные возможности внутри общего контейнера.

В качестве контейнера необходимо создать блок с классом .input-block и поместить в него форму ввода.

<div class="input-block">
    <input type="text" class="input" placeholder=".input">
</div>

Label

Ярлыки позволяют добавить зависимое описание, при клике на которое, у формы появляется фокусировка.

<div class="input-block">
    <label for="input-example-1"></label>
    <input type="text" class="input" id="input-example-1" placeholder=".input">
</div>

Helper

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

<div class="input-block">
    <label for="input-example-1"></label>
    <input type="text" class="input" id="input-example-1" placeholder=".input">
    <div class="input-helper">Block Helper Here</div>
</div>

Prepend / Append

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

Блок .prepend выводит дополнительный контент перед полем ввода или селектором, а блок .append, соответственно, после. Оба блока являются не обязательными в контейнере и могут использоваться как отдельно, так и вместе.

<div class="input-block">
    <label for="input-block-example2">My Label</label>
    <div class="input-append-prepend">
        <div class="prepend">Hello</div>
        <input type="text" id="input-block-example2" placeholder=".input" class="input">
        <div class="append"><input type="checkbox" class="input"></div>
    </div>
    <div class="input-helper">Скрытая информация, появляющаяся при наведении</div>
</div>