Drupal core includes several input #type elements that can be used in forms. A form controller's buildForm(array $form, FormStateInterface $form state) method returns an associative array, usually named $form, that defines the markup and input elements of your form. Each element in the array is made up of a set of properties and potentially nested child elements that define the information Drupal uses to generate the HTML version of the form.
List of form element types:
Name |
Description |
Example |
---|---|---|
Button |
#type => ‘button’ Provides a form element with an action button. |
$form['actions']['preview'] = [ '#type' => 'button', '#value' => $this->t('Preview'), ]; |
Checkbox |
#type => ‘checkbox’ A single checkbox form element is provided. |
$form['copy'] = [ '#type' => 'checkbox', '#title' => $this->t('Send me a copy'), ]; |
Checkboxes |
#type => 'checkboxes' A multiple checkboxs form element is provided. |
$form['favorites']['colors'] = [ '#type' => 'checkboxes', '#options' => ['blue' => $this->t('Blue'), 'red' => $this->t('Red')], '#title' => $this->t('Which colors do you like?'), ]; |
Color |
#type => 'color' Provides a colour selection form element. |
$form['color'] = [ '#type' => 'color', '#title' => $this->t('Color'), '#default_value' => '#ffffff', ]; |
Date |
#type => 'date' A date selection form element is provided. |
$form['expiration'] = [ '#type' => 'date', '#title' => $this->t('Content expiration'), '#default_value' => '2020-02-05', ]; |
Datelist |
#type => 'datelist' Provides a datelist element, which is made up of a set of pre-configured select elements for selecting a date. |
$form['expiration'] = [ '#type' => 'datelist', '#title' => $this->t('Content expiration'), ]; |
Datetime |
#type => 'datetime' A datetime element is provided. |
$form['expiration'] = [ '#type' => 'datetime', '#title' => $this->t('Content expiration'), ]; |
#type => 'email' A form input element for entering an email address is provided. |
$form['email'] = [ '#type' => 'email', '#title' => $this->t('Email'), '#pattern' => '*@example.com', ]; |
|
EntityAutocomplete |
#type => 'entity_autocomplete' An entity autocomplete form element is provided. |
$form['my_element'] = [ '#type' => 'entity_autocomplete', '#target_type' => 'node', '#tags' => TRUE, '#default_value' => $node, '#selection_handler' => 'default', '#selection_settings' => [ 'target_bundles' => ['article', 'page'], ], '#autocreate' => [ 'bundle' => 'article', 'uid' => 1, ], ]; |
File |
#type => 'file' This form element allows you to upload a file. |
$form['file'] = [ '#type' => 'file', '#title' => $this->t('Upload File'), ]; |
Hidden |
#type => 'hidden' This form element is for an HTML'hidden' input element. |
$form['entity_id'] = [ '#type' => 'hidden', '#value' => $entity_id, ]; |
Image Button |
#type => 'image_button' This form element contains an image for a submit button. |
$form['imagebutton'] = [ '#type' => 'image_button', '#src' => '/themes/bartik/logo.png', ]; |
Item |
#type => 'item' A display-only form element with an optional title and description is provided. |
$form['my_item'] = [ '#type' => 'item', '#title' => t('Title of the item'), '#markup' => t('This is the markup'), ]; |
Language Configuration |
#type => 'language_configuration' Defines a language configuration element for a single field. |
$form['language_configuration'] = [ '#type' => 'language_configuration', '#entity_information' => [ 'entity_type' => 'node', 'bundle' => $type->article, ], ]; |
Language Select |
#type => 'language_select' A language selection form element is provided. |
$form['language_cselect'] = [ '#type' => 'language_select', '#title' => t('select a language '), ]; |
Machine Name |
#type => 'machine_name' A machine name form element is provided, which consists of a textfield for human-readable input and another textfield that generates a machine name based on the input. |
$form['id'] = [ '#type' => 'machine_name', '#maxlength' => 64, '#description' => $this->t('A unique name for this item. It must only contain lowercase letters, numbers, and underscores.'), ]; |
Managed File |
#type => 'managed_file' Provides an AJAX/progress aware file upload and saves the widget. Drupal manages files by keeping them as entities.
|
$form['managed_files'] = [ '#type' => 'managed_file', '#title' => t('Manged file '), ]; |
Number |
#type => 'number' This form element accepts numeric input and performs unique numeric validation. |
$form['quantity'] = [ '#type' => 'number', '#title' => $this->t('Quantity'), ]; |
Password |
#type => 'password' A form element for entering a password with hidden text is provided. |
$form['pass'] = [ '#type' => 'password', '#title' => $this->t('Password'), '#size' => 25, '#pattern' => '[01]+', ]; |
Password Confirm |
#type => 'password_confirm' Provides a form element for password double-input. |
$form['pass'] = [ '#type' => 'password_confirm', '#title' => $this->t('Password'), '#size' => 25, ]; |
PathElement |
#type => 'path' Provides a form element for entering a path, which can be validated and stored as either a \Drupal\Core\Url value object or an array containing a route name and route parameters pair. |
$form['path'] = [ '#type' => 'path', '#title' => $this->t('Enter a path'), ]; |
Radio |
#type => 'radio' This form element contains a single radio button. |
$form['single_radio'] = [ '#type' => 'radio', '#title' => ('Are you above 18 years old?'), ]; |
Radios |
#type => 'radios' A form element for a group of radio buttons. |
$form['Multiple_radios'] = [ '#type' => 'radios', '#title' => ('Are you above 18 years old?'), '#options' => [ 'Yes' =>t('Yes'), 'No' =>t('No') ], ]; |
Range |
#type => 'range' A slider is provided for entering a number within a specific range. |
$form['quantity_range'] = [ '#type' => 'range', '#title' => $this->t('Quantity'), ]; |
Search |
#type => 'search' This HTML5 input element has the type "search." |
$form['search'] = [ '#type' => 'search', '#title' => $this->t('Search'), ]; |
Select |
#type => 'select' A form element for a drop-down menu or scrolling selection box is provided. |
$form['gender'] = [ '#type' => 'select', '#title' => ('Gender'), '#options' => [ 'Female' => t('Female'), 'male' => t('Male'), ], ]; |
Submit |
#type => 'submit' A form submit button is provided. |
$form['actions']['submit'] = [ '#type' => 'submit', '#value' => $this->t('Save'), ]; |
Table |
#type => 'table' Provides a table render element. |
$form['contacts'] = [ '#type' => 'table', '#caption' => $this->t('Sample Table'), '#header' => [ $this->t('Name'), $this->t('Phone'), ], ]; for ($i = 1; $i <= 4; $i++) { $form['contacts'][$i]['#attributes'] = [ 'class' => [ 'foo', 'baz', ], ]; $form['contacts'][$i]['name'] = [ '#type' => 'textfield', '#title' => $this->t('Name'), '#title_display' => 'invisible', ]; $form['contacts'][$i]['phone'] = [ '#type' => 'tel', '#title' => $this->t('Phone'), '#title_display' => 'invisible', ]; } $form['contacts'][]['colspan_example'] = [ '#plain_text' => 'Colspan Example', '#wrapper_attributes' => [ 'colspan' => 2, 'class' => [ 'foo', 'bar', ], ], ]; |
Table Select |
#type => 'tableselect' A form element for a table with radio buttons or checkboxes in the left column. |
$header = [ 'color' => $this->t('Color'), 'shape' => $this->t('Shape'), ]; $options = [ 1 => [ 'color' => 'Red', 'shape' => 'Triangle', ], 2 => [ 'color' => 'Green', 'shape' => 'Square', ], 3 => [ 'color' => 'Blue', 'shape' => 'Hexagon', ], ]; $form['table'] = [ '#type' => 'tableselect', '#header' => $header, '#options' => $options, '#empty' => $this->t('No shapes found'), ]; |
Tel |
#type => 'tel' This form element allows you to enter a telephone number. |
$form['mobile_number'] = [ '#type' => 'tel', '#title' => t('Mobile no'), ]; |
Textarea |
#type => 'textarea' A form element for multiple-line text input is provided. |
$form['text'] = [ '#type' => 'textarea', '#title' => $this->t('Text'), ]; |
Text Field |
#type => 'textfield' A one-line text field form element is provided. |
$form['first_name'] = [ '#type' => 'textfield', '#title' => t('First Name:'), '#required' => TRUE, ]; |
Url |
#type => 'url' Provides a form element for entering a URL, complete with built-in URL validation. |
form['homepage'] = [ '#type' => 'url', '#title' => $this->t('Home Page'), '#size' => 30, '#pattern' => '*.example.com', ]; |
Value |
#type => 'value' Provides an internal information storage form element. |
$form['entity_id'] = [ '#type' => 'value', '#value' => $entity_id, ]; |
Vertical Tabs |
#type => 'vertical_tabs' Provides a render element for a form's vertical tabs. |
$form['information'] = [ '#type' => 'vertical_tabs', '#default_tab' => 'edit-publication', ]; $form['author'] = [ '#type' => 'details', '#title' => $this->t('Author'), '#group' => 'information', ]; $form['author']['name'] = [ '#type' => 'textfield', '#title' => $this->t('Name'), ]; $form['publication'] = [ '#type' => 'details', '#title' => $this->t('Publication'), '#group' => 'information', ]; $form['publication']['publisher'] = [ '#type' => 'textfield', '#title' => $this->t('Publisher'), ]; |
Weight |
#type => 'weight' Provides a form element for weight input. Integers are used to indicate order, with greater numbers appearing later in the list. |
$form['weight'] = [ '#type' => 'weight', '#title' => $this->t('Weight'), '#default_value' => $edit['weight'], '#delta' => 10, ]; |
Conclusion:
This blog explains all of the form element types along with examples provided by Drupal core and links to the documentation for each.
Comments