本章描述所有 html 表單元素。

<input> 元素

最重要的表單元素是 <input> 元素。

<input> 元素根據不同的 type 屬性，可以變化為多種形態。

注釋：下一章講解所有 HTML 輸入類型。

<select> 元素（下拉列表）

<select> 元素定義下拉列表：

實例

<select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>

<option> 元素定義待選擇的選項。

列表通常會把首個選項顯示為被選選項。

您能夠通過添加 selected 屬性來定義預定義選項。

實例

<option value="fiat" selected>Fiat</option>

<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）：

實例

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

親自試一試

以上 HTML 代碼在瀏覽器中顯示為：

The cat was playing in the garden.

<button> 元素

<button> 元素定義可點擊的按鈕：

實例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

親自試一試

以上 HTML 代碼在瀏覽器中顯示為：

Click Me!

HTML5 表單元素

HTML5 增加了如下表單元素：

• <datalist>

• <keygen>

• <output>

注釋：默認地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。

HTML5 <datalist> 元素

<datalist> 元素為 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

實例

通過 <datalist> 設置預定義值的 <input> 元素：

<form action="action_page.php"><input list="browsers"><datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"></datalist> </form>