くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[HTML5]フォーム関連の新機能・追加属性

HTML5で追加された、フォーム関連の新機能・属性

placeholder属性
  • テキストボックス等に予めサンプルとして表示させておく文字
  • input要素とtextarea要素のみ、設定可能。値はテキストのみ

  placeholder="山田"

 

autofocus属性
  • 最初の入力項目に自動的にカーソルを置くことができる。それにより、ユーザーはすぐに入力を開始することができる
  • autofocus属性を使用できるのは1ページに1か所のみ

 

メールアドレスのtype属性”email”
  • HTML5からメールアドレスのtype属性にemailが加わった
  • type="email" とした場合、「xxx@xxx.com」のようなメールアドレスの書式しか入力できなくなる
  • 正しくない書式のデータが入力された場合、送信時に「メールアドレスを入植してください」というメッセージが表示される

 

type属性”tel”
  • 電話番号の入力を想定したinput要素の新属性に「type="tel"」が加わった
  • 入力できる値や桁数に制限はなく、emailのような自動チェック機能はない
  • type="tel"にすると、スマートフォン等の場合は数字キーボードが表示されて入力しやすくなる

 

required属性
  • 入力必須項目に入れておくことで、送信時に自動でチェックできるようになる
  • テキストボックス、ラジオボタンチェックボックス、プルダウンメニューでも使用可能