HTML5 總結（1）

時間 2019-12-06

標籤 html5 html 總結欄目 HTML5 简体版

原文原文鏈接

HTML5新表單css

　　1.Input 新類型：email url tel number range date color date week month.......html

<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 新類型小案例：-----調色板html5

<!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 web

<!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---容許輸入多個值ide

　　　　　　　autofocus---自動獲取焦點oop

　　　　　　　form--容許表單元素定義在表單以外。post

<!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 表單新驗證！！！ui

驗證屬性：required屬性：驗證當前元素值爲空。url

　　　　　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>