form.md

layout
component

Form label test

No form wrapper

Explicit label

Implicit label

Form wrapper

Explicit label Implicit label

No form wrapper, no name.

Explicit label

Implicit label

Dialog with no form wrapper

Open dialog 1

Explicit label Implicit label Cancel

Dialog with form wrapper

Open dialog 2

Explicit label

<label>
  <span>Implicit label</span>
  <input name="test7" type="text">
</label>
<button id="cancel2">Cancel</button>

<script> (function() { var openButton1 = document.getElementById('opendialog1'); var openButton2 = document.getElementById('opendialog2'); var cancelButton1 = document.getElementById('cancel1'); var cancelButton2 = document.getElementById('cancel2'); var dialog1 = document.getElementById('dialog1'); var dialog2 = document.getElementById('dialog2'); // Update button opens a modal dialog openButton1.addEventListener('click', function() { dialog1.showModal(); }); openButton2.addEventListener('click', function() { dialog2.showModal(); }); // Form cancel button closes the dialog box cancelButton1.addEventListener('click', function() { dialog1.close(); }); cancelButton2.addEventListener('click', function() { dialog2.close(); }); })(); </script>