First of all none supported HTML5 tags will just behave as regular text fields. Next they provide a basic client-side validation of your data*. But there is one more compelling reason to start to use them today. Soft keyboard that are render in mobile devices will be optimize for the current input text. This will provide a better usability experience for your mobile end users.
So does Drupal 8 support all these new input tags? Well it does to some extend. In this article we will play with the new shiny Drupal 8 Form API and see how far it implements the HTML5 input elements.
The Drupal 8 Form API may have gone through some OOP lifting but it definitely not so different to what it use to be in Drupal 6/7. You are still going to create your forms in arrays because it is easier to manipulate and override. Drupal will still render a secure form protected against many common exploits.
In you want to dig into the code, the drupal elements are defined in system_element_info().
Ready ? Let's explore the different input tags. If you can't wait to see the result in your favourite browser or modile device you can check the live demo we have set up for you.
Email input field
$form['email'] = array( '#type' => 'email', '#title' => $this->t('Email:'), '#attributes' => array( 'placeholder' => 'email@example.com', 'autofocus' => TRUE, ), );
Url input field
The url form element is supported by Drupal 8 which will perform validation thanks to the helper class et method UrlHelper::isValid. Therefore the url field should only be used for fully-qualified URLs.
$form['url'] = array( '#type' => 'url', '#title' => $this->t('Url:'), '#attributes' => array( 'placeholder' => 'http://www.mariquecalcus.com', ), );
Telephone input field
The tel input field is implemented in Drupal 8.
$form['tel'] = array( '#type' => 'tel', '#title' => $this->t('Tel:'), );
Search input field
The search type which is used for search fields is supported in Drupal 8. HTML5 also brings an interesting autocomplete attribute which specifies whether a form or input field should have autocomplete on or off.
$form['search'] = array( '#type' => 'search', '#title' => $this->t('Search:'), '#autocomplete' => FALSE, '#attributes' => array( 'placeholder' => 'What are you searching ?', ), );
Color input field
Fully supported and will be part of the color_field module in its Drupal 8 Release.
$form['color'] = array( '#type' => 'color', '#title' => $this->t('Color:'), '#default_value' => '#ff0000', );
Datalist input attribute
Not supported but there is a workaround by using the textfield and some of its properties.
$form['datalist2'] = array( '#type' => 'textfield', '#title' => $this->t('Datalist:'), '#field_prefix' => '', '#attributes' => array('list' => array('colors')), );
Date input field
$form['date'] = array( '#type' => 'date', '#title' => $this->t('Date:'), );
Date Time input field
Fully supported but not in the HTML5 way. Drupal will just render 2 HTML5 fields being date and time.
$form['datetime'] = array( '#type' => 'datetime', '#title' => $this->t('Datetime:'), );
Number input field
$form['number'] = array( '#type' => 'number', '#title' => $this->t('Number:'), '#attributes' => array( 'min' => 0, 'max' => 10, 'step' => 2, 'value' => 6, ), );
Range input field
$form['range'] = array( '#type' => 'range', '#title' => $this->t('Range:'), '#attributes' => array( 'min' => 0, 'max' => 10, 'step' => 2, 'value' => 6, ), );
This exploration leaves us with the field time, month, week, datetime-local not being supported in the current Drupal 8 Alfa 13 release. I hope they will be included before Drupal 8 is officially launched as they will be a nice addition to the Form API.
* Nothing client-side can really be trusted so you still need to validate your data in your backend.