HTML 表单

注册账号、登录、搜索、下单——凡是需要"输入内容发给服务器"的功能都离不开表单。HTML 用 <form> 标签创建表单，里面放文本框、按钮、下拉列表等控件，是网页与用户交互的核心手段。

form 标签与提交

<form> 是所有控件的容器，两个关键属性决定数据提交到哪里、怎么提交：action 是接收数据的服务器地址，method 指定提交方式，常用 get（数据出现在地址栏）或 post（数据放在请求体里，更安全）。

<form action="login.php" method="post">
  <!-- 控件都写在这里 -->
</form>

在浏览器中显示为：一个空的表单区域，本身不可见，只有放入控件后才有内容。

文本输入 input

<input> 是最常用的输入控件，通过 type 属性改变形态：text 单行文本框，password 密码框（字符显示为圆点），email 邮箱框等；name 属性是控件的"名字"，提交时服务器靠它识别数据。

<form action="login.php" method="post">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="pwd"><br>
  <input type="submit" value="登录">
</form>

在浏览器中显示为：一个"用户名"文本框、一个显示为圆点的密码框，以及一个"登录"提交按钮。

单选与复选

同组单选按钮的 name 必须相同，且只能选一个，用 checked 可默认选中；复选框（checkbox）每个独立，可多选。它们的 value 值代表选中后提交的内容。

性别：<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
爱好：<input type="checkbox" name="hobby" value="code">编程
<input type="checkbox" name="hobby" value="read">阅读

在浏览器中显示为：性别后有两个单选框（默认选中"男"），爱好后有两个可多选的复选框。

下拉列表 select

<select> 创建下拉菜单，每个选项用 <option> 表示，selected 设置默认项，multiple 允许按住 Ctrl 多选。下拉菜单能节省空间，适合选项较多的场景。

<select name="city">
  <option value="bj" selected>北京</option>
  <option value="sh">上海</option>
  <option value="gz">广州</option>
</select>

在浏览器中显示为：一个默认显示"北京"的下拉框，点击后可展开选择上海、广州。

多行文本与按钮

<textarea> 提供可换行的多行输入框，用 rows、cols 控制行数和列数；<button> 可创建自定义按钮，submit 类型的 input 或 button 点击后把整个表单提交给 action 地址。

<textarea name="message" rows="4" cols="30">请输入留言……</textarea>
<button type="submit">发送</button>

在浏览器中显示为：一个四行高的多行文本框，预填"请输入留言……"，下方是"发送"按钮。

小结

表单 = form 容器 + input/select/textarea 等控件，action 与 method 决定提交去向，name 决定提交的数据名。学会表单，网页就能真正"接收"用户输入了。