技術資料

error この記事は最終更新日から2年以上が経過しています。

HTML5で色々追加された input 要素。一昔前は仕様としては存在するが、ブラウザ側の実装がまちまちで、結局凝ったことをするときは jQuery とかでごにょごにょして解決していた。

今となっては、ブラウザ側の対応も良い感じになり、余計なことをせずとも HTML だけで強力なフォームの入力補助ができるようになっている。

というわけで「いつの間にそんな便利になってたの！？」と思った input 要素をまとめておく。

カラーパレット

<input type="color" value="#ffffff">

カラーパレットが作れる。すご。

See the Pen input type="color" by nanaka (@nanaka_tokiwa) on CodePen.

日付・時刻関連

<!-- 日付(年月日) -->
<input type="date" value="2023-04-06" min="2000-01-01" max="2050-12-31">

<!-- 日付時刻(年月日時分) -->
<input type="datetime-local" value="2023-04-06T05:50" min="2000-01-01T00:00" max="2050-12-31T23:59">

<!-- 年月 -->
<input type="month" value="2023-04" min="2000-01" max="2050-12">

<!-- 週 -->
<input type="week" value="2023-W14" min="2000-W01" max="2050-W52">

<!-- 時分 -->
<input type="time" value="05:50" min="00:00" max="23:59">

week はちょっと使いにくそうだが、全体的に入力値をそのままDBに入れたり、DBの値をそのまま出力できるので便利。

See the Pen 日付時刻関連の input 要素 by nanaka (@nanaka_tokiwa) on CodePen.

数値関連

<!-- スピナーつき -->
<input type="number" value="20" min="0" max="30" step="2">

<!-- スライダー -->
<input type="range" value="100" min="0" max="200" step="5">

range の方はユーザーが厳密な数値を把握する必要がないケースで便利そう。

See the Pen 数値関連の input 要素 by nanaka (@nanaka_tokiwa) on CodePen.