メールフォームの入力欄にプレースホルダ【html】

HTML5からメールフォームの入力欄にあらかじめヒント的な文字を表示しておく「プレースホルダ」がとっても楽に実装出来るようになりました。
以前からjQueryプラグイン等では公開されていましたが、HTML5ではタグをちょっと追加するだけなんです。

プレースホルダって何？って方のために少し説明しますと
フォームの入力欄やブラウザの検索欄などに、入力する前からあらかじめ薄い灰色のテキストが表示されているものを見かけますよね。
文字を入力し始めると自動的に消える・・・
あれです。




サンプルはこちら

実装は「placeholder属性」を使います。


たとえば

<label>電話番号: <input size=25 placeholder="00-0000-0000"></label>
<label>メールアドレス: <input type=email placeholder="test@c-simon.com"></label>

としておけば下記のように表示され、記入に迷わないですよね。





また、こんな感じにすれば"label"タグがいらないです。

<input placeholder="名前">
<input type=email placeholder="メールアドレス">
<button>送信</button>

ついでにhtml5で便利になったフォームタグは以下です。

●入力項目を必須にしたい／input要素の属性に「require」を加える

<input name="text" type="text" require>

●入力した値の書式をチェック／input要素の属性、「typeの値」を書き換える

<input name="email" type="email">

よく使うと思われるTypeは「tel」「url」「email」くらいかな。