form标签是HTML表单根容器，必须包裹输入控件并设置action和method属性；内部控件需配name属性供服务器识别字段名，label需用for关联id以提升可访问性；多字段时宜用fieldset+legend分组。

form 标签是 HTML 表单的根容器，必须用它包裹所有输入控件，否则浏览器无法识别为可提交的表单。它的核心作用不是“显示内容”，而是定义数据“往哪发”和“怎么发”。

必须设置 action 和 method 属性

这两个属性缺一不可，否则表单无法正确提交：

• action：指定数据提交的目标地址，比如 /api/register、submit.php 或留空（默认提交到当前页面 URL）
• method：决定传输方式，常用 post（推荐用于登录、注册等含敏感或结构化数据的场景），get 仅适合简单搜索类请求（数据会暴露在 URL 中）

内部控件要配 name 和语义化 label

服务器靠 name 属性识别字段名，例如 <input name="email"> 提交后生成 email=xxx@xx.com；同时，每个输入框应有对应的 <label for="id">，且 for 值与控件 id 一致，这样点击文字也能聚焦输入框，对鼠标和屏幕阅读器都友好。

Claude风格HTML汇报文件

生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid

下载

用 fieldset + legend 组织逻辑区块

当表单字段较多时，用 <fieldset> 把相关项分组，再加 <legend> 做小标题，既提升可读性，也利于后续用 CSS 或 JS 按组操作。例如注册表单中，“账户信息”“个人信息”可分别用 fieldset 隔开。

立即学习“前端免费学习笔记（深入）”；

基础结构示例（可直接复用）

以下是最简但合规的 form 结构：

<form action="/submit" method="post">
  <fieldset>
    <legend>登录信息</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
  </fieldset>
  <input type="submit" value="登录">
</form>