<div class="container">
  <form id="form" class="p-3">
  <input class="form-control mb-3" type="text" name="color" value="blue">
  <textarea class="form-control mb-3" name="question">Why is the sky blue?</textarea>
  <select class="form-control mb-3" name="colors">
    <option value="red">red</option>
    <option value="blue" selected>blue</option>
    <option value="green">green</option>
  </select>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>
<code id="result"></code>
</div>

const $form = document.getElementById('form')
const $result = document.getElementById('result')

$form.addEventListener('submit', function (e) {
  e.preventDefault()
  
  const result = []
  
  for (const element of $form.elements) {
    if (element.name) {
      result.push(`${element.name}: ${element.value}`)
    }
  }
  
  $result.innerHTML = result.join('<br>')
})