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

随机推荐

kali linux之手动漏洞挖掘二
漏洞挖掘原则/宗旨----所有变量,所有头(cookie中的变量),逐个变量删除身份认证常用若口令/基于字典的密码爆破/锁定帐号信息收集(手机号,身份证,住址信息等等) 密码嗅探会话sessi ...
Java面向对象之关键字static 入门实例
一.基础概念静态关键字 static 是成员修饰符,直接用于修饰成员. (一)特点: 1.被静态修饰的成果,可以直接被类名所调用. 2.静态成员优先于对象存在. 3.静态成员随着类的加载而加载.随着 ...
2. C/C++笔试面试经典题目二
1. C和C++中struct有什么区别? [参考答案] [解析]C中的struct没有保护行为,没有public,private,protected,内部不能有函数,但可以有函数指针. 2. C++ ...
HTML中title前面小图标的实现
做一个比较正规的网站,需要在标题栏前面加上相应的小图标,会好看的多.效果大致如下: 其实实现起来很简单,只要在html文件中的<head></head>标签中加上: <l ...
蓝牙4.0BLE抓包(三) – 扫描请求和扫描响应
版权声明:本文为博主原创文章,转载请注明作者和出处. 作者:强光手电[艾克姆科技-无线事业部] 1. 扫描请求和扫描响应广播包含扫描请求SCAN_REQ和扫描响应SCAN_RSP. 扫描请求: ...
24.Letter Combinations of a Phone Number（电话号对应的字符组合）
Level: Medium 题目描述: Given a string containing digits from 2-9 inclusive, return all possible lette ...
洛谷 P1217 [USACO1.5]回文质数 Prime Palindrome
嗯... 这道题对于蒟蒻的我来说实在是TQL... 先看一下题:(题目链接:https://www.luogu.org/problemnew/show/P1217) 然后说一下我的做题过程吧: 一看到 ...
如何在Qt Creator 创建一个.pri文件
如何在Qt Creator 创建一个.pri文件 2013年10月09日 ⁄ 综合 ⁄ 共 254字 ⁄ 字号小中大 ⁄ 评论关闭这个问题很少人写,因为比较简单,但是让却让我花了好大功夫才 ...
REST模式中HTTP请求方法（GET，POST,PUT,DELETE）
一直在测试REST模式的WEB SERVICE接口,客户端的HTTP的请求方式一般分为四种:GET.POST.PUT.DELETE,这四种请求方式有什么不同呢.简单的说,GET就是获取资源,POST就 ...
(IDEA) VCS-->Import Into Version Control没有Share Project(Subversion)这个选项。
在VCS-->Import Into Version Control,会发现只有Import Into Subversion选项,并没有Share Project(Subversion)这个选项 ...

HTML5 总结 （1）

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

随机推荐

热门专题

HTML5 总结（1）

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