HTML: HTML 表单
表单（<form>）是网页与用户进行交互的主要方式——登录、注册、搜索以及联系信息等操作都依赖于表单来收集数据。
1. 表单基础
<form> 标签定义表单区域，内部包含各种输入控件。用户填写后提交，数据会发送到服务器：
▶ 示例
HTML
<form action="/submit" method="post">
<label>用户名：<input type="text" name="username"></label>
<label>密码：<input type="password" name="password"></label>
<button type="submit">登录</button>
</form>
2. 常用输入控件
<input> 是最灵活的控件，通过 type 属性变化出不同的输入形式：
▶ 示例
HTML
<!-- 文本输入 -->
<input type="text" placeholder="请输入姓名"><br>
<!-- 邮箱 -->
<input type="email" placeholder="you@example.com"><br>
<!-- 数字 -->
<input type="number" min="1" max="100"><br>
<!-- 单选框 -->
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女<br>
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="coding"> 编程<br>
<!-- 下拉框 -->
<select>
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
</select><br>
<!-- 文本域 -->
<textarea rows="4" placeholder="请输入留言……"></textarea>
💡 表单属性：
action 指定提交地址，method 指定请求方式（get 适合搜索，post 适合登录/注册）。placeholder 显示输入提示，required 标记必填字段。
3. 表单分组与更多元素
▶ 示例
<fieldset> 将相关控件分组，<legend> 提供分组标题。<datalist> 为输入框提供预选建议列表：
HTML
<form>
<fieldset>
<legend>个人信息</legend>
<label>姓名：<input type="text" name="name" list="names"></label>
<label>性别：
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</label>
</fieldset>
<datalist id="names">
<option value="张三">
<option value="李四">
<option value="王五">
</datalist>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('你点了我')">普通按钮</button>
</form>
<fieldset>+<legend>：给表单控件分组，加标题<datalist>+<option>：提供输入建议列表，配合list属性使用<button>的type：submit提交、reset重置、button普通按钮
❓ 常见问题
Q
<form>标签的action和method属性是什么？A
action指定表单数据提交到哪个服务器地址（URL），method指定提交方式。method有两种：GET把数据附加在URL后面（适合搜索查询），POST把数据放在请求体中（适合登录、注册等敏感数据）。如果没有服务器处理，可以不设置action，用JavaScript的event.preventDefault()拦截提交行为。Q
radio（单选）和checkbox（复选）有什么区别？A
radio是单选按钮，同一组只能选一个（通过name属性分组）；checkbox是复选框，可以同时选多个。关键点：radio必须设置相同的name值才能实现互斥；checkbox的name可以相同也可以不同，相同则提交为数组。两种都可以用checked属性设置默认选中。Q
<button>的type属性有什么作用？A
type决定按钮的行为：submit（默认）提交表单到action地址；reset清空表单所有输入；button没有任何默认行为，需要JavaScript绑定事件。注意：不写type时默认是submit，这可能导致意外提交表单。建议始终明确指定type。Q HTML5的表单验证够用吗？还需要JavaScript吗？
A HTML5提供了基本验证（
required、minlength、pattern等），能覆盖简单场景。但有局限：1）错误提示样式难以自定义；2）复杂验证（如两次密码一致）做不到；3）用户体验不够好（提示时机、样式不统一）。建议：用HTML5验证做基础防护，用JavaScript做增强验证和更好的用户体验。📖 小节
<form>定义表单，action和method控制提交行为<input>的type：text、password、email、number、radio、checkbox<select>+<option>下拉选择，<textarea>多行文本<fieldset>+<legend>分组，<datalist>输入建议<button>的type决定行为：submit / reset / button
📝 作业
- 注册表单：创建一个注册页面，包含用户名、邮箱、密码、确认密码、性别（radio）、兴趣爱好（checkbox）、一个提交按钮和一个重置按钮。用
<fieldset>分组。 - 输入建议：用
<datalist>做一个"城市选择"输入框，输入时自动显示北京、上海、广州、深圳等建议。
