表单是网页的"入口"

注册、登录、搜索、留言、调查问卷……网页上几乎所有"输入信息"的地方都是表单。学会表单，网页就从"只能看"变成"能交流"。

表单由三部分组成：输入控件（input、textarea、select）、提交按钮、以及处理逻辑（通常用 JavaScript 或后端）。这篇文章讲清前两部分，并用 JavaScript 让表单真正"活"起来。

表单是网页从展示走向应用的第一步。
本文核心知识点
  • input类型决定输入方式。
  • label让表单更易用。
  • submit提交动作触发。
  • JS 校验让数据更可靠。
HTML 表单配图：蓝色渐变背景上一个圆角矩形白色卡片，卡片内有两个空白输入框长条和一个彩色圆形按钮，卡片旁边漂浮小铅笔、勾选框、小齿轮和云朵，背景有虚线网格
一个输入框加一个按钮，就是最简单的表单。

input：各种各样的输入框

input 是表单的主角，靠 type 属性决定输入方式：text 普通文本、email 邮箱、password 密码、number 数字、date 日期。

<input type="text" name="username" placeholder="请输入用户名">
<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="pwd">
<input type="number" name="age" min="0" max="120">

name 属性很重要：提交数据时它就是"数据的名字"，后端靠它识别每个字段。

textarea 与 select

text 只能输一行，多行文字用 textarea；从固定选项里选一个用 select。

textarea 的 rows 和 cols 控制显示大小，但实际内容可以无限多；select 里每个 option 的 value 是提交给后端的值，而文字是用户看到的，两者可以不同。还有一组很常用的控件是单选框 radio 和复选框 checkbox：radio 一组只能选一个（靠相同的 name 分组），checkbox 可以多选。做一个"兴趣调查"时，单选年级用 radio，多选爱好用 checkbox，正好把两种控件的区别练明白。

<textarea name="msg" rows="4" cols="40"></textarea>
<select name="grade">
  <option value="g6">六年级</option>
  <option value="g7">七年级</option>
</select>

label 与无障碍

每个输入框都应该配一个 label，用 for 属性指向输入框的 id。这样点击文字就能聚焦输入框，读屏软件也能正确读出含义。

<label for="uname">用户名</label>
<input type="text" id="uname" name="username">

无障碍不是加分项，而是合格网页的基本要求。

按钮与提交

表单里放一个 submit 按钮，点击后浏览器会把所有有 name 的控件打包提交。提交方式常用 GET 或 POST：GET 适合搜索（数据出现在网址里），POST 适合留言（数据在请求体里）。

<form action="/api/msg" method="post">
  <input type="text" name="title">
  <button type="submit">提交</button>
</form>