HTML5學習系列之表單與文件

article元素

article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或者其他任何獨立的內容。例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<article>
    <header>
        <h1>蘋果</h1>
        <p>發表日期:<time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>蘋果</b></p>
</article>
</body>
</html>

seciton元素

section元素用於對網站或應用程序中頁面上的內容進行分塊，一個seciton元素通常由內容及其標題組成。但section元素並非一個普通的容器元素；當一個容器需要被直接定義樣式或腳本定義行爲時，推薦使用div而非section元素。

nav元素

nav元素是一個可以用作導航的鏈接組，其中的導航鏈接到其他頁面或當前頁面的其他部分，並不是所有的鏈接組都要被放進nav元素，只需要將主要的，基本的鏈接組放進1.nav元素即可。具體來說，nav元素可以用於以下這些場合：

傳統導航條：現在主流網站上都有不同層級的導航條，器作用是將當前畫面跳轉到網站的其他主要頁面上去。

2.現在主流博客網站及商品網站上都有側邊欄導航，其作用是將頁面從當前文章或當前商品跳轉到其他文章或其他商品頁面上去。

3.頁內導航的作用是在本頁面幾個主要的組成部分之間進行跳轉。

4.翻頁操作時指在多個頁面的前後頁或博客網站的前後篇文章滾動。

aside元素

aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有區別於主要內容的部分。

aside元素只要有以下兩種使用方法：

被包含在article元素中作爲主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋。
在article元素之外使用，作爲頁面或站點全局的附屬信息部分，最典型的形式是側邊欄，其中的內容可以是友情鏈接，博客中其他文字列表、廣告單元等。

time元素與微格式

首先說一下微格式，它是一種利用HTML的class屬性來對頁面添加附加信息的方法，附加信息例如新聞事件發生的日期和時間，個人電話號碼，企業郵箱等。

微格式並不是在html 5之後纔有的，在html5之前它就和html結合使用，但是在使用過程中發現在日期和時間的機器編碼上出現了一些問題，編碼過程中產生一些歧義。Html5增加了一種新的元素來無歧義的，明確的對機器的日期和時間進行編碼，並且以讓人容易讀的方式來展現它，這個元素就是time元素。

time元素代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差，它可以定義很多格式的日期和事件。

pubdate屬性

pubdate屬性是一個可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章或整個網頁的發佈日期。

header元素

header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內一個內容區塊的標題，但也可以包含其他內容。

hgroup元素

hgroup元素是將標題及其子標題進行分組的元素，hgroup元素通常會將h1~h6元素進行分組。

footer元素

footer元素可以作爲其上層父級內容區塊或是一個根區塊的腳註，footer通常包括其相關區塊的腳註信息，如作者、相關閱讀鏈接及版權信息等。

address元素

address元素用來在文檔中呈現聯繫信息，包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子郵箱、真實地址、電話號碼等。address應該不只是用來呈現電子郵箱或真實地址，還應用來展示跟文檔相關的聯繫人的所有聯繫信息。

form屬性

在html4中，表單內的從屬元素必須書寫在表單內部，但是在html 5中，可以把它們書寫在頁面上任何地方，然後給該元素指定一個form屬性，屬性值爲該表單的id，這樣就可以聲明該元素從屬於指定表單了。form屬性的例子如下：

<form id=”testfrom”>

<input type=”text”>

</form>

<textarea form=”testform”></textarea>

Input元素從屬於foo表單，它被書寫在表單內部，用不着再對它指定form屬性，textarea元素被書寫在form表單之外，但它從屬於form表單，所以將form表單的id指定給textarea元素的form屬性。這樣做的好處是當需要給頁面中的元素添加樣式時可以更方便地添加，因爲它們不是被分散在表單之內的了。

formaction屬性

在html4中，一個表單內的所有元素都只能通過表單的action屬性統一提交到另一個頁面，而在html5中可以給所有的提交按鈕，都增加不同的formaction屬性，使得點擊不同的按鈕，可以將表單提交到不同的頁面。例子如下：

<form id=”testform” action=”serve.jsp”>

<input type=”submit” name=”s1” value=”v1” formaction=”s1.jsp”>提交到s1

<input type=”submit” name=”s2” value=”v2” formaction=”s2.jsp”>提交到s2

<input type=”submit” name=”s3” value=”v3” formaction=”s3.jsp”>提交到s3

