<input> 要素の text 型は、基本的な単一行のテキスト入力欄を生成します。

テキスト入力欄に含まれる文字列を表す DOMString
イベント change および input
対応している共通属性 autocomplete, list, maxlength, minlength, pattern, placeholder, required, size
IDL 属性 value
メソッド select(), setRangeText(), setSelectionRange()

value 属性は、テキスト入力欄に入力された現在のテキストの値が入っている DOMString です。 JavaScript では HTMLInputElement.value プロパティを使ってこれを受け取ることができます。

let theText = myTextInput.value;

入力欄に検証の制約がない場合 (詳しくは検証を参照)、値は空文字列 ("") になることがあります。

追加の属性

型に依存せずすべての <input> 要素を操作する属性に加え、 text 型の入力欄は次の属性にも対応しています。

属性 説明
maxlength 入力欄が受け付ける最大文字数
minlength 入力欄が取りうる、妥当と判断される最小文字列長
pattern 妥当と判断されるために、入力欄の内容が一致する必要がある正規表現
placeholder 空欄の時に入力欄に表示される入力例の値
readonly 入力欄の内容を読み取り専用にするかどうかを示す論理属性
size 入力欄の長さを何文字分にするかを表す数値
spellcheck 入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する

maxlength

ユーザーがテキストフィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 maxlength が指定されていないか、無効な値が指定されていると、テキスト入力には最大文字数が設定されません。この値は minlength の値以上である必要もあります。

フィールドのテキスト値の長さが UTF-16 コード単位で maxlength の長さを超えていると、その入力欄は制約の検証に失敗します。制約の検証はユーザーが値を変更した場合にのみ適用されます。

minlength

ユーザーがテキストフィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 maxlength で指定された値以下である必要があります。 minlength が指定されていないか、無効な値が指定されていると、テキスト入力には最小文字数が設定されません。

フィールドのテキスト値の長さが UTF-16 コード単位で minlength の長さよりも短いと、その入力欄は制約の検証に失敗します。制約の検証はユーザーが値を変更した場合にのみ適用されます。

pattern

pattern 属性は、指定する場合は正規表現であり、入力欄の value制約の検証に合格するためにはこれと一致しなければなりません。これは RegExp 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u' フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。

Tip: title 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

詳細や例についてはパターンの指定を参照してください。

placeholder

placeholder 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません

コントロールの内容が単一の書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、Unicode 制御文字を使用した書字方向の上書き in [Page not yet written]を参照してください。

メモ: 可能であれば placeholder を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、Labels and placeholders in <input>: 入力欄 (フォーム入力) 要素を参照してください。

readonly

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 HTMLInputElement.value プロパティを設定することで変更することができます。

メモ: 読み取り専用フィールドは値を持てないため、 requiredreadonly 属性も指定されている入力欄には効果がありません。

size

size 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の font 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 maxlength 属性を使用してください。

spellcheck

spellcheck はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは spellcheck 属性の <input> 要素の使用に関して特に考えます。 spellcheck で利用できる値は次の通りです。

false
この要素でスペルチェックを無効にします。
true
この要素でスペルチェックを有効にします。
"" (空文字列) または値なし
スペルチェックについて、要素の既定の動作に従います。これは親の spellcheck 設定や、その他の要因に基づくことがあります。

入力欄では、 readonly 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。

spellcheck を読み取ることで返される値は、ユーザーエージェントの設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。

標準外の属性

上記に挙げた属性に加え、以下の標準外の属性が一部のブラウザーで利用できます。実装していないブラウザーではコードが機能する可能性が制限されるため、できれば使用することを避けてください。

属性 説明
autocorrect この入力欄を編集する際にオートコレクトを許可するかどうかです。 Safari のみ。
mozactionhint 入力欄を編集している間、ユーザーが Enter または Return キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 Android 版 Firefox for のみ。

autocorrect

Safari 拡張である autocorrect 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

on
構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。
off
自動修正やテキストの置き換えを無効にします。

mozactionhint

Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの Enter キーにどのようなラベルを使用するかを決定するために使用されます。

メモ: これはグローバル属性 enterkeyhint として標準化されていますが、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 バグ 1490661 を参照してください。

許可されている値は go, done, next, search, send です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。

テキスト入力欄の使用

text 型の <input> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、日付URLメールアドレス検索語など、もっと良い選択肢が利用できるもの) に使用します。

基本的な例

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

これは次のように表示されます。

送信されると、サーバーに送信される名前と値の組のデータは uname=Chris になります (送信前に入力値として "Chris" が入力された場合)。 <input> 要素に name 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。

プレイスホルダーの設定

placeholder 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。

<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文字の幅です。

<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) マークを表示します。

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 属性を使うことができます。

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

次のように表示されます。

検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。

入力値の長さ

minlength 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 maxlength を使用して入力された値の最大長を文字数で設定します。

以下の例では、入力値が4~8文字の長さであることが求められます。

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

以下のように表示されます。

4文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。8文字を超えて入力しようとしても、ブラウザーが許しません。

Note: minlength を指定して required を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。

パターンの指定

pattern 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください)。

以下の例では、4~8文字の値で、英小文字のみが含まれているという要件の制約を与えます。

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

次のように表示されます。

最初の HTML フォームおよび HTML フォームの構成方法の記事の文脈で、良いテキスト入力欄の例を見ることができます。

仕様書

仕様書 状態 備考
HTML Living Standard
<input type="text"> の定義
現行の標準 初回定義
HTML 5.1
<input type="text"> の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,