<head></head><body>
<form action= http://localhost:1200>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div id=under>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
<br>
<input type=hidden name=h value=secret>
Fruit: <select name=fruit multiple>
<option value=a>apple
<option value=o>orange
<option value=l>lemon
</select>
    </div>
    <div>
      <button type="submit">Show</button>
<input type=submit name=act value=Send>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

<script>
const form = document.querySelector("form");
const el = form.elements
const log = document.querySelector("#log");
// push Show and see the fields.
// This tests FormData, which is third party code.
const button = form.querySelector("button");
button.addEventListener("click", (event) => {
  const data = new FormData(form);
  let output = "";
  for (const entry of data) {
    output = `${output}${entry[0]}=${entry[1]}\r`;
  }
  log.innerText = output;
  event.preventDefault();
});

// add a new radio button dynamically
i = document.createElement("input");
i.type="radio";
i.name="contact";
i.value="carrier pigeon";
const panel = document.getElementById("under");
const br = form.querySelector("br");
if(el.length != 7) alert(`browse elements.length ${el.length}`);
panel.insertBefore(i, br);
panel.insertBefore(document.createTextNode(" Pigeon"), br);
if(el.length != 8) alert(`browse elements.length ${el.length}`);
const fs = panel.parentNode; // field set
// you can panel.removeChild() and verify the form is wiped out.
// Then you can add it back again and verify the form resurrects.
// call cloneNode and make sure the form machinery, elements, links, etc,
// have been created.
const f2 = form.cloneNode(true)
if(f2.elements.length != 8) alert(`clone elements.length ${f2.elements.length}`);
if(f2.contact.length != 4) alert(`clone contact.length ${f2.contact.length}`);
if(f2.contact[0] != f2.elements[0]) alert("clone contact elements mismatch");
if(f2.contact[0].form != f2) alert("clone input.form mismatch");
if(f2.action != form.action) alert("clone action mismatch");
</script>
</body>
