HTML表單元素

HTML表單元素

網頁上的HTML表單允許用戶輸入發送到處理服務器數據。 表格可以像紙或數據庫的形式，因為網絡用戶填寫使用複選框，單選按鈕或文本字段的形式。

例如，形式可以用於進入運輸或信用卡數據訂購產品，或可用於檢索的搜索引擎的搜索結果。

本章將介紹HTML表單元素。

所述<input>元

最重要的形式的元素是<input>元素。

所述<input>元件可以以多種方式變化，這取決於該type屬性。

所述<select>元素(Drop-Down List)

所述<select>元素定義了一個下拉列表：

所述<option>元素定義來選擇的選項。

作為選擇的列表將正常顯示的第一個項目。

您可以添加一個選擇屬性來定義一個預定義的選項。

所述<textarea>元素

所述<textarea>元素定義了多行輸入字段( a text area ) ：

這是怎樣的HTML代碼中會在瀏覽器中顯示：

貓在花園裡玩。

所述<button>元

所述<button>元素定義一個可點擊的按鈕 ：

這是怎樣的HTML代碼中會在瀏覽器中顯示：

點擊查看！

HTML5表單元素

HTML5加入下列形式元素：

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

HTML5 <datalist>元

所述<datalist>元素指定的預定義的選項的列表<input>元素。

用戶將看到預先定義的選項，因為他們輸入數據的下拉列表。

的list的屬性<input>元素，必須參照id的屬性<datalist>元素。

例

一個<input>在一個元件與預定義值<datalist> ：

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

試一試»

HTML5 <keygen>元

所述的目的<keygen>元件是提供來驗證用戶的安全方式。

所述<keygen>元素指定的形式的密鑰對發生器字段。

當提交表單時，會生成兩個密鑰，一個私鑰，一個公鑰。

私鑰存儲在本地，而公鑰發送給服務器。

公鑰可以用來生成客戶端證書，在未來用戶進行身份驗證。

例

甲形式與密鑰生成字段：

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

試一試»

HTML5 <output>元

所述<output>元素表示一個計算的結果（如一個由腳本執行）。

例

執行計算並顯示結果在<output>元素：

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

試一試»

測試自己與練習！

練習1» 練習2» 練習3»

HTML表單元素

=新的HTML5。