<input placeholder>初期表示する内容

<input>タグにplaceholder属性を指定すると、テキストフィールドにプレースホルダーを設定することができます。 プレースホルダーとはpowerpointなどで、予め「クリックしてタイトルを入力」などと書かれているものの事で、入力のヒントとなるような文字列を指定することができます。

例えばテキストフィールドに初めから「キーワードを入力」など、入力のヒントとなるような文字列を表示することができ、ユーザー操作を補助する事が可能です。 ちなみにこれまではJavascriptなどを使用する事で、テキストフィールドに文字を予め表示させる事ができましたが、HTML5ではそれらを使うことなくHTMLのみでプレースホルダーを実現することが可能です。

なおvalue属性の値が指定されている場合は、value属性が優先されます。

書式

  • <input placeholder="値" 属性="値"> ……… テキストフィールドに初期表示する内容

属性

placeholder="" テキストフィールドに予め表示させる文字列(プレースホルダー)を指定

使用した時の例

<form action="sample.php" method="post">
  <p>メールアドレス:<input type="mail" placeholder="メールアドレス"></p>
</form>

ブラウザ上の表示例

メールアドレス:

対応ブラウザなどのデータ

形式 <input type=""> カテゴリ フローコンテンツ, フレージングコンテンツ,フォーム関連要素(リスト化・ラベル付け・送信・リセット可能) / type属性値がhiddenでない場合はインタラクティブコンテンツ, パルパブル・コンテンツ
親要素 フレージングコンテンツが期待できる場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Google Chrome14~ , Firefox7~ , Opera11.5~