使用JavaScript在文本区域中显示表单结果

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>
  
  <label for="gender">性别：</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label><br><br>
  
  <label for="interests">兴趣：</label>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">体育</label>
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">音乐</label><br><br>
  
  <input type="submit" value="提交">
</form>

<textarea id="result" rows="5" cols="50"></textarea>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  
  // 获取表单元素的值
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var gender = document.querySelector('input[name="gender"]:checked').value;
  var interests = [];
  var checkboxes = document.querySelectorAll('input[name="interests"]:checked');
  checkboxes.forEach(function(checkbox) {
    interests.push(checkbox.value);
  });
  
  // 将表单结果显示在文本区域中
  var resultTextarea = document.getElementById("result");
  resultTextarea.value = "姓名：" + name + "\n" +
                         "邮箱：" + email + "\n" +
                         "性别：" + gender + "\n" +
                         "兴趣：" + interests.join(", ");
});

<textarea id="result" rows="5" cols="50"></textarea>