HTML5タグ虎の巻

input type="text"タグ

input(type="text")タグは、テキスト入力欄を作成するタグです。

解説

formタグの子要素として定義します。

form送信時にはパラメータ(name属性値)と、入力されたテキスト(value属性値)がセットになって送信されます。

複数行の入力を受け付けたい場合は、textareaタグを使用してください。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
インタラクティブ・コンテンツ
コンテキスト
(親カテゴリ)
フレージング・コンテンツを許可する場所
コンテンツ・モデル
(子カテゴリ)
なし

属性

input(type="text")タグには以下の属性が指定できます。

【属性】
属性説明
name名前を指定する(submit時にこの名前で送信される)
(例)name="txt01"
value値を指定する
(例)value="hoge"
size入力欄のサイズを文字数で指定する
(例)size="10"
maxlength入力可能最大文字数を指定する
(例)maxlength="10"
 ※全角半角の区別をしない純粋な文字数です。
list入力候補のリストを指定する
placeholderプレースホルダーを指定する
(例)placeholder="10文字以内で入力してください。"
readonly読み取り専用にする
(例)readonly="readonly"
 ※readonlyのみでもOKです。
autocomplete
pattern入力パターンを正規表現で指定する
(例)pattern="^[0-9]+$"
 ※この例だと半角数値のみ入力可になります。
required必須入力であることを指定する
(例)required="required"
 ※requiredのみでもOKです。
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

テキストボックスを作成する

<input type="text" name="txt01" value="hoge">

テキストボックスを作成する(サイズと最大桁数を指定)

<input type="text" name="txt02" value="hoge" size="10" maxlength="10">

読み取り専用のテキストボックスを作成する

<input type="text" name="txt03" value="hoge" readonly>

見た目は変化ありませんが、値の入力は不可です。

半角英数のみ入力可能なテキストボックスを作成する(必須)

<input type="text" name="txt04" pattern="^[0-9a-zA-Z]+$" required>

半角英数字以外の入力だと、送信時にチェックがかかります。

備考

  • 複数行入力を行いたい場合は、textareaタグをご使用ください。

関連項目