Blog

html5で増えたinput関係で実際使ってみたいもの

2015.10.27Cat:html5 デザイナー

html5では、inputのtype属性がいろいろ追加されました。
今までは、javascript等で制御してた部分をhtmlだけで対応できてしまうというものです。

これは便利!
なのですが、まだまだブラウザの対応が追いついてません。。。
特にIE・・・

なので、案件等ではまだ使えませんが、
使える時になったらぜひ使いたいものを紹介します。

 

type属性

 

color値

カラーパレットを表示します。
これだけで、カラーパレットが出てくるなんて・・・


IE非対応…

 

 

number値

個数等を記入させたい時にいいですね!

半角数字以外は記入不可(firefoxは記入できちゃう。。。)
IE10以上対応…
 

 

search値

これはちょっとよくわかりませんが、textとほぼ同じらしいですが・・・

 
IE10以上対応
 

 

email値

メールアドレスの記入させたい時ですね、
今まではjavascriptかphpでチェックしないといけない部分です。


@が入ったmail形式でないと送信できない
IE10以上対応…

 

url値


url形式以外は送信できない
IE10以上対応…

 

tel値


IE10以上対応…
ここから日付系の入力ですが、
現在はchromeぐらいしか対応出来てないようです。
 

datetime値

chromeのみ対応

 

date値

chromeのみ対応

 

month値


chromeのみ対応

 

week値


chromeのみ対応

 
 

time値


chromeのみ対応

 

range値


IE10以上

 
 

placeholder属性

あらかじめinputの中身に例文を入れておくができます。
これも今まではjavascriptで対応していました。



IE10以上対応

 

 

 

required属性

これが一番ありがたいかも。
必須項目を設定することができます。


IE10以上対応

 
 

autocomplete属性

候補の値を表示してくれるようになります。
候補はdatalistで自分で設置します。



 
 

pattern属性

正規表現で入力値を指定することができます!

例:全角カタカナのみ

IE10以上対応

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