Ниже будут представлены элементы для построения форм. С их помощью можно создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.
Существует несколько типов таких элементов, - поля вода, выпадающие списки, теги и т.д..
Поля ввода
Самым распространенным элементом является поле ввода. Поля ввода отличаются по типу и внешнему виду:
- 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">
Пример