<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. Android学习笔记-构建一个可复用的自定义BaseAdapter

    转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题, ...

  2. java迭代器浅析

    简介 迭代器是遍历容器的一种常用方法,它屏蔽了容器的实现细节,无需暴露数据结构内部,就可以对容器进行遍历,迭代器本身也是一种设计模式,迭代是一种特殊的遍历方式 Iterator 在java中,迭代器接 ...

  3. C#委托基础学习

    什么是委托       委托,顾名思义就是在你忙着做另一件事时候,你要去做另一件事,于是你可能就会委托别人帮你做,让别人把结果返回给你.编程时,委托也有这个思想. 我目前对委托的看法是,在编程中,委托 ...

  4. python-冒泡排序,升序、降序

    冒泡排序 这个算法的名字由来是因为越大的元素会经交换慢慢浮'到数列的顶端. 冒泡排序的基本思想:重复走访要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来,直到没有再需要交换,完成排序 ...

  5. Solr(四)Solr实现简单的类似百度搜索高亮功能-1.配置Ik分词器

    配置Ik分词器 一 效果图 二 实现此功能需要添加分词器,在这里使用比较主流的IK分词器. 1 没有配置IK分词器,用solr自带的text分词它会把一句话分成单个的字. 2 配置IK分词器,的话它会 ...

  6. Loadrunner常见错误处理方法

    1.错误 -26601: 解压缩函数(wgzMemDecompressBuffer)失败,返回代码=-5 (Z_BUF_ERROR).inSize=0.inUse=0.outUse=0 用LR做压力测 ...

  7. [STM32F429-DISCO-uCosiii]3.uCOSIII 移植

    uCOSiii的结构比uCOSii看上去是清晰了不少,也比较有条理,所以呢,移植不是让人感觉很乱.在工程中添加如下目录和文件 与CPU相关的文件都集中在uC-CPU文件夹中.这部分有很多是底层的实现, ...

  8. Linux - 简明Shell编程12 - 定制输出(ColorOutput)

    脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash echo -e "\ ...

  9. 计蒜客模拟赛D1T2 蒜头君的树:树上节点之间最短距离和

    题目链接:https://nanti.jisuanke.com/t/16446 题意: 给你一棵有n个节点的树以及每条边的长度,输出树上节点之间的最短距离和.然后进行m次操作,每次操作更改一条边的长度 ...

  10. Pycharm快捷键的使用

    1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + ...