HTML 词条目录
前端Wiki/HTML/进阶/表单

form 与基本输入

<form> 是表单的容器,两个核心属性决定数据去向:action 指定提交到的服务器地址,method 指定提交方式——get 把数据拼在 URL 后面(适合搜索),post 把数据放在请求体里(适合注册、登录等涉及数据写入的场景)。

每个输入控件都应有 name 属性,提交时数据以"名称=值"的形式打包发送,没有 name 的控件数据不会被提交。输入框旁的说明文字用 <label> 标注,并通过 for 属性指向输入框的 id——点击文字也能聚焦输入框,屏幕阅读器也能正确朗读。

提交按钮用 <button type="submit">,点击后浏览器自动收集表单数据并发送。

本节要点form 管 action 和 method;控件必须有 name 才会提交数据;每个输入框配一个 label(for 对应 id);提交用 button type="submit"。
HTML
<form action="/api/login" method="post">
  <!-- label 的 for 指向 input 的 id,点击文字即可聚焦输入框 -->
  <label for="user">用户名</label>
  <input type="text" id="user" name="username">

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

  <!-- 提交时发送:username=输入值 & password=输入值 -->
  <button type="submit">登录</button>
</form>