<input type=”submit”>

</form>

formmethod屬性

在html 4中，一個表單內只有一個action屬性來對錶單內所有元素統一指定提交頁面，所以每個表單內也只有一個method屬性來統一指定提交方法，同時也可以使用formmethod屬性來對每個表單元素分班指定不同的提交方法，例子如下：

<form id=”testform” action=”serve.jsp”>

<input type=”submit” name=”s1” value=”v1” formaction=”s1.jsp” formmethod=”post”>提交到s1

<input type=”submit” name=”s2” value=”v2” formaction=”s2.jsp” formmethod=”post”>提交到s2

</form>

placeholder屬性

placeholder是指當文本框處於未輸入狀態時文本框中顯示的輸入提示，實現方法非常簡單，只要加上placeholder屬性，然後指定提示文字就可以了。

autofocus屬性

給文本框、選擇框或按鈕控件加上該屬性，當畫面打開時，該控件自動獲得光標焦點，目前爲止要做到這點需要使用JavaScript

list屬性

在html5中，爲單行文本框增加了一個list屬性，該屬性的值爲某個datalist元素的id，datalist元素也是html 5中新增元素，該元素類似於選擇框，但是當用戶想要設定的值不在選擇列表之內時，允許其自行輸入，該元素本身並不現實，而是當文本框獲得焦點時以提示輸入的方式顯示，爲了避免在買有支持該元素的瀏覽器上出現顯示錯誤，可以用css等將它設定爲不顯示例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list屬性示例</title>
</head>
<body>
text:<input type="text" name="greeting" list="greetings">
<datalist id="greetings" style="display: none">
    <option value="good">good</option>
    <option value="hello">hello</option>
    <option value="afternoon">afternoon</option>
</datalist>
</body>
</html>

autocomplete屬性

輔助輸入所用的自動完成功能，是一個節省輸入時間，同時十分方便的功能，在html 5之前，因爲誰都可以看見輸入的值，所用存在安全隱患，但只要使用autocomplete屬性，安全性就可以得到很好的控制，對應autocomplete屬性，可以指定”on”、”off”與””這三種值，不指定時，使用瀏覽器默認值，把該屬性設爲on時，可以顯示指定候補輸入的數據列表，使用datalist元素與list屬性提供候補輸入的數據列表，自動完成時，可以將該datalist元素中的數據作爲候補輸入的數據列表，自動完成時，可以將該datalist元素中的數據作爲候補輸入的數據在文本框中自動顯示。

Input元素類型

url類型

url類型的input元素是一種專門用來輸入url地址的文本框，提交時如果該文本框中內容不是url地址格式的文字，則不允許提交。

email類型

email類型的input元素是一種專門用來輸入email地址的文本框，提交時如果該文本框內容不是email地址格式的文字則不允許提交，但是它並不堅持該email地址是否存在，提交時該文本框可以爲空，除非加上了required屬性。

Email類型的文本框具有一個multiple屬性——它允許在該文本框中輸入一串以逗號分隔的email地址，當然，並不強制要求用戶輸入該email地址列表，在實際使用過程中，可以由開發者通過編程的方式將用戶聯繫人地址列表中的郵件列表彈出，在每個聯繫人的郵件地址旁邊帶有複選框，供用戶選擇輸入。

date類型

date類型的input元素是深受開發者喜愛的一直元素，我們也經常看到頁面中要求我們輸入的各種各樣的日期。Date類型的input元素以日曆的形式方便用戶輸入。

time類型

time類型的input元素是一種專門用來輸入時間的文本框，並且在提交時會對輸入時間的有效性進行檢查，她的外觀取決於瀏覽器，可能是簡單的文本框，只是提交時檢查是否輸入了有效的時間，也可能以時鐘形式出現，還可以攜帶時區。

datetime類型

datetime類型的input元素是一種專門用來輸入UTC日期和時間的文本框，並且在提交時會對輸入的日期和事件進行有效性檢查。

datetime-local類型

datetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框，並且在提交時會對輸入的日期和時間進行有效性檢查。

month類型

month類型的input元素是一種專門用來輸入月份的文本框，並且在提交時會對輸入的月份的有效性進行檢查。

week類型

week類型的input元素是一種專門用來輸入周號的文本框，並且在提交時會對輸入的周號之有效性進行檢查。

number類型

