- 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'),
];
- 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'] = [
'#type' => 'email',
'#title' => $this->t('Email'),
];
- To use the number input, you will need to add a new form element definition of the number type to your buildForm method. It will validate the range and format of the number:
$form['integer'] = [
'#type' => 'number',
'#title' => $this->t('Some integer'),
// The increment or decrement amount
'#step' => 1,
// Miminum allowed value
'#min' => 0,
// Maxmimum allowed value
'#max' => 100,
];
- To use the date input, you will need to add a new form element definition of the date type to your buildForm method. You can also pass the #date_date_format option to alter the format used by the input:
$form['date'] = [
'#type' => 'date',
'#title' => $this->t('Date'),
'#date_date_format' => 'Y-m-d',
];
- To use the URL input, you will need to add a new form element definition of the url type to your buildForm method. The element has a validator to check the format of the URL:
$form['website'] = [
'#type' => 'url',
'#title' => $this->t('Website'),
];
- To use the search input, you will need to add a new form element definition of the search type to your buildForm method. You can specify a route name that the search field will query for autocomplete options:
$form['search'] = [
'#type' => 'search',
'#title' => $this->t('Search'),
'#autocomplete_route_name' => FALSE,
];
- To use the range input, you will need to add a new form element definition of the range type to your buildForm method. It is an extension of the number element and accepts min, max, and step properties to control the values of the range input:
$form['range'] = [
'#type' => 'range',
'#title' => $this->t('Range'),
'#min' => 0,
'#max' => 100,
'#step' => 1,
];