<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标签新增属性的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  3. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  4. HTML中input标签maxlength属性的妙处

    HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...

  5. 关于input标签checkbox属性 和checked

    我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...

  6. HTML5基础-新增标签+新增属性+布局案例

    html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...

  7. 前端 html input标签 disable 属性

    该属性只要出现在标签中,表示禁用该控件 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  9. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. eclipse中console的输出行数控制

    eclipse中console的输出行数控制 开发中,会遇到当输出大量的sql语句或者错误的时候,往往会因为console输出的限制而不能完整显示,所以我们自己就需要迫切的增加显示的行数,这样 就可以 ...

  2. ETL作业调度软件TASKCTL4.1单机部署

    单机部署,实际上就是将EM节点和一个Server节点安装到同一个地方.EM节点是TASKCTL服务端的最顶层,主要负责客户端与服务端之间的通信.Server节点是TASKCTL的调度服务控制层,也有A ...

  3. [补档][NOIP2015] 斗地主

    [NOIP2015] 斗地主 题目 传送门:http://cogs.pro/cogs/problem/problem.php?pid=2106 INPUT 第一行包含用空格隔开的2个正整数Tn,表示手 ...

  4. sql 日记

    --4.选择雇用时间在1998-02-01到1998-05-01之间的员工姓名,job_id和雇用时间select last_name,job_id,hire_datefrom employeeswh ...

  5. mysql-proxy读写分离

    实验环境: LAP+ 1.安装apache服务(192.168.2.131) yum install openssl-devel [root@LAP ~]# tar zxvf httpd-2.2.25 ...

  6. 版本管理工具Git(1)带你认识git

    简介 本篇将带领大家认识,git.github,让大家对git有基本的认识:下面将持续更新几篇文章来介绍git,见git导航: 下一篇中将讲解git的安装及使用: Git系列导航 版本管理工具Git( ...

  7. Jdbc模版式写法与Spring-JdbcTemplate的比较

    一.Jdbc模版式写法: [流程] 加载驱动 获取数据库链接 创建Statement对象(用于发送sql语句) 向数据库发送sql语句,获取数据库返回的结果集 从结果集中获取数据 释放资源 上述部分用 ...

  8. 关于他们回答的 "怎样在桌面建一个python GUI的快捷方式" 这个问题

    在之前的2个随笔里面,有写过<找到可以解决问题的正确的人>.<如何提问>,说白了就是您需要帮助的时候,您得让对方100%懂你,否则没戏. 那么最近看到这样1个古老的问题,和一些 ...

  9. 会话控制cookie和session

    Cookie Cookie简介 HTTP是无状态协议,服务器不能记录浏览器的访问状态,也就是说服务器不能区分中两次请求是否由一个客户端发出.这样的设计严重阻碍的Web程序的设计.如:在我们进行网购时, ...

  10. MarkdownPad2之安装破解

    MarkdownPad2之安装破解 一.下载破解版 1.地址链接:http://pan.baidu.com/s/1i5JzG13 密码: 4jgw 2.按步骤安装后,进行汉化:[Tool]--> ...