勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

フォームでカラーコードを入力したい際にプラグイン無しでピッカー機能を搭載する方法

   2024/02/20  HTML

あるフォームの項目でカラーコードを入力したいというケースがあった。だいぶ前に同じようなケースがあった際はjQueryのカラーピッカープラグインを使用していたが、今はHTML5で簡単に対応できるみたい。以下に方法をメモ。

 

使用方法

カラーコードのフォーム部分に以下を追記する。

<input type="color">

 

サンプル

https://taitan916.info/sample/color/

 

注意点

iPhoneのsafariで見たところ対応しておらず、テキストボックスの形で表示された。スマホも対応したい場合は以前に記事を書いた方法を用いる。

 - HTML

  関連記事

同一フォーム内でクリックするボタンによって送信先を変更する方法
同一フォーム内でクリックするボタンによって送信先を変更する方法

同一フォーム内で「登録する」ボタンと「プレビュー」ボタンを用意し、「登録する」を ...

formのinput=
formのinput="file"でディレクトリを選択させ、ディレクトリ内のファイルを全てアップロードする方法

フォームで複数のファイルをアップロードしたい場合、input="file"を複数 ...

スマホでフォームの画像アップロード部分でカメラを起動させる方法
スマホでフォームの画像アップロード部分でカメラを起動させる方法

formの画像アップロード部分で、スマホの場合にカメラで撮影させたい。以下に対応 ...

HTMLにてaタグクリック時にping属性のデータをPHPで受け取る方法
HTMLにてaタグクリック時にping属性のデータをPHPで受け取る方法

HTMLのaタグにping属性というものを設定できるらしく、設定したリンクをクリ ...

HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法
HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法

あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指 ...