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 总结（1）