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 ...

随机推荐

select chosen 的入门使用
首先要引用因为肯定要引用jq,所以就没有写啦 <link rel="stylesheet" href="__ROOT__/Public/jschy/chosen_ ...
mysql相关的软件
数据库采用mysql,那么问题来了,mysql的部署是采用主备模式?主主模式?集群模式?在然后采取分库.分表模式? 其次:在外围的辅助开源软件的选择mycat?mybatis?keepalived?r ...
Spring boot进阶-配置Controller、interceptor...
1.配置SpringBootApplication(对spring boot来说这是最基本) package io.github.syske.springboot31; import org.spri ...
docker概述及基础操作
docker概述容器技术已经成为应用程序封装和交付的核心技术容器技术的核心有以下几个内核组成CGroups-资源管理NamsSpace-进程管理SElinux-安全由于是在物理机上实施隔离,启动一 ...
按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
理解Javascript_02_执行上下文01
执行上下文又名执行上下文环境 JS中为什么会产生这个概念呢,先来看一下下面的这段代码: 通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undef ...
python 的内置模块 re
在 pattern 的 “” 前面需要加上一个 r 用来表示这是正则表达式, 而不是普通字符串 >>> import re >>> ptn = r"r[a ...
ASP.NET中MD5的加密方式很简单
在ASP.NET中MD5的加密方式很简单,代码如下: FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5&quo ...
Jquery动态绑定事件处理函数 bind / on / delegate
1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...
HDU - 4291 循环节
还有这种操作? #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define p ...

HTML5 总结 （1）

HTML5 总结 （1）的更多相关文章

随机推荐

热门专题

HTML5 总结（1）

HTML5 总结（1）的更多相关文章