“input”要素~“placeholder”属性

“placeholder”属性について

“placeholder”属性は“input”要素で表される入力欄のプレースホルダーを指定します。

プレースホルダーは入力欄に表示される入力するべき情報の短い説明や例などの短いヒントです。一般的なブラウザではプレースホルダーは入力欄の中に薄い色で表示されます。

“placeholder”属性は“type”属性に以下の値が指定されている場合に使用できます。

• “text”
• “search”
• “url”
• “tel”
• “email”
• “password”
• “number”

ブラウザは入力欄がフォーカスされていない時に“placeholder”属性の値を入力欄の中に表示します。ただし、“autofocus”属性が指定されている場合はフォーカスされる前にユーザーがプレースホルダーを見ることができないのでフォーカスされていてもプレースホルダーを表示します。なお、ブラウザによっては入力欄がフォーカスされても入力を始めるまでプレースホルダーを表示する場合があります。

ブラウザがプレースホルダーの表示に対応していない場合に何のための入力欄なのかわからなくなってしまうため“placeholder”属性は“label”要素の代わりに使用されるべきではありません。また、長い説明を提供する場合は“title”属性の方が適しています。

“placeholder”属性の値はフォームの送信時に入力値として送信されません。入力の既定値を指定する場合は“value”属性を使用します。

指定できる値

サンプルコード

<form method="post" action="sample-inputtag6.php" target="_blank">

<fieldset>

<legend>猫の情報</legend>
<p><label>名前：<input type="text" name="cat-name" placeholder="むぎ"></p>
<p><label>年齢：<input type="number" name="cat-age" placeholder="5"></p>
<p><label>体色：<input type="text" name="cat-color" placeholder="三毛猫"></p>

</fieldset>
<fieldset>

<legend>あなたの情報</legend>
<p><label>名前：<input type="text" name="name" placeholder="甘蕉花子"></p>
<p><label>メールアドレス：<input type="email" name="email" placeholder="bananako@example.com"></p>
<p><label>電話番号：<input type="tel" name="tel" placeholder="0312345678"></p>
<p><label>ウェブサイト：<input type="url" name="website" placeholder="http://www.example.com/bananako"></p>
<p><label>使命：<input type="text" name="mission" placeholder="猫を崇める"></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

猫の情報

名前：

年齢：

体色：

あなたの情報

名前：

メールアドレス：

電話番号：

ウェブサイト：

使命：

送信する