HTML5で便利に進化したinput要素
作成日:2023.04.06
HTML5で追加された新しいinput要素を紹介します。カラーパレットや日付・時刻入力、数値入力など、ブラウザ対応が進んだこれらの要素を使えば、従来のjQueryを使わなくても強力なフォーム入力補助が可能です。
error この記事は最終更新日から1年以上が経過しています。
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.

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
Google FontsのMaterial Symbols 基本設定メモ
2024.12.10
Google FontsのMaterial Symbols and Iconsの基本的な使い方をまとめた記事です。導入手順や、アイコンとテキストを綺麗に揃えるためのCSS設定例について解説しています。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。
セレクトボックスでデータ更新を実現する仕組みと実装例
2024.11.29
「チェックボックスを使ったデータ更新の仕組み」に続く記事として、今回はセレクトボックスを活用したデータ更新の方法をご紹介します。複数の選択肢から値を選び、それをサーバー側に送信して更新する仕組みを、実装例とともに解説します。