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

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

2019/01/11 2024/02/20 HTML

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

使用方法

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

<input type="color">

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

: HTML5のカレンダーピッカーについて(input type="date")

とあるシステムのフォーム部分を改修する案件があった為、内容を確認していると日付入 ...

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

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

: フォームのテキストボックスでブラウザによる自動補完を無効にする方法

あるformのテキストフィールド(input="text")でブラウザによる自動 ...

: formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...

: HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...