<input type="text">

型別為text的<input>元素建立基本的單行文字欄位。

試一試

值

value屬性是一個字串，包含輸入到文字欄位中的當前文字值。您可以使用 JavaScript 中的HTMLInputElement value屬性檢索此值。

let theText = myTextInput.value;

如果輸入沒有設定驗證約束（有關詳細資訊，請參閱驗證），則該值可能為空字串（""）。

其他屬性

除了適用於所有<input>元素（無論其型別如何）的屬性之外，文字輸入還支援以下屬性。

`list`

list 屬性的值是位於同一文件中的<datalist>元素的id。該<datalist>提供了一個預定義值列表，以建議使用者為此輸入使用。列表中與type不相容的任何值都不會包含在建議選項中。提供的這些值只是建議，不是強制要求：使用者可以選擇此預定義列表中的值，也可以提供其他值。

`maxlength`

使用者可以在text輸入中輸入的最大字串長度（以 UTF-16 程式碼單元計）。這必須是 0 或更高的整數值。如果未指定maxlength或指定了無效值，則text輸入沒有最大長度。此值還必須大於或等於minlength的值。

如果欄位的文字值的長度大於maxlength UTF-16 程式碼單元，則輸入將無法透過約束驗證。僅當用戶更改值時才會應用約束驗證。

`minlength`

使用者可以在text輸入中輸入的最小字串長度（以 UTF-16 程式碼單元計）。這必須是非負整數值，並且小於或等於maxlength指定的值。如果未指定minlength或指定了無效值，則text輸入沒有最小長度。

如果輸入到欄位中的文字長度少於minlength UTF-16 程式碼單元，則輸入將無法透過約束驗證。僅當用戶更改值時才會應用約束驗證。

`pattern`

如果指定了pattern屬性，則它是一個正則表示式，輸入的value必須匹配該正則表示式才能透過約束驗證。它必須是一個有效的 JavaScript 正則表示式，與RegExp型別使用的正則表示式相同，並在我們的正則表示式指南中進行了介紹；編譯正則表示式時會指定'u'標誌，以便將模式視為 Unicode 程式碼點的序列，而不是ASCII。模式文本週圍不應指定正斜槓。

如果未指定或指定了無效的模式，則不應用任何正則表示式，並且完全忽略此屬性。

注意：使用title屬性來指定大多數瀏覽器將顯示為工具提示的文字，以解釋匹配模式的要求。您還應該在附近包含其他說明性文字。

有關更多詳細資訊和示例，請參閱指定模式。

`placeholder`

placeholder屬性是一個字串，它向用戶提供一個簡短的提示，說明在該欄位中期望哪種資訊。它應該是一個單詞或短語，演示預期的資料型別，而不是說明性訊息。文字不得包含回車符或換行符。

如果控制元件的內容具有一個方向性（LTR或RTL），但需要以相反的方向性顯示佔位符，則可以使用 Unicode 雙向演算法格式化字元來覆蓋佔位符中的方向性；有關更多資訊，請參閱如何使用 Unicode 控制元件進行雙向文字。

注意：如果可以，請避免使用placeholder屬性。它在語義上不如其他解釋表單的方式有用，並且可能導致內容出現意外的技術問題。有關更多資訊，請參閱<input>可訪問性問題。

`readonly`

如果存在，則此布林屬性表示使用者無法編輯此欄位。但是，JavaScript 程式碼可以透過直接設定HTMLInputElement value屬性來更改其value。

注意：由於只讀欄位不能具有值，因此required對也指定了readonly屬性的輸入沒有任何影響。

`size`

size 屬性是一個數值，指示輸入欄位應該有多寬（以字元為單位）。該值必須大於零，預設值為 20。由於字元寬度各不相同，因此這可能不精確，也不應該依賴於此；根據字元和使用的字型（font 設定），生成的輸入可能比指定的字元數窄或寬。

這並**不**設定使用者可以在欄位中輸入的字元數限制。它僅指定大約一次可以檢視多少個字元。要設定輸入資料長度的上限，請使用 maxlength 屬性。

`spellcheck`

spellcheck 全域性屬性用於指示是否為元素啟用拼寫檢查。它可以用於任何可編輯內容，但這裡我們考慮與在 <input> 元素上使用 spellcheck 相關的細節。spellcheck 的允許值為

false: 停用此元素的拼寫檢查。
true: 啟用此元素的拼寫檢查。
""（空字串）或無值: 遵循元素的預設拼寫檢查行為。這可能是基於父級的 spellcheck 設定或其他因素。

如果輸入欄位沒有設定 readonly 屬性且未停用，則可以啟用拼寫檢查。

如果使用者代理的首選項覆蓋了設定，則讀取 spellcheck 返回的值可能無法反映控制元件中拼寫檢查的實際狀態。

非標準屬性

以下非標準屬性在某些瀏覽器上也可用。作為一般規則，除非無法避免，否則應避免使用它們。

