上一章我们主要在研究网址的结构,而其实 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 定义替代文本。还可以使用 heightwidth 属性以像素为单位定义图片的大小。

隐藏

  • hidden:隐藏,不显示在页面上,但它的值会被提交到服务器。

【本章助记卡片:卡片 for 第二十章

>注释 1: 所以对于同一种类型,不同的浏览器,也可能会有不同的反应。

>注释 2: 这些内容整理自 MDN,但是进行了一个并不严谨的分组,并简略通俗化了其中的描述,以方便新人理解。其中的 表示为 HTML5 新增加类型。