08 H5新增input元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
在android和ios中尤其能体现这些输入控件的特点,会自动切换到不同的虚拟键盘!
<hr>
<form>
查询文本框
<input type="search" placeholder="请输入查询关键字" autofocus>
<hr>
列表提示
<input type="text" list="searchlist">
<datalist id="searchlist">
<option value="beijing" label="北京" />
<option value="shanghai" label="上海" />
<option value="nanjing" label="南京" />
<option value="nanchang" label="南昌"/>
</datalist>
<hr>
数字文本框
<input type="number" max="9" min="0" step="1"/>
<hr>
滑动条
<input type="range" max="9" min="0" step="1" value="2">
<hr>
颜色文本框
<input type="color" value="#ff00ff"/>
<hr>
电话文本框
<input type="tel">
<hr>
网址输入
<input type="url">
<hr>
邮箱地址
<input type="email">
<hr>
日期选择
<input type="date" max="2012-10-10" min="2001-01-01" value="2011-01-01" />
<hr>
时间选择
<input type="time" max="18:39:57" min="17:49:57" value="17:49:58" />
<hr>
UTC日期时间
<input type="datetime" />
<hr>
本地日期时间
<input type="datetime-local" />
<hr/>
<input type="submit" value="submit"/>
<p>H5中新增的input元素只有在点击提交按钮时,才有效果</p>
</form>
</body>
</html>
08 H5新增input元素的更多相关文章
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- H5新增input标签
1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...
- H5新增元素
标签 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸文章.博客条目.用户评论等内容. 支持HTML5的全局属性和事件属性. <as ...
- 笔记:HTML5中input元素新增的type值
在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...
- HTML(七)HTML 表单(form元素介绍,input元素的常用type类型,input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
- HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)
新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...
- HTML5增加与改良的input元素
h5中form表单中input新增的属性值 在HTML5中增加了许多新的标签和功能属性,今天我们来看一个Form表单在HTML5中新的使用方法.那么在HTML5中新加入的这个功能与之前咱们使用的功能区 ...
- H5新增特性
1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 W ...
- H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
随机推荐
- HTC 328T 如何恢复出厂设置
设置-存储-恢复出厂设置(在存储的最下面,往下拉)
- Windows驱动程序开发基础(四)驱动的编译调试和安装
Windows驱动程序开发基础,转载标明出处:http://blog.csdn.net/ikerpeng/article/details/38793995 以下说一下开发出来驱动程序以后怎样编译.一般 ...
- c++代码赏析之类对象传參
#include <iostream> using namespace std; class A { private: int x; public: A():x(0) { x = 0; c ...
- ImageLoader实现图片异步载入
ImageLoader是一个广泛使用的图片库,在向网络请求图片时.使用imageView和smartView常会产生outofmemory错误,这时ImageLoader能够起到非常大的作用.主要有例 ...
- 轻量级批量Omnitty工具安装和简单使用
一.Omnitty简单介绍 在实际工作需要同时对多台docker进行批量处理,为了节省时间,这个运维轻量级工具解决此问题 二.Omnitty简单按照 下载需要安装包和依赖包: omnitty-0.3. ...
- Xcode6 设置LaunchImage图标
最近设置LaunchImage图标时发现怎么都没有效果,后来发现是Xcode6中新建项目的时候会默认添加一个LaunchScreen.xib的文件,我们启动程序的时候也会发现,加载的时LaunchSc ...
- Django模板语言(一)
1,Django模板语言 1.1>基础语法:1.1.1,变量相关:{{ 变量名 }},1.1.2,逻辑相关{% ... %} 在Django模板语言中按此语法使用:{{ 变量名 }},当模板引擎 ...
- POJ2289 Jamie's Contact Groups —— 二分图多重匹配/最大流 + 二分
题目链接:https://vjudge.net/problem/POJ-2289 Jamie's Contact Groups Time Limit: 7000MS Memory Limit: 6 ...
- POJ3186 Treats for the Cows —— DP
题目链接:http://poj.org/problem?id=3186 Treats for the Cows Time Limit: 1000MS Memory Limit: 65536K To ...
- POJ2528 Mayor's posters —— 线段树染色 + 离散化
题目链接:https://vjudge.net/problem/POJ-2528 The citizens of Bytetown, AB, could not stand that the cand ...