`autocorrect`

autocorrect 屬性是 Safari 的擴充套件，是一個字串，指示在使用者編輯此欄位時是否啟用自動更正。允許的值為

on: 啟用錯別字的自動更正，以及如果配置了任何文字替換的處理。
off: 停用自動更正和文字替換。

使用文字輸入

型別為 text 的 <input> 元素建立基本的單行輸入。在您希望使用者輸入單行值且沒有更具體的輸入型別可用於收集該值（例如，如果它是日期、URL、電子郵件或搜尋詞，則有更好的選項可用）的任何地方，都應使用它們。

基本示例

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

呈現效果如下

提交時，傳送到伺服器的資料名稱/值對將為 name=Chris（如果在提交前輸入“Chris”作為輸入值）。您必須記住在 <input> 元素上包含 name 屬性，否則文字欄位的值將不會包含在提交的資料中。

設定佔位符

您可以透過使用 placeholder 屬性在文字輸入中提供一個有用的佔位符，該佔位符可以提供有關輸入內容的提示。請檢視以下示例

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

您可以看到下面是如何渲染佔位符的

佔位符通常以比元素的前景色更淺的顏色呈現，並且當用戶開始在欄位中輸入文字（或每當透過設定其 value 屬性以程式設計方式設定欄位的值時）時，會自動消失。

物理輸入元素大小

可以使用 size 屬性控制輸入框的物理大小。使用它，您可以指定文字輸入一次可以顯示的字元數。這會影響元素的寬度，讓您能夠以字元而不是畫素為單位指定寬度。例如，在此示例中，輸入寬度為 30 個字元

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

驗證

型別為 text 的 <input> 元素沒有應用任何自動驗證（因為基本文字輸入需要能夠接受任何任意字串），但有一些客戶端驗證選項可用，我們將在下面討論。

注意： HTML 表單驗證**不是**確保輸入資料格式正確的伺服器指令碼的替代品。對於某人調整 HTML 以允許他們繞過驗證或完全刪除它來說，這太容易了。某人還可以完全繞過您的 HTML 並直接將資料提交到您的伺服器。如果您的伺服器端程式碼未能驗證它接收到的資料，則當不正確格式的資料（或大小過大、型別錯誤等資料）輸入到您的資料庫時，可能會發生災難。

關於樣式的說明

有一些有用的偽類可用於為表單元素設定樣式，以幫助使用者檢視其值何時有效或無效。它們是 :valid 和 :invalid。在本節中，我們將使用以下 CSS，它將在包含有效值的輸入旁邊放置一個複選標記（勾號），並在包含無效值的輸入旁邊放置一個叉號（X）。

css

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

此技術還需要在表單元素之後放置一個 <span> 元素，該元素充當圖示的容器。這是必要的，因為某些瀏覽器上的一些輸入型別不能很好地顯示直接放置在其後面的圖示。

使輸入成為必填項

您可以使用 required 屬性作為一種簡單的方法，在允許提交表單之前，使輸入值成為必填項

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name" required />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈現效果如下

如果您嘗試在未輸入任何搜尋詞的情況下提交表單，瀏覽器將顯示一條錯誤訊息。

輸入值長度

您可以使用 minlength 屬性指定輸入值的最小長度（以字元為單位）；類似地，使用 maxlength 設定輸入值的最大長度（以字元為單位）。

以下示例要求輸入的值長度為 4-8 個字元。

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity"></span>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈現效果如下

如果您嘗試提交少於 4 個字元的表單，將收到相應的錯誤訊息（瀏覽器之間有所不同）。如果您嘗試輸入超過 8 個字元，瀏覽器將不允許您這樣做。

注意：如果您指定了 minlength 但未指定 required，則輸入被視為有效，因為使用者不需要指定值。

指定模式

您可以使用 pattern 屬性指定輸入值必須匹配的正則表示式，才能被視為有效（請參閱根據正則表示式驗證，瞭解有關使用正則表示式驗證輸入的簡單速成課程）。

以下示例將值限制為 4-8 個字元，並要求它僅包含小寫字母。

html

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

呈現效果如下

示例

您可以在我們的第一個 HTML 表單和如何構建 HTML 表單文章中看到文字輸入在上下文中使用的良好示例。

技術摘要

值	表示文字欄位中包含的文字的字串。
事件	`change` 和 `input`
支援的常用屬性	`autocomplete`、`list`、`maxlength`、`minlength`、`pattern`、`placeholder`、`readonly`、`required` 和 `size`
IDL 屬性	`list`、`value`
DOM 介面	`HTMLInputElement`
方法	`select()`、`setRangeText()` 和 `setSelectionRange()`。
隱式 ARIA 角色	無 `list` 屬性：`textbox`	有 `list` 屬性：`combobox`

規範

規範
HTML 標準 # text-(type=text)-state-and-search-state-(type=search)

瀏覽器相容性

BCD 表格僅在瀏覽器中載入