フォームで入力必須であることを指定するinput要素の「required」属性を調べてみた

フォームを送信する際に必須項目に未入力があった場合、クライアントサイドスクリプト(主にJavaScript)やサーバーサイドスクリプト(PHPやCGIなど)でエラーメッセージを表示させ送信ができないように設定する場合が多いですが、HTML5ではそれらのスクリプトを使わなくても、input要素に「required」属性を追加するだけでエラーメッセージを表示する事ができるようなので、どのような動作になるのかを少し調べてみました。「required」の単語自体は「必須」という意味です。

単に未入力エラーだけではなくtypeの値によっては、パターンマッチングを行ってくれるものもあるようです。

<input type="text" required>
もしくは
<input type="text" required="required">

<input type="text">

内容が空のまま送信ボタンをクリックするとエラーメッセージが表示されます。試しに送信ボタンをクリックしてみてください。表示されるエラーメッセージはブラウザによって異なります。エラーメッセージが表示されない場合はお使いのブラウザが非対応という事になります。

Safari 非対応
Firefox このフィールドは入力必須です。
Chrome このフィールドを入力してください。
Opera このフィールドを入力してください。

typeの値が「text」以外でも、入力するタイプのものなら同様のメッセージが表示されます。

<input type="radio">

ラジオボタン1 ラジオボタン2
Safari 非対応
Firefox いずれかのオプションを選択してください。
Chrome これらのオプションから1つ選択してください。
Opera これらのオプションから1つ選択してください。

<input type="checkbox">

チェックボックス1 チェックボックス2
Safari 非対応
Firefox チェックボックスにチェックを入れてください。
Chrome 次の進むにはこのチェックボックスをオンにしてください。
Opera 次の進むにはこのチェックボックスをオンにしてください。

個別にチェックするようで、どれか一つがチェックされてなかったらエラーを表示するというような設定はできないようです。

<textarea></textarea>

Safari 非対応
Firefox このフィールドは入力必須です。
Chrome このフィールドを入力してください。
Opera このフィールドを入力してください。

「<textarea></textarea>」も「<input type="text">」と同じ結果になりました。

<input type="url">

URLの記述に間違いがあるとメッセージが表示されます。

Safari -
Firefox URLが正しくありません。
Chrome URLを入力してください。
Opera URLを入力してください。

<input type="email">

メールアドレスの記述に間違いがあるとメッセージが表示されます。

Safari -
Firefox メールアドレスが正しくありません。
Chrome 1.メールアドレスに「@」を挿入してください。「xxx」内に「@」がありません。
2.「@」に続く文字列を入力してください。「xxx@」は完全なメールアドレスではありません。
3.「@」の前の文字列を入力してください。「@xxx」は完全なメールアドレスではありません。
4.「xxx.」内の「.」の位置が間違っています。
5.「@」の前の文字列に記号「]」を使用しないでください。
6.「@」に続く文字列に記号「]」を使用しないでください。
Opera Chromeと同じ

「chrome」と「opera」は複数のメッセージが用意されているようです。これで全部かはわかりませんが。

<input type="number">

「Firefox」では未入力や数字意外の文字列や記号が入るとメッセージが表示されますが、「Chrome」と「Opera」では数字と一部のアルファベット(「e」「E」)一部の記号(「-」「+」「.」)以外は入力ができないようになっています。入力できるアルファベットや記号は他にもあるかもしれません。

Safari -
Firefox 数値を入力してください。
Chrome 数字を入力してください。
Opera 数字を入力してください。

「Opera」はここまですべて「Chrome」と同じ結果になりました。以前に「Opera」は「Chrome」のオープンソースエンジンを利用するという話があったので、そういう事なのでしょうか。

<input pattern="">

上記のように自動でパターンマッチングを行ってくれないものでも、以下のように「pattern」属性の値に正規表現を指定する事で様々なマッチングを行えるようになります。正規表現についてはあまりというかまったくわかっていないので深くは触れません。ただやはりtype属性の種類やブラウザによっては対応していないものもあるようです。

半角英数
<input pattern="^[0-9A-Za-z]+$">

ここまで書いておいてなんですが、MacやiPhoneの標準ブラウザである「Safari」がまったく対応していなので、ブラウザを限定する場合以外はあまり使えないという事になります。すでにサーバーサイドスクリプト側でエラーを出すように設定しているフォームの場合は「required」を使ってページが推移する前にエラーを出すようにしてあげれば親切かなとは思います。

最終更新日:2016/06/30