- ガイド
- Form App
HTML5のフォームバリデーション
Table of contents
HTML5のフォームバリデーションで、ユーザーが正しいデータを入力しているのかをクライアントサイドで手軽に確認することができます。よく使われるバリデーションをいくつかご紹介します。
フィールドを入力必須にする
required属性
を指定することで、フィールドを入力必須にできます。
<input type="text" name="message" required />
メールアドレスの書式を検証する
input type="email"
を使うと、メールアドレスの書式が正しいかを検証できます。
<input type="email" name="email" />
URLの書式を検証する
input type="url"
を使うと、URLの書式が正しいかを検証できます。
<input type="url" name="website" />
数値の最大値・最小値を指定する
input type="number"
を使うと、max属性
とmin属性
で最大値・最小値を指定できます。
<input type="number" name="age" max="12" min="6" />
文字列の最大文字数・最小文字数を指定する
maxlength属性
とminlength属性
で最大文字数・最小文字数を指定できます。input type="text"
及びtextarea
で有効です。
<input type="text" name="message" minlength="5" />
<textarea name="message" maxlength="140"></textarea>
ファイルの拡張子を制限する
input type="file"
を使うと、accept属性
で許可するファイルのMIMEタイプおよび拡張子を指定できます。
<input type="file" accept=".jpg,.gif" />
正規表現を使って入力値のパターンを指定する
pattern属性
で、入力値のパターンを正規表現で指定できます。
<!-- 例)半角英数字 -->
<input type="text" pattern="^[0-9A-Za-z]+$" />