HTML <input> 標簽

定義和用法

<input> 標簽定義輸入字段，用戶可以在其中輸入數據。

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

<input> 元素可以以多種方式顯示，具體取決于 type 屬性。

以下是不同的輸入類型：

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">（默認值）
  • <input type="time">
  • <input type="url">
  • <input type="week">

參閱 type 屬性，以查看每種輸入類型的實例！

實例

包含三個輸入字段的 HTML 表單；兩個文本字段和一個提交按鈕：

<form action="/action_page.php">
  <label for="fname">名字：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓氏：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
</form>

親自試一試

提示和注釋

提示：請始終使用 <label> 標簽為以下元素定義標簽：

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

屬性

屬性 值 描述
accept
  • 文件擴展名
  • audio/*
  • video/*
  • image/*
  • 媒體類型

規定通過文件上傳來提交的文件的類型。

規定用戶可以從文件輸入對話框中選擇哪些文件類型的過濾器（僅適用于 type="file"）。
alt 文本 規定圖像的替代文本（僅適用于 type="image"）。
autocomplete
  • on
  • off
 規定 <input> 元素是否應該啟用自動完成。
autofocus autofocus 規定 <input> 元素應在頁面加載時應自動獲得焦點。
checked checked 規定在頁面加載時應預先選中 <input> 元素（適用于 type="checkbox" 或 type="radio"）。
dirname inputname.dir 規定將被提交的文本方向。
disabled disabled 規定應禁用 <input> 元素。
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
  • hide
  • show
  • toggle
 規定當您單擊按鈕時彈出框元素會發生什么（僅適用于 type="button"）。
readonly readonly 規定輸入字段是只讀的。
required required 規定在提交表單之前必須填寫輸入字段。
size 數字 規定 <input> 元素的寬度（以字符數為單位）。
src URL 規定用作提交按鈕的圖像的 URL（僅適用于 type="image"）。
step
  • 數字
  • any
 規定輸入字段中合法數字之間的間隔。
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 規定要顯示的 <input> 元素的類型。
value 文本 規定 <input> 元素的值。
width 像素 規定 <input> 元素的寬度（僅適用于 type="image"）。

全局屬性

<input> 標簽還支持 HTML 中的全局屬性。

事件屬性

<input> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

無。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

相關頁面

HTML 教程：

HTML DOM 參考手冊：