HTML5フォームの新属性

HTML5で追加されたフォーム関連の機能の一部

placeholder属性

テキストボックス等にあらかじめ入力サンプル文字を表示させることができる。この設定をしておくことで、ユーザーはどのような文字列を入れたら良いのか理解する手助けとなる。
placeholder属性を設定できるのは、input要素とtextarea要素のみ、値はテキストのみ。
プレスフォルダーに設定した文字は入力を開始すると消える。

autofocus属性

autofocus属性を使うことで、ページを開いたときに自動的に指定した項目にフォーカスさせることができる。この設定をしておくことで、ユーザーはすぐに入力を始めることができるようになる。

autofocus属性を指定できるのは、ページ内で１箇所のみ

type="email"

HTML5ではメールアドレスの入力を想定したinput要素のtype属性として「type="email"」が用意されている。
「type="email"」とした場合、「xxxx@ドメイン名」といったメールアドレス用の書式しか入力できなくなる。
正しくない書式のデータが入力された場合はには、送信時にチェックされ「メールアドレスを入力してください。」というメッセージが表示される。

type="tel"

HTML5では電話番号の入力を想定したinput要素のtype属性として「type="tel"」が用意されている。
電話番号は地域によって形式が様々ですので、入力できる値に制限はなく、「type="email"」のように自動での書式チェックはできない。
スマートフォンなどの場合は、数字キーボードが表示されて電話番号を入力しやすくなる。