number類型的input元素是一種專門用來輸入數字的文本框，並且在提交時會檢查其中的內容是否爲數字，它具有min、max與step屬性。

range類型

range類型的input元素是一種只允許輸入一段範圍內數值的文本框，它具有min屬性與max屬性，可以設定最小值與最大值，它還具有step屬性，可以指定每次拖到的幅度。

search類型

search類型的input元素是一種專門用來輸入搜素關鍵詞的文本框，search類型與text類型僅僅在外觀上有區別。

tel類型

tel類型的input元素被設計爲用來輸入電話號碼的專用文本框，它沒有特殊的校驗規則，不強制輸入數字。但是開發者可以通過pattern屬性來指定對於輸入的電話號碼格式的驗證。

color類型

color類型的input元素用來選取顏色，它提供了一個顏色選取器。

output元素的追加

html 5中新增加了元素output，output元素定義不同類型的輸出，比如計算結果或腳本的輸出，output元素必須從屬於某個表單，也就是說，必須將它書寫在表單內部，或者對它添加form屬性。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>output元素示例</title>
</head>
<body>
<form id="testform">
    請選擇一個數值：
    <input name="rangel" type="range" min="0" max="100" step="5"/>
    <output onforminput="value=rangel.value">50</output>
</form>
</body>
</html>

表單自動驗證

在html 5 中，通過對元素使用屬性的方法，可以實現在表單提交時執行自動驗證的功能。

required屬性

在html 5 中新增的required屬性可以應用在大多數輸入元素上（除了隱藏元素、圖片元素按鈕上）。在提交時，如果元素中內容爲空白，則不允許提交，同時在瀏覽器中顯示信息提示文字，提示用戶這個元素中必須輸入內容。

pattern屬性

之前提到的一些新增的input元素，要求輸入內容符合一定的格式，對input元素使用pattern屬性，並且將屬性值設爲某個格式的正則表達式，在提交時會檢查其內容是否符合給定格式，當輸入的內容不符合給定格式時，則不允許提交，同事在瀏覽器中顯示信息提示文字，提示輸入的內容必須符合給定格式。

min屬性與miax屬性

min與max這兩個屬性是數值類型或日期類型的input元素的專用屬性，它們限制了在input元素中輸入的數值與日期的範圍。

step屬性

step屬性控制input元素中的值增加或減少時的步幅。

顯式驗證

除了對input元素添加屬性進行元素內容有效性的自動驗證外，在html 5中，form元素與input元素都具有一個checkValidity方法，調用該方法，可以顯式地對錶單內容所有元素內容或單個元素內容進行有效性驗證。CheckValidity方法以boolean的形式返回驗證結果，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkValidity示例</title>
    <script>
        function check() {
            var email = document.getElementById("email");
            if (email.value == "") {
                alert("請輸入Email地址");
                return false;
            }
            else if (!email.checkValidity()) {
                alert("請輸入正確的Email地址")
            } else {
                alert("您輸入的Email地址有效")
            }
        }
    </script>
</head>
<body>
<form id="testform" onsubmit="return check()">
    <label for="email">Email</label>
    <input name="email" id="email" type="email"/>
    <br/>
    <input type="submit"/>
</form>
</body>
</html>

取消驗證

有時我們可能想要把表單臨時提交一下，但又不想讓它進行表單中所有元素內容的有效性檢查。例如，一個非常大的表單需要分成兩個部分，在第二部分中有個文本框中內容是必須要填的，如果填每一部分內容則會耗時較多，或填完第一部分之後，第二部分要過一段時間再填，在這種情況下應該允許用戶先提交保存第一部分內容，但是同時需要臨時取消第二部分的內容表單驗證。

有兩種方法：

第一種方法是利用form元素的novalidate屬性它可以關閉整個表單驗證，當整個表單的第二部分需要驗證的內容比較多，但又想先提交表單的第一部分內容時，可以使用這個方法，先把該屬性設置爲true，關閉表單驗證，提交第一部分內容，然後在提交第二部分時在把它設爲false，打開表單驗證，提交的第二部分內容。

第二種方法是利用input元素或submit元素的formnovalidate屬性，利用input元素的formnovalidate屬性可以讓表單驗證對單個input元素失效，在前面所舉例子中，當表單的第二部分中需要驗證的元素數量很少時，可以只利用這些元素的formnovalidate屬性，讓表單驗證對這些元素失效。

