HTML

トップ > チップス > HTML

HTMLだけでバリデーション

ブラウザによって実装に差があるようですし、インスペクタを使えば幾らでも書き換え可能なので、サーバサイドのバリデーションは結局不可欠なのですが、ユーザビリティ改善のための補助的な用途と割り切って使えばかなり有用なのではないでしょうか。ざっと以下のような使い方が出来ます。

  Required: <input type="text" value="1" required/><br/>
  Pattern: <input type="text" pattern="[0-9]{4}" required/><br/>
  Number: <input type="number" min="1" max="5"/><br/>
  Tel?: <input type="tel"/><br/>
  Email: <input type="email"/><br/>
  Date: <input type="date"/><br/>


上から順に、必須項目の指定、テキストのパターン（正規表現）指定、数値範囲指定、電話番号、メールアドレス、日付選択となっています。パターンで注意が必要なのは、空値を許可したくない場合には、requiredも付けておかなければならない点でしょうか（Chromeで確認）。Safariでは、type="date"が未実装のようでしたし、バリデーション自体動作しませんでした（ローカルでテストしたせいかもしれませんが）。

以下、バリデーションとは関係ないですが、便利そうな属性とタイプです。

  <input type="text" placeholder="An explanation"/><br/>
  <input type="email" autocomplete="on"/><br/>
  <input type="range"/><br/>


list属性とdatalist要素も有用です。

参考URL

HTML5 Hacks 4. Bring Back the <input> Tag
HTML5 Hacks 5. Easily Implement Form Validation Without JavaScript

• タグ別一覧: [html]
• チップス一覧