html获取表单的值

HTML5 是一种用于构建网页的标准语言，它提供了许多新的功能和特性，其中之一就是表单，表单是用户与网站进行交互的重要方式之一，通过表单，用户可以输入数据、提交信息等，在 HTML5 中，我们可以使用各种表单元素来创建表单，并通过 JavaScript 来获取表单的值。

要获取 HTML5 表单的值，我们首先需要创建一个表单，在 HTML5 中，可以使用 <form> 标签来创建一个表单。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="提交">
</form>

在上面的代码中，我们创建了一个包含两个输入框和一个提交按钮的表单，每个输入框都有一个唯一的 id 属性，这个 id 属性将用于获取表单的值。

接下来，我们需要使用 JavaScript 来获取表单的值，在 HTML5 中，可以使用 <script> 标签来添加 JavaScript 代码。

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    console.log("姓名：" + name);
    console.log("邮箱：" + email);
  });
</script>

在上面的代码中，我们首先使用 document.getElementById() 方法获取表单元素，然后使用 addEventListener() 方法为表单添加一个 "submit" 事件监听器，当用户点击提交按钮时，事件监听器将被触发。

在事件监听器的回调函数中，我们首先使用 event.preventDefault() 方法阻止表单的默认提交行为，然后使用 document.getElementById().value 属性获取输入框的值，我们将获取到的值打印到控制台。

除了上述方法外，我们还可以使用其他方法来获取表单的值，可以使用 <button> 标签来代替 <input type="submit"> 标签，并使用 onclick 属性来触发事件监听器。

<button onclick="getFormValues()">提交</button>

在上面的代码中，我们使用 onclick 属性为按钮添加了一个点击事件监听器，当用户点击按钮时，事件监听器将被触发。

接下来，我们需要编写一个名为 getFormValues() 的 JavaScript 函数来获取表单的值。

function getFormValues() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  console.log("姓名：" + name);
  console.log("邮箱：" + email);
}

在上面的代码中，我们定义了一个名为 getFormValues() 的函数，该函数使用 document.getElementById().value 属性获取输入框的值，并将获取到的值打印到控制台。

总结一下，要获取 HTML5 表单的值，我们首先需要创建一个表单，并为表单添加一个事件监听器，当用户提交表单时，事件监听器将被触发，我们可以在事件监听器的回调函数中使用 JavaScript 来获取表单的值，我们还可以使用其他方法来获取表单的值，例如使用 <button> 标签和 onclick 属性来触发事件监听器。