<input> 元素

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

<input> 元素根據(jù)不同的 type 屬性，可以變化為多種形態(tài)。

注釋：下一章講解所有 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 代碼在瀏覽器中顯示為：

HTML5 表單元素

HTML5 增加了如下表單元素：

• <datalist>
• <keygen>
• <output>

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

HTML5 <datalist> 元素

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

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

<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>

親自試一試