Input标签开发小技巧_IT男爵的专栏文章_微信文章

<input>标签是我们前段日常开发使用的非常多的一个元素,但是我敢肯定，我们有不少同学都只用到了就那么几个type类型，如：text password button checkbox radio search number file等,还有属性，如：value id name disabled checked placeholder title等，而<input>标签还有很多实用属性和type类型可以用来提高我们的开发效率，下面开始进入正题。

`inupt`是表单元素

用个这么大的标题醒目的说明，就是为了提醒同学们，在现下前端流行布局都是使用div加css，然后都习惯使用ajax进行数据提交的方式，这样做本身并没有错，而是想说，想要完整的使用好 <input>标签本身的特性，那么<input>的有些属性你就必须在<form>表单元素里使用。在之前，ajax没有流行起来之前，我们提交的方式是使用表单方式提交数据的，也就是 <form></form> 标签，使用 form 的 action 属性，而我们的 <input> 就是属于 <form>表单里的元素，而我们要想用好 <input> ，更多的时候就是需要结合 <form>表单元素一起使用，下面就简单介绍下 <input>哪些属性和特性需要结合<form>表单元素标签。

一. 实用属性

<input>标签上还有一些属性，非常实用，有的用来做些验证，有的用来满足一些特殊小功能的，比如只读readonly属性，也就是说， <input>里的内容只是给看的，不可以修改的，下面看例子。

1. 验证属性；

<form action="/example/html5/demo_form.asp" method="get">
    <label>用户：</label> <input type='text' required />
    <input type="submit" value="提交" />
</form>
复制代码

上面这段HTML代码，要是用户没有输入值，点击提交，是提交不出去，而且还会给出个默认的提示，请你输入该字段，是不是觉得好神奇,也是不是觉得好眼熟，像我们经常用到的一些ui框架里面的表单验证，都是仿照此功能来做的，也就是说，它才是鼻祖。但是这个 required 属性是必须<input>要在<form></form>表单标签里使用才有效的哦，上面只写了一个关于验证的属性，下面还有两个有用的 (=^_^=)

<form action="/example/html5/demo_form.asp" method="get">
    <label>mobile：</label> <input type='number' pattern="[0-9]{3}" />
    <-- pattern="[0-9]{3}" 意思就是只能输入0-9之间的一个三位数的数字 -->
    
    <label>count：</label><input type="number" name="points" min="5" max="10" />
    <-- min="5" max="10" 输入的最小值为5 最大值为10 这个两个属性适用于type类型为 number,range和date 特别是type为range 非常好用-->
    
    <input type="submit" value="提交" />
</form>
复制代码

1. 功能属性；

        聚焦文本框：	<input type='number' autofocus="autofocus" />
	禁用文本框：	<input type="text" disabled="disabled" />
	限制输入长度：	<input type="text" maxlength="6" />
	只读文本框：	<input type="text" readonly="readonly" value="只读" />
	复选框默认选中：<input type="checkbox" checked="checked"/>
复制代码

上面这几个<input> 使用的属性，不经常看文档的，肯定有人不知道，而这几个是真的超级超级实用，特别是限制输入长度的 maxlength和只读的readonly，很多人不知道 input有这两属性，都是使用js模仿去实现的，那多浪费性能呀。

二. 实用type属性

type类型是 <input>标签的核心，不同的类型，完全决定了这个<input>标签的主要功能，像上面那节的实用属性的介绍，也行可以用几行js就模仿到，但是这个要模仿，那就好多好多行代码了，而且还是js+html ^_^'，现在的HTML流行的是HTML5，那么<input>同样多了好多使用的新type类型，下面看代码：

数字输入类型：<input type="number" min="1" max="10" onchange="inputFn(event)" />
电话号码类型：<input type="tel" min="11" max="11" onchange="inputFn(event)" />
数值范围类型：<input type="range" max="50" min="0" onchange="inputFn(event)"/>
日期类型：<input type="date" onchange="inputFn(event)" />
邮箱输入类型： <input type="email" name="email" />
复制代码

