フォームに入力して「送信」ボタンを押し、ページが切り替わったと思ったら「入力ミスがあります」と表示されるのは誰だって嫌なもの。HTML5なら送信前のフォームのチェックはスクリプト不要でできるのです。このブログのフッター部分にはメッセージを送るフォームがあります。このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。ページが移動して(画面が遷移して)エラーが表示されます。「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。いうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。それではその属性を紹介します。34での動作も調べてみました。先程のメッセージフォームで名前の欄は以下のHTMLで書かれていました。>ここに「required」(必須)の属性を追加します。required>心情的に属性に「=」がないと気持ち悪い方は以下の書き方でも動作します。required="required">これだけです。フォームの見た目は変わりません。Firefoxではフォームエレメントにマウスカーソルを乗せる(ホバーする)と、「このフィールドは入力必須です。」とツールチップが表示されます。このrequired属性を付けたエレメントを空欄にしてフォームのsubmitボタンを押してフォームを送信しようとすると、Firefoxではフォームエレメントの縁が赤くなり、「このフィールドは入力必須です。」という吹き出し警告が表示されます。JavaScriptを使わなくても警告が表示されるのは便利ですね。ちなみに以下のフォームは「本文」の部分にも「required」属性を付けているのですが、まとめて警告が表示されないようです。名前のエレメントを埋めて、本文のエレメントを空のまま送信しようとすると、ようやく本文のエレメントに「必須」である旨の吹き出し警告が表示されます。●メールアドレスの欄は「type="email"」メールアドレスのエレメントは、今までは以下の様なHTMLでした。name="address">しかし、これからは「type="text"」ではなく「type="email"」を使用しましょう。name="address">こうするだけで、メールアドレスが正しくない状態でフォームを送信しようとすると、メールアドレスのエレメントの縁が赤くなり、「メールアドレスが正しくありません。」という吹き出し警告が表示されます。28での表示を見てきましたが他のウェブブラウザーではどうなのでしょうか。11の場合、required属性を付けたエレメントにマウスカーソルを乗せる(ホバーする)と、Firefox同様にツールチップが表示されます(「これは必須フィールドです」)。required属性のエレメントが空のまま送信しようとすると、エレメントの縁が太い線で赤くなり、「これは必須フィールドです」と吹き出し警告が表示されます。メールアドレスのエレメントを「type="email"」にした場合のエラーは「有効な電子メールアドレスを入力してください」という吹き出し警告が表示されます。34の場合、required属性を付けたエレメントにマウスカーソルを乗せ(ホバーし)ても、説明のツールチップは表示されませんでした。required属性のエレメントが空のまま送信しようとすると、エレメントの縁が青くなり、「このフィールドを入力してください。」と吹き出し警告が表示されます。メールアドレスのエレメントを「type="email"」にした場合のエラーは「メールアドレスに「@」を挿入してください。「▲▲」内に「@」がありません。」という吹き出し警告が表示されます。他のウェブブラウザーより警告が説明的でわかりやすいですね。●まとめ1つの項目にほんの少しの手間を掛けるだけで、ページを移動した後に「実はエラーです」といったガッカリ感を無くすことができます。必須項目には「required」を付けるメールアドレスのエレメントは「type="email"」にする簡単ですね。試してみてください!それでは。大きな問題ではないですが、見て頂いたように、ウェブブラウザーで少しずつ表示が異なります。フォームエレメントのツールチップは対応がバラバラフォームの警告メッセージ文はウェブブラウザーでバラバラ警告されたフォームエレメントの縁の色はウェブブラウザーでバラバラ他には、フォームの内容をチェックして警告を出すJavaScriptを組んでいる場合、警告がダブる可能性が高いのでご注意下さい。フォームのエレメントを「type="email"」とすると、iPhoneのSafari・Chromeブラウザーでは英字キーボードのレイアウトが少し変わります。フォームのエレメントが「type="text"」の場合。フォームのエレメントが「type="email"」の場合。spaceバーの脇にメールアドレスで使用する「@」「.」が追加されています。メールアドレスが入力しやすくなるので、メールアドレスのエレメントに「type="email"」はお薦めです。俊太朗のHTML5マークアップ移行ガイド(ASCII.jp)type="tel"などを使うと便利かもしれませんね。純一・jdash2000ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。サーバー管理などをしています(前はDTPオペもやっていました)。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。Typeで構築されています)。Reserved.RSSフィードプライバシーポリシ。