以下內(nèi)容摘自Alexis Goldstein、Louis Lazaris和Estelle Weyl合著的《HTML5 & CSS3 for the Real World, 2nd Edition》一書(shū)。本書(shū)在全球各地的商店有售，您也可以在這裡購(gòu)買電子書(shū)版本。

我們已經(jīng)編寫(xiě)了大部分頁(yè)面代碼，您現(xiàn)在幾乎了解了所有關(guān)於新的HTML5元素及其語(yǔ)義的信息。但在我們開(kāi)始設(shè)計(jì)網(wǎng)站外觀之前（我們?cè)诘?章中進(jìn)行），我們將快速離開(kāi)《HTML5 Herald》的首頁(yè)，看看註冊(cè)頁(yè)面。這將說(shuō)明HTML5在Web表單方面提供的功能。

HTML5 Web表單引入了新的表單元素、輸入類型、屬性、原生驗(yàn)證和其他表單功能。我們多年來(lái)一直在界面中使用許多這些功能：表單驗(yàn)證、組合框、佔(zhàn)位符文本等等。不同之處在於，以前我們必須求助於JavaScript來(lái)創(chuàng)建這些行為；現(xiàn)在它們可以直接在瀏覽器中使用。您只需在標(biāo)記中包含屬性即可使用它們。

HTML5不僅使表單標(biāo)記對(duì)開(kāi)發(fā)人員更容易，而且對(duì)用戶也更好。由於瀏覽器原生處理客戶端驗(yàn)證，因此不同網(wǎng)站之間將具有更大的一致性，並且許多頁(yè)面無(wú)需所有冗餘的JavaScript即可加載得更快。

讓我們開(kāi)始吧！

工具箱中的可靠工具

表單通常是開(kāi)發(fā)人員在頁(yè)面中包含的最後一件事——許多開(kāi)發(fā)人員發(fā)現(xiàn)表單很無(wú)聊。好消息是HTML5為表單編碼注入了更多樂(lè)趣。在本章結(jié)束時(shí)，我們希望您能夠期待在您的標(biāo)記中適當(dāng)?shù)厥褂帽韱卧亍?

讓我們從普通的HTML開(kāi)始我們的註冊(cè)表單：

<form id="register" method="post">
  <fieldset>
    <h1>注冊(cè)</h1>
    <p>我想收到您的優(yōu)秀出版物。</p>
  </fieldset>

  <ul>
    <li>
      <label for="register-name">我的名字是：</label>
      <input type="text" id="register-name" name="name">
    </li>
    <li>
      <label for="address">我的電子郵件地址是：</label>
      <input type="text" id="address" name="address">
    </li>
    <li>
      <label for="url">我的網(wǎng)站位于：</label>
      <input type="text" id="url" name="url">
    </li>
    <li>
      <label for="password">我希望我的密碼是：</label>
      <p>(至少6個(gè)字符，無(wú)空格)</p>
      <input type="password" id="password" name="password">
    </li>
    <li>
      <label for="rating">在1到10的范圍內(nèi)，我對(duì)HTML5的了解程度是：</label>
      <input type="text" name="rating" id="rating">
    </li>
    <li>
      <label for="startdate">請(qǐng)從以下日期開(kāi)始我的訂閱：</label>
      <input type="text" id="startdate" name="startdate">
    </li>
    <li>
      <label for="quantity">我想收到</label>
      <input type="text" name="quantity" id="quantity">
      <label for="quantity">份《The HTML5 Herald》。</label>
    </li>
    <li>
      <label for="upsell">也為我注冊(cè)《The CSS3 Chronicle》</label>
      <input type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
    </li>
    <li>
      <input type="submit" id="register-submit" value="提交">
    </li>
  </ul>
</form>

此示例註冊(cè)表單使用自HTML最早版本以來(lái)就可用的表單元素。此表單通過(guò)標(biāo)籤和p元素為用戶提供了關(guān)於每個(gè)字段中預(yù)期的數(shù)據(jù)類型的線索，因此即使您在Netscape 4.7和IE5上的用戶（開(kāi)玩笑?。┮部梢岳斫獯吮韱?。它有效，但肯定可以改進(jìn)。

在本章中，我們將增強(qiáng)此表單以包含HTML5表單功能。 HTML5提供了特定於電子郵件地址、URL、數(shù)字、日期等的新的輸入類型。除此之外，HTML5還引入了可與新的和現(xiàn)有的輸入類型一起使用的屬性。這些允許您提供佔(zhàn)位符文本，將字段標(biāo)記為必需，並聲明可接受的數(shù)據(jù)類型——所有這些都不需要JavaScript。

