html5的input类型(type)和所有属性详解

LinMeng 等级 371 1 1

先总结input的所有属性

required:标记一个字段是否为必须。如果一个字段被标记为required = "required"(严格模式下),或者required(宽松模式下)并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性
pattern:该属性包含了一个JavaScript风格的正则表达式,输入的内容必须完全

max:这两个属性用于日期date时间time等输入,还有number和range。顾名思义,它们的作用是限制最大值,最小值。

step:步长,和max min类似,作用是提供一个可以上下点的按钮,比如当前数字是1,你设置了step = "2",点一下上的按钮,就变成3了。
placeholder:该属性不多说,大家应该都很熟悉,一般是用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。
readonly:顾名思义,该属性会让表单空控件不可编辑。这里的不可编辑不是禁用,只是不能编辑文本而已,比如像单选框radio,复选框checkbox这种,本来就是不可编辑的,所以这个属性对它们来说毫无意义。
disabled:该属性会禁用一个表单元素。这里是禁用,完全禁用掉除了之外的所有表单元素。
maxlength :该属性用于限制用户输入的最大字数限制。
size:已经没什么时候实际的作用了,控制大小现在几乎都是由CSS控制了。
form:在HTML5中,表单控件已经没有必要嵌套在一个表单中,新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中,随着另一个表单提交。代码如下:
<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>
这样,就把form和input联系起来了。如果input没有form属性,那么,它将被关联到离他最近的form表单。
autocomplete:顾名思义,自动完成,用户输入一部分,后面的自动补全。需要浏览器保存用户输入的内容,以便下一次自动补全。
autofocus:该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。

重点介绍type 属性

<input type="text">:
如果一个input没有type属性,那么它会是默认type="text"。没有什么特别的,就是允许输入文本,简单明了。
<input type="password">:
顾名思义,在用户输入密码的时候建议使用这个属性而非text,使用了这个属性,用户输入的文字将会变成*,我们是看不到的,当然,传给后台会是用户输入的文本。有些手机端上不会一开始就是*,而是会短暂的明文显示用户输入的最后一个字符,然后才是*。
<input type="checkbox">:复选框,默认是小方格,可以选择多个。
<input type="radio">:单选框,默认是小圆圈,只能选择一个。
<input type="submit">:通常被认为是一个提交按钮,当点击此按钮时,提交本表单的数据。
<input type="file">:这个输入类型和其他的不同,其他无非是一些选择,或者输入文本,而这个属性,是为了能让用户上传本地文件。
<input type="hidden">:
顾名思义,该属性是用来隐藏掉该表单控件。以前一般是用来收集一些数据,但是现在没必要了,有强大的localStorage等存储机制,谁还会用这个去存数据呢。
<input type="image">:该属性接受所有<img>,将会像submit一样提交图片,如果想上传图片,照片,不妨使用这个属性。
<input type="reset">:重置按钮,点了这个按钮,表单的数据全部重置,也就是清空的意思。一般不会使用,毕竟用户辛辛苦苦填了半天,误操作,点了重置。体验性太差了。
<input type="button">:
顾名思义,一个按钮,表单按钮,和单纯的<button>元素相比,没有<button>使用CSS方便,所以如果你不是想用这个按钮去重置(reset)或者提交(submit),并且为了和传统的表单风格相比配的话,建议你都使用<button>而不是 <input type="button">。

以上的都是HTML5以前都有的属性,下面是新增的(跟键盘有关的都是要配合手机端使用才有效果):

<input type="email">:该属性外观上和文本栏相似,用于指定一个电子邮箱地址。在web端没有什么差别,但是在手机端就不一样了,输入键盘会自动的变成有@ 数字 A-Z .等,与输入邮箱有关的字符,用户体验直线上升
<input type="url">:外观功能和 <input type="email">类似,用于指定一个web地址。在手机端上会自动转换成有类似于.com 等方便用户输入web地址的键盘。
<input type="tel">:用于指定输入的是电话号码。键盘就会变成输入电话号码的键盘。当然,也可以自己定义一些格式什么的,比如023-1235····之类的,需要与pattern属性连用。
<input type="number">:用于指定输入的是数字,键盘为输入数字的键盘。
<input type="range">:变成一个滑动条,不同的客户端显示出默认的样式是不一样的。用户可以左右滑动。webkit中可以使用CSS:input[type=range]{=webkit-appearance:slider-vertical}让滑动条竖起来。
<input type="search">:提供一个搜索栏。如果有文本输入的话,很多浏览器会在最右边提供一个清空搜索栏的小叉,点了就清空该搜索栏。
<input type="color">:在浏览器支持的情况下,提供一个拾色器,虽然功能没有PS里面的那么强大,不过感觉和window自带的图画功能里面的拾色器差不多。
<input type="date">:顾名思义,日期选择器,可以用来选择年月日。
<input type="datetime">:该属性提供两个栏,一个年月日,一个用于时分秒。时区被设置成了UTC。
<input type="datetime-local">:和 <input type="datetime">几乎完全一样,只是不是UTC时间。
<input type="month">:只包括了年,月的时间选择器。
<input type="time">:只包括了时分秒的时间选择器,而且是24小时制。
<input type="week">:该属性是输入多少年的多少周,你可以选择日期,但是返回的是XXXX年XX周。

