• ガイド
  • 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]+$" />
NewtMade in Newt