Web 表單 2.0 就是 HTML4 表單特性的一個(gè)擴(kuò)展。HTML5 中的表單元素和屬性相比 HTML4 提供了更大程度的語(yǔ)義標(biāo)記，移除了大量 HTML4 中需要的繁瑣腳本和樣式。

HTML4 中的 <input> 元素

HTML4 輸入框元素使用 type 屬性指定數(shù)據(jù)類型。HTML4 提供了下列類型：

下面是一個(gè)使用標(biāo)注標(biāo)簽，單選按鈕以及提交按鈕的簡(jiǎn)單示例：

...
<form action="http://example.com/cgiscript.pl" method="post">
    <p>
    <label for="firstname">first name: </label>
              <input type="text" id="firstname"><br />
    <label for="lastname">last name: </label>
              <input type="text" id="lastname"><br />
    <label for="email">email: </label>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="male"> Male<br>
    <input type="radio" name="sex" value="female"> Female<br>
    <input type="submit" value="send"> <input type="reset">
    </p>
 </form>
 ...

HTML5 中的 <input> 元素

除了上面提到的屬性，HTML5 給輸入框元素的 type 屬性引入了幾個(gè)新值。如下表所列。

注意： 請(qǐng)使用最新版的 Opera 瀏覽器運(yùn)行下面所有例子。

<output> 元素

HTML5 還引入了一個(gè)新元素 <output>，用來(lái)表示不同類型的輸出結(jié)果，比如輸出由腳本所寫。

還可以用 for 屬性指定輸出元素和文檔中影響計(jì)算的其他元素之間的關(guān)系（比如，作為輸入源或者參數(shù)）。for 屬性的值是一個(gè)由空格分隔的其他元素的 IDs 列表。

便于學(xué)習(xí)這一概念 - 請(qǐng)進(jìn)行在線練習(xí)。

placeholder 屬性

HTML5 引入了一個(gè)叫做 palceholder 的新屬性。這個(gè)屬性在 <input> 和 <textarea> 元素上為用戶提供了在這個(gè)字段可以輸入什么的提示。占位符字符不能包含回車符或者換行符。

下面是 placeholder 屬性的簡(jiǎn)單語(yǔ)法：

<input type="text" name="search" placeholder="search the web"/>

這個(gè)屬性只有最新版的 Mozilla，Safari 以及 Chrome 瀏覽器支持。

便于學(xué)習(xí)這一概念 - 請(qǐng)進(jìn)行在線練習(xí)。

required 屬性

現(xiàn)在，我們不需要使用 JavaScript 處理諸如空文本框永遠(yuǎn)不能被提交的這類客戶端驗(yàn)證了，因?yàn)?HTML5 引入了一個(gè)叫做 required 的新屬性，可以按照如下方式使用，它會(huì)保證輸入框有值：

<input type="text" name="search" required/>

這個(gè)屬性只有最新版的 Mozilla，Safari 以及 Chrome 瀏覽器支持。

便于學(xué)習(xí)這一概念 - 請(qǐng)進(jìn)行在線練習(xí)。