第二十章 input 的类型-易看设计

上一章我们主要在研究网址的结构，而其实 input 的类型（type）也是一个十分神奇的东西，它表示的是这个输入框可以输入的数据类型。好吧，也并不全是，比如 search 其实和 text 之间区别并不大，但是在意义上就不一样了，毕竟对于 text 我们只能知道这是文本的内容，而对于 search 我们就可以知道这个文本内容是用来搜索的。

总之呢，类型会影响到我们可以输入的数据，浏览器^[1]也会根据不同的类型作出不同的反应，展示出不同的输入框样式。

虽然目前我们还用不上，但是将来你会喜欢上这些东西的，因为我们会把它们应用到许多有趣的地方。现在呢，先做一下了解，毕竟这么多类型，刻意去记忆，实在太累了。知道它都有些什么，然后使用的时候过来查询，就足够了。^[2]

文本

text：单行文本，会自动删除文本中的换行；
search：用来搜索的单行文本，其他和 text 特性相同；
password：，输入内容被显示为星号（或其他符号）的单行文本，一般作为密码输入框，默认情况会使用英文输入法。

受限制文本

email：用来输入 E-mail 地址；
tel：用来输入电话号码；
url：用来输入网址。

数字

number：用来输入数字，也可以是小数；
range：用来输入不精确数值。通俗讲就是滑块，比如音量滑块。他有如下默认值
- min：0 —— 最小值默认为 0
- max：100 —— 最大值默认为 100
- value：min + (max-min)/2，或当 max 小于 min 时使用 min —— 这个输入项当前默认的值
- step：1 —— 步进长度，移动一格代表多少

颜色

color：用来输入（选择）颜色。

文件

file：选择文件。使用 accept 属性可以定义允许选择的文件类型。

时间

date：用来输入日期（年，月，日，不包含时间）；
datetime：用来输入基于 UTC 时区的日期和时间（时，分，秒及几分之一秒）；
datetime-local：用来输入日期和时间，不包含时区；
month：用来输入年和月，不包含时区；
week：用来输入一个由星期和年组成的日期，不包含时区；
time：用来输入时间，不包含时区。

选择

radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用 checked 指示控件是否默认被选择。在同一个单选按钮组中，所有单选按钮的 name 属性使用同一个值，同一时间，同一个单选按钮组中，只能有一个被选中；
checkbox：复选框。和单选类似，但是同一时间内，在同一个复选框组中，可以有多个复选框被选中。

按钮

button：没有任何作用的按钮，除非，你写更多的代码去让他做某件事情；
reset：一个按钮，用来将表单所内容设置为默认值；
submit：一个按钮，用来提交表单的数据；
image：一个按钮，用来提交表单数据。但是他显示一张图片，所以必须使用 src 属性定义图片地址，并使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。