而如果對submit按鈕使用了formnovalidate屬性，點擊該按鈕時，相當於利用了form元素的novalidate屬性，整個表單驗證都失效了。

自定義錯誤信息

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義錯誤信息示例</title>
    <script>
        function check() {
            var pass1 = document.getElementById("pass1");
            var pass2 = document.getElementById("pass2");
            if (pass1.value != pass2.value) {
                pass2.setCustomValidity("密碼不一致。");
            } else {
                pass2.setCustomValidity("");
            }
            var email = document.getElementById("email");
            if (!email.checkValidity()) {
                email.setCustomValidity("請輸入正確的Email地址");
            }
        }
    </script>
</head>
<body>
<form id="testform" onsubmit="return check()">
    密碼：<input type="password" name="pass1" id="pass1"/><br/>
    確認密碼：<input type="password" name="pass2" id="pass2"/><br/>
    Email:<input type="email" name="email" id="email"/><br/>
    <input type="submit">
</form>
</body>
</html>

新增的figure元素和figcation元素

figure元素也是一種元素的組合，電郵可選標題，figure元素用來表示網頁上一塊獨立內如，將其從網頁上移除後不會對網頁上的其他內容產生任何影響，figure元素所表示的內容可以是圖片、統計圖或代碼示例。

Figcaption元素表示figure元素的標題，它從屬於figure元素，必須書寫在figure元素內部，可以書寫在figure元素內的其他從屬元素的前面或後面，一個figure元素內最多隻允許放置一個figcaption元素，但允許放置多個其他元素。

新增的details元素

details元素提供了一種替代JavaScript的、將畫面上局部區域進行展示或收縮的方法，不過現在還有任何瀏覽器對它支持。

新增的mark元素

mark元素表示頁面中需要突出顯示或高亮顯示的，對應當前用戶具有參考作用的一段文字，它通常使用於引用原文的時候，目的是引起讀者的注意，mark元素是對原文內容具有補充作用的一個元素，它應該用於一段原文作者不認爲重要，但未了與原文作者不相關的其他目的，而需要突出顯示或高亮顯示文字上面，

mark元素最主要的目的是吸引當前用戶的注意，因爲標示出來的文字與用戶的當前操作有關，通常該元素對於當前用戶具有很好的幫助作用。例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mark元素應用在頁面檢索時的示例</title>
</head>
<body>
   <h1>搜索"<mark>HTML 5</mark>",找到相關頁面約10,200,000篇，用時0.041秒</h1>
   <section id="search-results">
       <article>
           <h2>
               <a href="#">

               </a>
           </h2>
       </article>
   </section>
</body>
</html>

新增的progress元素

progress元素代表一個任務的完成進度，這個進度可以是不確定的，只是表示進度正在進行，但不清楚還有多少工作量沒有完成，也可以用0到某個最大數字如100之間數字來表示準確的進度完成情況。

該元素具有兩個屬性來表示當前任務完成情況，value屬性表示已經完成了多少工作量，max屬性表示總共有多少工作量，工作量的單位是隨意的，不用指定。

在屬性設定的時候，value屬性和max屬性只能指定爲有效的浮點數，value屬性的值必須大於0，且小於或等於max屬性，max屬性的值必須大於0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress元素的使用示例</title>
    <script>
        var progressBar = document.getElementById("p");
        function button_onclick() {
            var progressBar = document.getElementById("p");
            progressBar.getElementsByTagName("span")[0].textContent = "0";
            for (var i = 0; i < 100; i++) {
                updateProgress(i);
            }
        }
        function updateProgress(newValue) {
            var progressBar = document.getElementById("p");
            progressBar.value = newValue;
            progressBar.getElementsByTagName("span")[0].textContent = newValue;
        }
    </script>
</head>
<body>
<section>
    <h2>progress元素的使用示例</h2>
       <p>完成百分比:<progress id="p" max="100" value="50"><span>13</span>%</progress></p>
    <input type="button" onclick="button_onclick()" value="請點擊">
</section>
</body>
</html>

HTML5學習系列之表單與文件

ReactUse createGolaState 源碼解析

VueUse 是怎麼封裝Vue3 Provide/Inject 的？

HTML5學習系列之表單與文件

vite首次啓動加載慢

Element 文檔中的 Markdown 解析

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結