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

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

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

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

<input type="text">

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

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

<input type="radio">

<input type="checkbox">

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

<textarea></textarea>

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

<input type="url">

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

<input type="email">

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

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

<input type="number">

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

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

<input pattern="">

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

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

以前は対応していなかったSafariも現在は対応しているので、十分使えるようになっていると思います。ただ表示されるメッセージは固定のものなので、オリジナルのメッセージを出そうと思ったら従来どおりJavascript等を使用する必要があります。