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& ...
随机推荐
- Android学习笔记-构建一个可复用的自定义BaseAdapter
转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html 作者:coder-pig 本节引言: 如题, ...
- java迭代器浅析
简介 迭代器是遍历容器的一种常用方法,它屏蔽了容器的实现细节,无需暴露数据结构内部,就可以对容器进行遍历,迭代器本身也是一种设计模式,迭代是一种特殊的遍历方式 Iterator 在java中,迭代器接 ...
- C#委托基础学习
什么是委托 委托,顾名思义就是在你忙着做另一件事时候,你要去做另一件事,于是你可能就会委托别人帮你做,让别人把结果返回给你.编程时,委托也有这个思想. 我目前对委托的看法是,在编程中,委托 ...
- python-冒泡排序,升序、降序
冒泡排序 这个算法的名字由来是因为越大的元素会经交换慢慢浮'到数列的顶端. 冒泡排序的基本思想:重复走访要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来,直到没有再需要交换,完成排序 ...
- Solr(四)Solr实现简单的类似百度搜索高亮功能-1.配置Ik分词器
配置Ik分词器 一 效果图 二 实现此功能需要添加分词器,在这里使用比较主流的IK分词器. 1 没有配置IK分词器,用solr自带的text分词它会把一句话分成单个的字. 2 配置IK分词器,的话它会 ...
- Loadrunner常见错误处理方法
1.错误 -26601: 解压缩函数(wgzMemDecompressBuffer)失败,返回代码=-5 (Z_BUF_ERROR).inSize=0.inUse=0.outUse=0 用LR做压力测 ...
- [STM32F429-DISCO-uCosiii]3.uCOSIII 移植
uCOSiii的结构比uCOSii看上去是清晰了不少,也比较有条理,所以呢,移植不是让人感觉很乱.在工程中添加如下目录和文件 与CPU相关的文件都集中在uC-CPU文件夹中.这部分有很多是底层的实现, ...
- Linux - 简明Shell编程12 - 定制输出(ColorOutput)
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash echo -e "\ ...
- 计蒜客模拟赛D1T2 蒜头君的树:树上节点之间最短距离和
题目链接:https://nanti.jisuanke.com/t/16446 题意: 给你一棵有n个节点的树以及每条边的长度,输出树上节点之间的最短距离和.然后进行m次操作,每次操作更改一条边的长度 ...
- Pycharm快捷键的使用
1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctrl + ...