HTML5 フォームのテキスト入力にガイド文字を表示する placeholder

Webページでフォームの入力ボックスに入力を促すためのヘルプ的な文字が表示されていることがあります。「ここに何を入れてください」とかそういったものです。
テキストボックスをクリックするとその文字が消えるヤツです。

以前、そういったものをJavaScriptで実装しました。
JavaScriptでinput boxが空っぽのときに、ヘルプの文字列を入れ、色を変更し、クリックされたら、中身を消して、色を戻す、といった処理です。

HTML5では、そういった機能を自分で実装する必要はなく、
placeholderの機能を使えば、簡単に実現できます。

属性にplaceholderを指定し、画面に表示したい文字列を値に入れます。

サンプルプログラムは以下の通りです。

<form action="" method="POST">
	<input type="text" name="name" value=""
	placeholder="名前を入力してください">
</form>

例: HTML5対応のブラウザで見てください。

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

HTML5

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12