控件

元信息

• 目标：能说出控件解决的核心问题——把用户完全自由的输入收敛为可预期的形态；能讲出控件从纸表单、图形界面对话框到 HTML5 新类型的演进线索；能为控件配好 name/label/placeholder 三件标配
• 关键概念：控件、收敛输入、name属性、label、placeholder、HTML5 输入类型、自定义控件
• 关联阶段：cp1
• 常见误区：控件漏写 name 属性（服务端脚本按 name 读取控件的值，漏了数据就传不到后端）；radio/checkbox 各写不同 name（相同 name 才标记为同一组，从而具有单选/多选特征）；以为 HTML5 新类型只是外观不同（类型还会切换手机键盘、打开原生选择器、自带基础校验）；以为自绘控件只是换个皮肤（原生控件自带的键盘操作与读屏支持会一并丢掉）
• 在线示例：pcd 微线——省市区三级联动五版：从 onChange 事件到组件化封装，下拉联动选值的完整演化

从一张纸表单说起

先看一张纸质的报名表：要填姓名，纸上印一条横线；要填性别，纸上印好"男○ 女○"，圈一个；要选课程，纸上印好方框，打勾。这些横线、圈、框，就是纸表单的"控件"。

横线写字、圈选性别、勾选课程——网页表单的文本框、单选框、复选框，照抄的就是这三样。

它们都在做同一件事——约束输入：横线告诉你这里写字；圈和框把可能的答案提前印死，你只能从中选。凡是想从用户那里得到一个"确定的答案"的地方，表单都会提供对应的部件，而不是留一块空白任人发挥。

网页表单照抄了这套做法：文本框对应横线，单选框对应圈，复选框对应勾选框，下拉列表对应"从下列选项中选择"。所以——

控件，就是页面预定义好的交互部件：它规定用户以什么方式输入，也规定了提交出去的值长什么样。

自己先逐个点一点：表单控件演示页，注意哪些控件是填空、哪些是选择、哪些是点击提交。

前置

• 表单——本文讲表单里的"零件"，form 的 action/method 等整条流程在那篇
• HTML基本语法——标签、属性、值的写法
• 语义标记——控件是"标签表意"思想的又一例：选对控件，机器就懂了这个输入是什么

控件的来历

控件比 Web 年长得多：

• 图形界面时代（1980 年代初）：施乐 Star、苹果 Lisa 的对话框里已经有了按钮、输入框、勾选框，统称为控件（control）。1990 年代 Visual Basic 这类可视化开发工具流行，"从工具箱拖一个控件到窗口"成了普遍做法，"控件"一词由此普及
• Web 最初是只读的：早期的网页只能看、不能答。1993 年前后的 HTML+ 提案给网页加上了表单 form，网页第一次能向用户提问——最早的大户就是搜索引擎的搜索框；1995 年 HTML 2.0 把表单定为标准
• 停滞与补课：从 HTML 2.0 到 HTML5 之前的近十五年，控件家族几乎没再新增；HTML5 时代一口气补了 search、tel、email、url、number、range、date、color 等十余种新类型。为什么这时候补？手机来了——见下文"现代控件"

交互原理：收敛输入

控件族谱看起来杂，其实排的是一条光谱：收敛程度——从"完全不收敛"到"值域封闭"：

控件	用户能输入什么	提交出的值	收敛程度
文本框	任意字符串	任意字符串	不收敛，校验压力全在后面
数字框、日期选择	限定类型的输入	合法的数字/日期	类型被锁定
单选框、复选框、下拉列表	只能在预置选项里点选	选项值之一	值域封闭，"能选的就是合法的"

• 单选框 radio 的名字来自老式汽车收音机的预设按键：按下一个，其余的自动弹起。同名的一组单选框同理——选中一个，其余自动取消
• 收敛得越狠，后面的校验越省事：下拉列表天生只会提交选项之一，几乎不需要校验格式；文本框什么都拦不住，校验的活全压给了它——这正是下一篇数据校验要接手的部分
• 收敛与自由是一对矛盾：全部用下拉，格式是干净了，可用户没法给出你没预料到的答案。设计表单，就是在这对矛盾里找平衡

控件的三件标配

每个控件都要回答三个问题：值传给谁（name）、控件叫什么（label）、示例长什么样（placeholder）。

name 属性

• 控件必须要有name属性,因为服务端脚本将根据name属性来读取控件的值
• 对于单选或多选控件而言,相同的name标记着它们属于同一组,从而具有单选或多选的输入特征。反过来，如果把一组单选框各写不同的 name，它们就成了互不相干的独立控件，个个都能选上——单选失效，这是最常见的手误

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

控件标签标记 <label>

<label>标记用于说明控件的含义,通常与控件结对出现,对于非视觉用户（靠屏幕阅读器，即读屏软件，听取页面的用户）尤其有意义

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

预期结果：点击 label 的文字"姓名"，光标应自动落到配对的输入框里——for 与控件的 id 对上时，label 就是控件的一个可点击延伸区。

可以简单的认为:控件的name属性是一个后端属性,而id属性才是一个前端属性

控件提示属性 placeholder

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

Placeholder 是 HTML5 新增的一个表单标签属性，当 input 或者 textarea 设置了该属性后，该属性的值将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字自动消失。

占位符可以补充<label>标记的作用,提供输入的示例,更好的提示用户.

现代控件：HTML5 的新类型

HTML5 新增的十余种 input 类型，不只是"长得不一样"，每一类都同时带来三件事：

• 手机键盘适配：手机没有实体键盘，输入什么弹什么键盘。type="tel" 弹数字拨号键盘，type="email" 的键盘上直接带 @ 键——类型把"用户要输什么"提前告诉了设备
• 原生选择器：type="date"、type="color"、type="range" 弹出系统自带的日期面板、取色器、滑杆，以前这些都要引第三方的 JS 库
• 自带基础校验：type="email"、type="url" 免写正则，浏览器按类型自动检查——这已是数据校验的领域，下篇展开

输入建议与自动填充

新类型之外，还有两个补充机制：

• datalist：给文本框挂一串预置建议，用户可以选，也可以自由输入——介于"收敛"与"自由"之间
• autocomplete：告诉浏览器这里填的是邮箱、地址还是电话，浏览器就能用已存的个人资料自动填充

自定义控件

再往外走一步是自定义控件：原生控件的样式难改，不少站点干脆用 div 加 JS 自己画下拉框、开关。

换皮肤有代价——原生控件自带的键盘操作、读屏支持不会跟着 div 过来，得自己补齐（ARIA，一组给自定义部件补语义的无障碍属性），否则可访问性直接倒退。Web Components 就是把"自定义部件"标准化的尝试。

原则仍是语义标记那条：能用原生控件，就用原生控件。

小结

• 控件是页面预定义的交互部件，从纸表单的横线、圈、框照抄而来，规定输入的方式与值的形态
• 排成一条收敛光谱：文本框不收敛 → 数字/日期锁类型 → 单选/复选/下拉锁死值域；收敛越狠，校验越省事
• 三件标配：name 给后端（按 name 收值），label 给人和读屏软件，placeholder 给示例
• HTML5 新类型不是外观：换手机键盘、开原生选择器、自带基础校验
• 自绘控件丢的不只是原生样式，还有键盘与读屏支持——能用原生就用原生

延伸

• 本篇只管"输入的形态"；值是否合法，归数据校验
• 回望：表单——控件组成表单，表单走完提交-处理-响应的整条流程
• 实训：表单提交——亲手用控件攒一张表单发出去

参考

• HTML5 表单 input 类型（runoob）
• 如何构建 HTML 表单（MDN）