Из предыдущих уроков по Form API, мы с вами научились создавать простейшие формы с функциями валидации и обработки, а так же научились эти формы обрабатывать через Ajax, но как вы могли заметить, все наши элементы формы состояли исключительно из текстовых полей, сегодня же мы рассмотрим основные типы элементов формы, такие как:
- textfield
- checkbox (checkboxes)
- radio (radios)
- select
- textarea
- file
- managed_file
- password
- date
- fieldset
- tableselect
- textformat
- vertical_tabs
- weight
- submit
Из названия типов вы можете сразу догадаться, для чего предназначен тот или ной тип, но мы будем идти по порядку.
TextfieldДанный тип поля используется для создания простого текстового поля в форме,
<?php '#type' => 'textfield', // тип элемента формы '#title' => t('Текстовое поле'), // заголовок поля '#description' => t('Простое текстовое поле'), // описание поля );
В результате мы получим input с типом text
Checkbox (checkboxes)Данный тип используется для создания чекбокса (чекбоксов)
<?php '#type' => 'checkbox', // тип элемента формы '#title' => t('Чекбокс'), // заголовок чекбокса );
После чего получим чекбокс в форме
Для создания нескольких чекбоксов, нет необходимости описывать каждый из них, достаточно изменить тип элемента формы на «checkboxes», и в «options» передать значение чекбоксов
<?php '#type' => 'checkboxes', // тип элемента формы '#title' => t('Список чекбоксов'), // заголовок для чекбоксов '0' => t('Первый чекбокс'), '1' => t('Второй чекбокс'), '2' => t('Третий чекбокс'), '3' => t('Четвертый чекбокс'), '4' => t('Пятый чекбокс'), ), );
После чего получим список из 5 чекбоксов:
Radio (radios)Используется для создания радиокнопок (radiobutton) в форме
<?php '#type' => 'radio', // тип элемента формы '#title' => t('Радиокнопка'), // заголовок для радиокнопки );
В результате получим одну радиокнопку
Для создания нескольких радиокнопок, ситуация такая же, как и с чекбоксами – изменяем формат на «radios» и в «options» передаем значения радиокнопок
<?php '#type' => 'radios', // тип элемента формы '#title' => t('Радиокнопки'), // заголовок для радиокнопки '0' => t('Первая радиокнопка'), '1' => t('Вторая радиокнопка'), '2' => t('Третья радиокнопка'), '3' => t('Чеьвертая радиокнопка'), '4' => t('Пятая радиокнопка'), ), );
В результате мы увидим список из пяти радиокнопок
SelectКак вы догадались, данный тип используется для создания селектов в форме, он не имеет как чекбокс или радиокнопка, одиночного значения, параметры сразу передаются в «options»
<?php '#type' => 'select', // тип элемента формы '#title' => t('Селект'), // заголовок для селекта '0' => t('Первый селект'), '1' => t('Второй селект'), '2' => t('Третий селект'), '3' => t('Четвертый селект'), '4' => t('Пятый селект'), ), );
Результат – селект из пяти option:
TextareaИспользуется для создания многострочного текстового поля
<?php '#type' => 'textarea', // тип элемента формы '#title' => t('Многострочное текстовое поле'), // заголовок для многострочного текстового поля '#description' => t('Описание многострочного текстового поля'), // описание для многостроного текстового поля );
Результат :
FileИспользуется для создания файлового поля, для загрузки каких-либо файлов и передачи их на сервер
<?php '#type' => 'file', // тип элемента формы '#title' => t('Файловое поле'), // заголовок для файлового поля '#description' => t('Описание файлового поля'), // описание для файлового поля );
В результате получим поле для загрузки файла:
Хочу заметить, что данное поле не так часто используется в формах в Drupal, вместо него обычно используют тип элемента формы – «managed_file»
Managed_fileПредставляет из себя альтернативу для поля с типом «file», так как полностью забирает на себя загрузку файла через Ajax и занесением в таблицу «managed_file»
<?php '#type' => 'managed_file', // тип элемента формы '#title' => t('Альтернативное файловое поле'), // заголовок для поля '#description' => t('Описание для данного поля'), // описание для поля '#upload_location' => 'public://files/' , // путь до директории на сервере, куда будет загружен файл );
Результат:
PasswordДанный тип используется для создания поля, для ввода пароля
<?php '#type' => 'password', // тип элемента формы '#title' => t('Поле для ввода пароля'), // заголовок поля ввода пароля '#description' => t('Описание для поля ввода пароля'), // описание поля ввода пароля );
Результат:
DateИспользуется для создания даты в форме, данный тип определяет 3 селекта
- месяц
- день
- год
где, в качестве значения по умолчанию передается текущая дата
<?php '#type' => 'date', // тип элемента формы '#title' => t('Заголовок для поля дата'), // заголовок для поля дата '#description' => t('Описание для поля дата'), // описание для поля дата );
После чего на странице увидим 3 селекта для выбора даты:
FieldsetИспользует в качестве обертки - fieldset, для элементов полей формы
<?php // fieldset полей формы '#type' => 'fieldset', // тип элемента формы '#title' => t('Обернули поля в fieldset'), // заголовок fieldset '#description' => t('Описание fieldset'), // описание fieldset '#collapsible' => TRUE, // определяет будет ли filedset иметь возможность раскрытия '#collapsed' => FALSE, // определяет положение filedset по умолчанию раскрыт/скрыт ); // первое поле в fieldset '#type' => 'textfield', '#title' => t('Первое поле в fieldset'), ); // второе поле в fieldset '#type' => 'date', '#title' => t('Дата'), );
В результате получим элементы формы, которые обернуты в fieldset
Как вы могли заметить, данный тип принимает еще два дополнительных параметра, хоть они и не обязательные, но о них стоит упомянуть:
- collapsible – определяет, будет ли fieldset иметь возможность скрытия/раскрытия
- collapsed - определяет, положение fieldset по умолчанию, т.е. после загрузки страницы, скрыт/раскрыт
Данный тип выводит в таблице какие-либо данные, с возможностью отметить значения в этой таблице
<?php 'name' => 'Имя', 'family' => 'Фамилия', ); 'name' => t('Павел'), 'family' => t('Китаев'), ), 'name' => t('Павел'), 'family' => t('Китаев'), ), ); '#type' => 'tableselect', '#header' => $header, '#options' => $options, '#empty' => t('Не существует'), // значение по у молчанию, если в $options пусто );
В результате получим таблицу с двумя значениями, с возможностью отметить любое из значений через чекбокс:
Text_formatДанный тип поля может использоваться как замена полю с типом «textarea», так как предоставляет текстовые фильтры для данного поля:
<?php '#type' => 'text_format', // тип элемента формы '#title' => t('Многострочное текстовое поле с текстовыми форматами'), // заголовок многострочного текстового поля с текстовыми фильтрами );
Результат:
Vertical_tabsДанный тип используется для создания вертикальных табов, внутри с элементами формы. Использование данного типа, чуть сложнее, чем все предыдущие. Определение данного типа можно разделить на несколько этапов:
- Определяем данный тип (vertical_tabs) для элемента формы
- Создаем элемент формы с типом fieldset и передаем его через «group» в элемент формы с типом «vertical_tabs»
- Добавляем поля в fieldset
На деле это выглядит так:
<?php '#type' => 'vertical_tabs', // тип элемента формы ); '#type' => 'fieldset', '#title' => t('Таб 1'), '#collapsible' => TRUE, '#collapsed' => TRUE, '#group' => 'field_verticaltabs' // передали fieldset в табы ); '#type' => 'textfield', '#title' => t('Текстовое поле в таб 1'), ); '#type' => 'fieldset', '#title' => t('Таб 2'), '#collapsible' => TRUE, '#collapsed' => FALSE, '#group' => 'field_verticaltabs' ); '#type' => 'date', '#title' => t('Дата в таб 2'), );
Ну а на странице вы увидите следующее:
WeightДанный тип поля используется для определения «веса», т.е. имеет значения от -10 до 10
<?php '#type' => 'weight', // тип элемента формы '#title' => t('Поле с типом "вес"'), );
В результате будет следующее:
SubmitДанный тип определяет кнопку формы:
<?php '#type' => 'submit', // тип элемента формы '#value' => t('отправить'), // название кнопки );
Результат:
Вот мы и разобрались с основными типами элементов формы, естественно мы лишь разобрали сами типы, помимо этого сами типы могут принимать еще ряд значений, а кроме этого есть дополнительные типы элементов формы, вместить все это в одну статью крайне сложно, но для особо любознательных ссылка, где можно подробно рассмотреть примеры и почитать о всех принимаемых значениях, для каждого типа элемента формы.
Комментарии (3)
Здравствуйте.
Спасибо за урок. Действительно нужная информация.
Но вот вы пишете, что это основные типы элементов полей, значит есть еще какие то. Мне интересно есть ли поля для ввода именно числовых значений. Ну типа для ввода суммы например, или это только через валидацию надо делать.
И еще вопрос вдогонку, как приделать к полю что то вроде "суффикса"(точнее то что в модуле webform называют суффиксом). То есть что бы было как то так: идет label, потом сам input , потом дописка типа тыс.руб или г.р. или еще что нибудь. Если просто написать "#suffix" => 'значение' то оно выводится в самом конце, после description . А как сделать сразу после поля, есть вариант?
Заранее благодарен.
числового поля нет, как такового, оно же появилось только в HTML 5. но по сути его можно создать из текстового поля...
Для добавления суфикса после или до input, используйте свойства для поля
Доброе время суток.
Не подскажите есть ли тип поля дататайм. И как можно сделать ее авто заполение по текущей дате и времени?