Помощь начинающим веб
разработчикам

Form API - часть 4. Основные типы элементов полей формы

13.02.2015

Из предыдущих уроков по Form API, мы с вами научились создавать простейшие формы с функциями валидации и обработки, а так же научились эти формы обрабатывать через Ajax, но как вы могли заметить, все наши элементы формы состояли исключительно из текстовых полей, сегодня же мы рассмотрим основные типы элементов формы, такие как:

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

Textfield

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

  1. <?php
  2. $form['field_textfield'] = array(
  3. '#type' => 'textfield', // тип элемента формы
  4. '#title' => t('Текстовое поле'), // заголовок поля
  5. '#description' => t('Простое текстовое поле'), // описание поля
  6. );

В результате мы получим input с типом text

Создали простое текстовое поле Checkbox (checkboxes)

Данный тип используется для создания чекбокса (чекбоксов)

  1. <?php
  2. $form['field_checkbox'] = array(
  3. '#type' => 'checkbox', // тип элемента формы
  4. '#title' => t('Чекбокс'), // заголовок чекбокса
  5. );

После чего получим чекбокс в форме

Создали чекбокс в форме

Для создания нескольких чекбоксов, нет необходимости описывать каждый из них, достаточно изменить тип элемента формы на «checkboxes», и в «options» передать значение чекбоксов

  1. <?php
  2. $form['field_checkboxes'] = array(
  3. '#type' => 'checkboxes', // тип элемента формы
  4. '#title' => t('Список чекбоксов'), // заголовок для чекбоксов
  5. '#options' => array( // массив со списком чекбоксов
  6. '0' => t('Первый чекбокс'),
  7. '1' => t('Второй чекбокс'),
  8. '2' => t('Третий чекбокс'),
  9. '3' => t('Четвертый чекбокс'),
  10. '4' => t('Пятый чекбокс'),
  11. ),
  12. );

После чего получим список из 5 чекбоксов:

Создали чекбоксы в форме Radio (radios)

Используется для создания радиокнопок (radiobutton) в форме

  1. <?php
  2. $form['field_radiobutton'] = array(
  3. '#type' => 'radio', // тип элемента формы
  4. '#title' => t('Радиокнопка'), // заголовок для радиокнопки
  5. );

В результате получим одну радиокнопку

Создали радиокнопку в форме

Для создания нескольких радиокнопок, ситуация такая же, как и с чекбоксами – изменяем формат на «radios» и в «options» передаем значения радиокнопок

  1. <?php
  2. $form['field_radiosbutton'] = array(
  3. '#type' => 'radios', // тип элемента формы
  4. '#title' => t('Радиокнопки'), // заголовок для радиокнопки
  5. '#options' => array( // массив со списком радиокопок
  6. '0' => t('Первая радиокнопка'),
  7. '1' => t('Вторая радиокнопка'),
  8. '2' => t('Третья радиокнопка'),
  9. '3' => t('Чеьвертая радиокнопка'),
  10. '4' => t('Пятая радиокнопка'),
  11. ),
  12. );

В результате мы увидим список из пяти радиокнопок

Создали радиокнопки в форме Select

Как вы догадались, данный тип используется для создания селектов в форме, он не имеет как чекбокс или радиокнопка, одиночного значения, параметры сразу передаются в «options»

  1. <?php
  2. $form['field_select'] = array(
  3. '#type' => 'select', // тип элемента формы
  4. '#title' => t('Селект'), // заголовок для селекта
  5. '#options' => array( // массив со списком option для селекта
  6. '0' => t('Первый селект'),
  7. '1' => t('Второй селект'),
  8. '2' => t('Третий селект'),
  9. '3' => t('Четвертый селект'),
  10. '4' => t('Пятый селект'),
  11. ),
  12. );

Результат – селект из пяти option:

Создали селект в форме Textarea

Используется для создания многострочного текстового поля

  1. <?php
  2. $form['field_textarea'] = array(
  3. '#type' => 'textarea', // тип элемента формы
  4. '#title' => t('Многострочное текстовое поле'), // заголовок для многострочного текстового поля
  5. '#description' => t('Описание многострочного текстового поля'), // описание для многостроного текстового поля
  6. );

Результат :

Создали многострочное текстовое поле File

