HTML 表单控件

表单控件概述

表单控件是用户与网页交互的重要元素，用于收集用户输入的数据。HTML 提供了多种类型的表单控件，每种控件都有特定的用途和属性。

文本输入控件

单行文本输入框

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

密码输入框

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

电子邮件输入框

<input type="email" name="email" placeholder="请输入邮箱地址" />

电话号码输入框

<input type="tel" name="phone" placeholder="请输入电话号码" />

网址输入框

<input type="url" name="website" placeholder="请输入网址" />

搜索输入框

<input type="search" name="search" placeholder="请输入搜索内容" />

数字输入框

<input type="number" name="quantity" min="1" max="100" value="1" />

日期输入框

<input type="date" name="birthday" />

时间输入框

<input type="time" name="meeting-time" />

日期时间输入框

<input type="datetime-local" name="event-time" />

颜色选择器

<input type="color" name="fav-color" value="#ff0000" />

选择控件

单选按钮

<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>

复选框

<input type="checkbox" id="agree" name="agree" value="yes" />
<label for="agree">我同意条款</label>

下拉菜单

<select name="country">
  <option value="">请选择国家</option>
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
</select>

多选下拉菜单

<select name="hobbies" multiple size="3">
  <option value="reading">阅读</option>
  <option value="music">音乐</option>
  <option value="sports">运动</option>
  <option value="travel">旅行</option>
</select>

文本域

<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>

按钮

提交按钮

<input type="submit" value="提交" />

重置按钮

<input type="reset" value="重置" />

普通按钮

<input type="button" value="点击我" onclick="alert('Hello!')" />

图像按钮

<input type="image" src="submit.png" alt="提交" width="100" height="40" />

按钮元素

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('Hello!')">点击我</button>

隐藏字段

<input type="hidden" name="user_id" value="123" />

文件上传

<input type="file" name="avatar" accept="image/*" />

多文件上传

<input type="file" name="files[]" multiple accept="image/*" />

表单控件的通用属性

基本属性

• name - 控件的名称，用于表单提交时的键值对
• value - 控件的默认值
• id - 控件的唯一标识符，用于与 label 关联
• class - 控件的 CSS 类
• style - 控件的内联样式

状态属性

• disabled - 禁用控件
• readonly - 只读控件
• required - 必填项
• placeholder - 占位符文本

验证属性

• min - 最小值（适用于数字、日期等）
• max - 最大值（适用于数字、日期等）
• step - 步长（适用于数字、日期等）
• pattern - 正则表达式模式
• maxlength - 最大输入长度

表单控件的最佳实践

1. 使用 label 标签

<label for="username">用户名：</label>
<input type="text" id="username" name="username" />

2. 分组相关控件

<fieldset>
  <legend>个人信息</legend>
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" />
  </div>
</fieldset>

3. 提供清晰的错误提示

<input type="email" name="email" required />
<span class="error">请输入有效的邮箱地址</span>

4. 使用语义化的输入类型

使用 HTML5 提供的语义化输入类型，如 email、tel、date 等，以获得更好的用户体验和内置验证。

5. 考虑移动设备

确保表单控件在移动设备上也能正常显示和使用，特别是日期选择器、下拉菜单等控件。

6. 提供合理的默认值

为常用选项提供合理的默认值，减少用户输入。

表单控件的样式

基本样式

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

响应式样式

@media screen and (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
  }
}

表单验证

客户端验证

<form action="submit.php" method="post">
  <input
    type="email"
    name="email"
    required
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  />
  <input type="submit" value="提交" />
</form>

JavaScript 验证

function validateForm() {
  const email = document.getElementById("email").value;
  const pattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;

  if (!pattern.test(email)) {
    alert("请输入有效的邮箱地址");
    return false;
  }

  return true;
}

实践练习

创建一个包含以下控件的表单：

1. 用户名（文本输入框）
2. 密码（密码输入框）
3. 邮箱（电子邮件输入框）
4. 性别（单选按钮）
5. 兴趣爱好（复选框）
6. 国家（下拉菜单）
7. 个人简介（文本域）
8. 提交按钮和重置按钮

常见问题

1. 表单控件不显示

• 检查标签是否正确闭合
• 检查 CSS 样式是否隐藏了控件
• 检查浏览器兼容性

2. 表单提交后数据丢失

• 确保所有控件都有 name 属性
• 检查表单的 method 和 action 属性
• 检查服务器端代码是否正确处理表单数据

3. 表单验证不工作

• 检查验证属性是否正确设置
• 检查 JavaScript 验证代码是否有错误
• 检查浏览器是否支持 HTML5 验证

小结

• HTML 提供了多种类型的表单控件，满足不同的输入需求
• 使用语义化的输入类型可以获得更好的用户体验
• 为表单控件添加适当的验证可以提高数据质量
• 良好的表单设计可以提高用户体验和数据收集效率

下一章我们将学习 HTML 多媒体标签，了解如何在网页中嵌入音频和视频。