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="送信">

　
以上になります。もっと詳しく知りたい方はコチラをご参照ください