skillup

技術ブログ

デザイン

HTML5のinputタグのvalidatorについて

投稿日:2017年5月29日 更新日:

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。

必須入力のほかにも、telやemail、時間など様々なタイプのものがあります。

例えばinput type=”number”と入力すると数字しか入らないようになります。

個人的に便利だと思ったのは正規表現でしょうか。整数5桁+少数1桁の入力のみを受け付けたいとなった時に、numberですとうまくこれを制御できません。

そんなときに下記のように正規表現を入れてエラーチェックを行うことが出来たりします。

こうするとフォームの登録ボタンを押したときに、これらのエラーが出て、submitできないようになります。

参考リンク

inputタグの基礎

input要素の属性一覧・ type属性の値一覧

TAG index HTML&CSS Web制作リファレンス <input>

JSとの比較など
【HTML5】HTML5とjQueryの比較(フォーム)

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5fc44 …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …