lt;form></form>標記新增屬性

required 規定必需在提交之前填寫輸入字段。

<form name="frm">
姓名：<input type="text" name="username" required="required"></br>
<input type="submit" name="submit" value="提交">
</form>

placeholder 默認顯示內容

實例：帶有 placeholder 文本的搜索字段：

<form action="demo_form.asp" method="get">
    <input type="search" name="user_search" placeholder="請輸入默認值" />
    <input type="submit" />
</form>

autocomplete 用來設置input組件是否使用自動完成功能,HTML5新增的屬性值有on(使用)或off(不使用)兩種。

input的屬性autocomplete默認為on,其含義代表是否讓瀏覽器自動記錄之前輸入的值,很多時候，

需要對客戶的資料進行保密,防止瀏覽器軟件或者惡意插件獲取到,可以在input中加入autocomplete="off" 來關閉記錄

系統需要保密的情況下可以使用此參數，該屬性也可作用于表單元素

實例：

<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

novalidate 用來設置是否在發送表單時驗證表單，如需要驗證則填入novalidate即可。

novalidate也是HTML5新增的屬性,IE并不支持novalidate屬性

HTML5新的input類型(目前IE都不支持,Opera和Chrome對新的輸入類型的支持最好,即使不被支持,仍然可以顯示為常規的文本域。)

input類型 - email

email類型用于應該包含 e-mail 地址的輸入域。

在提交表單時，會自動驗證 email 域的值。

E-mail: <input type="email" name="user_email" />

input類型 - url

url類型用于應該包含 URL 地址的輸入域。

在提交表單時，會自動驗證 url 域的值。

Homepage: <input type="url" name="user_url" />

input類型 - number

number類型用于應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定：

max number 規定允許的最大值

min number 規定允許的最小值

step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)

value number 規定默認值

Points: <input type="number" name="points" min="1" max="10" />

input類型 - range

range類型用于應該包含一定范圍內數字值的輸入域。

range類型顯示為滑動條。

您還能夠設定對所接受的數字的限定：

max number 規定允許的最大值

min number 規定允許的最小值

step number 規定合法的數字間隔(如果 step="3"，則合法的數是 -3,0,3,6 等)

value number 規定默認值

<input type="range" name="points" min="1" max="10" />

input類型 - Date Pickers(日期選擇器)

HTML5擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間(小時和分鐘)

datetime - 選取時間、日、月、年(UTC 時間)

datetime-local - 選取時間、日、月、年(本地時間)

Date: <input type="date" name="user_date" />

input類型 - search

search類型用于搜索域，比如站點搜索或 Google 搜索。

search域顯示為常規的文本域。

Search: <input type="search" name="user_color" />

input類型 - color

color輸入類型用于規定顏色。

該輸入類型允許您從拾色器中選取顏色：

Color: <input type="color" name="user_color" />

HTML5的新的表單元素：(目前IE都不支持)

datalist元素

datalist元素規定輸入域的選項列表,功能類似于自造詞列表。

列表是通過datalist內的option元素創建的。

如需把datalist綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

實例1：

<input list="browsers"/>
<datalist id="browsers">
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera"></option>
<option value="Safari"></option>
</datalist>

實例2：

Webpage: <input type="url" list="url_list" name="link" /> <!--對輸入框進行限制-->
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示：option元素永遠都要設置 value 屬性。

keygen元素

keygen元素的作用是提供一種驗證用戶的可靠方法。

keygen元素是密鑰對生成器(key-pair generator)。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰(private key)存儲于客戶端，公鑰(public key)則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)。

目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標準。

實例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output元素

output元素用于不同類型的輸出，比如計算或腳本輸出：

實例

<output id="result" onforminput="resCalc()"></output>

表單元素新增的屬性值

文本框text

autofocus屬性 自動獲得焦點,也就是指加載網頁之后,自動將光標(插入點)移到此文本框內。

多行文本框textarea

warp屬性在HTML5屬性值有：

soft 當在表單中提交時,textarea 中的文本不換行。默認值。

hard 當在表單中提交時,textarea 中的文本換行(包含換行符)。當使用 "hard" 時，必須規定 cols 屬性。

wrap屬性在HTML4屬性值有：

off(也可寫成wrap)：不換行，當輸入的內容超出文本區域右邊界時，文本將向左滾動，并顯示滾動條。