Используется для создания файлового поля, для загрузки каких-либо файлов и передачи их на сервер

  1. <?php
  2. $form['field_file'] = array(
  3. '#type' => 'file', // тип элемента формы
  4. '#title' => t('Файловое поле'), // заголовок для файлового поля
  5. '#description' => t('Описание файлового поля'), // описание для файлового поля
  6. );

В результате получим поле для загрузки файла:

Создали файловое поле

Хочу заметить, что данное поле не так часто используется в формах в Drupal, вместо него обычно используют тип элемента формы – «managed_file»

Managed_file

Представляет из себя альтернативу для поля с типом «file», так как полностью забирает на себя загрузку файла через Ajax и занесением в таблицу «managed_file»

  1. <?php
  2. $form['field_managedfile'] = array(
  3. '#type' => 'managed_file', // тип элемента формы
  4. '#title' => t('Альтернативное файловое поле'), // заголовок для поля
  5. '#description' => t('Описание для данного поля'), // описание для поля
  6. '#upload_location' => 'public://files/' , // путь до директории на сервере, куда будет загружен файл
  7. );

Результат:

Альтернатива файловому полю Password

Данный тип используется для создания поля, для ввода пароля

  1. <?php
  2. $form['field_password'] = array(
  3. '#type' => 'password', // тип элемента формы
  4. '#title' => t('Поле для ввода пароля'), // заголовок поля ввода пароля
  5. '#description' => t('Описание для поля ввода пароля'), // описание поля ввода пароля
  6. );

Результат:

Создали поле для ввода пароля Date

Используется для создания даты в форме, данный тип определяет 3 селекта

  • месяц
  • день
  • год

где, в качестве значения по умолчанию передается текущая дата

  1. <?php
  2. $form['field_date'] = array(
  3. '#type' => 'date', // тип элемента формы
  4. '#title' => t('Заголовок для поля дата'), // заголовок для поля дата
  5. '#description' => t('Описание для поля дата'), // описание для поля дата
  6. );

После чего на странице увидим 3 селекта для выбора даты:

Создали элемент формы с типом дата Fieldset

Использует в качестве обертки - fieldset, для элементов полей формы

  1. <?php
  2. // fieldset полей формы
  3. $form['field_fieldset'] = array(
  4. '#type' => 'fieldset', // тип элемента формы
  5. '#title' => t('Обернули поля в fieldset'), // заголовок fieldset
  6. '#description' => t('Описание fieldset'), // описание fieldset
  7. '#collapsible' => TRUE, // определяет будет ли filedset иметь возможность раскрытия
  8. '#collapsed' => FALSE, // определяет положение filedset по умолчанию раскрыт/скрыт
  9. );
  10.  
  11. // первое поле в fieldset
  12. $form['field_fieldset']['one'] = array(
  13. '#type' => 'textfield',
  14. '#title' => t('Первое поле в fieldset'),
  15. );
  16.  
  17. // второе поле в fieldset
  18. $form['field_fieldset']['two'] = array(
  19. '#type' => 'date',
  20. '#title' => t('Дата'),
  21. );

В результате получим элементы формы, которые обернуты в fieldset

Обернули поля формы в fieldset

Как вы могли заметить, данный тип принимает еще два дополнительных параметра, хоть они и не обязательные, но о них стоит упомянуть:

  • collapsible – определяет, будет ли fieldset иметь возможность скрытия/раскрытия
  • collapsed - определяет, положение fieldset по умолчанию, т.е. после загрузки страницы, скрыт/раскрыт
Tableselect

Данный тип выводит в таблице какие-либо данные, с возможностью отметить значения в этой таблице

  1. <?php
  2. $header = array( // список значений для thead
  3. 'name' => 'Имя',
  4. 'family' => 'Фамилия',
  5. );
  6.  
  7. $options = array( // список значений для tbody
  8. 0 => array(
  9. 'name' => t('Павел'),
  10. 'family' => t('Китаев'),
  11. ),
  12. 1 => array(
  13. 'name' => t('Павел'),
  14. 'family' => t('Китаев'),
  15. ),
  16. );
  17. $form['field_tableselect'] = array(
  18. '#type' => 'tableselect',
  19. '#header' => $header,
  20. '#options' => $options,
  21. '#empty' => t('Не существует'), // значение по у молчанию, если в $options пусто
  22. );

