Using new HTML5 elements

With the release of Drupal 8, Drupal has finally entered into the realm of HTML5. The Form API now allows utilization of HTML5 input elements out of the box. These include the following element types:

• tel
• email
• number
• date
• url
• search
• range

This allows your forms in Drupal to leverage native device input methods along with native validation support.

Getting ready

This recipe will walk you through adding elements to a Drupal form. You will need to have a custom form implemented through a module, such as the one created in the Creating a form recipe of this chapter.

How to do it...

1. To use the telephone input, you will need to add a new form element definition of the tel type to your buildForm method:

$form['phone'] = [ 
  '#type' => 'tel', 
  '#title' => $this->t('Phone'), 
]; 

2. To use the email input, you will need to add a new form element definition of the email type to your buildForm method. It will validate the format of email addresses in the Form API:

$form['email'...