🙌

実はたくさんある<input>のtype属性

2023/09/09に公開

概要

Webページを作るうえで欠かせないinputですが、
よく使うtype="text"以外にも、実は様々なtypeが存在するので、紹介します。

<input type="range">

指定した範囲で選択できるスライダーを表示します。

<input type="color" value="#ff0000" />

カラーコードで指定可能なカラーピッカーを表示します。

<input type="date">

UIの統一やレイアウトの統一のためにdatepickerライブラリを
使うことが多いですが、inputのtype=date属性で、datepickerを表示することが出来ます。

<input type="datetime-local">

ユーザーのローカルタイムゾーンに合わせたdatepickerを表示します。
日付に加え、時刻の設定も可能です。

<input type="month">

"YYYY-MM"形式のdatepickerを表示します。

<input type="time">

"HH:MM"形式のtimepickerを表示します。

<input type="week">

第1週から第52または53週を簡単に入力することができる入力欄を生成します。

<input type="search">

殆どtextと同じ機能を持ちますが、入力値をクリアする「×」マークが表示されたり、
検索項目であることをブラウザにより伝えやすくなっています。

<input type="tel">

電話番号専用の入力欄を表示します。