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-633cb …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

CSSで背景画像の出力

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

基本的な …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-633cba6b76 …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-6 …

アーカイブ