HTML - 表單控制元件

上一頁
下一頁

用於在瀏覽器中建立使用者互動控制元件的 HTML 表單元素被稱為表單控制元件。

它們使使用者能夠輸入資訊以供伺服器端處理。與伺服器互動的性質可能會因建立表單時使用的控制元件型別而異。例如，單選按鈕通常用於接受性別資訊。我們在之前的討論中使用了幾個常見的表單控制元件，現在我們將深入探討這些元素的更多細節。

我們可以使用多種型別的表單控制元件來使用 HTML 表單收集資料。

輸入型別 描述
<input type = "text"> 文字輸入通常用於接受使用者的字元，例如使用者名稱、密碼、地址。
<input type = "number"> 輸入型別數字用於接受使用者輸入的數字。
<input type = "checkbox"> 複選框輸入顯示為一個方框，可以根據使用者需求選中或取消選中。
<input type = "radio"> 單選按鈕輸入定義一個單選按鈕，用於從多個選項中選擇一個。
<select> Select 標籤用於在表單中建立下拉列表。
<input type = "datetime-local"> 輸入型別 datetime 定義了一個圖形介面來選擇一個月。
<input type = "date"> 輸入型別 date 定義了一個圖形介面來選擇一個日期。
<input type = "month"> 輸入型別 month 定義了一個圖形介面來選擇一個月。
<input type = "week"> 輸入型別 week 定義了一個圖形介面來選擇一週。
<input type = "time"> 輸入型別 time 定義了一個圖形介面來選擇一個時間。
<input type = "range"> 輸入型別 range 用於定義一個滑塊控制元件以輸入數字。
<input type = "email"> 輸入型別 email 用於定義一個接受電子郵件的輸入區域。
<input type = "url"> 輸入型別 url 用於定義一個接受 url 的輸入區域。

HTML 表單控制元件示例

以下是一些說明如何在 HTML 中使用表單控制元件元素的示例。

文字輸入控制元件

文字輸入控制元件進一步分為三大類。

  • 單行文字輸入控制元件
  • 密碼輸入控制元件
  • 多行文字輸入控制元件

單行文字輸入控制元件

單行文字輸入控制元件用於只需要一行使用者輸入的專案，例如搜尋框或姓名。它們是使用 HTML <input> 標籤建立的。

以下示例說明如何獲取單行文字輸入。

<!DOCTYPE html>
<html>

<head>
   <title>Text Input Control</title>
</head>

<body>
   <form >
      First name: 
      <input type = "text" name = "first_name" />
      <br><br>
      Last name: 
      <input type = "text" name = "last_name" />
   </form>
</body>

</html>

密碼輸入控制元件

密碼輸入控制元件也是單行文字輸入，但它會在使用者輸入後立即將字元遮蔽。它們也使用 HTML <input> 標籤建立，但 type 屬性設定為password。

在以下示例中，我們將演示如何從使用者那裡獲取密碼輸入。

<!DOCTYPE html>
<html>

<head>
   <title>Password Input Control</title>
</head>

<body>
   <form >
      User ID : 
      <input type = "text" name = "user_id" />
      <br><br>
      Password: 
      <input type = "password" name = "password" />
   </form>
</body>

</html>

多行文字輸入控制元件

當用戶需要提供超過一個句子的詳細資訊時，使用多行文字輸入控制元件。多行輸入控制元件是使用 HTML <textarea> 標籤建立的。

以下示例演示如何使用多行文字輸入來獲取專案描述。

<!DOCTYPE html>
<html>

<head>
   <title>Multiple-Line Input Control</title>
</head>

<body>
   <form>
      Description : <br />
      <textarea rows = "5" 
                cols = "50" 
                name = "description">
         Enter description here...
      </textarea>
   </form>
</body>

</html>

複選框輸入控制元件

複選框用於需要選擇多個選項時。它們也使用 HTML <input> 標籤建立，但 type 屬性設定為checkbox。

在此 HTML 程式碼中，我們正在建立一個包含兩個複選框的表單。

<!DOCTYPE html>
<html>

<head>
   <title>Checkbox Control</title>
</head>

<body>
   <form>
      <input type = "checkbox" 
             name = "maths" 
             value = "on"> 
      Maths
      <input type = "checkbox" 
             name = "physics" 
             value = "on"> 
      Physics
   </form>
</body>

</html>

單選按鈕控制元件

單選按鈕用於在多個選項中，只需要選擇一個選項時。它們也使用 HTML <input> 標籤建立，但 type 屬性設定為radio。

在此示例程式碼中，我們正在建立一個包含兩個單選按鈕的表單。

<!DOCTYPE html>
<html>

<head>
   <title>Radio Box Control</title>
</head>

<body>
   <form>
      <input type = "radio" 
             name = "subject" 
             value = "maths"> 
      Maths
      <input type = "radio" 
             name = "subject" 
             value = "physics"> 
      Physics
   </form>
</body>

</html>

選擇框控制元件

選擇框 提供了以下拉列表的形式列出各種選項的功能，使用者可以從中選擇一個或多個選項。

以下 HTML 程式碼說明如何建立一個帶有下拉框的表單。

