概要 フォームに入力して「送信」ボタンを押し、ページが切り替わったと思ったら「入力ミスがあります」と表示されるのは誰だって嫌なもの。HTML5なら送信前のフォームのチェックはスクリプト不要でできるのです。

このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して(画面が遷移して)エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。



●必須項目に付ける「required」

先程のメッセージフォームで名前の欄は以下のHTMLで書かれていました。

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


ここに「required」(必須)の属性を追加します。

<input type="text" name="sender" required>


心情的に属性に「=」がないと気持ち悪い方は以下の書き方でも動作します。

<input type="text" name="sender" required="required">


これだけです。

フォームの見た目は変わりません。

Firefoxではフォームエレメントにマウスカーソルを乗せる(ホバーする)と、「このフィールドは入力必須です。」とツールチップが表示されます。

20140424-フォームコントロール-HTML5-03


このrequired属性を付けたエレメントを空欄にしてフォームのsubmitボタンを押してフォームを送信しようとすると、Firefoxではフォームエレメントの縁が赤くなり、「このフィールドは入力必須です。」という吹き出し警告が表示されます。JavaScriptを使わなくても警告が表示されるのは便利ですね。


ちなみに以下のフォームは「本文」の部分にも「required」属性を付けているのですが、まとめて警告が表示されないようです。

20140424-フォームコントロール-HTML5-04


なので、名前のエレメントを埋めて、本文のエレメントを空のまま送信しようとすると、ようやく本文のエレメントに「必須」である旨の吹き出し警告が表示されます。

20140424-フォームコントロール-HTML5-05



●メールアドレスの欄は「type="email"」

メールアドレスのエレメントは、今までは以下の様なHTMLでした。

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


しかし、これからは「type="text"」ではなく「type="email"」を使用しましょう。

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


こうするだけで、メールアドレスが正しくない状態でフォームを送信しようとすると、メールアドレスのエレメントの縁が赤くなり、「メールアドレスが正しくありません。」という吹き出し警告が表示されます。便利です。

20140424-フォームコントロール-HTML5-06


今までFirefox 28での表示を見てきましたが他のウェブブラウザーではどうなのでしょうか。


●Internet Explorer 11の場合

Internet Explorer 11の場合、required属性を付けたエレメントにマウスカーソルを乗せる(ホバーする)と、Firefox同様にツールチップが表示されます(「これは必須フィールドです」)。

20140424-フォームコントロール-HTML5-07


required属性のエレメントが空のまま送信しようとすると、エレメントの縁が太い線で赤くなり、「これは必須フィールドです」と吹き出し警告が表示されます。

20140424-フォームコントロール-HTML5-08


メールアドレスのエレメントを「type="email"」にした場合のエラーは「有効な電子メールアドレスを入力してください」という吹き出し警告が表示されます。

20140424-フォームコントロール-HTML5-09


●Chrome 34の場合

Chrome 34の場合、required属性を付けたエレメントにマウスカーソルを乗せ(ホバーし)ても、説明のツールチップは表示されませんでした。


required属性のエレメントが空のまま送信しようとすると、エレメントの縁が青くなり、「このフィールドを入力してください。」と吹き出し警告が表示されます。

20140424-フォームコントロール-HTML5-10


メールアドレスのエレメントを「type="email"」にした場合のエラーは「メールアドレスに「@」を挿入してください。「▲▲」内に「@」がありません。」という吹き出し警告が表示されます。

他のウェブブラウザーより警告が説明的でわかりやすいですね。

20140424-フォームコントロール-HTML5-11



●まとめ

1つの項目にほんの少しの手間を掛けるだけで、ページを移動した後に「実はエラーです」といったガッカリ感を無くすことができます。


  • 必須項目には「required」を付ける
  • メールアドレスのエレメントは「type="email"」にする


簡単ですね。ぜひ試してみてください!


それでは。



●注意点と補足

注意点があります。大きな問題ではないですが、見て頂いたように、ウェブブラウザーで少しずつ表示が異なります。

  • フォームエレメントのツールチップは対応がバラバラ
  • フォームの警告メッセージ文はウェブブラウザーでバラバラ
  • 警告されたフォームエレメントの縁の色はウェブブラウザーでバラバラ


他には、フォームの内容をチェックして警告を出すJavaScriptを組んでいる場合、警告がダブる可能性が高いのでご注意下さい。


また、フォームのエレメントを「type="email"」とすると、iPhoneのSafari・Chromeブラウザーでは英字キーボードのレイアウトが少し変わります

まずはフォームのエレメントが「type="text"」の場合。

20140424-フォームコントロール-HTML5-12


そしてフォームのエレメントが「type="email"」の場合。

spaceバーの脇にメールアドレスで使用する「@」「.」が追加されています。

メールアドレスが入力しやすくなるので、メールアドレスのエレメントに「type="email"」はお薦めです。

20140424-フォームコントロール-HTML5-13



●参考

type="tel"などを使うと便利かもしれませんね。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索