HTML5のエラーメッセージ

カテゴリー: HTML

最近HTML5を使用した案件をちょこちょこやってますが
<input type="email">で書式にそぐわない値を入力した時の
エラーメッセージがブラウザによって違うのが前から気になっていたので
軽く纏めてみた

■required
必須チェック
<input tyep="text" required>

chrome :このフィールドを入力してください。
opera :入力を必要とする項目です
firefox:このフィールドは入力必須です。


【chrome】
2012041901.jpg

【opera】
2012041905.jpg

【firefox】
2012041908.jpg

■pattern
書式チェック
<input type="text" name="zip" pattern="\d{3}-\d{4}">

chrome :指定されている形式で入力してください。
opera :有効なフォーマットを使用してください
firefox:入力された値がフィールドに指定された書式と異なります。


【chrome】
2012041902.jpg

【opera】
2012041906.jpg

【firefox】
2012041909.jpg

■url
<input name="url">
書式(URL)チェック

chrome :URLを入力してください。
firefox:URLが正しくありません。


【chrome】
2012041903.jpg

【firefox】
2012041910.jpg

■step
<input type="number" name="number2" step=2>

chrome:値が無効です。
opera :数値XXはこのフォームには許可されていません。特定の数値だけが
許可されています。


【chrome】
2012041912.jpg

【opera】
2012041913.jpg

■maxlength
<textarea name="comment" maxlength="30"></textarea>
文字列長チェック

opera :入力したテキストは長すぎます。現在XX文字使用していますが、制限は○○文字以下です。
※textareaタグだと↑のメッセージが出る。
input type="text"だと文字列の入力制限が発生する

【opera】
2012041907.jpg

■email
<input type="email" name="email">
書式(メールアドレス)チェック

chrome :メールアドレスを入力してください。
opera :有効なメールアドレスを入力してください
firefox:メールアドレスが正しくありません。


【chrome】
2012041904.jpg

【opera】
2012041914.jpg

【firefox】
2012041911.jpg
スポンサーサイト



2012/04/19(木) 22:12 | trackback(0) | comment(0)
| ホーム |