JavaScript表单介绍
- 创业
- 2025-08-30 16:36:01
一、表单的基本概念
在网页开发里，表单是实现用户与网页交互的关键组件，用于收集用户输入的数据，JavaScript 则能为表单增添强大的交互性和功能性。表单在 HTML 里通过 <form> 标签创建，包含多种表单元素，如文本框、下拉框、单选框、复选框、提交按钮等。用户在这些元素里输入数据，点击提交按钮后，数据会被发送到服务器进行处理。
常用属性和方法：
document.forms：获取页面中的所有表单。
form.elements：获取表单中的所有控件（如输入框、按钮等）。
value：获取或设置输入框的值。
addEventListener()：为表单添加事件监听器。
submit()：手动提交表单。
reset()：重置表单。
二、表单的常用操作 1. 创建基本的 HTML 表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript 表单示例</title> </head> <body> <form id="myForm"> 用户名: <label for="username"></label><input type="text" id="username" name="username"><br><br> 密码: <label for="password"></label><input type="password" id="password" name="password"><br><br> <button type="button" onclick="getFormData()">提交</button> </form> <script> function getFormData() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; console.log('用户名:', username); console.log('密码:', password); alert(`用户名: ${username}, 密码: ${password}`); } </script> </body> </html> 2. 表单验证表单验证是确保用户提交的数据符合要求的重要步骤，JavaScript提供了强大的功能来实现前端验证。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单验证示例</title> </head> <body> <form id="validationForm" onsubmit="return validateForm()"> 邮箱: <label for="email"></label><input type="email" id="email" name="email"><br><br> 年龄: <label for="age"></label><input type="number" id="age" name="age"><br><br> <button type="submit">提交</button> </form> <script> function validateForm() { const email = document.getElementById('email').value; const age = document.getElementById('age').value; if (!email) { alert('邮箱不能为空'); return false; } if (isNaN(age) || age <= 0) { alert('请输入有效的年龄'); return false; } alert('表单验证通过！'); return true; } </script> </body> </html> 3. 使用JavaScript提交表单有时需要使用JavaScript程序化地提交表单。JavaScript提供了包含submit()方法的表单对象，通过获取表单的ID来获取表单对象。
document.getElementById("form1").submit(); 4. 使用FormData对象发送表单数据FormData对象可以方便地处理表单数据的发送。
const form = document.querySelector("#form1"); async function sendData() { const formData = new FormData(form); try { const response = await fetch(" example.org/post ", { method: "POST", body: formData, }); console.log(await response.json()); } catch (e) { console.error(e); } } 5. 表单重置可以通过JavaScript代码调用表单的reset()方法来重置表单。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单验证示例</title> </head> <body> <form id="form1"> <!-- 表单元素 --> <input type="button" value="重置" onclick="resetForm()"> </form> <script> function resetForm() { document.getElementById("form1").reset(); } </script> </body> </html> 6. 动态修改表单内容可以通过FormData对象获取表单中的所有数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态修改表单示例</title> </head> <body> <form id="dynamicForm"> 用户名: <input type="text" id="username" name="username"><br><br> <button type="button" onclick="changeUsername()">更改用户名</button> </form> <script> function changeUsername() { const newUsername = prompt('请输入新的用户名:'); if (newUsername) { document.getElementById('username').value = newUsername; } } </script> </body> </html> 7. 禁用表单元素可以通过设置disabled属性来禁用表单元素。
// 禁用用户名输入框 username.disabled = true; 8. 监听输入事件可以为表单元素添加事件监听器，例如input或change事件。
username.addEventListener("input", function() { console.log("用户名输入框内容已更改：", username.value); }); age.addEventListener("change", function() { console.log("年龄输入框内容已更改：", age.value); }); 三、完整示例代码以下是一个完整的HTML和JavaScript代码示例，展示了表单的创建、验证、获取数据和动态修改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript表单操作</title> </head> <body> <form id="exampleForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br><br> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="18"> <br><br> <label>性别：</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>爱好：</label> <input type="checkbox" id="reading" name="hobbies" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="traveling" name="hobbies" value="traveling"> <label for="traveling">旅行</label> <br><br> <button type="submit">提交</button> </form> <script> const form = document.getElementById("exampleForm"); const username = document.getElementById("username"); const password = document.getElementById("password"); const age = document.getElementById("age"); form.addEventListener("submit", function (event) { event.preventDefault(); const usernameValue = username.value.trim(); const passwordValue = password.value.trim(); const ageValue = age.value.trim(); if (usernameValue === "") { alert("用户名不能为空！"); return; } if (passwordValue.length < 6) { alert("密码长度至少为6位！"); return; } if (ageValue < 18) { alert("年龄必须大于等于18岁！"); return; } alert("表单验证通过！"); }); username.addEventListener("input", function () { console.log("用户名输入框内容已更改：", username.value); }); age.addEventListener("change", function () { console.log("年龄输入框内容已更改：", age.value); }); </script> </body> </html> 四、总结JavaScript对表单的操作功能非常强大，不仅可以实现简单的数据获取和验证，还可以动态修改表单内容、监听用户输入等。通过合理使用这些功能，可以提升用户体验并增强表单的交互性。
JavaScript表单介绍由讯客互联创业栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JavaScript表单介绍”
