HTML5 总结 （1）
HTML5新表单
1.Input 新类型：email url tel number range date color date week month.......
<html>
<body>
<form>
email:<input type="email"/><br><br>
url:<input type="url"/><br><br>
电话号码效果：（手机端）<input type="tel"><br><br>
数字类型：<input type="number"step="2"min="0" max="100"/><br><br>
范围类型：<input type="range"min="0"max="10"value="3" />10<br><br>
颜色类型：<input type="color" /><br><br>
<input type="submit">
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link href="photo.css" type="text/css" rel="stylesheet" />
<script></script>
<title>html5 input新类型2</title>
</head>
<body>
<form>
日期<input type="date"><br><br>
星期<input type="week"><br><br>
月份<input type="month"><br><br>
<input type="submit"><br>
</form>
</body>
</html>
2.input 新类型小案例：-----调色板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="photo.css" type="text/css" rel="stylesheet" /> <style>
div{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<title>input新类型range案例----调色板</title>
</head>
<body>
<div id="d"></div><br><br>
红<input type="range"id="r"min="0"max="255"value="255"onchange="mychange()"><br><br>
蓝<input type="range"id="b"min="0"max="255"value="255"onchange="mychange()"><br><br>
绿<input type="range"id="g"min="0"max="255"value="255"onchange="mychange()"><br><br>
<script>
function mychange(){
var r=document.getElementById("r").value;
var b=document.getElementById("b").value;
var g=document.getElementById("g").value;
var d=document.getElementById("d");
d.style.background="rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>
运行效果图： |
3.表单新元素：datalist progress meter output
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="photo.css" type="text/css" rel="stylesheet" />
<script></script>
<title>表单新元素</title>
</head>
<body>
<select>
<option>请选择</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
<datalist id="mylist">
<option>北京</option>
<option>天津</option>
<option>上海</option>
</datalist>
<input type="text"list="mylist"><br><br>
<progress max="100"value="30"id="progress"></progress><br><br>
<meter min="0"max="100"value="20"low="20"height="90"></meter><br><br>
<script>
function mychange(){
var progress=document.getElementById("progress");
var value=progress.value;
value++;
progress.value=value;
var t=setTimeout(mychange,100);
if(value==100){
clearTimeout(t);
} }
mychange();
</script>
</body>
</html>
4.表单新属性：placeholder--提供默认提示内容；
multiple---允许输入多个值
autofocus---自动获取焦点
form--允许表单元素定义在表单之外。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="photo.css" type="text/css" rel="stylesheet" />
<script></script>
<title>表单新属性</title>
</head>
<body>
<form>
用户名：<input type="text"placeholder="请输入用户名"><br><br>
email：<input type="email"multiple><br><br><!-- 允许输入多个值 -->
文本框：<input type="text"autofocus><br><br><!-- 自动获取焦点 -->
<input type="submit">
</form>
</body>
</html>
5 表单新验证！！！
验证属性：required属性：验证当前元素值为空。
pattern属性：使用正则表达式验证当前元素是否为空。
min和max属性：验证当前元素最小值或者最大值，一般用于number range 等元素。
minlength和maxlength属性：minlength 验证当前元素的最小长度，输入值时，允许输入小于指定值，提交表单时，验证元素值的最小长度，注意！！minlength并不是html5的新属性。
maxlength验证当前元素值的最大长度，输入值时，长度不能大于指定值。
validity属性，表单验证html5提供一种有效状态。有效状态通过validityState对象获取到。
验证有效状态：
validityState对象提供了一系列的有效状态，通过，这些有效状态，进行判断，注意！！！所有验证状态，必须配合上述的验证属性使用。
验证状态：
valid ：判断当前元素值是否正确， 返回true 和false。
valueMissing：判断当前元素值是否为空，配合required属性使用。
typeMismatch：判断当前元素值的类型是否匹配 配合email number URL 等使用。
patternMismatch：判断当前元素值是否与指定正则表达式匹配。配合pattern属性使用。
tooLong：判断当前元素值的长度是否正确 配合maxlength属性
* 注意
* 使用maxlength属性后,实际不可能出现长度大于maxlength的值
* tooLong很难出现这种情况
rangeUnderflow：判断当前元素值是否小于min属性值 配合min属性 并不能与max属性值进行比较。
stepMismatch：判断当前元素值是否与step设置相符 配合step使用 并不能与min或max属性值进行比较。
customError：配合setCustomValidity()方法 如果使用该方法,该状态返回true
setCustomValidity()方法 设置自定义的错误提示内容 使用该方法设置错误信息 当输入正确时,调用该方法将信息设置为空("") 不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)
setCustomValidity()方法：作用 - 修改验证错误后的默认提示信息
<!DOCTYPE html>
<html>
<head>
<title>setCustomValidity()方法</title>
<meta charset="utf-8" />
</head> <body>
<form>
用户名:<input type="text" id="user" required>
<input type="submit">
</form>
<script>
/*
* setCustomValidity()方法
* * 作用 - 修改验证错误后的默认提示信息
* * 问题
* * 一旦使用该方法修改默认错误提示信息后
* 即使输入正确,错误提示依旧存在(逻辑错误)
* * 解决
* * 判断如果用户输入正确的话,将该方法设置提示内容修改为空
* * 问题
* * 使用valid状态判断输入是否正确
* * 一旦使用该方法,validityState对象的所有状态都返回false
*/
var user = document.getElementById("user");
user.onblur = function(){
//user.value == "" || user.value == null
if(user.value != "" && user.value != null){
user.setCustomValidity("");
}else if(user.validity.valueMissing){
user.setCustomValidity("用户名不能为空");
}
}
</script>
</body>
</html>
6 新表单验证完整案例1！！！！
<!DOCTYPE html>
<html>
<head>
<title>表单验证状态(完整)</title>
<meta charset="utf-8" />
</head> <body style="text-align:center">
<form>
用户名:<input type="text" id="user" required><br>
email地址:<input type="email" id="email"><br>
密码:<input type="text" id="pwd" pattern="^[a-zA-Z]{6,12}$"><br>
确认密码:<input type="text" id="repwd" maxlength="10"><br>
年龄:<input type="number" id="age" min="10" max="20"><br>
成绩:<input type="number" id="score" min="60" max="100" step="10"><BR>
<video width="500px"height="300"style="background:black"controls loop poster="../Day02/素材/oceans-clip.png"> <source src="../Day02/素材/oceans-clip.mp4">
<source src="../Day02/素材/oceans-clip.ogv">
<source src="../Day02/素材/oceans-clip.webm">
</video><br><br>
<input type="submit" value="注册">
</form>
<script>
var user = document.getElementById("user");
user.onblur = function(){
if(user.validity.valueMissing){
console.log("用户名不能为空.");
}
}
var email = document.getElementById("email");
email.onblur = function(){
if(email.validity.typeMismatch){
console.log("email输入格式错误.");
}
}
var pwd = document.getElementById("pwd");
pwd.onblur = function(){
if(pwd.validity.patternMismatch){
console.log("密码输入错误.");
}
}
var repwd = document.getElementById("repwd");
repwd.onblur = function(){
if(repwd.validity.tooLong){
console.log("密码输入过长.");
}
}
var age = document.getElementById("age");
age.onblur = function(){
if(age.validity.rangeUnderflow){
console.log("年龄过小,不符合!");
}
}
var score = document.getElementById("score");
score.onblur = function(){
if(score.validity.valid){
console.log("成绩输入正确.");
}else if(score.validity.stepMismatch){
console.log("成绩输入不符.");
}
}
</script>
</body>
</html>
7 6 新表单验证完整案例2！！！！
<!DOCTYPE html>
<html>
<head>
<title>表单新验证案例</title>
<meta charset="utf-8" />
</head> <body>
<fieldset>
<legend>用户注册页面</legend>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" autofocus placeholder="请输入用户名"id="user"required pattern="^[a-zA-Z]{6,12}$"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"id="pwd"required pattern="^[a-zA-Z]{6,8}$"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" placeholder="请确认密码"id="repwd"required pattern="^[a-zA-Z]{6,8}$"></td>
</tr>
<tr>
<td>email地址:</td>
<td><input type="email" placeholder="请输入email"id="email"required></td>
</tr>
<tr>
<td>个人主页:</td>
<td><input type="url" placeholder="请输入个人主页"id="pon"required></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="number" min="0" max="100" placeholder="请输入个人主页"id="age"required></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date"id="date"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
* 需求
* * 用户名
* * 验证条件 - 不能为空,只能输入英文+数字,长度在6-12之间
* * 条件 - 验证失败,重新设置错误提示
* * 密码
* * 验证条件 - 不能为空,只能输入英文,长度在6-8之间
* * 条件 - 验证失败,重新设置错误提示
* * 确认密码
* * 验证条件 - 不能为空,只能输入英文,长度在6-8之间(两次密码输入一致)
* * 条件 - 验证失败,重新设置错误提示
* * email地址
* * 验证条件 - 不能为空,类型符合
* * 条件 - 验证失败,重新设置错误提示
* * 个人主页
* * 验证条件 - 不能为空,类型符合
* * 条件 - 验证失败,重新设置错误提示
* * 年龄
* * 验证条件 - 不能为空,值不能小于min,step符合
* * 条件 - 验证失败,重新设置错误提示
* * 出生日期
* * 验证条件 - 不能为空
* * 条件 - 验证失败,重新设置错误提示
* * 统一要求
* * 所有元素验证通过,给出正确提示
*/ var user = document.getElementById("user");
user.onblur = function(){
user.onblur = function(){
if(user.validity.valueMissing){
alert("用户名不能为空.");
}else if(user.validity.patternMismatch){
alert("用户名格式不正确");
}
} var pwd=document.getElementById("pwd");
pwd.onblur = function(){
if(pwd.validity.valueMissing){
alert("密码不能为空.");
}else if(pwd.validity.patternMismatch){
alert("密码格式不正确");
}
}
} var repwd=document.getElementById("repwd");
repwd.onblur = function(){
if(repwd.value!=pwd.value){
alert("两次密码不一致");
}
} var email = document.getElementById("email");
email.onblur = function(){
if(email.validity.typeMismatch){
console.log("email输入格式错误.");
}
}
</script>
</body>
</html>
后续的HTML内容会持续更新．．．．．．．．．．Ｏ．Ｏ ＝．＝
HTML5 总结 （1）的更多相关文章
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
- 戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
- nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
- HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
- HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...
随机推荐
- luoguP2664 树上游戏
https://www.luogu.org/problemnew/show/P2664 考虑对于每种颜色包含的点和这些点的子节点建出虚树,发现只要将一个联通块中的东西 Dp + 差分一下就行了 当然要 ...
- 数据解析之xpath
一.环境安装 下载lxml pip install lxml 二.使用 XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取 ...
- mysql主从服务器
#mysql主从服务器 mysql-bin.003673 | 106 查看错误日志show variables like '%log_error%'; replicate-do-table=testm ...
- webstorm激活服务器地址
2017.1.4版本可用 http://idea.imsxm.com/
- 3. C/C++笔试面试经典题目三
64. 如何打印出当前源文件的文件名以及源文件的当前行号? [参考答案]cout << __FILE__ ; cout<<__LINE__ ; __FILE__和__LINE_ ...
- ubtuntu 如何查看内存用量 mongostat详解
free -h top free或者top或者cat /proc/meminfo mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态, ...
- SDUT OJ 数据结构实验之图论十：判断给定图是否存在合法拓扑序列
数据结构实验之图论十:判断给定图是否存在合法拓扑序列 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Prob ...
- 一些英文表达-youtube
culinary tradition 烹饪传统 crunchy 松脆的 boutique 精品店 migraine 偏头痛 colon 冒号 towel 毛巾 ecstatic 狂喜的 bok ...
- POJ - 3233 矩阵套矩阵
题意:给你矩阵\(A\),求\(S=\sum_{i=1}^{k}A^i\) 构造矩阵 \[ \begin{bmatrix} A & E \\ 0 & E\\ \end{bmatrix} ...
- JavaScript 精简笔记
JavaScript 精简笔记,摘自 廖雪峰的官方网站. [From] https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51 ...