← 一覧へ

やってみよう言葉を打って Enter(またはカンマ)を押してみてください

入力フォームマイナー(知る人ぞ知る)

タグ入力(インプットチップ)

Tag Input / Input Chips

言葉を打って Enter を押すと、小さな札(タグ)になって欄の中に並ぶ。札の × で消せる。

別名インプットチップタグ入力欄トークン入力チップ入力

どこで使われている?

よく見かける場所
ブログのタグ付け、メールの宛先、求人サイトのスキル入力
使うとよい場面
自由な言葉を複数入れてもらうとき
避けたい場面
決まった選択肢から選ぶとき(チップやチェックボックスにする)

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「タグ入力(インプットチップ)(Tag Input / Input Chips)」を実装してください。

動き:入力欄に言葉を打って Enter かカンマを押すと、その言葉を×付きの小さな札に変えて欄の中に並べる。×を押すとその札を消し、空の状態で Backspace を押すと最後の札を消す。同じ言葉は2回入れない。

使う部品:自作
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら自作
iPhoneアプリなら自作
AndroidアプリならInputChip を並べて自作
FlutterならInputChip を並べて自作
React Nativeなら自作