Drupal 8 9 10: Difference between render and form elements

Render elements, or render arrays, are responsible for holding the data and related metadata to be displayed as HTML, whereas form elements are built to display the HTML form fields and their attributes. Form elements are subsets of the render elements, which means you can use form elements inside render arrays.

What is the difference between render and form elements?

Form elements can print form elements such as input, lebel, select, textarea, number, datalist, etc. In short, whatever element and their attributes we except in a form field can be constructed using form elements.

Render elements provide a wrapper around the form elements and decide how those form elements should be displayed at the front end. Here we can explain the templates, cache metadata, additional arguments, etc. 

The difference between render and form elements is Render arrays we can use anywhere the data is being returned back to the browser; however, form elements must be used inside the form scope to display the form fields to take user inputs.

How to use render arrays (elements) in Drupal

for example a Block clss build method returns #markup is a render array example.

/**
 * {@inheritdoc}
 */
public function build(): array {
  $build['content'] = [
    '#markup' => $this->t('It works!'),
  ];
  return $build;
}

A controller class returns a response along with twig template and variable that contains data to be displayed at fron end.

$build['content'] = [
  '#theme' => 'table',
  '#header' => $header,
  '#rows' => $rows,
  '#empty' => $this->t('There is no tasks!'),
  '#cache' => [
    'tags' => $tags,
  ],
];

return $build;

How to use form elements in Drupal

Generally we use form elements in a Form class.

/**
 * {@inheritdoc}
 */
public function buildForm(array $form, FormStateInterface $form_state): array {

  $form['taskName'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Task Title'),
    '#required' => TRUE,
  ];

  $form['remark'] = [
    '#type' => 'textarea',
    '#title' => $this->t('Remark'),
    '#description' => $this->t('Add details if there is any.'),
  ];

  $form['isCompleted'] = [
    '#type' => 'checkbox',
    '#title' => $this->t('Is completed'),
  ];

  $form['actions'] = [
    '#type' => 'actions',
    'submit' => [
      '#type' => 'submit',
      '#value' => $this->t('Send'),
    ],
  ];

  return $form;
}

Here textfield, select, textarea, checkbox are example of form elements.

A full list of form and render element can be found on Drupal Official website.

How to add attributes to a form element in Drupal 10?

$form['isCompleted'] = [
  '#type' => 'checkbox',
  '#title' => $this->t('Is completed'),
  '#attributes' => [
    'class' => [
      'form-checkbox'
    ]
  ]
];

Using #attributes we can add class, id, placeholder etc.

How to use cacheability metadata into a render array?

$build['content'] = [
  '#theme' => 'table',
  '#header' => $header,
  '#rows' => $rows,
  '#empty' => $this->t('There is no tasks!'),
  '#cache' => [
    'tags' => ['node:8', 'node:10'],
    'max_age' => 3600,
    'contexts' => 'user'
  ],
];

tags: Cache tags are in the form of key:value such as node:5 means a node with id of 5.

max_age: Max age tells the duration of cache, after that time it will be invalidate.

contexts: Contexts we can use where we need to cache the dynamic content for logged in user.

Another major difference between render and form elements is we can add cachebility metadata into render array, however, we can can not add this to the from elements.