<form>-表单容器

<form> 是 HTML 中用于创建交互式表单的核心容器标签，它允许用户输入数据并通过 HTTP 请求提交到服务器。表单可以包含文本输入框、复选框、单选按钮、下拉菜单等多种控件，是 Web 开发中实现用户交互的重要工具。

<form> 的基本结构

一个典型的 <form> 标签包含以下关键属性：

<form action="/submit" method="POST" enctype="application/x-www-form-urlencoded">
  <!-- 表单控件放在这里 -->
</form>

• action：指定表单数据提交的服务器 URL
• method：定义数据发送方式，通常是 GET 或 POST
• enctype：设置表单数据的编码类型

表单的提交方法

GET 方法

GET 方法将表单数据附加到 URL 的查询字符串中：

<form action="/search" method="GET">
  <input type="text" name="q">
  <button type="submit">搜索</button>
</form>

提交后 URL 会变成类似 /search?q=keyword 的形式。

POST 方法

POST 方法将数据放在 HTTP 请求体中发送：

<form action="/login" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登录</button>
</form>

这种方式更适合发送敏感数据或大量数据。

表单编码类型

enctype 属性决定了表单数据如何编码：

1. application/x-www-form-urlencoded（默认值）

   <form enctype="application/x-www-form-urlencoded">
   

2. multipart/form-data（用于文件上传）

   <form enctype="multipart/form-data">
     <input type="file" name="avatar">
   </form>
   

3. text/plain（纯文本格式，不常用）

表单控件

<form> 可以包含多种类型的表单控件：

文本输入

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

密码输入

<input type="password" name="pwd">

单选按钮

<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">
<label for="agree">我同意条款</label>

下拉选择

<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

文本域

<textarea name="comment" rows="4" cols="50"></textarea>

表单验证

HTML5 引入了内置的表单验证功能：

<form>
  <!-- 必填字段 -->
  <input type="text" name="name" required>
  
  <!-- 邮箱格式验证 -->
  <input type="email" name="email">
  
  <!-- 数字范围验证 -->
  <input type="number" name="age" min="18" max="99">
  
  <!-- 自定义正则验证 -->
  <input type="text" name="zip" pattern="\d{6}">
  
  <button type="submit">提交</button>
</form>

表单事件处理

可以通过 JavaScript 处理表单事件：

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认提交行为
    const formData = new FormData(this);
    // 处理表单数据...
  });
</script>

表单数据收集

现代 JavaScript 提供了多种方式收集表单数据：

1. 使用 FormData 对象：

   const formData = new FormData(document.querySelector('form'));
   

2. 手动收集：

   const form = document.querySelector('form');
   const data = {
     username: form.elements.username.value,
     password: form.elements.password.value
   };
   

表单与 AJAX

结合 AJAX 实现无刷新表单提交：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  fetch(this.action, {
    method: this.method,
    body: new FormData(this)
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

表单布局与样式

虽然 <form> 本身没有默认样式，但可以通过 CSS 美化表单：

<style>
  form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
  }
  
  input, select, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
</style>

表单辅助元素

<fieldset> 和 <legend>

用于分组表单控件：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <input type="text" name="name">
    <input type="email" name="email">
  </fieldset>
</form>

<label>

提高表单可访问性：

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

表单安全考虑

1. 防止 CSRF 攻击：

   <form>
     <input type="hidden" name="_csrf" value="随机令牌">
   </form>
   

2. 密码字段安全：

   <input type="password" name="password" autocomplete="current-password">
   

表单性能优化

1. 避免大型表单，分页或分步骤提交
2. 对大型表单使用惰性加载
3. 合理使用 autocomplete 属性：

   <input type="text" name="address" autocomplete="street-address">
   

表单与框架集成

在 React 中处理表单：

function MyForm() {
  const [formData, setFormData] = useState({});
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

表单可访问性实践

1. 确保每个表单控件都有对应的 <label>
2. 为视觉障碍用户提供适当的 ARIA 属性
3. 确保表单可以通过键盘完全操作

<form aria-labelledby="form-title">
  <h2 id="form-title">注册表单</h2>
  
  <div>
    <label for="email">电子邮箱：</label>
    <input type="email" id="email" name="email" 
           aria-required="true" required>
  </div>
</form>

表单的现代替代方案

虽然传统表单仍然广泛使用，但现代 Web 应用也常采用：

1. 单页应用中的表单组件
2. 使用 GraphQL 替代传统表单提交
3. Web Components 实现的自定义表单元素

表单与 Web API 集成

结合浏览器 API 增强表单功能：

<form id="location-form">
  <input type="text" name="location">
  <button type="button" id="get-location">获取当前位置</button>
</form>

<script>
  document.getElementById('get-location').addEventListener('click', () => {
    navigator.geolocation.getCurrentPosition(position => {
      document.querySelector('input[name="location"]').value = 
        `${position.coords.latitude},${position.coords.longitude}`;
    });
  });
</script>

表单的国际化考虑

为多语言表单添加支持：

<form>
  <label for="name" data-lang="en">Name</label>
  <label for="name" data-lang="zh" hidden>姓名</label>
  <input type="text" id="name" name="name">
</form>

<script>
  function setFormLanguage(lang) {
    document.querySelectorAll(`[data-lang]`).forEach(el => {
      el.hidden = el.dataset.lang !== lang;
    });
  }
</script>