今回はinputのtype属性を使用した意外と使っていないフォーム部品についてまとめています。
type属性毎に設定可能なほかの属性値もチェックしてみてください。
知らない属性値が見つかるかもしれません。
以下の入力欄は実際に操作してカレンダー表示が可能です。
数値
<input type="number" step="10">「STEP」属性を指定し数値を10ずつ増減させています
※上記入力欄は操作可能です。矢印で数値を増減できます。
パスワード
<input type="password" maxlength="8">「max-length」を指定しパスワードの入力を制限できます
検索
<input type="search">「type」属性に「search」を指定。検索ワードを「☓」で消せるようになります。
ファイル選択
<input type="file" accept=".png, .jpg, .gif"> 「accept」を指定すると選択可能なファイルを制限できます。
リセットボタン
<input type="reset" value="リセット">入力した内容をリセットできます
カラーパレットの表示
<input type="color" value="#ff0000">「type」属性に「color」を指定するとカラーパレットを表示できます。
スライダー表示
<input type="range" min="0" max="10">「type」属性に「range」を指定するとスライダーを表示し範囲を選択が可能になります。
ボタンを画像化
<input type="image" src="send.png">ボタンに画像指定が可能になります
日付カレンダー
<input type="date">type属性に「date」を指定するとカレンダーアイコンが表示されカレンダーのプルダウン表示が可能になります。
※上記入力欄は操作可能です。アイコンをクリックするとカレンダーが表示されます。
日付のデフォルト表示
<input type="date" value="2022-10-21">「value」に日付を指定するとデフォルト表示が可能になります
選択可能な日付の範囲を指定
<input type="date" min="2022-10-21" max="2022-10-31">「min」「max」を指定するとカレンダー表示した際に、範囲外の日付は選択不可となります。
選択可能な日数の間隔を指定
<input type="date" step="7">「step」属性を指定すると選択可能な日数の間隔を指定できます。
※上記入力欄は操作可能です。アイコンをクリックするとカレンダーが表示されます。
日付と時間を選択
<input type="datetime-local">type属性に「datetime-local」を指定すると日時の選択が可能になります
年と月を選択
<input type="month">type属性に「month」を指定すると年と月が選択できるプルダウンが表示されます。日にちの指定は不可
週を選択
<input type="week">type属性に「week」を指定すると週選択が可能となります
時間と分を選択
<input type="time"> type属性に「time」を指定すると時間と分だけが選択可能となります。
