概述
HTML DOM 文档表单用于从用户那里获取数据。
在 JavaScript 中，你可以使用 document 对象的 forms 集合来访问 HTML 文档中的所有 <form> 元素。
你可以访问特定表单的所有表单元素并对它们进行操作。使用 JavaScript，你可以验证表单值、处理表单数据提交等。
语法
遵循以下语法来使用 forms 集合来操作 DOM 中的表单。
document.forms;
这里的 forms 是 document 对象的一个属性。
forms 集合的属性
| 属性 |
描述 |
| length |
表示 HTML 文档中的 <form> 元素数量。 |
forms 集合的方法
| 方法 |
描述 |
[index] |
从 HTML 表单集合的 0 基索引中获取特定的 <form> 元素。 |
item(index) |
从 HTML 表单集合的 0 基索引中获取特定的 <form> 元素。 |
namedItem(id) |
获取具有特定 id 的 <form> 元素。 |
返回值
document.forms 返回所有表单的集合，按照它们在 HTML 文档中的顺序排列。
示例：查找 HTML 文档中的 <form> 元素总数
在下面的代码中，我们使用 forms 集合的 length 属性来找出 HTML 文档中存在的表单数量。
<html>
<body>
<form>
<input type="text" name="first" id="first" value="First Name">
</form>
<form>
<input type="text" name="second" id="second" value="Last Name">
</form>
<form>
<input type="text" name="third" id="third" value="Contact">
</form>
<div id="output">Total number of forms in the HTML document is: </div>
<script>
document.getElementById('output').innerHTML += document.forms.length;
</script>
</body>
</html>
示例：获取所有 <form> 元素的 id
在下面的代码中，我们使用索引访问每个表单，并使用 id 属性获取特定表单的 id。
<html>
<body>
<form id="form1">
<label for="first"> Fruit Name: </label>
<input type="text" name="first" id="first">
</form>
<form id="form2">
<label for="second"> Price: </label>
<input type="text" name="second" id="second">
</form>
<form id="form3">
<label for="third"> Color: </label>
<input type="text" name="third" id="third">
</form>
<div id="output"> </div>
<script>
document.getElementById('output').innerHTML =
"Id of the first form is: " + document.forms[0].id + "<br>" +
"Id of the second form is: " + document.forms[1].id + "<br>" +
"Id of the third form is: " + document.forms[2].id;
</script>
</body>
</html>
示例：使用其 id 和 namedItem() 方法获取特定表单
在下面的代码中，我们使用 forms 集合作为参考，通过 namedItem() 方法获取具有特定 id 的表单。
<html>
<body>
<form id="form1">
<label for="first"> First Name </label>
<input type="text" name="first" id="first">
</form>
<form id="form2">
<label for="second"> Last Name </label>
<input type="text" name="second" id="second">
</form>
<div id="output">The innerHTML of the form element having id equal to form2 is: </div>
<script>
const output = document.getElementById('output');
output.innerHTML += document.forms.namedItem('form2').innerHTML;
</script>
</body>
</html>
JavaScript 表单提交
在 JavaScript 中，你可以使用 submit 输入类型并通过 onsubmit() 事件处理器来执行特定函数来处理表单数据。
示例
在下面的代码中，表单获取用户的名和姓。之后，当用户点击提交输入时，它会调用 submitForm() 函数。
在 submitForm() 函数中，我们使用 preventDefault() 方法来阻止没有提交表单的情况下执行函数。
之后，我们使用 forms 集合来访问表单及其输入字段的值。
最后，我们在输出中打印输入值。
<html>
<body>
<form onsubmit="submitForm(event)" id="nameform">
<p><label>First Name: </label><input type="text" name="firstname"></p>
<p><label>Last Name: </label><input type="text" name="lastname"></p>
<p><input type="submit"></p>
</form>
<div id="output"> </div>
<script>
function submitForm(e) {
e.preventDefault();
const output = document.getElementById('output');
const firstname = document.forms['nameform']['firstname'].value;
const lastname = document.forms['nameform']['lastname'].value;
output.innerHTML = "First Name: " + firstname + ", Last Name: " + lastname;
}
</script>
</body>
</html>
JavaScript 表单验证
在 JavaScript 中，你还可以验证表单以确保用户已填写所需输入项。你可以在提交表单时调用的函数中执行验证检查。
此外，如果表单不符合特定条件，你也可以在输出中显示错误信息。
示例
在下面的代码中，当用户提交表单时，我们会检查名和姓的长度是否小于 3。如果 firstname 或 lastname 的长度小于 3，则显示错误消息。
<html>
<body>
<form onsubmit="submitForm(event)" id="nameform">
<p>First Name: <input type="text" name="firstname"> </p>
<p>Last Name: <input type="text" name="lastname"> </p>
<p><input type="submit"></p>
</form>
<div id="output"> </div>
<script>
function submitForm(e) {
e.preventDefault();
const output = document.getElementById('output');
const firstname = document.forms['nameform']['firstname'].value;
const lastname = document.forms['nameform']['lastname'].value;
if (firstname.length < 3 || lastname.length < 3) {
output.innerHTML += "The length of the first name or last name should be greater than 3. <br>";
} else {
output.innerHTML = "First Name: " + firstname + ", Last Name: " + lastname;
}
}
</script>
</body>
</html>
JavaScript 表单数据验证
同样需要验证输入数据。
有时，你需要用户传递数字数据，但他们不小心传递了字符串数据。在这种情况下，开发者需要验证数据并显示错误消息。
你可以在客户端或服务器端验证数据。最佳做法是在客户端验证数据并将纯净的数据发送到服务器。
示例
在下面的代码中，我们创建了一个输入字段来获取用户的电子邮件地址。当用户提交表单时，我们使用正则表达式和 test() 方法来检查他们是否在输入框中输入了有效的电子邮件地址。
<html>
<body>
<form onsubmit="submitForm(event)" id="emailform">
<p>Email: <input type="email" name="email"> </p>
<p><input type="submit"></p>
</form>
<div id="output"> </div>
<script>
function submitForm(e) {
e.preventDefault();
const email = document.forms['emailform']['email'].value;
const emailRegex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
if (emailRegex.test(email)) {
document.getElementById('output').innerHTML = "Email is valid!";
} else {
document.getElementById('output').innerHTML = "Email is not valid!";
}
}
</script>
</body>
</html>
使用 HTML 约束进行表单验证（自动表单验证）
在 HTML5 中，引入了一些约束来验证表单。你可以将这些约束作为 HTML 元素的属性使用，并且如果输入不符合约束，则防止表单提交。
下表包含约束及其描述：
| 约束 |
描述 |
| disabled |
使输入元素失效。 |
| max |
指定输入元素的最大值。 |
| min |
指定输入元素的最小值。 |
| pattern |
指定输入元素的特定模式。 |
| required |
将输入元素指定为必填字段。 |
| type |
指定输入元素的类型。 |
语法
遵循以下语法将上述约束作为属性添加到 <input> 元素。
<input attr=value>
示例：使用 required 属性
在下面的代码中，我们在输入元素上使用了 required 属性。当你在未输入数字的情况下提交表单时，它会显示默认的错误消息。
<html>
<body>
<form onsubmit="submitForm(event)" id="form">
<p>Number: <input type="number" name="num" required> </p>
<p><input type="submit"></p>
</form>
<div id="output"> </div>
<script>
function submitForm(e) {
e.preventDefault();
const num = document.forms['form']['num'].value;
document.getElementById('output').innerHTML += "The submitted numeric value is: " + num + "<br>";
}
</script>
</body>
</html>
HTML 表单验证约束提供了有限的功能。因此，你可以编写自定义的 JavaScript 函数来验证表单。
你也可以使用 CSS 选择器来验证表单。