HTML 表单设计与验证
创建 HTML 表单的步骤如下：
-
使用
<form>标签来创建表单，<form>标签有一个action属性，用于指定表单提交的目标 URL。 -
在
<form>标签内部，使用<input>标签来创建输入框。<input>标签有一个type属性，用于指定输入框的类型，例如文本框、密码框、电子邮件输入框等。<input>标签也有一个name属性，用于在表单提交时标识这个输入字段。 -
使用
<select>标签来创建下拉菜单。在<select>标签内部，使用<option>标签来创建选项。<option>标签有一个value属性，用于指定选项的值，还有一个可选的selected属性，用于指定默认选中的选项。 -
使用
<input type="radio">标签来创建单选按钮。为了让一组单选按钮相互关联，你需要给它们相同的name属性，但value属性需要分别设置。 -
使用
<input type="checkbox">标签来创建复选框。与单选按钮类似，你可以给复选框设置name和value属性。
使用 JavaScript 进行表单验证的步骤如下：
-
在 HTML 文件的
<script>标签中，使用document.getElementById()方法获取表单元素。 -
使用事件监听器（例如
addEventListener()）来监听表单提交事件。在事件处理程序中，你可以执行验证逻辑。 -
在验证逻辑中，你可以使用各种条件语句和正则表达式来检查用户输入。例如，你可以使用正则表达式验证电子邮件格式，使用条件语句验证密码的长度等。
-
如果验证失败，你可以使用
event.preventDefault()方法来阻止表单提交，并在页面上显示错误消息。如果验证成功，你可以允许表单提交到指定的目标 URL。
以下是一个示例代码，展示了如何创建一个简单的表单并使用 JavaScript 进行验证：
<!DOCTYPE html>
<html>
<head><title>Form Validation</title>
</head>
<body><form id="myForm" action="submit-url" method="POST"><label for="name">Name:</label><input type="text" id="name" name="name" required><label for="email">Email:</label><input type="email" id="email" name="email" required><label for="password">Password:</label><input type="password" id="password" name="password" required><input type="submit" value="Submit"></form><script>document.getElementById("myForm").addEventListener("submit", function(event) {var nameInput = document.getElementById("name");var emailInput = document.getElementById("email");var passwordInput = document.getElementById("password");if (nameInput.value === "") {event.preventDefault();alert("Please enter your name.");}if (emailInput.value === "") {event.preventDefault();alert("Please enter your email.");}if (passwordInput.value.length < 8) {event.preventDefault();alert("Password must be at least 8 characters long.");}});</script>
</body>
</html>
这段代码创建了一个包含名称、电子邮件和密码输入字段的表单。在提交表单时，使用 JavaScript 进行了三个验证检查：确保名称字段不为空、电子邮件字段不为空，并且密码字段长度至少为 8 个字符。如果任何一个验证条件失败，表单将不会提交，并显示相应的错误消息。