HTML5で新たに追加されたinputTypeとその活用 – inputタグだけでカラーピッカーや必須項目を設置する方法等
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。今回のtipsは【HTML5で新たに追加されたinputTypeとその活用方法】です。今更なお話ではありますが、実は色々と便利なので復習の意味を込めて書いておきます。今回追加された要素を使うと…例えばカラーピッカーやカレンダーを設置する際にコードを書く必要がなくなります。
追加されたタイプ
HTML5ですので全てのプラウザでは動作しません。特にIEでは…ですがその他のプラウザでは結構動きますので、色々とテストしてみてもいいかもしれません。
種別 | テスト表示 | コード |
数値用 | <input type="number"> | |
レンジ入力用 | <input type="range"> | |
カレンダー | <input type="date"> | |
色用 | <input type="color"> | |
検索用 | <input type="search"> | |
電話番号 | <input type="tel"> | |
URL用 | <input type="url"> | |
MAIL用 | <input type="email"> | |
日付用 | <input type="datetime"> | |
日付(週) | <input type="week"> | |
時間用 | <input type="time"> | |
日時用 | <input type="datetime"> | |
ローカル日時用 | <input type="datetime-local"> |
追加された属性
追加された属性を活用する事で、入力必須にjqueryを使用しなくてもよくなります。また数字関連では最大値、最小値の指定も行え、非常に便利です。
種別 | テスト表示 | コード |
最大最小の指定 | <input type="number" min="100" max="105"> | |
ステップ数の指定 | <input type="number" min="100" max="400" step="50"> | |
入力必須の指定 |
<input type="number" min="100" max="400" step="50" required> <input type="submit" value="送信"> |
以上になります。もっと詳しく知りたい方はコチラをご参照ください