HTML 表单实战：从创建到验证

HTML表单是用于收集用户输入数据的一种方式，可以用于创建各种类型的表单，例如登录表单、注册表单、调查问卷表单等。本文将详细介绍表单元素的使用，并利用JavaScript实现对表单数据的验证。

HTML表单元素的使用

输入框<input>

<input>元素用于接收用户输入的文本。它有许多不同的类型，用于不同的输入需求。

文本输入框：

html 复制代码

<input type="text" name="username" placeholder="请输入用户名" required>

密码输入框：

html 复制代码

<input type="password" name="password" placeholder="请输入密码" required>

单选框：

html 复制代码

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

复选框：

html 复制代码

<input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="basketball">篮球

文件上传：

html 复制代码

<input type="file" name="avatar" accept="image/png, image/jpeg">

隐藏输入：

html 复制代码

<input type="hidden" name="id" value="123">

文本域<textarea>

<textarea>元素用于多行文本输入。

html 复制代码

<textarea name="comment" rows="4" cols="50" placeholder="请输入评论内容"></textarea>

下拉菜单<select>

<select>元素用于创建下拉菜单。

html 复制代码

<select name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
</select>

表单数据的验证

必填项验证

可以通过设置required属性来标记必填项。

html 复制代码

<input type="text" name="username" required>

邮箱格式验证

可以使用正则表达式来验证邮箱格式。

html 复制代码

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

JavaScript实现表单数据验证

可以使用JavaScript来对表单数据进行验证。以下是一个简单的示例：

html 复制代码

<script>
function validateForm() {
  var username = document.forms["myForm"]["username"].value;
  if (username == "") {
    alert("用户名不能为空");
    return false;
  }
  
  var password = document.forms["myForm"]["password"].value;
  if (password == "") {
    alert("密码不能为空");
    return false;
  }
  
  var email = document.forms["myForm"]["email"].value;
  var emailPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  if (!emailPattern.test(email)) {
    alert("邮箱格式不正确");
    return false;
  }
}
</script>

<form name="myForm" onsubmit="return validateForm()">
  <!-- 表单元素 -->
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  
  <input type="submit" value="提交">
</form>

在上面的示例中，validateForm()函数用于验证表单数据。如果数据不符合要求，会弹出一个警告框并阻止表单提交。

这只是一个简单的示例，实际的表单验证可能需要更复杂的逻辑。你可以根据实际需求来编写验证代码。

希望这些信息对你有所帮助，祝你能够开发出具有基本交互功能的表单页面！