HTML5 элементы форм в Drupal 8

HTML5 - одна из инициатив, которые были включены в разработку ядра Drupal8.
Эта инициатива направлена на интеграцию технологии HTML 5 в систему Drupal. Члены сообщества, выдвинувшие эту инициативу, работают над тем, чтобы HTML 5 поддерживалась различными проектами Drupal 7, а также ядром Drupal 8.

На данный момент все темы , включенные в состав ядра разработаны с помощью HTML5 разметки.
Также инициатива предполагает поддержку HTML5 тегов фильтрами друпала.

Кроме всего прочего изменения претерпело и Form API , так как в него были добавлены новые элементы , которые являются в большинстве своем новыми типами тегов input ( Input Types).
Кроме новых input типов были добавлены и новые атрибуты для тегов input , поддерживаемые html5 разметкой.


Рассмотрим новые атрибуты, которые были добавлены:

  • placeholder - отображает текст-подсказку в поле (может использоваться с input следующих типов: text, search, url, tel, email и password.).
  • min - указывает минимально допустимое значение для этого поля.
  • max - является максимально допустимым значением.
  • step - в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.

Рассмотрим новые типы input , а заодно на примерах увидим как их формировать с помощью Form API. В примерах также будут использованы новые атрибуты.

input type=email - определяет поле, которое должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.


$form['email'] = array(
  '#type' => 'email',
  '#title' => $this->t('E-mail'),
  '#description' => $this->t('Enter Your Email.'),
  '#placeholder' => $this->t('your e-mail'),
);

Если вы используете iPhone и переходите к элементу input type=email, вы получите экранную клавиатуру, которая содержит пробел меньше обычного, а также выделенные клавиши для символов . и @.

html5-email1.png


input type=url - определяет поле, которое должно содержать url адрес. Значение введенное в поле автоматически проверяется на стороне браузера.


$form['url'] = array(
  '#type' => 'url',
  '#title' => $this->t('Url'),
  '#description' => $this->t('Enter url'),
  '#placeholder' => 'http://google.ru',
);

На iPhone input type=url выглядит следующим образом:

html5-url


input type=tel - определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.


$form['tel'] = array(
  '#type' => 'tel',
  '#title' => $this->t('tel'),
  '#description' => $this->t('Enter your phone number'),
  // В паттерне описываем регулярное выражение
  // Регулярное выражение проверяется на стороне браузера
  '#pattern' => '8[0-9]{10}',
);

На iPhone input type=tel выглядит следующим образом

html5-tel.png

input type=number - определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)


$form['number'] = array(
  '#type' => 'number',
  '#title' => $this->t('Number'),
  '#description' => $this->t('Number'),
  '#default_value' => 4,
  '#step' => 2,
  '#min' => 0,
  '#max' => 20,
);

На iPhone input type=number выглядит следующим образом

html5-number.png


input type=range - определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)


$form['range'] = array(
  '#type' => 'range',
  '#title' => $this->t('Range'),
  '#description' => $this->t('Range'),
  '#default_value' => 4,
  '#step' => 2,
  '#min' => 0,
  '#max' => 20,
);

На iPhone input type=range выглядит следующим образом

html5-range.png


input type=search - определяет поле поиска (может использоваться например для создания поиска по сайту).
Поле input type=search представляет собой внешне обычное текстовое поле.


$form['search'] = array(
  '#type' => 'search',
  '#title' => $this->t('Search'),
  '#description' => $this->t('Search'),
  '#size' => 30,
  '#placeholder' => $this->t('search'),
);

input type=color - позволяет выбрать цвет и возвращает его в шестнадцатеричном представлении.


$form['color'] = array(
  '#type' => 'color',
  '#title' => $this->t('Color'),
  '#description' => $this->t('Color'),
  '#default_value' => '#6c6c6c',
);

Вот так будет выглядеть input type=color в браузере Google Chrome

html5-color.png


input type=date - позволяет выбрать дату в формате год-месяц-день_месяца.


$form['date'] = array(
  '#type' => 'date',
  '#title' => $this->t('Date'),
  '#description' => $this->t('Date'),
  '#default_value' => NULL,
  '#date_input_format' => 'd.m.Y H:i',
  // Устанавливаем диапазон выбора года
  '#date_year_range' => '2010:2020',
);

На iPhone input type=date выглядит следующим образом

html5-date.png


input type=datetime - позволяет выбрать дату в формате год-месяц-день_месяца и время.


$form['datetime'] = array(
  '#type' => 'datetime',
  '#title' => $this->t('Datetime'),
  '#description' => $this->t('Datetime'),
  '#default_value' => NULL,
  '#date_timezone' => drupal_get_user_timezone(),
  '#date_year_range'=>  '1900:2050',
  '#date_time_format' => 'H:i:s',
  '#date_date_format' => 'Y-m-d',
);

На iPhone input type=datetime выглядит следующим образом

html5-datetime.png


элемент datelist - позволяет выбрать дату и время из выпадающих списков, порядок и нужные значения можно передавать в параметрах.
Можно с помощью поля выбирать к примеру только год и месяц из выпадающих списков.


$date_part_order = array('day', 'month', 'year', 'hour', 'minute');

$form['datelist'] = array(
  '#type' => 'datelist',
  '#title' => $this->t('Datelist'),
  '#description' => $this->t('Datelist'),
  '#default_value' => NULL,
  '#date_part_order'=> $date_part_order,
  '#date_timezone' => drupal_get_user_timezone(),
);

Также на основе новых элементов были добавлены следующие поля:

  • Date
  • Email
  • Link
  • Number
  • Telephone number