HTML5で新たに追加されたinputTypeとその活用 – inputタグだけでカラーピッカーや必須項目を設置する方法等

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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="送信">

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