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

<input type="text">

A DOMString representing the text contained in the text field.
イベント change および input
対応する共通属性 autocomplete, list, maxlength, minlength, pattern, placeholder, required, size
IDL 属性 value
メソッド select(), setRangeText(), and setSelectionRange().

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

let theText = myTextInput.value;

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

テキスト入力欄の使用

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文字を超えて入力しようとしても、ブラウザーが許しません。

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"> の定義
勧告 初回定義

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 1.0 (有) 1.0 (1.7 or earlier) (有) (有) 1.0
機能 Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
基本対応 (有) (有) (有) 4.0 (4.0) (有) (有) (有)

関連情報

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

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