1.4 表单与输入控件
表单（form）是用户和网站“对话”的地方。登录、注册、搜索、发评论、下单——凡是你往网页里输入东西的场景，背后都是表单。这一节学怎么用 HTML 把它们搭出来。
下面的“表单搭建器”让你勾选需要哪些字段，实时看到代码和一个真实可交互的表单。
正在加载交互实验...
表单的外壳：<form>
所有输入控件都放在 <form> 里：
html
<form>
<!-- 各种输入框放这里 -->
<button type="submit">提交</button>
</form>主角：<input> 和它的 type
<input> 是最常用的输入控件。神奇之处在于：同一个标签，靠 type 属性变出十几种样子。
html
<input type="text"> <!-- 普通文本框 -->
<input type="password"> <!-- 密码，显示为圆点 -->
<input type="email"> <!-- 邮箱，手机上会弹出 @ 键盘 -->
<input type="number"> <!-- 只接受数字 -->
<input type="checkbox"> <!-- 复选框，可多选 -->
<input type="radio"> <!-- 单选按钮 -->正在加载概念检查...
复选框 vs 单选按钮
这是初学者常踩的坑：
- 复选框
checkbox：每个独立，可以同时选中多个（“你喜欢的水果”）。
- 单选按钮
radio：把多个 radio 设成相同的name，它们就互斥，只能选一个（“你的性别”）。
html
<!-- 可多选 -->
<label><input type="checkbox"> 苹果</label>
<label><input type="checkbox"> 香蕉</label>
<!-- 只能选一个：注意 name 相同 -->
<label><input type="radio" name="plan"> 免费版</label>
<label><input type="radio" name="plan"> 专业版</label>正在加载概念检查...
label、placeholder 与其它控件
<label>：给输入框配一个说明文字。用<label>把文字和输入框包在一起，点文字也能聚焦输入框，对手机和无障碍都更友好。
placeholder：输入框里的灰色提示文字，一旦开始输入就消失。
<textarea>：多行文本框（写评论、留言）。
<select>+<option>：下拉选择菜单。
<button type="submit">：提交按钮。
html
<label>用户名
<input type="text" placeholder="起个名字">
</label>
<select>
<option>猫</option>
<option>狗</option>
</select>
<textarea rows="3" placeholder="说点什么…"></textarea>注意
别忘了
name。 真实表单提交时，每个输入框的 name 决定了数据用什么键名发给服务器。本节为了简洁有时省略了它，但实战中几乎每个控件都要有 name。正在加载本节练习...