表单的基本结构(form)

表单的基本结构(form)

表单是HTML中用于收集用户输入的重要元素，它允许用户通过文本框、单选按钮、复选框等控件提交数据。一个完整的表单通常包含<form>标签及其内部的各类输入控件，还可能包含提交按钮和验证逻辑。

form标签的基本属性

<form>标签是表单的容器，它有几个关键属性控制表单行为：

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- 表单内容 -->
</form>

• action：指定表单提交的URL地址
• method：定义数据提交方式，通常是get或post
• enctype：指定表单数据的编码类型，特别是上传文件时需要设置为multipart/form-data

常见的表单控件

文本输入框

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

• type="text"创建单行文本输入框
• required属性表示必填字段
• minlength设置最小输入长度

密码输入框

<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password" required>

密码框会隐藏用户输入内容，显示为圆点或星号。

单选按钮(Radio Buttons)

<label>性别：
  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女
</label>

• 相同name的单选按钮组成一组
• checked属性设置默认选中项

复选框(Checkboxes)

<label>兴趣爱好：
  <input type="checkbox" name="hobby" value="reading"> 阅读
  <input type="checkbox" name="hobby" value="sports"> 运动
  <input type="checkbox" name="hobby" value="music"> 音乐
</label>

复选框允许用户选择多个选项。

下拉选择框(Select)

<label for="city">所在城市：</label>
<select id="city" name="city">
  <option value="">--请选择--</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

• <select>创建下拉列表
• <option>定义可选项
• selected属性可设置默认选中项

表单按钮

提交按钮

<button type="submit">提交</button>
<!-- 或者 -->
<input type="submit" value="提交">

点击提交按钮会将表单数据发送到action指定的URL。

重置按钮

<button type="reset">重置</button>
<!-- 或者 -->
<input type="reset" value="重置">

重置按钮会清除表单中的所有用户输入。

表单分组和标签

fieldset和legend

<fieldset>
  <legend>个人信息</legend>
  <!-- 表单控件 -->
</fieldset>

• <fieldset>将相关控件分组
• <legend>为分组提供标题

label标签

<label for="email">电子邮箱：</label>
<input type="email" id="email" name="email">

• for属性关联对应的输入控件
• 点击标签可以聚焦关联的输入框

HTML5新增表单元素和属性

新的输入类型

<input type="email" name="user_email">
<input type="url" name="website">
<input type="date" name="birthday">
<input type="color" name="fav_color">

HTML5引入了多种新的输入类型，浏览器会提供相应的输入界面和验证。

表单验证属性

<input type="text" required pattern="[A-Za-z]{3}">
<input type="number" min="1" max="100">
<input type="text" maxlength="20">

• required：必填字段
• pattern：正则表达式验证
• min/max：数值范围限制
• maxlength：最大输入长度

表单布局示例

<form action="/register" method="post">
  <fieldset>
    <legend>用户注册</legend>
    
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>
    </div>
    
    <div class="form-group">
      <label for="email">电子邮箱：</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
      <label for="pwd">密码：</label>
      <input type="password" id="pwd" name="password" required minlength="6">
    </div>
    
    <div class="form-group">
      <label>性别：</label>
      <label><input type="radio" name="gender" value="male" checked> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
    </div>
    
    <div class="form-group">
      <label for="interests">兴趣爱好：</label>
      <select id="interests" name="interests" multiple>
        <option value="sports">运动</option>
        <option value="music">音乐</option>
        <option value="reading">阅读</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="bio">个人简介：</label>
      <textarea id="bio" name="bio" rows="4"></textarea>
    </div>
    
    <div class="form-actions">
      <button type="submit">注册</button>
      <button type="reset">重置</button>
    </div>
  </fieldset>
</form>

表单数据提交和处理

表单数据提交后，服务器端可以通过以下方式获取：

• GET方法：数据附加在URL后，如/submit?username=test&email=test@example.com
• POST方法：数据包含在请求体中

服务器端处理示例(PHP)：

<?php
$username = $_POST['username'];
$email = $_POST['email'];
// 处理数据...
?>

表单与JavaScript交互

JavaScript可以增强表单功能：

document.querySelector('form').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取表单数据
  const formData = new FormData(this);
  
  // 验证表单
  if(!validateForm(formData)) {
    return;
  }
  
  // 使用AJAX提交表单
  fetch(this.action, {
    method: this.method,
    body: formData
  }).then(response => {
    // 处理响应
  });
});

function validateForm(formData) {
  // 实现自定义验证逻辑
  return true;
}

表单可访问性考虑

确保表单对所有用户都可访问：

<label for="search">搜索：</label>
<input type="search" id="search" name="search" aria-describedby="searchHelp">
<span id="searchHelp">请输入要搜索的关键词</span>

<!-- 错误提示 -->
<div id="emailError" role="alert" aria-live="assertive"></div>

• 使用aria-*属性增强可访问性
• 为表单控件提供清晰的标签和说明
• 确保键盘可操作所有表单元素