在这几个type 类型里，每个我都觉得非常实用，date类型是日期控件，对于界面展示要求不高的，用它真的完全足够了，email 类型是邮箱输入控件，这个类型最大的特点是自带了邮箱规则的验证，当然这个验证其实不怎么准...,但是它还有另外个特色,那就是移动端输入时，输入键盘是默认带出@符号的，不需要你切换来切换去的哦，number类型也是，这个类型只允许你输入数字，tel这个类型我觉得它的差别体现在平台上，在pc端，我测下来是可以输入其它字符，但是在移动端，它和number是一样的功能，只能输入数字。

三. input标签的`file`文件类型

把这个类型单独拿出来说，是有原因的，因为这个类型不是输入的了，而是选择我们的硬件设备里的文件，这个类型日常开发其实用的挺多的，特别是pc端，但是这个类型在移动端使用，还是有不一样的体验,所以这里的说明也主要以移动端是用file 类型的应用。下面看例子： `

<input type="file" onchange="inputFn(event)"/>
复制代码

就默认的file类型，不在加其它的属性，在移动端使用,ios端是会调起默认的选pop选项框

，在这个选项框里会包含拍照，照片图库，以及浏览的这么个东西。但是在android，只会调起文件系统，也就是说和我们的pc端差不多，打开一个文件目录，让你去选择文件。只是如此，我们自可不必说单独说它，和 file 这个文件类型使用的还有另外两个属性，可以帮助我们默认打开我们想要打开的东西，比如我们只想调起相册，那么我们在加一个 accept 属性： `

<input type="file" accept="image/*" onchange="inputFn(event)"/>
复制代码

加上accept属性后，赋值 "image/*"，ios端的调用还是之前的一样，但是android端却也只调起了个popup的弹框，上面会有两选项，相机和文件，

，目前我只测试到了vivo,华为，小米手机，其它品牌手机，个人觉得会差不多，而accept的属性还可以赋其它值，例如：

只选择word文档<input type="file" accept=".doc" onchange="inputFn(event)"/>

只选择excel文档<input type="file" accept=".xlsx" onchange="inputFn(event)"/>

只选择png图片文件<input type="file" accept=".png" onchange="inputFn(event)"/>

只选择jpg图片文件<input type="file" accept=".jpg" onchange="inputFn(event)"/>

看了上面的代码，相信大家就理解了，accept是定义选择文件类型的一个属性，而且也只适用于 file类型，而file类型默认一次只选择一个文件，要是想一次选择多个文件呢？这时，又一个和file类型配合使用的属性出场，那就是 multiple: `

<input type="file" accept="image/*" onchange="inputFn(event)" multiple="multiple"/>
复制代码

multiple`可以帮助我们一次选择多个文件，在pc端使用，需要你按住shift或者ctrl键协助多选，而在移动端，你打开相册，进入文件目录就可以勾选，但是呢，我自己两台手机，我在ios上是可以勾选多个文件，但是android好像没有可以...

接下来，但是如果我们想只要调起相机的功能呢？，和file搭配的又一个属性出来了：

只调相机：<input type="file" accept="image/*" capture="camera">
只调摄像机：<input type="file" accept="video/*" capture="camcorder">
只调录音机：<input type="file" accept="audio/*" capture="microphone">
复制代码

在这个属性上，ios和android总算有点同步了 capture="camera"和 capture="camcorder"调相机和录像这一块是一致的，但是在调起录音文件上时，有差别，ios这回好像不能调起录音功能模块，但是android可以，

，大家请注意，我在使用 capture属性时，accept的值是有变化的哦，请留意html代码。介绍到这里，file类型算是介绍的差不多了，在我们日常开发中需要使用也就介绍到了。

小结

学无止境，日积月累，总有一天，我们也可以成为大神的。这句话就是我写这篇博客的目的，我的目的也是学习和总结，把自己日常开发当中遇到的梳理出来。如有不足的地方，请各位留言指导...顺便给个赞，(=^_^=)

Input标签开发小技巧

Input标签开发小技巧

inupt是表单元素

一. 实用属性

二. 实用type属性

三. input标签的file文件类型

小结

`inupt`是表单元素

三. input标签的`file`文件类型