HTML - <input> 標籤

HTML <input> 標籤用於指定輸入欄位。輸入元素是 Web 開發的重要組成部分，因為當包含在 <form> 元素中時，它們有助於收集和提交使用者資料。

語法

<input type = ".."/>

屬性

HTML input 標籤支援 HTML 的全域性和事件屬性。同時也接受一些特定的屬性，如下所示。

屬性	值	描述
accept	副檔名 audio/* video/* image/* 媒體型別	定義使用者可以在檔案輸入對話方塊中選擇的的檔案型別的篩選器（僅適用於 type="file"）。
alt	文字	為影像定義備用文字（僅適用於 type="image"）。
autocomplete	開啟關閉	定義 <input> 元素是否應啟用自動完成功能。
autofocus	autofocus	定義 <input> 元素在頁面載入時是否應自動獲得焦點。
checked	checked	定義 <input> 元素在頁面載入時是否應預先選中（適用於 type="checkbox" 或 type="radio"）。
dirname	inputname.dir	定義將提交文字方向。
disabled	disabled	定義 <input> 元素是否應被停用。
form	form_id	定義 <input> 元素所屬的表單。
formaction	URL	定義提交表單時將處理輸入控制元件的檔案的 URL（適用於 type="submit" 和 type="image"）。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	定義提交表單資料到伺服器時應如何編碼（適用於 type="submit" 和 type="image"）。
formmethod	get post	定義將資料傳送到 action URL 的 HTTP 方法（適用於 type="submit" 和 type="image"）。
formnovalidate	formnovalidate	定義提交表單時不應驗證表單元素。
formtarget	_blank _self _parent _top 框架名稱	定義在何處顯示提交表單後收到的響應（適用於 type="submit" 和 type="image"）。
height	畫素	定義 <input> 元素的高度（僅適用於 type="image"）。
list	datalist_id	引用包含 <input> 元素預定義選項的 <datalist> 元素。
max	數字日期	定義 <input> 元素的最大值。
maxlength	數字	定義 <input> 元素允許的最大字元數。
min	數字日期	定義 <input> 元素的最小值。
minlength	數字	定義 <input> 元素所需的最小字元數。
multiple	multiple	定義使用者是否可以在 <input> 元素中輸入多個值。
name	文字	定義 <input> 元素的名稱。
pattern	正則表示式	定義 <input> 元素的值將與其進行檢查的正則表示式。
placeholder	文字	定義簡短提示，描述 <input> 元素的預期值。
popovertarget	元素ID	定義要呼叫的彈出視窗元素（僅適用於 type="button"）。
popovertargetaction	隱藏顯示切換	定義單擊按鈕時彈出視窗元素會發生什麼（僅適用於 type="button"）。
readonly	readonly	定義輸入欄位是否為只讀。
required	required	定義在提交表單之前必須填寫輸入欄位。
size	數字	定義 <input> 元素的寬度（以字元為單位）。
src	URL	定義用作提交按鈕的影像的 URL（僅適用於 type="image"）。
step	數字任意	定義輸入欄位中合法數字之間的間隔。
type	按鈕複選框顏色日期本地日期時間電子郵件檔案隱藏圖片月份數字密碼單選按鈕範圍重置搜尋提交電話文字時間網址星期	定義要顯示的 <input> 元素的型別。
value	文字	定義 <input> 元素的值。
width	畫素	定義 <input> 元素的寬度（僅適用於 type="image"）。

HTML input 標籤示例

以下示例將說明 input 標籤的使用，以及在何處、何時以及如何在表單中使用它。HTML <input> 標籤建立輸入欄位，但 type 屬性在輸入欄位中起主要作用。

建立輸入欄位

在以下程式中，我們使用 HTML <input> 標籤來建立一個輸入欄位，以便從使用者那裡獲取輸入。我們使用 type="text" 屬性來接受輸入。以下程式碼將生成一個包含輸入欄位的輸出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!--create input tag-->
   <form> Enter name: <input type="text" placeholder="Name">
   </form>
</body>
</html>

輸入欄位上的值範圍

考慮另一種情況，我們將使用 min 和 max 屬性。如果手動輸入值，則定義的範圍將不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!-- Numeric input field with min and max value-->
   <form> 
   <label>Enter number:</label>
   <input type="number" min="1" max="50" 
          placeholder="Number between 1 to 50">
   </form>
</body>
</html>

使用 input 標籤建立單選按鈕和複選框

在此程式中，我們使用表單內的 <input> 標籤建立 type="checkbox" 和 "radio" 型別的輸入欄位，以允許使用者透過選中欄位來選擇值。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML input tag</title>
</head>

<body>
    <!-- Input type Checkbox and Radio Button -->
    <form>
        <label>Language:</label>
        <br> 
        HTML <input type="checkbox"> 
        CSS <input type="checkbox"> 
        JavaScript <input type="checkbox"> 
        ReactJS <input type="checkbox">
        <br> 
        <label>Rating:</label>
        <br> 
        Expert <input type="radio" name='rating' value='exoert'> 
        Intermediate <input type="radio" name='rating' value='intermediate'>
        Beginner <input type="radio" name='rating' value='beginner'>
   </form>
</body>
</html>

停用輸入欄位

讓我們看看以下示例，我們將使用帶有 disabled 屬性的 input 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form> 
        Disabled field: <input type="text" value="Enter Your Name" disabled>
   </form>
</body>
</html>

日期輸入欄位

以下是一個示例，我們將使用 input type="date" 以及 required 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form>
      <label>Select date:</label>
      <input type="date" value="Disabled" required>
      <button>Submit</button>
   </form>
</body>
</html>

支援的瀏覽器

標籤
input	是	是	是	是	是

html_tags_reference.htm

列印頁面