勉強したことのメモ

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

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

   2024/02/20  HTML

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

 

使用方法

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

<input type="color">

 

サンプル

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

 

注意点

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

 - HTML

  関連記事

Googleカレンダーに追加する(予定を登録する)リンクを設置する方法
Googleカレンダーに追加する(予定を登録する)リンクを設置する方法

あるサイトに「Googleカレンダーに追加する(予定を登録する)ボタンを設置して ...

フォームのresetについて
フォームのresetについて

<input type="reset">についてクリックしたら 初期 ...

mp3ファイルのアップロードと再生方法
mp3ファイルのアップロードと再生方法

mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...

ajaxを使わずに非同期っぽくsubmitする
ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

HTML内に動画(mp4ファイル)を埋め込んで配信する方法
HTML内に動画(mp4ファイル)を埋め込んで配信する方法

Webページ内にYoutubeとかを用いずに動画(mp4)ファイルを配信したいと ...