title: Make HTML form elements 'display only' - non-interactive
body: <p>I'm working on a dynamic form builder, where the user can add different blocks of content to a page (buttons, text inputs, paragraphs of text, images etc), which they can later publish and it will be a simple HTML form they can use.</p>
  <p>For the 'preview' section of this application (where they are adding different blocks of content and modifying the content and look of it), it occurs to me that the simplest way to do this, is to just display the end product HTML itself and that way I'm more or less guaranteed that what is displayed in the preview matches what is displayed in the actual form.</p>
  <p>Where this is important is with obscure styling quirks, <a href="https://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not">such as the behaviour of buttons with display:block.</a></p>
  <p>However, I don't want the the preview to be actually interactive like the real form would. That is, I don't want the following behaviours:</p>
  <ul>
  <li>Inputs receiving focus and being able to insert content</li>
  <li>Buttons having click animations</li>
  <li>Clicking links navigating</li>
  <li>Default hover styles occuring.</li>
  </ul>
  <p>Also, in terms of accessibility, it might be very confusing if there are a bunch of input that don't do anything appearing on the screen.</p>
  <p>Is there a browser native/standard way to do this?</p>
  <p>My fallback will likely be to disable all of the elements. But this won't work for links for example.</p>
  <p>An alternative might be to put an invisible div on top of the form, which captures all of the click events. But I don't like this from an accessibility POV.</p>
  <p>Is using the <code>role=&quot;presentation&quot;</code> intended for this?</p>
  <h2>Code Example</h2>
  <p>As an example here, see some sample code here: <a href="https://codepen.io/dwjohnston/pen/qBrGPmr?editors=1111" rel="noreferrer">https://codepen.io/dwjohnston/pen/qBrGPmr?editors=1111</a></p>
  <p>Now for this, I have the divs with <code>role=&quot;button&quot;</code> - These buttons are intended to be clickable, - when you click them the side panel will show content configuration eg, the default value of the input, label, etc.</p>
  <p>Already, there is a problem - interactive content is not permitted inside a button.</p>
  <p>But also, I shouldn't be able to tab to those controls, (now I can manually add <code>tabindex = &quot;-1&quot;</code>, but that's not the complete picture). I don't want to confuse screen readers etc.</p>