如果希望換行，必須手動輸入回車鍵才能將插入點移到下一行；

virtual：文本能夠自動換行，當數據提交到服務器被處理時，換行符不會隨輸入文本一同提交到服務器；(默認值)

physical：文本能夠自動換行，當數據提交到服務器被處理時，換行符將會隨輸入的文本一同被提交到服務器進行處理；

表單分組fieldset

fieldset元素可將表單內的相關元素分組。

HTML5新增的屬性

disabled disabled 規定應該禁用fieldset。

form form_id 規定fieldset所屬的一個或多個表單。

name value 規定fieldset的名稱。

實例

組合表單中的相關元素：

<form>
<fieldset disabled="disabled" form="formid" name="person">
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

legend元素為fieldset元素定義標題(caption)。

TML5 為前端開發者帶來了許多表單增強功能，這些功能使得創建交互式和用戶友好的表單變得更加容易。在本文中，我們將介紹幾種 HTML5 新增的表單功能，并提供完整的 HTML 示例，以幫助你了解如何在實際項目中應用這些功能。

1. 新的輸入類型

HTML5 引入了一系列新的 input 類型，以支持更多種類的數據輸入，比如電子郵件、日期等。

例子：電子郵件和網址輸入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>電子郵件和網址輸入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 400px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 5px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 輸入框寬度 */
            padding: 8px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">電子郵件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">個人網站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，我們使用了 type="email" 和 type="url" 來要求用戶輸入有效的電子郵件地址和網址。如果用戶輸入的不符合格式，瀏覽器會在提交表單前顯示一個警告。

2. 占位符屬性

placeholder 屬性允許我們在輸入字段中設置一個提示文本，當輸入字段為空時顯示，一旦開始輸入，提示文本就會消失。

例子：帶占位符的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>帶占位符的輸入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體 */
            padding: 20px; /* 頁面內邊距 */
        }

        form {
            max-width: 300px; /* 表單最大寬度 */
            margin: 0 auto; /* 居中顯示 */
            padding: 20px; /* 表單內邊距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 5px; /* 邊框圓角 */
            background-color: #f9f9f9; /* 背景顏色 */
        }

        label {
            display: block; /* 使標簽獨占一行 */
            margin-bottom: 10px; /* 標簽下方間距 */
            font-weight: bold; /* 字體加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 輸入框寬度，減去內邊距和邊框的寬度 */
            padding: 10px; /* 內邊距 */
            margin-bottom: 20px; /* 與下一個元素的間距 */
            border: 1px solid #ccc; /* 邊框樣式 */
            border-radius: 4px; /* 邊框圓角 */
            box-sizing: border-box; /* 盒子模型，使寬度包含邊框和內邊距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景顏色 */
            color: white; /* 字體顏色 */
            padding: 10px 20px; /* 內邊距 */
            border: none; /* 無邊框 */
            border-radius: 4px; /* 邊框圓角 */
            cursor: pointer; /* 鼠標樣式 */
            font-size: 16px; /* 字體大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠標懸停時的背景顏色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="請輸入搜索關鍵字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

這里的 placeholder="請輸入搜索關鍵字" 就是一個占位符，它會在用戶輸入之前顯示在搜索框中。

3. 自動聚焦屬性

autofocus 屬性可以讓頁面加載時自動將焦點放到某個表單元素上。

例子：自動聚焦的輸入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自動聚焦的輸入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，當頁面加載完成后，姓名輸入框將自動獲得焦點。

4. 表單驗證

HTML5 為表單驗證提供了內置支持，通過簡單的屬性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情況下進行基本的驗證。

例子：表單驗證

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表單驗證示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括邊框和內邊距在內的寬度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年齡:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">郵編:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="請輸入5位數字的郵編" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在這個示例中，年齡字段要求用戶輸入一個介于 18 到 99 之間的數字，而郵編字段要求用戶輸入一個符合特定模式（5位數字）的文本。

結語

HTML5 的表單增強功能大大簡化了表單處理和驗證的工作，使得開發更加高效，同時也提高了用戶體驗。通過上述示例，我們可以看到，利用 HTML5 的新特性，可以創建功能強大且易于使用的表單。隨著技術的不斷進步，我們作為開發者應該不斷學習和實踐，以便更好地利用這些新工具來構建更好的網頁。