HTML5 學習總結（二）——HTML5新增屬性與表單元素

時間  2019-11-19
標籤 html5 html 學習 總結 新增 屬性 表單 元素 欄目 HTML5 简体版
原文   原文鏈接

1、HTML5新增屬性

1.一、contextmenu

contextmenu的做用是指定右鍵菜單。javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare">
        </div>
        <menu id="menuShare" type="context">
            <menuitem label="分享到QQ空間" onclick="alert('QQ');"></menuitem>
            <menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem>
            <menuitem label="分享到微博" onclick="alert('微博');"></menuitem>
        </menu>
    </body>
</html>

 運行效果：html

contextmenu 在Html5中，每一個元素新增了一個屬性：contextmenu, contextmenu 是上下文菜單，即鼠標右擊元素會出現一個菜單。
menu 要實現鼠標右擊元素會出現一個菜單，還必須瞭解HTML5裏新增的另外一個元素:menu 顧名思義menu是定義菜單的， menu 元素屬性： type ：菜單類型屬。 有三個值 1）context：上下文； 2）toolbar：工具欄；3）list：列表
<menuitem>
<menu> </menu>內部能夠嵌入一個一個菜單項，即<menuitem></menuitem>。
menuitem 屬性：
label：菜單項顯示的名稱
icon：在菜單項左側顯示的圖標
onclick：點擊菜單項觸發的事件前端

1.二、contentEditable

規定是否可編輯元素的內容
屬性值：
true -----能夠編輯元素的內容
false -----沒法編輯元素的內容
inherit -----繼承父元素的contenteditable屬性
當爲空字符串時，效果和true一致。
當一個元素的contenteditable狀態爲true（contenteditable屬性爲空字符串，或爲true，或爲inherit且其父元素狀態爲true）時，意味着該元素是可編輯的。不然，該元素不可編輯。java

document.body.contentEditable=true; 能夠修改已發佈網站jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>contentEditable屬性</title>
    </head>
    <body>
        <h2>contentEditable屬性</h2>
        <div contenteditable="true">
            Hello contentEditable
        </div>
    </body>
</html>

1.三、hidden

hidden屬性用於隱藏該元素。一旦使用了此屬性，則該元素就不會在瀏覽器中被顯示
2個布爾值
true 規定元素是可見。
false 規定元素是不可見。git

        <div hidden="hidden">
            Hello Hidden
        </div>

爲了兼容一些不支持該屬性的瀏覽器（IE8），能夠在CSS中加以下樣式：github

*[hidden]{
   display: none;
}web

var div1=document.querySelector("body #div1");
div1.innerHTML+=" +++";正則表達式

1.四、draggable

規定元素是否可拖拽
3個枚舉值
true 規定元素是可拖動的。
false 規定元素是不可拖動的。
auto 使用瀏覽器的默認特性。api

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="Scripts/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>    
        <title></title>
        <style>
            #div1,
            #div3 {
                height: 200px;
                width: 200px;
                border: 1px solid #00f;
                margin-bottom: 10px;
            }
            #div2 {
                height: 100px;
                width: 100px;
                background: yellow;
            }
        </style>
        <script>
            var div1, div2, div3, msg;
            window.onload = function() {
                div1 = document.getElementById("div1");
                div2 = document.getElementById("div2");
                div3 = document.getElementById("div3");
                msg = document.getElementById("msg");
                
                div2.ondragstart=function(){
                    msg.innerHTML+="div2開始拖動了<br/>";
                }
                div2.ondrag=function(){
                    msg.innerHTML+="拖動中<br/>";
                }
                div2.ondragend=function(){
                    msg.innerHTML+="拖動結束<br/>";
                }
                
                div1.ondragover = function(e) {
                    e.preventDefault();
                }
                div1.ondrop = function(e) {
                    div1.appendChild(div2);
                }
                div3.ondragover = function(e) {
                    e.preventDefault();
                }
                div3.ondrop = function(e) {
                    div3.appendChild(div2);
                }
                
                $("#div1").data("name","電池");
                alert($("#div1").data("name"));
                
                div1.setAttribute("data-order-price",998.7);
                alert(div1.getAttribute("data-order-price"));
            }
        </script>
    </head>

    <body>
        <div id="div1" data-order-price="98.5" data-name="充電寶"></div>
        <div id="div3"></div>
        <div id="div2" draggable="true"></div>
        <h3 id="msg"></h3>
    </body>

