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

Создание новых типов элементов формы HTML 5, в формах Drupal 7

27.03.2015

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

Как вы возможно уже заметили, Form API Drupal не позволяет из «коробки» создавать элементы формы присущие HTML 5. В данном уроке, я хочу вам показать, как можно добавить новый тип элемента формы , такие как:

  • Email
  • Search
  • Tel
  • URL
  • Number
  • Range

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

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

Способ 1 - простой

Для простой интеграции новых типов нам понадобится модуль elements, все, что от вас потребуется – это скачать его и активировать. После чего вам станут доступны для использования в Form API новые типы элементов.

Например, для создания своего числового поля достаточно будет лишь изменить тип элемента формы:

  1. <?php
  2. $form['option_textfield'] = array(
  3. '#type' => 'numberfield',
  4. '#title' => t('Числовое поле'),
  5. );

В результате получим следующее:

Input с типом number

Список доступных нам типов элементов:

  • numberfield – числовое поле
  • emailfield – поле с типом email
  • searchfield – поле с типом search
  • telfield – поле с типом tel
  • urlfield – поле с типом url
  • rangefield – поле с типом range

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

Способ 2 – сложный, но более гибкий

Помимо всех имеющихся типов полей формы, которые предоставляет нам Form API, мы может создать и собственные типы полей. Рассмотрим это дело на примере, а в качестве эксперимента – создадим элемент с типом date, который присуще так же HTML5.

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

Что бы создать новый тип элемента формы, необходимо:

  1. Описать новый тип элемента формы
  2. Описать функцию темизации
  1. <?php
  2. /**
  3.  * Implements hook_element_info()
  4.  */
  5. function myform_element_info(){
  6. // Описали новый тип элемента формы
  7. $types['mydate'] = array(
  8. '#input' => TRUE,
  9. '#theme' => 'mydate',
  10. '#theme_wrappers' => array('form_element'),
  11. );
  12.  
  13. return $types;
  14. }
  15.  
  16. /**
  17.  * Implements hook_theme
  18.  */
  19. function myform_theme(){
  20. return array(
  21. 'mydate' => array(
  22. 'arguments' => array('element' => NULL),
  23. 'render element' => 'element',
  24. )
  25. );
  26. }
  27.  
  28. function theme_mydate($variables) {
  29. $element = $variables['element'];
  30. $element['#attributes']['type'] = 'date';
  31. element_set_attributes($element, array('id', 'name'));
  32. _form_set_class($element, array('form-text', 'form-date'));
  33.  
  34. $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
  35.  
  36. return $output;
  37. }

Новый тип мы создали, теперь можем его использовать в своей форме:

  1. <?php
  2. $form['date'] = array(
  3. '#type' => 'mydate',
  4. '#title' => t('Дата'),
  5. );

После чего увидим следующую картину:

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

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

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

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