HTML <input> placeholder 属性

HTML <input> タグ

定義と使用法

プレースホルダー 属性は短いヒントを定義し、入力フィールドの期待される値（例えば、サンプル値または期待される形式の短い説明）を説明します。

このヒントは入力フィールドが空の時に表示され、フィールドがフォーカスを取得したときに消失します。

注意：プレースホルダー 属性は以下の入力タイプに適用されます：

  • text
  • 検索
  • URL
  • 電話番号
  • メール
  • パスワード

例

占位符テキストを含む電話入力フィールド：

<form action="/action_page.php">
  <label for="phone">電話番号を入力してください：</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="138-8888-8888"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
  <small>フォーマット：138-8888-8888</small><br><br>
  <input type="submit">
</form>

実際に試してみてください

文法

<input placeholder="text">

属性値

値 説明
text 入力フィールドの期待される値の短いヒントを指定します。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
10.0 10.0 4.0 5.0 11.0

注記：プレースホルダー 属性は HTML5 で新しい属性です。

HTML <input> タグ