</html>

運行結果： 

1.五、data-*

data-*屬性能讓用戶自定義屬性的方式來存儲數據
<span data-order-amount=100></span>
取值：
getAttribute('data-order-amount')
dataset.orderAmount
jQuery中的data()方法一樣能夠訪問

使用jQuery與javascript添加與獲取data屬性示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>data-*</title>
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h2>data-*</h2>
        <div id="div1" data-student-name="Tom" data-stu='{"a":1,"b":2}'></div>
        <button onclick="addData()">添加數據</button>
        <button onclick="getData()">獲取數據</button>
        <script type="text/javascript">
            var div1=document.getElementById("div1");
            function addData()
            {
                //給div1添加屬性data-student-name，值爲rose
                div1.setAttribute("data-student-name","Rose");
                $("#div1").data("stu-mark","99分");
            }
            function getData()
            {
                //原生JavaScript
                //alert(div1.getAttribute("data-student-name"));
                
                //jQuery
                alert($("#div1").data("student-name"));
                alert($("#div1").data("stu").a);
                alert($("#div1").data("stu-mark"));
            }
            
            
            var x="{a:1}";
            alert(eval("("+x+")").a);
        </script>
    </body>
</html>

 運行效果：

 

1.六、placeholder佔位屬性

這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,除了Firefox,其餘標準瀏覽器都能很好的支持
<input placeholder="請輸入用戶名">

            <p>
                <label>郵箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/>
            </p>

1.七、required必填屬性

約束表單元在提交前必須輸入值。

            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required"/>
            </p>

1.八、pattern正則屬性

約束用戶輸入的值必須與正則表達式匹配。

            <p>
                <label>賬號：</label>
                <input type="text" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符
            </p>

 

1.九、autofocus自動聚焦屬性

            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>

讓指定的表單元素得到焦點。

1.十、autocomplete自動補全屬性

當表單元素設置了自動完成功能後，會記錄用戶輸入過的內容，雙擊表單元素會顯示歷史輸入。

<input type="text" name="username" autocomplete="on/off" />

該屬性默認是打開的。

1.十一、novalidate不驗證屬性

novalidate 屬性規定在提交表單時不該該驗證 form 或 input 域。
<form action="demo_form.asp" method="get" novalidate="true">

<button formnovalidate="formnovalidate" >提交</button>

1.十二、multiple多選屬性

multiple 屬性規定輸入域中可選擇多個內容，如：email 和 file

<input type="file" multiple="multiple」 />

            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>

    <body>
        <h2>HTML5新的表單元素</h2>
        <form>
            <p>
                <label>姓名：</label>
                <input type="text" required="required"/>
            </p>
            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>
            <p>
                <label>賬號：</label>
                <input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符
            </p>
            <p>
                <label>郵箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/>
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>
            <p>
                <label>生日：</label>
                <input type="date">
            </p>
            <p>
                <label>身高：</label>
                <input type="number" max="226" min="80" step="10" value="170" />
            </p>
            <p>
                <label>膚色：</label>
                <input type="color" onchange="document.bgColor=this.value" />
            </p>
            <p>
                <label>體重：</label>
                <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
                <span id="rangeValue"></span>
            </p>
            <button formnovalidate="formnovalidate">提交</button>
            <script type="text/javascript">
                function showValue(val){
                    document.getElementById("rangeValue").innerHTML=val;
                }
            </script>
        </form>
    </body>

</html> 

2、HTML5表單新功能解析

HTML表單一直都是Web的核心技術之一，有了它咱們才能在Web上進行各類各樣的應用,才能和服務器進行方便快捷的交互。HTML5 Forms新增了許多新控件及其API，方便咱們作更復雜的應用，而不用藉助其它前端腳本語言(如:javascript),極大的解放了咱們的雙手。

 

