HTML5で簡単に入力チェックを行う方法



HTML5からinputタグに幾つもの属性が追加されています。
その属性を使用して簡単に入力チェックが行えます。
これら使用すれば簡単な入力チェックもJavascriptを書く必要がなくなります。

typeでチェックを行う

HTML5になって様々なtypeが追加されました。

下記は現在「Opera 26.0」で確認出来た入力チェックがかかるtypeの一覧です。
※他にも新たに追加されたtypeがあります。
わざと間違った値をいれて頂いて送信ボタンをクリックすると入力エラーが表示されます。

type サンプル
email
url
number
date
datetime-local
month
week
time

入力必須の要素

inputタグに新たに追加された「required」要素を使用します。
この要素を使用すれば入力必須と出来ます。

<form onsubmit="return false;">
	ID:<input type="text" name="id" required /> ※入力必須<br />
	<input type="submit" value="送信">
</form>

未入力のまま送信ボタンを教えてみてください。
ID: ※入力必須

正規表現で指定する

inputタグに新たに追加された「pattern」要素を使用します。
この要素を使用すれば正規表現で入力の値をチェックすることが出来ます。

<form onsubmit="return false;">
	ID:<input type="text" name="id" pattern="^[0-9A-Za-z]+$"> ※半角英数のみ<br />
	<input type="submit" value="送信">
</form>

ID: ※半角英数のみ

その他、type=”number”の場合はminとmaxの属性を指定したりしてチェックを行うことが可能です。
特に計算等を必要としない入力チェックの場合はこれで簡単にチェックを行うことが可能になります。
まぁ、ただHTML5でのエラー出力が特徴的だから全面的に使用するとなるとエラー出力のUIで問題が起きそうな予感です・・・


コメントを残す