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 ...
随机推荐
- 51 nod 1350 斐波那契表示
每一个正整数都可以表示为若干个斐波那契数的和,一个整数可能存在多种不同的表示方法,例如:14 = 13 + 1 = 8 + 5 + 1,其中13 + 1是最短的表示(只用了2个斐波那契数).定义F(n ...
- 【bzoj4872】[Shoi2017]分手是祝愿 期望dp
Description Zeit und Raum trennen dich und mich. 时空将你我分开.B 君在玩一个游戏,这个游戏由 n 个灯和 n 个开关组成,给定这 n 个灯的初始状态 ...
- OC - runtime 之关联对象
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- GG and MM HDU - 3595 Every-SG
$ \color{#0066ff}{ 题目描述 }$ 两堆石子,GG和MM轮流取,每次在一堆石子中取另一堆石子的k\((k\ge1)\)倍,不能操作的输 现在二人要玩n个这样的游戏,每回合每个人对每个 ...
- 树状数组【洛谷P3586】 [POI2015]LOG
P3586 [POI2015]LOG 维护一个长度为n的序列,一开始都是0,支持以下两种操作:1.U k a 将序列中第k个数修改为a.2.Z c s 在这个序列上,每次选出c个正数,并将它们都减去1 ...
- JDK 5 ~ 10 新特性倾情整理！
JDK 5 ~ 10 新特性倾情整理! 最近连 JDK11都在准备发布的路上了,大家都整明白了吗?也许现在大部分人还在用6-8,8的新特性都没用熟,9刚出不久,10-11就不用说了. 为了大家对JDK ...
- C++_标准模板库STL概念介绍5-其他库与总结
C++还提供了其他一些类库,这些类库更加专用. 例如,头文件complex为复数提供了类模板complex,包含用于float.long和long double的具体化. 这个类提供了标准的复数运算以 ...
- POJ_3414 Pots 【复杂BFS】
一.题面 You are given two pots, having the volume of A and B liters respectively. The following operati ...
- Flask之flask-migrate 数据库迁移
简介 flask-migrate是flask的一个扩展模块,主要是扩展数据库表结构的. 官方文档:http://flask-migrate.readthedocs.io/en/latest/ 使用fl ...
- MySQL 重设root密码
Mysql 5.6.15版本的windows下的重设root密码,找了n个帖子终于弄明白了. 1. 开一个cmd窗口,进入Mysql的安装目录的bin文件夹,然后运行这个: mysqld --skip ...