如有遗漏,后期补上

收藏
评论区

相关推荐

解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y) 在input的释焦事件中添加blur事件, 参数X要在窗口文档显示区左上角显示的文档的 x 坐标。 参数y要在窗口文档显示区左上角显示的文档的 y 坐标。 添加jQuery插件 mounted(){ //解决ios 软键盘弹出屏幕空白 $("input,select,te
Flash 终将谢幕:微软将于年底停止对 Flash 的支持
近日,微软宣布将于今年 12 月终止对 Adobe Flash Player 的支持,届时,微软旗下所有浏览器都将无法使用 Flash,Adobe 也不会在今年 12 月后发布安全更新。早在 2017 年,Adobe、Apple、Facebook、Google 和 Mozilla 就已经宣布将于 2020 年 12 月停止对 Flash 的支持。 微软将于
html5的input类型(type)和所有属性详解
先总结input的所有属性 required:标记一个字段是否为必须。如果一个字段被标记为required "required"(严格模式下),或者required(宽松模式下)并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性 pattern:该属性包含了一个JavaScript风格的正则表达式,输
昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架 收录于话题 来自:掘金,作者:布拉德特皮 链接:h
input 获取焦点,键盘遮挡页面
移动端开发中常遇到的就是键盘遮挡问题,下面提供项目中的写法: window.addEventListener('resize', () { const activeElement document.activeElement; if (activeElement.tagName 'INPUT' || activeElement.t
正则表达式限制输入框只能输入数字
1 正则表达式限制输入框只能输入数字 <input type"text" onkeyup"this.valuethis.value.replace(/^d/g,') " onafterpaste"this.valuethis.value.replace(/^d/g,')" name"f_order" value"1"/ 其
Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)
this.$set(obj,key,value) 应用场景:为data中的某一个对象添加属性 <template <div <button @click"addProps"添加属性</button {{ hun.name }} <input type"text" vmodel"hun.age" </div </
vue--封装后台管理项目通用组件
先看一下我的项目的页面构成 几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页这里我定义了两个组件:myFilter和myTablemyFilter组件该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的input(通过vif标识可选;由inputName指定标题和默认文本
16个 HTML5 框架、模板以及生成工具
网页设计通常需要预先考虑很多因素,而用户给你的时间又特别稀缺,如何提高效率其实是一个比较烦人的问题。一个可行方式就是使用预先准备好的框架和模板,HTML5框架、模板以及生成器是一个万灵丹似的解决方案,可以大大简化很多工作量。这里介绍一些比较实用的工具,
「小程序 — 云开发」搜索跳转
样式如图:在home.wxml中 js< confirmtype:键盘的右下角按钮显示'搜素'bindconfirm:按下键盘'搜索'按钮bindinput:在输入框输入过程中触发事件bindtap:点击搜索图标<view class"search" <input type"text" placeholder"搜索菜品" con
antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
高考后即将分道扬镳,悄悄用python记录下三年情谊的“同学录”
又到了一年的毕业季, 今天就高考的最后一天了,记得当年中小学快毕业时,班上的同学都在相互交换写同学录,一本小小的同学录,装载着都是青春的回忆,或幼稚或成熟的字体,或长或短的语句,或认真或戏虐的毕业留言,让你瞬间回忆起快淡忘的那些人,那些事。毕业在即,我教你用python制作一份独一无二的同学录,留给未来回味,不给青春留遗憾。本文使用的逻辑是利用字典来保存学生
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术
input placeholder信息输入效果
可能经常会在某些新闻或视频网站的搜索框看到类似打字机的效果,咋眼一看好像很简单,但是一些又说不上具体细节,如下图一眼一看,这不动态改变 placeholder 的值就好了吗?仔细看人家还有一个类似光标的东西呢,其实也简单,在拼接的时候再拼接个 | 不就好了吗?代码如下:javascriptconst input document.getElementByI
RTSP H264 流 MSE 播放
项目介绍: It this demo we're streaming live video from an RTSP camera to your HTML5 browser. Video is streamed as H264 encapsulated in MP4. No transcoding takes place in the streamtobr