<input type="text">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、自動大文字化と自動修正継承、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
input要素に type="text" を指定すると、1行のテキスト入力欄を作成できます。
<input type="text" name="example1">
<input type="text" name="example2" size="30" maxlength="30" value="サンプル">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性（共通） | |||
type="" |
部品のタイプ | text |
1行のテキスト入力欄（既定値） |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 文字列 | 入力欄の初期値 |
disabled |
部品の無効化 | （disabled） |
値は省略可能 |
form="" |
フォームとの関連付け | ID名 | 関連付けるform要素に指定したID名 |
| 任意属性（部品タイプに依存） | |||
size="" |
入力欄の幅 | 数値 | 文字数で指定 |
minlength="" |
入力できる最小文字数 | 数値 | 文字数で指定 |
maxlength="" |
入力できる最大文字数 | 数値 | 文字数で指定 |
autocomplete="" |
オートコンプリート | on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
| 詳細トークン | （詳しくは仕様書をご覧ください） | ||
list="" |
入力候補のリスト | ID名 | 関連付けるdatalist要素に指定したID名 |
pattern="" |
入力可能なパターン | 正規表現 | JavaScriptの正規表現を使用 |
placeholder="" |
入力のヒント | 文字列 | 記入例、フォーマットの例 |
dirname="" |
書字方向の送信に使う名前 | 文字列 | 識別するための名前 |
readonly |
読み取り専用 | （readonly） |
値は省略可能 |
required |
入力必須 | （required） |
値は省略可能 |
- 各属性の概要は、上記表のリンク先をご覧ください。（input要素のページにリンクしています）
どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。
この部品タイプの特徴
テキストを入力するための入力欄です。
（実際の表示例）
- input要素では、この部品タイプがデフォルトになります。
入力内容が電話番号、URL、メールアドレスなどの場合は、それぞれ専用の部品タイプが用意されているのでそちらを使用することをおすすめします。
pattern属性の指定例
この部品タイプにおけるpattern属性の指定例です。
次の例では、郵便番号の入力パターンを指定しています。
郵便番号：<input type="text" name="post" pattern="\d{3}-\d{4}">
pattern属性を使用する場合は、title属性で入力パターンの説明を入れておくことが推奨されています。この説明は、エラーメッセージやツールチップなどで表示される場合があります。
郵便番号：<input type="text" name="post" pattern="\d{3}-\d{4}" title="郵便番号は、3桁の数字、ハイフン（-）、4桁の数字の順で記入してください。">
使用例
<dl>
<dt>デフォルト</dt>
<dd><input type="text" name="example1"></dd>
<dt>幅を指定</dt>
<dd><input type="text" name="example2" size="30"></dd>
<dt>最大文字数を指定</dt>
<dd><input type="text" name="example3" size="30" maxlength="30"></dd>
<dt>初期値を指定</dt>
<dd><input type="text" name="example4" size="30" value="テキスト"></dd>
<dt>無効化を指定</dt>
<dd><input type="text" name="example5" size="30" value="テキスト" disabled></dd>
<dt>読み取り専用を指定</dt>
<dd><input type="text" name="example6" size="30" value="テキスト" readonly></dd>
</dl>
- 表示例
-
- デフォルト
- 幅を指定
- 最大文字数を指定
- 初期値を指定
- 無効化を指定
- 読み取り専用を指定
<p>入力候補のリスト：<input type="text" name="example" list="dataList"></p>
<datalist id="dataList">
<option value="サンプル1"></option>
<option value="サンプル2"></option>
<option value="サンプル3"></option>
</datalist>
- 表示例
-
入力候補のリスト：
- 入力候補に対応しているブラウザでは、入力欄をクリック（またはダブルクリック）することでリストを表示することができます。
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。
<form method="get" action="input_text.html">
<p>郵便番号：<input type="text" name="post" size="10" pattern="\d{3}-\d{4}" placeholder="000-0000" title="郵便番号は、3桁の数字、ハイフン（-）、4桁の数字の順で記入してください。"></p>
<p>住所：<input type="text" name="address" size="30" required> <strong>必須</strong></p>
<p>ひと言：<input type="text" name="comment" size="30" minlength="5"> <strong>5文字以上</strong></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。