HTML表单通过<form>、<input>、<textarea>等标签收集用户输入，适用于登录、注册等场景，结合<label>、<fieldset>等可提升可访问性与结构清晰度。
HTML表单是网页中收集用户输入信息的重要工具。通过不同的表单标签，开发者可以创建文本框、按钮、下拉菜单等交互元素。以下是常用的HTML表单标签及其功能与使用场景。
1. <form>：定义表单容器
功能：所有表单元素都应放在 <form> 标签内，它是表单的根容器，用于包裹和管理其他表单控件。
常用属性：
- action：指定表单数据提交的目标URL。
- method：设置提交方式，通常为 get 或 post。
- enctype：定义数据编码类型，上传文件时需设为 multipart/form-data。
使用场景：任何需要向服务器发送用户输入的页面，如登录、注册、搜索等。
立即学习“前端免费学习笔记（深入）”；
2. <input>：最常用的输入控件
功能：<input> 是多功能标签，通过 type 属性可呈现不同控件类型。
常见 type 类型及用途：
- text：单行文本输入，用于姓名、标题等。
- password：密码输入，字符隐藏显示。
- email：邮箱输入，自动校验格式。
- number：数字输入，支持上下调节按钮。
- checkbox：复选框，用于多选（如兴趣爱好）。
- radio：单选按钮，用于单选（如性别选择）。
- file：文件上传，允许用户选择本地文件。
- hidden：隐藏字段，不显示但可提交数据。
- submit 和 button：提交按钮或普通按钮。
使用场景：几乎所有需要用户输入的地方都会用到 input 标签。
3. <textarea>：多行文本输入
功能：<textarea> 用于输入较长文本内容，如留言、评论、描述等。
特点：支持换行，可通过 rows 和 cols 控制尺寸，也可用CSS样式调整。
使用场景：反馈表单、文章编辑、用户评论等需要大段文字输入的场合。
4. <select> 与 <option>：下拉选择菜单
功能：<select> 创建下拉列表，内部由多个 <option> 定义选项。
常用属性：
- multiple：允许用户选择多个选项（配合 Ctrl/Command 键）。
- selected：设置某个 option 为默认选中项。
使用场景：选择省份、城市、年份、分类筛选等结构化数据选择。
5. <label>：表单标签关联
功能：<label> 用于标注表单控件，提升可访问性和用户体验。
优势：点击 label 文本即可聚焦对应输入框，特别对复选框和单选按钮更友好。
使用方法：通过 for 属性绑定目标元素的 id。
例如：<label for="username">用户名</label><input type="text" id="username">
6. <button>：按钮元素
功能：<button> 可定义可点击的按钮，常用于提交表单或触发JavaScript操作。
type 类型：
- submit：提交表单（默认行为）。
- reset：重置表单内容。
- button：普通按钮，通常结合JS使用。
使用场景：提交注册信息、清空填写内容、执行自定义操作等。
7. <fieldset> 与 <legend>：表单分组
功能：<fieldset> 将相关表单元素分组，<legend> 为其添加标题。
使用场景：复杂表单中区分不同部分，如“个人信息”、“联系方式”等区块，增强结构清晰度。
基本上就这些。合理使用这些标签，可以让表单更易用、结构更清晰，同时提升网页的可访问性与用户体验。
