<input type="text">
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
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名 |
autofocus |
自動フォーカスの指定 |
（autofocus） |
値は省略可能、1つの文書に1つだけ指定可能 |
| 任意属性 | |||
size="" |
入力欄の幅 | 数値 | 文字数で指定 |
maxlength="" |
入力できる最大文字数 | 数値 | 文字数で指定 |
minlength="" |
入力できる最小文字数 |
数値 | 文字数で指定 |
autocomplete="" |
オートコンプリート |
on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
list="" |
入力候補のリスト |
ID名 | 関連付けるdatalist要素に指定したID名 |
pattern="" |
入力可能なパターン |
正規表現 | JavaScriptの正規表現を使用 |
placeholder="" |
入力のヒント |
文字列 | 記入例、フォーマットの例 |
dirname="" |
書字方向の送信に使う名前 |
文字列 | 識別するための名前 |
inputmode="" |
 入力モード |
キーワード | 本文参照 |
readonly |
読み取り専用 | （readonly） |
値は省略可能 |
required |
入力必須 |
（required） |
値は省略可能 |
type属性、name属性、value属性、disabled属性、form属性、autofocus属性の詳細については、input要素のページを参考にしてください。
このタイプの特徴
テキストを入力するための入力欄です。
（実際の表示例）
input要素では、このタイプの入力欄がデフォルトになります。
size属性について
size属性は、入力欄の幅を文字数で指定します。
次の例では、30文字分の幅を指定しています。
<input type="text" name="example" size="30">
maxlength属性について
maxlength属性は、入力できる最大文字数を指定します。
次の例では、最大文字数を30文字に指定しています。
<input type="text" name="example" maxlength="30">
minlength属性について
minlength属性は、入力できる最小文字数を指定します。
次の例では、最小文字数を5文字に指定しています。
<input type="text" name="example" minlength="5">
autocomplete属性について
autocomplete属性は、オートコンプリート機能（入力内容の自動補完）を使うかどうかを指定します。
値には on（使う）または off（使わない）を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。（form要素にも指定されていない場合は on の状態がデフォルトとなります）
<input type="text" name="example" autocomplete="off">
- HTML 5.1では、input要素のautocomplete属性に
on/off以外の値も指定できるようになりました（詳しくは仕様書をご覧ください）。これにより、きめ細やかな設定が行えるようになります。
list属性について
list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。
値には、datalist要素に指定したID名を記述します。（datalist要素は、form要素の外に配置することも可能です）
<input type="text" name="example" list="data1">
<datalist id="data1">
<option value="サンプル1"></option>
<option value="サンプル2"></option>
<option value="サンプル3"></option>
</datalist>
pattern属性について
pattern属性は、入力可能な値のパターンを、JavaScriptの正規表現を使って指定します。
- ただし、この属性で指定する正規表現は、部分一致ではなく全体一致でチェックするものとなります。（パターンの前後に
^(?:と)$が指定されているとみなされます）
郵便番号：<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桁の数字の順で記入してください。">
placeholder属性について
placeholder属性は、入力の助けとなるような短いヒント（記入例やフォーマットの例など）を指定します。
対応しているブラウザでは、この値が入力欄に表示されます。（入力を開始すると消えます）
郵便番号：<input type="text" name="post" placeholder="000-0000">
dirname属性について
dirname属性は、書字方向の送信に使う名前を指定します。
この値（名前）は、入力内容の書字方向（ltr または rtl）とセットで送信されることになります。（書字方向は自動的に判別されるようです）
<input type="text" name="name" dirname="nameDir" value="Taro">
例えば、上記の内容を送信した場合、対応しているブラウザでは次のような形式で送られることになります。（ltr は自動的に付けられます）
name=Taro&nameDir=ltr
- Chrome（17）で確認しました。
inputmode属性について
inputmode属性は、その入力欄の入力モードを指定します。
<input type="text" name="user" inputmode="verbatim">
この属性の値には、以下のキーワードを指定することができます。
| キーワード | 説明 |
|---|---|
verbatim |
文章ではない英数字による文字列の入力（ユーザー名、パスワード、製品コード 等、対コンピューター向け） |
latin |
ラテン文字による自由形式なテキストの入力（入力予測等の入力支援が期待される） |
latin-name |
ラテン文字によるユーザー名の入力（人名の入力に適した入力支援が期待される） |
latin-prose |
ラテン文字によるメッセージの入力（対人コミュニケーションに適した入力支援が期待される） |
full-width-latin |
全角英数字モード（？） |
kana |
全角かな入力モード |
kana-name |
全角かな入力モード（人名の入力に適した入力支援が期待される） |
katakana |
全角カタカナ入力モード |
numeric |
, や - を含む半角数字の入力（クレジットカード番号 等）、数値の場合は type="number" が適切 |
tel |
* や # を含む半角数字の入力（電話番号）、通常は type="tel" を使用 |
email |
@ や . を含む半角英数字の入力（メールアドレス）、通常は type="email" を使用 |
url |
/ や . を含む半角英数字の入力（URL）、通常は type="url" を使用 |
readonly属性について
readonly属性は、そのフォーム部品が読み取り専用であることを指定します。
この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。
<input type="text" name="example" readonly>
- この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。
required属性について
required属性は、そのフォーム部品が入力必須であることを指定します。
<input type="text" name="example" required>
使用例
<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>
- 表示例
-
- デフォルト
- 幅を指定
- 最大文字数を指定
- 初期値を指定
- 無効化を指定
- 読み取り専用を指定
- 本題とは関係ありませんが、dt要素とdd要素にはスタイルが指定されています。
<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>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。
- 対応しているブラウザでは、入力欄を選択した際に入力モードが自動的に切り替わることが期待されます。
<dl>
<dt>デフォルト</dt>
<dd><input type="text" name="example7"></dd>
<dt>文章ではない英数字の文字列</dt>
<dd><input type="text" name="example8" inputmode="verbatim"></dd>
<dt>全角かな入力モード</dt>
<dd><input type="text" name="example9" inputmode="kana"></dd>
<dt>全角カタカナ入力モード</dt>
<dd><input type="text" name="example10" inputmode="katakana"></dd>
</dl>
- 表示例
-
- デフォルト
- 文章ではない英数字の文字列
- 全角かな入力モード
- 全角カタカナ入力モード
- 2016年12月現在、対応しているブラウザはまだないようです。