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& ...
随机推荐
- eclipse中console的输出行数控制
eclipse中console的输出行数控制 开发中,会遇到当输出大量的sql语句或者错误的时候,往往会因为console输出的限制而不能完整显示,所以我们自己就需要迫切的增加显示的行数,这样 就可以 ...
- ETL作业调度软件TASKCTL4.1单机部署
单机部署,实际上就是将EM节点和一个Server节点安装到同一个地方.EM节点是TASKCTL服务端的最顶层,主要负责客户端与服务端之间的通信.Server节点是TASKCTL的调度服务控制层,也有A ...
- [补档][NOIP2015] 斗地主
[NOIP2015] 斗地主 题目 传送门:http://cogs.pro/cogs/problem/problem.php?pid=2106 INPUT 第一行包含用空格隔开的2个正整数Tn,表示手 ...
- sql 日记
--4.选择雇用时间在1998-02-01到1998-05-01之间的员工姓名,job_id和雇用时间select last_name,job_id,hire_datefrom employeeswh ...
- mysql-proxy读写分离
实验环境: LAP+ 1.安装apache服务(192.168.2.131) yum install openssl-devel [root@LAP ~]# tar zxvf httpd-2.2.25 ...
- 版本管理工具Git(1)带你认识git
简介 本篇将带领大家认识,git.github,让大家对git有基本的认识:下面将持续更新几篇文章来介绍git,见git导航: 下一篇中将讲解git的安装及使用: Git系列导航 版本管理工具Git( ...
- Jdbc模版式写法与Spring-JdbcTemplate的比较
一.Jdbc模版式写法: [流程] 加载驱动 获取数据库链接 创建Statement对象(用于发送sql语句) 向数据库发送sql语句,获取数据库返回的结果集 从结果集中获取数据 释放资源 上述部分用 ...
- 关于他们回答的 "怎样在桌面建一个python GUI的快捷方式" 这个问题
在之前的2个随笔里面,有写过<找到可以解决问题的正确的人>.<如何提问>,说白了就是您需要帮助的时候,您得让对方100%懂你,否则没戏. 那么最近看到这样1个古老的问题,和一些 ...
- 会话控制cookie和session
Cookie Cookie简介 HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时, ...
- MarkdownPad2之安装破解
MarkdownPad2之安装破解 一.下载破解版 1.地址链接:http://pan.baidu.com/s/1i5JzG13 密码: 4jgw 2.按步骤安装后,进行汉化:[Tool]--> ...