知识库

Appearance

Return to top
On this page

HTML表单

HTML表单是收集用户输入的重要工具，允许用户与网站进行交互。

表单基础

表单使用<form>元素创建，包含各种输入控件。

基本语法

html
<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  
  <button type="submit">提交</button>
</form>

form元素属性

action属性

指定表单提交的目标URL：

html
<form action="/process-form">
  <!-- 表单控件 -->
</form>

method属性

指定HTTP请求方法：

html
<form action="/submit" method="get">
  <!-- GET方法：数据附加在URL中 -->
</form>

<form action="/submit" method="post">
  <!-- POST方法：数据包含在请求体中 -->
</form>

其他重要属性

html
<form 
  action="/submit" 
  method="post"
  enctype="multipart/form-data"  <!-- 数据编码方式 -->
  target="_blank"               <!-- 提交后目标窗口 -->
  novalidate                   <!-- 禁用验证 -->
>
  <!-- 表单控件 -->
</form>

输入控件

文本输入

html
<!-- 单行文本 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="输入用户名">

<!-- 密码 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="输入密码">

<!-- 电子邮件 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="user@example.com">

<!-- 网址 -->
<label for="website">网站：</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

数字和范围

html
<!-- 数字输入 -->
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="0" max="120" value="18">

<!-- 范围滑块 -->
<label for="rating">评分：</label>
<input type="range" id="rating" name="rating" min="1" max="10" value="5">

日期和时间

html
<!-- 日期 -->
<label for="birthdate">生日：</label>
<input type="date" id="birthdate" name="birthdate">

<!-- 月份 -->
<label for="month">月份：</label>
<input type="month" id="month" name="month">

<!-- 周 -->
<label for="week">周：</label>
<input type="week" id="week" name="week">

<!-- 时间 -->
<label for="time">时间：</label>
<input type="time" id="time" name="time">

<!-- 日期时间 -->
<label for="datetime">日期时间：</label>
<input type="datetime-local" id="datetime" name="datetime">

选择控件

html
<!-- 单选按钮 -->
<fieldset>
  <legend>性别：</legend>
  <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>
</fieldset>

<!-- 复选框 -->
<fieldset>
  <legend>兴趣爱好：</legend>
  <input type="checkbox" id="reading" name="hobbies" value="reading">
  <label for="reading">阅读</label>
  
  <input type="checkbox" id="sports" name="hobbies" value="sports">
  <label for="sports">运动</label>
</fieldset>

<!-- 下拉选择 -->
<label for="country">国家：</label>
<select id="country" name="country">
  <option value="">请选择</option>
  <option value="cn">中国</option>
  <option value="us">美国</option>
  <option value="jp">日本</option>
</select>

<!-- 多选下拉 -->
<label for="languages">掌握语言：</label>
<select id="languages" name="languages" multiple>
  <option value="zh">中文</option>
  <option value="en">英文</option>
  <option value="ja">日文</option>
</select>

文件上传

html
<label for="avatar">头像：</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

<!-- 多文件上传 -->
<label for="documents">文档：</label>
<input type="file" id="documents" name="documents" multiple>

表单元素

textarea - 多行文本

html
<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" cols="50" placeholder="请输入您的留言..."></textarea>

fieldset 和 legend

用于对表单控件进行分组：

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

表单验证

内置验证属性

html
<!-- 必填字段 -->
<input type="text" name="username" required>

<!-- 最小/最大长度 -->
<input type="text" name="password" minlength="8" maxlength="20">

<!-- 模式匹配 -->
<input type="text" name="phone" pattern="[0-9]{11}" title="请输入11位手机号码">

<!-- 最小/最大值 -->
<input type="number" name="age" min="18" max="65">

自定义验证

html
<form id="myForm">
  <input type="email" id="email" name="email" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  const email = document.getElementById('email');
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  if (!emailRegex.test(email.value)) {
    e.preventDefault();
    alert('请输入有效的邮箱地址');
    email.focus();
  }
});
</script>

标签和可访问性

label标签

始终为输入控件提供标签：

html
<!-- 方法1：关联id -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方法2：包含输入控件 -->
<label>
  接受条款：
  <input type="checkbox" name="terms">
</label>

其他可访问性属性

html
<input 
  type="text" 
  name="search" 
  aria-label="搜索网站" 
  aria-describedby="search-help"
  autocomplete="on"
>

<div id="search-help">输入关键词进行搜索</div>

表单提交按钮

html
<!-- 提交按钮 -->
<button type="submit">提交</button>

<!-- 重置按钮 -->
<button type="reset">重置</button>

<!-- 普通按钮 -->
<button type="button">取消</button>

<!-- 图像按钮 -->
<input type="image" src="submit-button.png" alt="提交">

高级表单特性

自动填充

html
<form autocomplete="on">
  <input type="text" name="name" autocomplete="name">
  <input type="email" name="email" autocomplete="email">
  <input type="text" name="address" autocomplete="street-address">
</form>

数据列表

html
<input list="browsers" name="browser" placeholder="选择浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

输出元素

html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" name="a" value="50">
  +
  <input type="number" id="b" name="b" value="25">
  =
  <output name="result" for="a b">75</output>
</form>

表单样式

CSS样式示例

css
.form-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

.submit-btn {
  background-color: #007cba;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.submit-btn:hover {
  background-color: #005a87;
}

最佳实践

用户体验

  1. 使用清晰的标签和说明
  2. 提供适当的默认值
  3. 合理安排表单字段顺序
  4. 使用合适的输入类型
  5. 提供即时验证反馈
  6. 保持表单简洁

可访问性

  1. 正确使用label标签
  2. 提供足够的颜色对比度
  3. 确保键盘导航可用
  4. 使用适当的ARIA属性
  5. 提供错误信息说明

安全性

  1. 在服务器端验证所有输入
  2. 防止跨站脚本攻击(XSS)
  3. 使用HTTPS传输敏感数据
  4. 实施CSRF保护
  5. 限制文件上传类型和大小

完整表单示例

html
<form action="/register" method="post" novalidate>
  <fieldset>
    <legend>用户注册</legend>
    
    <div class="form-group">
      <label for="username">用户名 *</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        required 
        minlength="3" 
        maxlength="20"
        autocomplete="username"
      >
    </div>
    
    <div class="form-group">
      <label for="email">邮箱 *</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        required 
        autocomplete="email"
      >
    </div>
    
    <div class="form-group">
      <label for="password">密码 *</label>
      <input 
        type="password" 
        id="password" 
        name="password" 
        required 
        minlength="8"
        autocomplete="new-password"
      >
    </div>
    
    <div class="form-group">
      <label for="birthdate">生日</label>
      <input type="date" id="birthdate" name="birthdate">
    </div>
    
    <div class="form-group">
      <label for="country">国家</label>
      <select id="country" name="country">
        <option value="">请选择</option>
        <option value="cn">中国</option>
        <option value="us">美国</option>
        <option value="jp">日本</option>
      </select>
    </div>
    
    <div class="form-group">
      <input type="checkbox" id="newsletter" name="newsletter" value="yes">
      <label for="newsletter">订阅我们的新闻通讯</label>
    </div>
    
    <div class="form-group">
      <input type="checkbox" id="terms" name="terms" required>
      <label for="terms">我同意服务条款 *</label>
    </div>
    
    <button type="submit">注册</button>
  </fieldset>
</form>

HTML表单是Web应用的核心组件，正确实现表单不仅能提升用户体验，还能确保数据的安全性和完整性。