input标签新增属性
<input list='list_t' type="text" name='user' placeholder='请输入姓名' value="" />
<datalist id='list_t'>
        <option>这是值1</option>
        <option>这是值1</option>
        <option>这是值1</option>
        <option>这是值1</option>
 </datalist>
<input name="userName" required pattern="\d{3}" type="text"/>
pattern属性的值一般为正则表达式,当用户输入的内容符合一定的格式,那么才能提交,否则将提示用户不符合要求,如上所示必须输入3位数字。
required属性可以用用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。
required属性表示此输入框是必填项,当提交的时候,如果此输入框为空,那么将提示用户输入后提交。
<input type="color"/>
color类型的input元素用来取色,它提供了一个颜色的取色器。
<input type="range"/>
此输入框是一种只允许输入某一段范围内数值的文本框,它同样也具有四个属性,分别是:min、max、step和value,默认的取值范围为0-100。
min:此输入框的最小值
max:此输入框的最大值
step:当点击上下箭头数值一次跳几个
value:表示此输入框的默认值
<input type="number"/>
此输入框是一种专门用来输入数字的文本框,并且在提交的时候会验证内容是否为数字,它具有四个属性,分别是:min、max、step和value。
min:此输入框的最小值
max:此输入框的最大值
step:当点击上下箭头数值一次跳几个
value:表示此输入框的默认值
属性值:
| 值 | 描述 | 
| button | 定义可点击的按钮(通常与javascript一起使用来启动脚本)。 | 
| checkbox | 定义复选框。 | 
| color(HTML5) | 定义拾色器。 | 
| date(HTML5) | 定义date控件(包括年、月、日,不包括时间)。 | 
| datetime(HTML5) | 定义date和time控件(包括年、月、日、时、分、秒、几分之一秒,基于UTC时区)。 | 
| datetime-local(HTML5) | 定义date和time控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。 | 
| email(HTML5) | 定义用于e-mail地址的字段。 | 
| file | 定义文件选择字段和 "浏览..." 按钮,供文件上传。 | 
| image | 定义图像作为提交按钮。 | 
| month(HTML5) | 定义month和year控件(不带时区)。 | 
| number(HTML5) | 定义用于输入数字的字段。 | 
| password | 定义密码字段(字段中的字符会被遮蔽)。 | 
| radio | 定义单选按钮。 | 
| range(HTML5) | 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。 | 
| reset | 定义重置按钮(重置所有的表单值为默认值)。 | 
| search(HTML5) | 定义用于输入搜索字符串的文本字段。 | 
| submit | 定义提交按钮。 | 
| tel(HTML5) | 定义用于输入电话号码的字段。 | 
| text | 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。 | 
| time(HTML5) | 定义用于输入时间的控件(不带时区)。 | 
| url(HTML5) | 定义用于输入 URL 的字段。 | 
| week(HTML5) | 定义 week 和 year 控件(不带时区)。 | 
input标签新增属性的更多相关文章
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
		html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ... 
- 前端 html input标签  placeholder属性 标签上显示内容
		前端 html input标签 的placeholder属性 标签上显示内容 <!DOCTYPE html> <html lang="en"> < ... 
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
		为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ... 
- HTML中input标签maxlength属性的妙处
		HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ... 
- 关于input标签checkbox属性 和checked
		我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ... 
- HTML5基础-新增标签+新增属性+布局案例
		html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ... 
- 前端 html input标签 disable 属性
		该属性只要出现在标签中,表示禁用该控件 <!DOCTYPE html> <html lang="en"> <head> <meta cha ... 
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
		加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ... 
- 前端 HTML  form表单标签 input标签 type属性 radio 单选框
		<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ... 
随机推荐
- if else 和switch case以及continue,break的区别
			1,if 经常用于做区间判断 或者 固定值: break和continue的使用 break:用来结束循环结构或者switch case continue:结束此次循环进入 ... 
- JavaScript的六种继承方式
			继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的 原型链 首先得要明白什么是原型链,在一篇文章看懂proto和prototype ... 
- 【viewport】移动设备的兼容性问题
			前段时间用微信开发者工具重构一个菜单项目的时候发现iphoneSE显示不全以及布局错乱的问题,找到了一个简单粗暴的解决方法. 移动设备上的viewport分为layout viewport ... 
- 数据结构与算法--KMP算法查找子字符串
			数据结构与算法--KMP算法查找子字符串 部分内容和图片来自这三篇文章: 这篇文章.这篇文章.还有这篇他们写得非常棒.结合他们的解释和自己的理解,完成了本文. 上一节介绍了暴力法查找子字符串,同时也发 ... 
- Windows环境下安装scikit-learn
			scikit-learn是Python的一个机器学习库,请按照以下步骤进行安装. 1.首先确保你的机器安装了Python并且配置好了环境变量. 2.安装pip 下载地址:https://pypi.py ... 
- attr(),addClass()使用方法练习
			这次我主要是想要完成2个li之间样式的变化.方法比较傻,如果有人有更好的办法或者有别问题,希望可以不吝指教. <!DOCTYPE html><html> <head> ... 
- js数组去重方法分析与总结
			数组去重经常被人拿来说事,虽然在工作中不常用,但他能够很好的考察js基础知识掌握的深度和广度,下面从js的不同阶段总结一下去重的方法. ES3阶段 该阶段主要通过循环遍历数组从而达到去重的目的 多次循 ... 
- Android service 服务的应用之电话监听器以及短信监听器
			首先建立一个项目工程文件,如下图所示: 
- Android -- 深入了解自定义属性
			1,相信我们写过自定义控件的同学都会有一个疑问,自定义属性到底是怎么工作的,为什么要使用自定义属性呢,接下来结带着大家一起来学习学习,在学习这一篇的时候,可以下看看我的上一篇<从源码的角度一步步 ... 
- centos 7 运行Quartus ii 17.0 标准版,下载程序时遇到错误error (209053): unexpected error in jtag server -- error code 89
			对于错误error (209053): unexpected error in jtag server -- error code 89,它产生的原因在于,在linux系统下,Quartus ii的驱 ... 
