Rendering plain HTML in a form

Question

I have HTML markup which is externally generated but I need to display in a form.

I've got the following code in a form controller:

public function buildForm(array $form, FormStateInterface $form_state){
    $form['phone_number'] = [
        '#type' => 'tel',
        '#title' => 'Example phone',
    ];

    $form['TEST-Cloze']   =   [
        '#markup'   =>  "<p><select><option value='[Walter]'>[Walter]</option><option value=' Hank'> Hank</option><option value=' Gus'> Gus</option><option value=' Jessie'> Jessie</option><option value=' Mike'> Mike</option></select> was diagnosed with cancer in his 50th year. He began working with <select><option value='Badger'>Badger</option><option value=' Skinny Pete'> Skinny Pete</option><option value=' [Jessie]'> [Jessie]</option><option value=' Tortuga'> Tortuga</option><option value=' Bogdan'> Bogdan</option></select> to produce <select><option value='cocaine'>cocaine</option><option value=' heronie'> heronie</option><option value=' opiods'> opiods</option><option value=' [amphetamines]'> [amphetamines]</option><option valu\nhis death. He eventually became involved with hardened criminal <select><option value='[Tuco]'>[Tuco]</option><option value=' Gomie'> Gomie</option><option value=' Bogdan'> Bogdan\noption><option value=' Todd'> Todd</option><option value=' Gale'> Gale</option></select> to help with the distribution of his illegally manufactured product.</p>"
        // '#markup'   =>  $question->processed
    ];

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

    return $form;
}

However, the output is completely stripped of markup and displays as plain text, as shown below:

How can I get the markup printed?

UPDATE:

I am attempting to add my form element markup because of the complexity of having multiple drop-down lists in a single paragraph, such as displayed below:

I struggled to achieve this type form output using other form components which is why I began looking into the #markup component.

Answer 1

If this was just content I would replace #markup with #prefix. It will automatically render without escaping your HTML.

However, it seems like you don't just want to render this HTML. You actually want it to interact with the Drupal Forms API. As such, I would recommend that you parse the data you need from the source and construct the form element the recommend way:

form['example_select'] = [
  '#type' => 'select',
  '#title' => $this
    ->t('Select element'),
  '#options' => [
    '1' => $this
      ->t('One'),
    '2' => [
      '2.1' => $this
        ->t('Two point one'),
      '2.2' => $this
        ->t('Two point two'),
    ],
    '3' => $this
      ->t('Three'),
  ],
];

Answer 2

You can pass a FormattableMarkup element as #markup:

$markup = new Drupal\Component\Render\FormattableMarkup("<p>Some string with <em>HTML markup</em></p>");

$form['TEST-Cloze'] = [
  '#markup' => $markup,
];

Note that I didn't use the text from your example, as you would be better off using the Form API to build your elements. Rather the example I gave is one that can be used for other string that has HTML in it. But even with my example, I would still do it like this, to allow the string to be translated:

$form['TEST-Cloze'] = [
  '#prefix' => '<p>',
  '#suffix' => '</p>',
  '#markup' => t('Some string with <em>HTML markup</em>'),
];