HTML5ize your Drupal 8 form

Created on
Updated on
Written By
HTML5ize your Drupal 8 form

HTML5 is the newest specification for HTML and it brings many new features and enhancements to web forms. It introduces a new set of input types that will define new behaviours and UI, which were often, achieve with Javascript. These new input tags are not yet fully supported especially when it comes to older browsers. So is it safe to use them today? Yes it is and it’s worth it.

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.

HTML5

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

The email input tag is supported by the new Drupal Form API which will validate on submission the value by using the valid_email_address() function. The email input element accept the placeholder attribute introduced by HTML5. Placeholder text provides a short example text displayed inside the input field. The placeholder text disappears when the focus is set on the field. Other input fields like text, textarea, email, url, telephone, and password will also support the placeholder attribute. HTML5 brings also to web forms the ability to set an autofocus attribute which is already supported by Drupal 8. Browsers that don't support the autofocus or placeholder attributes will simply ignore it. So you will need to implement a javascript fallback.

$form['email'] = array(
  '#type' => 'email',
  '#title' => $this->t('Email:'),
  '#attributes' => array(
    'placeholder' => 'calcus.david@gmail.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

Fully supported.

$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

Fully supported.

$form['number'] = array(
  '#type' => 'number',
  '#title' => $this->t('Number:'),
  '#attributes' => array(
    'min' => 0,
    'max' => 10,
    'step' => 2,
    'value' => 6,
  ),
);

Range input field

Fully supported.

$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, monthweekdatetime-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.

So are you ready now to check our online live demo ? And remember your browser might not yet supported all the new HTML5 form elements. In doubt you can check online your browser.

* Nothing client-side can really be trusted so you still need to validate your data in your backend.