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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Описать новый тип элемента формы
2. Описать функцию темизации

<?php
/**
 * Implements hook_element_info()
 */
function myform_element_info(){
  // Описали новый тип элемента формы
  $types['mydate'] = array(
    '#input' => TRUE,
    '#theme' => 'mydate',
    '#theme_wrappers' => array('form_element'),
  );
 
  return $types;
}
 
/**
 * Implements hook_theme
 */
function myform_theme(){
  return array(
    'mydate' => array(
      'arguments' => array('element' => NULL),
      'render element' => 'element',
    )
  );
}
 
function theme_mydate($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'date';
  element_set_attributes($element, array('id', 'name'));
  _form_set_class($element, array('form-text', 'form-date'));
 
  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
 
  return $output;
}

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

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

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

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