В результате получим таблицу с двумя значениями, с возможностью отметить любое из значений через чекбокс:

Создали таблицу со списком значений, с возможностью отметить любое из значений Text_format

Данный тип поля может использоваться как замена полю с типом «textarea», так как предоставляет текстовые фильтры для данного поля:

  1. <?php
  2. $form['field_textformat'] = array(
  3. '#type' => 'text_format', // тип элемента формы
  4. '#title' => t('Многострочное текстовое поле с текстовыми форматами'), // заголовок многострочного текстового поля с текстовыми фильтрами
  5. );

Результат:

Создали многострочное текстовое поле с текстовыми фильтрами Vertical_tabs

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

  • Определяем данный тип (vertical_tabs) для элемента формы
  • Создаем элемент формы с типом fieldset и передаем его через «group» в элемент формы с типом «vertical_tabs»
  • Добавляем поля в fieldset

На деле это выглядит так:

  1. <?php
  2. $form['field_verticaltabs'] = array(
  3. '#type' => 'vertical_tabs', // тип элемента формы
  4. );
  5.  
  6. $form['fieldset_wrapper_tab1'] = array(
  7. '#type' => 'fieldset',
  8. '#title' => t('Таб 1'),
  9. '#collapsible' => TRUE,
  10. '#collapsed' => TRUE,
  11. '#group' => 'field_verticaltabs' // передали fieldset в табы
  12. );
  13.  
  14. $form['fieldset_wrapper_tab1']['text'] = array( // добавили поле в fieldset
  15. '#type' => 'textfield',
  16. '#title' => t('Текстовое поле в таб 1'),
  17. );
  18.  
  19. $form['fieldset_wrapper_tab2'] = array(
  20. '#type' => 'fieldset',
  21. '#title' => t('Таб 2'),
  22. '#collapsible' => TRUE,
  23. '#collapsed' => FALSE,
  24. '#group' => 'field_verticaltabs'
  25. );
  26.  
  27. $form['fieldset_wrapper_tab2']['date'] = array(
  28. '#type' => 'date',
  29. '#title' => t('Дата в таб 2'),
  30. );

Ну а на странице вы увидите следующее:

Создали вертикальные табы Weight

Данный тип поля используется для определения «веса», т.е. имеет значения от -10 до 10

  1. <?php
  2. $form['field_weight'] = array(
  3. '#type' => 'weight', // тип элемента формы
  4. '#title' => t('Поле с типом "вес"'),
  5. );

В результате будет следующее:

Создали поле с типом "вес" Submit

Данный тип определяет кнопку формы:

  1. <?php
  2. $form['field_submit'] = array(
  3. '#type' => 'submit', // тип элемента формы
  4. '#value' => t('отправить'), // название кнопки
  5. );

Результат:

Создали кнопку отправки формы

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

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (3)

Profile picture for user Артур
Дмитрий
06.03.2015

Здравствуйте.
Спасибо за урок. Действительно нужная информация.
Но вот вы пишете, что это основные типы элементов полей, значит есть еще какие то. Мне интересно есть ли поля для ввода именно числовых значений. Ну типа для ввода суммы например, или это только через валидацию надо делать.
И еще вопрос вдогонку, как приделать к полю что то вроде "суффикса"(точнее то что в модуле webform называют суффиксом). То есть что бы было как то так: идет label, потом сам input , потом дописка типа тыс.руб или г.р. или еще что нибудь. Если просто написать "#suffix" => 'значение' то оно выводится в самом конце, после description . А как сделать сразу после поля, есть вариант?
Заранее благодарен.

Profile picture for user pantey
pantey
22.03.2015

числового поля нет, как такового, оно же появилось только в HTML 5. но по сути его можно создать из текстового поля...
Для добавления суфикса после или до input, используйте свойства для поля

<?php
$form['text'] = array(
'#type' => 'textfield',
'#field_prefix' => 'до',
'#field_suffix' => 'после'
);
Profile picture for user Артур
Николай
27.09.2018

Доброе время суток.

Не подскажите есть ли тип поля  дататайм. И как можно сделать ее авто заполение по текущей дате и времени?

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии