你总问input多少种

第一次听到这个问题,是一位前辈分享他面试别人的题目,乍一听,这么没营养的也问?

或许他只是随便一说,我却记住了,因为转念一想,好像真说不全,text、submit、checkbox、radio…还有啥来着?

常见的需求:

  • 登录/注册
  • 输入金额
  • 填写个人资料

除此之外,其他场景貌似不多,但就算这些,也不是每款产品都需要,再加上HTML5加入的新成员,更加难以捉摸。

本篇文章我们就一起回顾一下,当然,鉴于其本身内容较多,我们只看那些较“实用”的。

表现

为更好区分和记忆,可分为如下几类。

手动输入

input本意就是输入,所以,它肯定存在一个 text (文本)类型.

但是,虽然都是文本,也有不同形式的特定需求。

text:文字

number:数字

password:密码

tel:电话号码

email:邮箱地址

search:搜索框

url:链接

以上几种,从输入框的表面来看,只有数字是不同的,可以使用箭头操作。

更多细节:

  • number类型可以设置最大和最小值,且可以设置数字变化的幅度(step)

  • 密码的输入不可见

  • 号码、url和邮箱类型,输入框获得焦点后,会弹出更利于输入的键盘种类,比如:纯数字,或者带有@、.com等符号。

  • 跟搜索框相关的,一个是联想列表 datalist,每输入一个字,就会出现相关的搜索列表或者热搜词(当然,这些需要js和数据作为支撑),更强大的是,一边输入,一边直接出现相关的搜索结果。

  • 它们中的大多数,看起来没有明显区分,但在浏览器实现层面,如果你使用了某个类型,而格式又不相符的时候,可能会有错误提示。

点击选择

radio:单选
checkbox:复选
time:时间
date:日期
month:月份
week:周
color:颜色
range:范围、界限

这里需要注意的是,日期和时间,以及月份、周之间有什么区别呢?

  • 时间,几点几分
  • 日期,某年某月某天
  • 月,某年某月
  • 周,某年第几周

它们都是指代某个时间点,但由于粒度不同,可以分别适配特定的场景,而不用再对数据进行额外的处理,当然,需要的话,也可以组合使用。

功能性

file:上传文件。

image:可以把图片当做表单元素(按钮)来使用。

按钮

button:按钮
submit:提交
reset:重置

三者看起来都是按钮的样子,且提交和重置按钮会自带文案,button则需要增加value才可以。

从用处看,提交按钮是用来提交整个表单,而重置是将表单重置为默认值,一般来说,这是一个带有风险的操作,需谨慎使用。

而button类型就是单纯地按钮,没有默认操作,需要JS绑定事件进行操作。

还有一种,并非由用户输入,就是hidden类型,它可用于那种并不需要在页面展示,但仍用得到的数据。

属性

HTML的属性是个易忽视的点,大家习惯于用CSS实现样式,用JS来实现交互甚至数据传输,却忽视了HTML本身也可以做一些事情,譬如,笔者就曾被editable属性给惊呆了,所以,本文我们来看看,关于表单,有哪些能发挥重要作用的属性。

disabled:字面意思,我们定义类名时也常用,就是禁用。

checked:首次加载即被选中。

readonly:只读,不可更改。

placeholder:可输入内容的提示。

autocomplete:自动补全,一个增强体验的属性,很多时候可减少输入。

autofocus:自动获取焦点,在打开页面之后,帮助用户直接获取某表单的焦点进行输入。

pattern:规定输入字段的正则匹配模式。

required:必填项。

novalidate:提交表单时不验证。

它们当中,有些不需要被设定某种值的属性是不需要写属性值的,比如:checked、required、readonly等。具体用法和效果,还请读者自行试验了~

小结

我相信,你可能真的没想到,小小input居然有这么多种,就像曾经有人问我,我说”反正就是很多“,这么说也没错,但肯定是不会加分的,所以,本文简单汇总一下,就算温习了。