Вы наверняка, не раз уже слышали о приходе в нашу жизнь новой версии гипертекстовой разметки, как HTML 5. Он несет в себе достаточно много изменений, как например упрощение DOCTYPE или добавление новых тегов, которые призваны улучшить семантику вашего сайта, да и к тому же, с 2015 года, данный язык разметки является рекомендованным. Полный список изменений и нововведений HTML 5 вы можете прочитать здесь, я же затрону лишь часть нововведений HTML 5, а именно новые типы элементов формы.
Как вы возможно уже заметили, Form API Drupal не позволяет из «коробки» создавать элементы формы присущие HTML 5. В данном уроке, я хочу вам показать, как можно добавить новый тип элемента формы , такие как:
- Search
- Tel
- URL
- Number
- Range
в свою форму модуля. Здесь указана лишь часть новых типов элементов HTML5, полный список вы можете просмотреть здесь.
Итак, для дальнейшего понимания вы должны знать, как строится форма в Drupal, и какие типы элементов она предоставляет, если читали, то идем дальше.
Способ 1 - простойДля простой интеграции новых типов нам понадобится модуль elements, все, что от вас потребуется – это скачать его и активировать. После чего вам станут доступны для использования в Form API новые типы элементов.
Например, для создания своего числового поля достаточно будет лишь изменить тип элемента формы:
<?php '#type' => 'numberfield', '#title' => t('Числовое поле'), );
В результате получим следующее:

Список доступных нам типов элементов:
- numberfield – числовое поле
- emailfield – поле с типом email
- searchfield – поле с типом search
- telfield – поле с типом tel
- urlfield – поле с типом url
- rangefield – поле с типом range
Это все типы, которые предоставляет нам модуль elements. С простым способом разобрались, с ним можно покончить.
Способ 2 – сложный, но более гибкийПомимо всех имеющихся типов полей формы, которые предоставляет нам Form API, мы может создать и собственные типы полей. Рассмотрим это дело на примере, а в качестве эксперимента – создадим элемент с типом date, который присуще так же HTML5.
Хочу заметить, что данный тип элемента формы, на данный момент, поддерживают не все браузеры, поэтому работоспособность проверяйте в Chrome, ибо пока он впереди планеты всей.
Что бы создать новый тип элемента формы, необходимо:
- Описать новый тип элемента формы
- Описать функцию темизации
<?php /** * Implements hook_element_info() */ function myform_element_info(){ // Описали новый тип элемента формы '#input' => TRUE, '#theme' => 'mydate', ); return $types; } /** * Implements hook_theme */ function myform_theme(){ 'render element' => 'element', ) ); } function theme_mydate($variables) { $element = $variables['element']; $element['#attributes']['type'] = 'date'; $output = '<input' . drupal_attributes($element['#attributes']) . ' />'; return $output; }
Новый тип мы создали, теперь можем его использовать в своей форме:
<?php '#type' => 'mydate', '#title' => t('Дата'), );
После чего увидим следующую картину:

Не забываем только, что для новых элементов формы необходима так же функция валидации. Как создать свою функцию валидации, думаю вы и без меня знаете или читаем здесь. На этом можно закончить.