Особистий кабінет OneBox CRM
Зв'язатися з нами
+380673125776
+30932177090
+380995256783
Кабінет клієнтаБаза знань › Перегляд бази знань

Основные элементы форм

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

Поля ввода

Самым распространенным элементом является поле ввода. Поля ввода отличаются по типу и внешнему виду:
  • input[type="text"] - текстовое поле
  • input[type="password"] - поле с паролем
  • input[type="mail"] - поле с email адресом
  • input[type="tel"] - поле с номером телефона
  • ...
Крайне рекомендуется использовать поля ввода по их назначению.

Для отображения текстовых полей с датой необходимо использовать добавочный класс
.js-date
или
.js-datetime
для вывода даты и времени. При нажатии на данное поле будет появляться окно jquery ui datepicker.


<input type="text" name="" value="" placeholder="Text example">
<input class="js-date" type="text" name="" value="" placeholder="Text example">
<input class="js-datetime" type="text" name="" value="" placeholder="Text example">

Пример


Выпадающие списки

В системе WebProduction BOX вместо стандартных выпадающих списков используется jquery библиотека Select2.
Она позволяет упростить работу с выпадающими списками, и значительно расширяет возможности по стилизации выпадающего списка.

Для инициализации данных выпадающих списков необходимо использовать класс
.chzn-select

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

Так же поддерживается мультивыбор, так же как и в стандартных выпадающих списках, для этого необходимо использовать атрибут multiple.


<select class="chzn-select" style="width: 300px;">
    <option value="">Value 1</option>
    <option value="">Value 2</option>
    <option value="">Value 3</option>
    <option value="">Value 4</option>
    <option value="">Value 5</option>
</select>

<select class="chzn-select inline" style="width: 300px;">
    <option value="">Value 1</option>
    <option value="">Value 2</option>
    <option value="">Value 3</option>
    <option value="">Value 4</option>
    <option value="">Value 5</option>
</select>

<select multiple class="chzn-select" style="width: 300px;">
    <option value="">Value 1</option>
    <option value="">Value 2</option>
    <option value="">Value 3</option>
    <option value="">Value 4</option>
    <option value="">Value 5</option>
</select>

Пример


Выпадающие списки c дочерними элементами

Данный тип выпадающего списка отличается от стандартного тем, что имеет древовидную структуру.
Для использования данного типа выпадающего списка необходимо использовать класс
.chzn-select-tree

Уровни вложенности указываются для элементов option как data-level. Такие списки могут быть полезными при разработке выбора категории, например.


<select class="chzn-select-tree" style="width: 300px;">
    <option value="" data-level="0">Value 1</option>
    <option value="" data-level="1">Value 2</option>
    <option value="" data-level="1">Value 3</option>
    <option value="" data-level="2">Value 4</option>
    <option value="" data-level="0">Value 5</option>
</select>

Пример


Текстовая область

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


<textarea name="" placeholder="Text example" cols="30" rows="10" style="width: 100%;"></textarea>
<textarea class="js-autosize" name="" placeholder="Text example" cols="30" rows="10" style="width: 100%;"></textarea>

Пример


Теги

Для отображения тегов необходимо использовать текстовое поле с классом
.js-tags

Теги будут разделяться по запятой или по пробелу и записываться в value.


<input class="js-tags" type="text" name="" value="value1, value2, value3, value4" placeholder="Text example">

Пример