原创 前端开发之input标签的type属性

　　在前端开发中必然会涉及到用户交互功能的开发，例如注册登录、评论等等。只要涉及到用户录入信息的过程，我们都要用到input标签。本文就主要问大家介绍一下input标签的type属性。

　　1、单行输入框< input type"text"/>。单行文本的输入框常用来输入简单的信息，例如用户名、账号等等。具体的属性有：name、value、maxlength。
　　2、密码输入框<input type=”password”/>。其内容以圆点的形式显示。
　　3、但选按钮<input type-”radio”/>。单选按钮用于单项选择，在定义单选按钮时必须为同一组中的选项制定相同的name值，可以对单选按钮应用checked属性，制定默认选中项。
　　4、复选框<input type=”checkbox”/>。复选框用于多想选择，也可以对其应用checked属性。
　　5、普通按钮<input type=”button”/>。普通按钮尝尝配合JavaScript脚本语言使用。
　　6、提交按钮<inpyt ytpe=”submit”/>。提交按钮时表单中的核心空间，用户完成信息的录入后一般需要提交才可以完成，可以对其使用value属性，改变提交按钮上的默认文本。
　　7、重置按钮<inpyt type=”reset”/>。当用户输入有误时，直接点击充值按钮可以取消以输入信息，可以对其使用value属性，改变充值按钮上的默认文本。
　　8、图像形式的提交按钮<input type=”image”/>。图像提交按钮就是用图像代理了默认的按钮，其功能上虞提交按钮相同。需要注意的是，必须为其定义scr属性指定图像的url地址。
　　9、隐藏域<input type=”hidden”/>。隐藏域对于用户是不可见的，通常用于后台的程序。
　　10、文件域<input tyupe=”fie”/>。当定义文件域时，页面将出现一个选择文件按钮和提示信息文办，用户可以单击按钮然后直接选择文件的方式，将文件提交给后台服务器。
　　11、emai类型<input type=”emai”/>。emai类型的<input/>标记是专门用于输入e-mail地址的文本输入框，用来验证emai输入框的内容是否符合e-mail地址格式。会提示错误信息。
　　12、url类型<input type”url”/>。这是专门用于输入url地址的文本框。并对输入的内容进行检验。
　　13、tel类型<input type”tel”/>。用于输入电话号码，一般tel类型通常会和pattern属性配合使用。
　　14、Search类型<input type=”search”/>。专门用于输入搜索关键词的文本框，他能自动记录一些字符。用户输入内容后，其右侧会附带一个删除图标，可以快速清除内容。
　　15、Color类型<input type”color”/>。可以用于提供设计颜色的文本框，用户实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取颜色。
　　16、number类型<input tupe=”numbber”/>。用于输入熟知的文本框。并检测输入的是否是数字。此外可以增加其他属性，vale制定输入框的初始值，max/min限定输入框的最大最小值，sep输入合法的数字间隔，如果不设置默认值为1。

　　<input>标签的属性不仅仅是这些，包括限定日期、时间等等，如果浏览器不支持<input/>标签输入类型，则会在网页中显示为一个普通的输入框。作为前端工程师，<input/>标签的时用率是非常高的。建议大家收藏本文，方便大家随时使用。