<!DOCTYPE html>
<html>

<head>
   <title>Select Box Control</title>
</head>

<body>
   <form>
      <select name = "dropdown">
         <option value = "Maths" selected>
            Maths
         </option>
         <option value = "Physics">
            Physics
         </option>
         <option value = "Chemistry">
            Chemistry
         </option>
      </select>
   </form>
</body>

</html>

檔案上傳框

如果我們希望允許使用者將檔案上傳到我們的網站，則需要使用檔案上傳框，也稱為檔案選擇框。這也是使用<input>元素建立的，但 type 屬性設定為file。

在以下示例中，我們將建立一個包含一個檔案上傳框的表單，該框僅接受影像。

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form>
      <input type = "file" 
             name = "fileupload" 
             accept = "image/*" />
   </form>
</body>

</html>

按鈕控制元件

在 HTML 中有各種方法可以建立可點選按鈕。我們可以透過將 <input> 標籤的 type 屬性設定為button來建立可點選按鈕。

在此 HTML 程式碼中，我們正在建立一個包含三種不同型別按鈕的表單。

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;" >
      <input type = "submit" 
             name = "submit" 
             value = "Submit" />
      <br><br>
      <input type = "reset" 
             name = "reset" 
             value = "Reset" />
      <br><br>
      <input type = "button" 
             name = "ok" 
             value = "OK" />
      <br><br>
      <button>Submit</button>
   </form>
</body>

</html>

隱藏表單控制元件

隱藏表單控制元件用於隱藏頁面內部的資料，這些資料稍後可以推送到伺服器。此控制元件隱藏在程式碼中，不會顯示在實際頁面上。例如，以下隱藏表單用於保留當前頁碼。當用戶點選下一頁時，隱藏控制元件的值將傳送到 Web 伺服器，伺服器將根據傳遞的當前頁碼決定接下來顯示哪個頁面。

以下示例顯示了隱藏控制元件的使用。

<!DOCTYPE html>
<html>

<head>
   <title>File Upload Box</title>
</head>

<body>
   <form onsubmit="return false;">
      <p>This is page 10</p>
      <input type = "hidden" 
             name = "pagename" 
             value = "10" />
      <input type = "submit" 
             name = "submit" 
             value = "Submit" />
      <input type = "reset" 
             name = "reset" 
             value = "Reset" />
   </form>
</body>

</html>

日期和時間選擇器

在 HTML 中，日期時間控制元件表示日期和時間（年、月、日、時、分、秒、秒的小數部分）一起根據 ISO 8601 編碼，並將時區設定為瀏覽器的本地時區。

<!DOCTYPE html>
<html>

<head>
   <title>Date and Time Picker</title>
</head>
;
<body>
   <form onsubmit="return false;">
      Date and Time: 
      <input type="datetime-local" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

日期選擇器

HTML 日期控制元件用於指定根據 ISO 8601 編碼的日期（年、月、日）。

<!DOCTYPE html>
<html>

<head>
   <title>Date Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="date" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

月份選擇器

在 HTML 中，月份控制元件用於顯示僅包含年份和月份的日期，根據 ISO 8601 編碼。

<!DOCTYPE html>
<html>

<head>
   <title>Month Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="month" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

星期選擇器

顧名思義，星期控制元件顯示僅包含年份和星期數的日期，根據 ISO 8601 編碼。

<!DOCTYPE html>
<html>

<head>
   <title>Week Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="week" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

時間選擇器

HTML 時間控制元件指定小時、分鐘、秒和小數秒，根據 ISO 8601 編碼。

<!DOCTYPE html>
<html>

<head>
   <title>Time Picker</title>
</head>

<body>
   <form onsubmit="return false;">
      Date: 
      <input type="time" name="newinput" />
      <input type="submit" value="Submit" />
   </form>
</body>

</html>

數字選擇器

數字控制元件僅接受數值。step 屬性指定精度，其預設值為 1。

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Number: 
      <input type = "number" 
               min = "0" 
               max = "10" 
               step "1"
               value = "5" 
               name = "newinput" />
      <input type = "submit" 
               value = "submit" />
   </form>
</body>

</html>

範圍控制元件

範圍型別用於應該包含一定範圍數字值的輸入欄位。

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Select Range : 
      <input type = "range" 
             min = "0" 
             max = "10" 
             step "1"
             value = "5" 
             name = "newinput" />
      <input type = "submit" 
             value = "submit" />
   </form>
</body>

</html>

電子郵件控制元件

電子郵件控制元件僅接受電子郵件值。此型別用於應該包含電子郵件地址的輸入欄位。如果您嘗試提交純文字，它會強制您以email@example.com格式輸入電子郵件地址。

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter email : 
      <input type = "email" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>

URL控制元件

HTML URL控制元件僅接受URL值。此型別用於應該包含URL地址的輸入欄位。如果您嘗試提交純文字，它會強制您以http://www.example.com格式或http://example.com格式輸入URL地址。

<!DOCTYPE html>
<html>

<body>
   <form onsubmit="return false;">
      Enter URL: 
      <input type = "url" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>

</html>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.