今日核心要点
掌握<form>元素这个网页与用户交互的关键工具，学会创建：

• 数据收集界面
• 用户登录/注册表单
• 搜索框和反馈表

表单基础结构

<form action="/submit" method="POST">
  <!-- 各种表单控件将放在这里 -->
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

关键属性解析：

• action：数据提交的目标URL（像快递收货地址）
• method：数据传输方式（GET像明信片，POST像密封包裹）

表单核心组件

1. 输入框 - 文字的容器

<input type="text" name="email" placeholder="请输入邮箱">

常用type类型：

• text：普通文本
• password：密码（显示为圆点）
• email：邮箱验证
• number：数字输入

2. 按钮 - 行动的触发器

<button type="submit">提交数据</button>
<button type="button">普通按钮</button>
<button type="reset">重置表单</button>

3. 标签 - 给输入项起名字

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

（点击标签文字也能聚焦输入框）

实用技巧

表单分组

<fieldset>
  <legend>登录信息</legend>  <!-- 分组标题 -->
  <label>用户名：<input type="text"></label>
  <label>密码：<input type="password"></label>
</fieldset>

必填项验证

<input type="text" required>  <!-- 必须填写 -->
<input type="email" required>  <!-- 必须符合邮箱格式 -->

默认值和提示

<input value="默认内容">
<textarea placeholder="这里输入描述..."></textarea>

常见错误

1. 忘记设置name属性 → 数据无法正确提交
2. 混淆id和name → id用于前端，name用于后端
3. 表单嵌套表单 → 就像把快递盒放进另一个快递盒

实际应用场景

1. 用户注册表单

<form action="/register" method="POST">
  <label>邮箱：<input type="email" name="email" required></label>
  <label>密码：<input type="password" name="pwd" minlength="6" required></label>
  <button type="submit">注册</button>
</form>

1. 搜索框

<form action="/search" method="GET">
  <input type="search" name="q" placeholder="搜索内容...">
  <button type="submit"></button>
</form>

1. 多步骤表单

<form id="multi-step-form">
  <!-- 第一步 -->
  <div class="step" data-step="1">
    <h3>基本信息</h3>
    <!-- 表单内容 -->
    <button type="button" onclick="nextStep(2)">下一步</button>
  </div>
  <!-- 更多步骤... -->
</form>

记住：表单就像网页的对话窗口，<input>是问题，<button>是回答，而<form>就是整场谈话的记录本。就像程序员和用户的第一次约会——你问得越多，了解得就越深。