2.一、表單結構更自由

在HTML5中表單徹底能夠放在頁面任何位置，而後經過新增的form屬性指向元素所屬表單的id值，便可關聯起來。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        姓名：<input type="text" name="realname" form="form1"/>
        <form id="form1" method="get">
            <button>提交</button>
        </form>
    </body>
</html>

運行結果：

2.二、表單重寫屬性

表單重寫屬性（form override attributes）容許您重寫 form 元素的某些屬性設定。
表單重寫屬性有：
formaction - 重寫表單的 action 屬性
formenctype - 重寫表單的 enctype 屬性
formmethod - 重寫表單的 method 屬性
formnovalidate - 重寫表單的 novalidate 屬性
formtarget - 重寫表單的 target 屬性

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        姓名：<input type="text" name="realname" form="form1"/>
        <form id="form1" method="get">
            <button formmethod="get"  formaction="d01.html">get提交給d01.html</button>
            <button formmethod="post" formaction="d02.html">post提交d02.html</button>
        </form>
    </body>
</html>

 運行結果：

2.三、郵箱與URL輸入

email輸入類型外表與文本框同樣，但在移動端運行時將切換對應的輸入鍵盤，約束格式

格式：<input type="email" />

url輸入類型
說明：上面代碼展現的文本域要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://.
格式：<input type= "url">

 

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>
    <body>
        <h2>HTML5新的表單元素</h2>
        <form>
            <p>
                <label>郵箱：</label>
                <input type="email" name="mail" id="mail" value="" />
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" />
            </p>
            <button>提交</button>
        </form>
    </body>
</html>

2.四、日期時間相關輸入類型

提供日曆控件,但目前只有Opera/Chrome新版本支持,且展現效果也不同..
<input type=date>
<inputtype=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>

            <p>
                <label>生日：</label>
                <input type="date">
            </p>

 

2.五、數字輸入類型

實現一個數字輸入框，輸入不了非數字字符。

<input type="number" max=10 min=0 step=1 value=5/>
max number 規定容許的最大值
min number 規定容許的最小值
step number 規定合法的數字間隔（若是 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值

            <p>
                <label>身高：</label>
                <input type="number" max="226" min="80" step="10" value="168" />
            </p>

 

必須輸入數字，且數字的大小要介於指定的範圍。

2.六、range滑塊類型

特定值的範圍的數值，以滑動條顯示
<input type="range" max=10 min=0 step=1 value=5/>
 max number 規定容許的最大值
min number 規定容許的最小值
step number 規定合法的數字間隔
（若是 step="3"，則合法的數是 -3,0,3,6 等）
value number 規定默認值

            <p>
                <label>體重：</label>
                <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
                <span id="rangeValue"></span>
            </p>
            <button>提交</button>
            <script type="text/javascript">
                function showValue(val){
                    document.getElementById("rangeValue").innerHTML=val;
                }
            </script>

 

 

 默認沒有顯示值，須要使用javascript手動顯示。

2.七、搜索輸入類型

此類型表示輸入的將是一個搜索關鍵字,可顯示一個搜索小圖標。
<input type=search>

在Chrome中右邊會出現有一個清除符號。

2.八、電話輸入類型

此類型要求輸入一個電話號碼,但實際上它並無特殊的驗證,與text類型沒什麼區別.
<input type=tel>
在移動端會彈出輸入數字的鍵盤。

2.九、color輸入類型