我們將在本章後面介紹所有新添加的輸入類型。在此之前，讓我們看看HTML5提供的新的表單屬性。

關(guān)於HTML5表單和可靠工具的常見(jiàn)問(wèn)題解答 (FAQ)

什麼是HTML5表單，為什麼它們很重要？

HTML5表單是Web開(kāi)發(fā)中不可或缺的一部分，允許用戶與網(wǎng)站交互。它們用於收集用戶輸入，例如聯(lián)繫方式、反饋或付款信息。 HTML5表單的重要性在於它們能夠增強(qiáng)用戶體驗(yàn)、改進(jìn)數(shù)據(jù)收集以及促進(jìn)用戶與網(wǎng)站之間無(wú)縫通信的能力。

HTML5表單與傳統(tǒng)HTML表單有何不同？

HTML5表單比傳統(tǒng)HTML表單有幾項(xiàng)改進(jìn)。它們提供了新的輸入類型、屬性和元素，從而提供更好的用戶體驗(yàn)和數(shù)據(jù)驗(yàn)證。例如，HTML5表單支持電子郵件、日期和數(shù)字輸入類型，而這些類型在傳統(tǒng)的HTML表單中是不可用的。

用於處理HTML5表單的一些可靠工具是什麼？

有幾個(gè)可靠的工具可以幫助您更有效地使用HTML5表單。這些包括Wufoo和JotForm之類的表單構(gòu)建器，Parsley.js和jQuery Validation之類的驗(yàn)證庫(kù)，以及帶有預(yù)設(shè)計(jì)表單組件的Bootstrap之類的CSS框架。

如何在表單中查找HTML ID或名稱？

要查找表單中的HTML ID或名稱，您可以檢查表單的源代碼。右鍵單擊表單並選擇“檢查”或“檢查元素”。這將打開(kāi)瀏覽器的開(kāi)發(fā)者工具，您可以在其中看到表單的HTML代碼。表單元素的ID或名稱通常在其開(kāi)始標(biāo)籤中指定。

ID屬性在HTML5表單中的作用是什麼？

HTML5表單中的ID屬性用於唯一標(biāo)識(shí)表單元素。它們對(duì)於將標(biāo)籤與其對(duì)應(yīng)的表單字段鏈接、使用JavaScript定位元素以及使用CSS設(shè)置元素樣式至關(guān)重要。

用於處理HTML5表單的一些被低估的工具是什麼？

用於處理HTML5表單的一些被低估的工具包括用於創(chuàng)建靈活表單佈局的CSS Grid，用於從堅(jiān)實(shí)的基礎(chǔ)開(kāi)始的HTML5 Boilerplate，以及用於處理HTML5功能檢測(cè)的Modernizr。

在使用HTML5表單時(shí)如何確保工具安全？

在使用HTML5表單時(shí)確保工具安全包括遵循最佳實(shí)踐，例如驗(yàn)證用戶輸入以防止安全漏洞，在不同的瀏覽器和設(shè)備上測(cè)試您的表單以確保兼容性，以及使您的工具和庫(kù)保持最新。

使用HTML5表單時(shí)遇到的一些常見(jiàn)挑戰(zhàn)是什麼，以及如何克服這些挑戰(zhàn)？

使用HTML5表單時(shí)遇到的一些常見(jiàn)挑戰(zhàn)包括處理瀏覽器不一致性、確保可訪問(wèn)性和驗(yàn)證用戶輸入。這些可以通過(guò)使用可靠的工具和庫(kù)、遵循Web標(biāo)準(zhǔn)以及徹底測(cè)試您的表單來(lái)克服。

如何改進(jìn)HTML5表單的用戶體驗(yàn)？

改進(jìn)HTML5表單的用戶體驗(yàn)可以通過(guò)使用清晰且描述性的標(biāo)籤、提供有用的錯(cuò)誤消息以及使您的表單具有響應(yīng)性來(lái)實(shí)現(xiàn)，以便它們?cè)谒性O(shè)備上都能很好地顯示和工作。

有哪些資源可以學(xué)習(xí)更多關(guān)於HTML5表單的知識(shí)？

一些學(xué)習(xí)更多關(guān)於HTML5表單的資源包括W3C網(wǎng)站上的HTML5規(guī)範(fàn)、SitePoint和GeeksforGeeks等平臺(tái)上的在線教程和課程，以及Stack Overflow和GitHub等Web開(kāi)發(fā)社區(qū)。

以上是HTML5表格：我們工具箱中的可靠工具的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！