<input type="text">
<input>
要素の text
型は、基本的な単一行のテキスト入力欄を生成します。
試してみましょう
値
value
属性は、テキスト入力欄に入力された現在のテキストの値が入っている文字列です。 JavaScript では HTMLInputElement
の value
プロパティを使ってこれを受け取ることができます。
let theText = myTextInput.value;
入力欄に検証の制約がない場合(詳しくは検証を参照)、値は空文字列 ("") にすることができます。
追加の属性
型に関係なくすべての <input>
要素を操作する属性に加え、 text
型の入力欄は次の属性にも対応しています。
list
list 属性の値は、同じ文書内にある <datalist>
要素の id
です。 <datalist>
は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち type
と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。
maxlength
ユーザーが text
入力欄に入力することができる (UTF-16 コード単位での) 最大文字列長です。 0 以上の整数値である必要があります。 maxlength
が指定されていないか、無効な値が指定されていると、 text
入力欄には最大文字数が設定されません。この値は minlength
の値以上である必要もあります。
フィールドのテキスト値の長さが UTF-16 コード単位で maxlength
の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。
minlength
ユーザーが text
入力欄に入力することができる (UTF-16 コード単位での) 最小文字列長です。これは非負の整数値で、 maxlength
で指定された値以下である必要があります。 minlength
が指定されていないか、無効な値が指定されていると、 text
入力欄には最小文字数が設定されません。
入力欄のテキスト値の長さが UTF-16 コード単位で minlength
の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。
pattern
pattern
属性は、指定する場合は正規表現であり、入力欄の value
が制約検証に合格するためにはこれと一致しなければなりません。これは RegExp
型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u'
フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。
指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。
メモ: title
属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。
詳細や例についてはパターンの指定を参照してください。
placeholder
placeholder
属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。
コントロールの内容がある書字方向 (LTR または RTL) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、双方向テキストでの Unicode コードの使い方(英語)を参照してください。
メモ:
可能であれば placeholder
を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、<input>
のアクセシビリティの考慮を参照してください。
readonly
論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value
は、 JavaScript コードから直接 HTMLInputElement
の value
プロパティを設定することで変更することができます。
メモ:
読み取り専用フィールドは値を持てないため、 required
は readonly
属性も指定されている入力欄には効果がありません。
size
spellcheck
spellcheck
はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは spellcheck
属性の <input>
要素の使用に関して特に考えます。 spellcheck
で利用できる値は次の通りです。
false
-
この要素でスペルチェックを無効にします。
true
-
この要素でスペルチェックを有効にします。
""
(空文字列) または値なし-
スペルチェックについて、要素の既定の動作に従います。これは親の
spellcheck
設定や、その他の要因に基づくことがあります。
入力欄では、 readonly 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。
spellcheck
を読み取ることで返される値は、ユーザーエージェントの設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。
標準外の属性
ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。
autocorrect
mozactionhint
非推奨;
Mozilla 拡張で、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。
非推奨: 代わりに enterkeyhint
を使用してください。
テキスト入力欄の使用
基本的な例
<form>
<div>
<label for="uname">ユーザー名を選んでください: </label>
<input type="text" id="uname" name="name" />
</div>
<div>
<button>送信</button>
</div>
</form>
これは次のように表示されます。
送信されると、サーバーに送信される名前と値の組のデータは name=Chris
になります(送信前に入力値として "Chris" が入力された場合)。 name
属性を <input>
要素に付け忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。
プレイスホルダーの設定
placeholder
属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。
<form>
<div>
<label for="uname">ユーザー名を選んでください: </label>
<input type="text" id="uname" name="name" placeholder="小文字で一語で" />
</div>
<div>
<button>送信</button>
</div>
</form>
プレイスホルダーがどう表示されるかを以下で確認できます。
プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると(または、 value
属性に設定することで、プログラム的に値を設定する場合も)自動的に消滅します。
物理的な入力要素の寸法
入力ボックスの物理的な寸法は、 size
属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。
<form>
<div>
<label for="uname">ユーザー名を選んでください: </label>
<input
type="text"
id="uname"
name="name"
placeholder="小文字で一語で"
size="30" />
</div>
<div>
<button>送信</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">ユーザー名を選んでください: </label>
<input type="text" id="uname" name="name" required />
<span class="validity"></span>
</div>
<div>
<button>送信</button>
</div>
</form>
次のように表示されます。
検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。
入力値の長さ
minlength
属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 maxlength
を使用して入力された値の最大長を文字数で設定します。
以下の例では、入力値が4~8文字の長さであることが求められます。
<form>
<div>
<label for="uname">ユーザー名を選んでください: </label>
<input
type="text"
id="uname"
name="name"
required
size="10"
placeholder="ユーザー名"
minlength="4"
maxlength="8" />
<span class="validity"></span>
</div>
<div>
<button>送信</button>
</div>
</form>
以下のように表示されます。
4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます(ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。
メモ: minlength
を指定して required
を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。
パターンの指定
pattern
属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます(入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください)。
以下の例では、 4~8 文字の値で、英小文字のみが含まれているという要件の制約を与えます。
<form>
<div>
<label for="uname">ユーザー名を選んでください: </label>
<input
type="text"
id="uname"
name="name"
required
size="45"
pattern="[a-z]{4,8}" />
<span class="validity"></span>
<p>ユーザー名は小文字で 4~8 文字でなければなりません。</p>
</div>
<div>
<button>送信</button>
</div>
</form>
次のように表示されます。
例
最初の 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 |
仕様書
Specification |
---|
HTML Standard # text-(type=text)-state-and-search-state-(type=search) |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML フォーム
<input>
およびそれに基づくHTMLInputElement
インターフェイス<input type="search">
<textarea>
: 複数行のテキスト入力欄- CSS プロパティの互換性