此類型表單,可以讓用戶經過顏色選擇器選擇一個顏色值,並反饋到該控件的value值中
<input type=color>

            <p>
                <label>膚色：</label>
                <input type="color" onchange="document.bgColor=this.value" />
            </p>

 

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5新的表單元素</title>
    </head>

    <body>
        <h2>HTML5新的表單元素</h2>
        <form>
            <p>
                <label>姓名：</label>
                <input type="text" required="required"/>
            </p>
            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>
            <p>
                <label>賬號：</label>
                <input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />請輸入a-zA-Z0-9且長度6-16位的字符
            </p>
            <p>
                <label>郵箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="請輸入郵箱"/>
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>
            <p>
                <label>生日：</label>
                <input type="date">
            </p>
            <p>
                <label>身高：</label>
                <input type="number" max="226" min="80" step="10" value="170" />
            </p>
            <p>
                <label>膚色：</label>
                <input type="color" onchange="document.bgColor=this.value" />
            </p>
            <p>
                <label>體重：</label>
                <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
                <span id="rangeValue"></span>
            </p>
            <button formnovalidate="formnovalidate">提交</button>
            <script type="text/javascript">
                function showValue(val){
                    document.getElementById("rangeValue").innerHTML=val;
                }
            </script>
        </form>
    </body>

</html>

3、特殊的超連接

3.一、短信

<a href='sms:15919218899'>短信</a>

在手機端，當點擊短信時將實現發送短信功能，進入發送短信界面，自動填寫好手機號碼

3.二、電話

<a href="tel:15919218899">電話</a>

在手機端，當點擊電話時將實現撥打電話功能，進入撥打電話界面，自動填寫好手機號碼

3.三、郵件

<a href="mailto:99519876@qq.com">郵件</a>

點擊郵件時將啓動客戶端發送郵件的軟件如outlook,foxmail等

3.四、QQ客戶

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=99518888&site=qq&menu=yes" alt="點擊這裏給我發消息" title="點擊這裏給我發消息">QQ客服</a>

定製：http://shang.qq.com/

3.五、地圖

<a href="http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=%E7%8F%A0%E6%B5%B7%E6%B8%AF&c=348&searchFlag=bigBox&version=5&exptype=dep/vt=map/?fromhash=1">地圖</a>

在手機端能夠直接進入baidu的地圖

3.六、分享

自定義設置：http://share.baidu.com/

 

 示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <a href='sms:15919218899'>短信</a>
        <br />
        <a href="tel:15919218899">電話</a>
        <br />
        <a href="mailto:99519876@qq.com">郵件</a>
        <br/>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=99518888&site=qq&menu=yes" alt="點擊這裏給我發消息" title="點擊這裏給我發消息">QQ客服</a>
        <br />
        <a href="http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=%E7%8F%A0%E6%B5%B7%E6%B8%AF&c=348&searchFlag=bigBox&version=5&exptype=dep/vt=map/?fromhash=1">地圖</a>
        <br />
        <a href="http://map.baidu.com/mobile/webapp/index/index#place/detail/qt=ninf&wd=%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2&c=140&searchFlag=bigBox&version=5&exptype=dep&src_from=webapp_all_bigbox&sug_forward=&src=0&uid=717b5c621070ee955d0d0270&industry=education&qid=3767972802907606580/showall=1&pos=0&da_ref=listclk&da_qrtp=11&da_adtp=&da_log=sampid%3A3_eno%3A206_adnum%3A0_sid%3A9712246999610050_from%3Awebappmap_exptype%3Aurl_query%3A%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2_adids%3A_killnum%3A0_userids%3A&da_adquery=%E5%8D%97%E6%96%B9it%E5%AD%A6%E9%99%A2&da_adtitle=%E5%8D%97%E6%96%B9IT%E5%AD%A6%E9%99%A2&da_adindus=%E6%95%99%E8%82%B2%E5%9F%B9%E8%AE%AD%3B%E9%AB%98%E7%AD%89%E9%99%A2%E6%A0%A1&detail_from=list%26pos%3D0%26ad_page_logs%3D%26semStatType%3Dlist&vt=map">IT學院</a>
        <br />
        <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到騰訊微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
    </body>

</html>

 運行效果：

 

4、示例代碼下載

github：https://github.com/zhangguo5/HTML5_3_1

https://git.coding.net/zhangguo5/HTML5_143.git

5、視頻

https://www.bilibili.com/video/av16293468/

6、做業

一、請使用HTML5完成下面的表單、試試本地存儲（選做）

 

二、請練習全部上課示例

三、請在手機上實現撥打電話，發送短信與分享功能

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程