html5で増えたinput関係で実際使ってみたいもの
html5では、inputのtype属性がいろいろ追加されました。
今までは、javascript等で制御してた部分をhtmlだけで対応できてしまうというものです。
これは便利！
なのですが、まだまだブラウザの対応が追いついてません。。。
特にIE・・・
なので、案件等ではまだ使えませんが、
使える時になったらぜひ使いたいものを紹介します。
type属性
color値
カラーパレットを表示します。
これだけで、カラーパレットが出てくるなんて・・・
IE非対応…
|
1 | <input type="color"> |
number値
個数等を記入させたい時にいいですね！
半角数字以外は記入不可(firefoxは記入できちゃう。。。)
IE10以上対応…
|
1 | <input type="number"> |
search値
これはちょっとよくわかりませんが、textとほぼ同じらしいですが・・・
IE10以上対応
|
1 | <input type="search"> |
|
1 | <input type="email"> |
url値
|
1 | <input type="url"> |
tel値
IE10以上対応…
ここから日付系の入力ですが、
現在はchromeぐらいしか対応出来てないようです。
datetime値
chromeのみ対応
|
1 | <input type="datetime"> |
date値
chromeのみ対応
|
1 | <input type="date"> |
month値
chromeのみ対応
|
1 | <input type="month"> |
week値
chromeのみ対応
|
1 | <input type="week"> |
time値
chromeのみ対応
|
1 | <input type="time"> |
range値
IE10以上
|
1 | <input type="range"> |
placeholder属性
あらかじめinputの中身に例文を入れておくができます。
これも今まではjavascriptで対応していました。
IE10以上対応
|
1 2 | <input type="text" placeholder="例：テスト"><br> <input type="url" placeholder="例：aaaa.com"><br> |
required属性
これが一番ありがたいかも。
必須項目を設定することができます。
IE10以上対応
|
1 | <input type="text" required> |
autocomplete属性
候補の値を表示してくれるようになります。
候補はdatalistで自分で設置します。
|
1 2 3 4 5 6 | <input type="text" autocomplete="on" list="ster"><br> <datalist id="ster"> <option value="1"> <option value="2"> <option value="3"> </datalist> |
pattern属性
正規表現で入力値を指定することができます！
IE10以上対応
|
1 | <input type="text" pattern="^[ァ-ン]+$"> |
Author Profile
スターフィールド編集部
SHARE
