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 属性来触发事件监听器。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/205448.html
微信扫一扫 