HTML5で追加されたFormの新属性 placeholder autofocus

HTML5ではformに関する新しい機能も追加されました。今回はその中でautofocus属性とplaceholder属性を紹介したいと思います。

■autofocus属性

autofocus属性をあらかじめ指定しておくと、画面が表示された際に、指定した要素にフォーカスがあたります。

■placeholder属性

placefolder属性は、未入力状態の指定要素に、指定した文字列をガイド文字列として表示しておくことができます。
検索ボックスなどによく使われているアレですね。

サンプルコード

1	<form method="post">

2

<ul>

3	<li><input type="text" placeholder="指定したガイド文字列を表示" ></li>

4	<li><input type="text" placeholder="フォーカスがあたります" autofocus></li>

5	<li><input type="text" placeholder="指定したガイド文字列を表示"></li>

6

</ul>

7

</form>

実行結果

今までJavaScriptを使わないと実装できなかった機能が、HTMLだけで簡単に実現できるのでとても便利ですね。