タグは入力フィールドの内側または外側にある必要があります
したがって、入力にタグを付けることはかなり一般的ですが、タグを表示するために私が見る一般的な2つの異なる方法があります。
- タグは、入力可能なスペースの外側の入力の下にあります。
- タグは入力内にあります：
現在、開発者の観点（ここから来ています）から、2番目のフォームは飛躍的に広がっており、一般的な観点からだけでは実装が難しく、複数のブラウザーとモバイルサポートを考慮に入れるとさらに困難になりますが、一方が他方よりもはるかに優れているのは明らかなUXの理由です。
2つ目は、キーボード中心のユーザーにとっていくつかの利点があるようです。ほとんどの実装では、ユーザーはバックスペースを使用して前のタグを変更できます。一部では、矢印キーを使用して以前のタグを変更することもできます。キーボードを使用して既存のタグを変更できることを除いて、2番目のフォームが他のUXにどのようなメリットをもたらすのかはわかりません。
2番目の形式と最初の形式の1つの問題は、私が見た最初の形式の実装は、お互いにかなり一貫しているということです。入力ボックスに入力して値を選択すると、下のリストに表示されます。多少の違いはあるかもしれませんが、それほど大きな違いはありません。 2番目の形式には、実装間でかなり大きな違いがある場合があります。私はバックスペースが実装されているのを見ました。ある場合には、最後のタグを変更可能なテキストに変換するだけです（このサイトのように）、または最後のタグを選択しますが、何か他のことをするまで、または単に前のタグをすぐに削除します。
今、私は入力の外側にタグがある最初のフォームに傾いており、その一部はコーディング実装の観点からの私の偏見かもしれませんが、タグ付けを見た場合、ユーザーはそれがどのように機能するかをかなり知っていると思います以前このフォームに入力してください。
入力内にあるタグの2番目の形式の方が優れたUXである理由は他にありますか？
どちらも有効で、さまざまなアプリケーションシナリオに対応します。間違ったタグ/アイテムを誤って選択した場合はどうなりますか？どのように削除しますか？：
＃1で：1.入力して間違ったアイテムを選択します2.マウスをつかんで間違ったアイテムをポイントします3. [X]をクリックしてタグを削除します（入力ブラー）4.入力をクリックしてフォーカスしますそれと別の項目を入力してください
＃2で：1.入力して間違った項目を選択します2. Backspaceを押して削除し、新しい値を入力します;）
どちらがよりユーザーフレンドリーですか？この場合、実装するのははるかに難しいですが、私は＃2に両手で投票します;）
追伸通常、どちらの場合もドロップダウンが使用されるため、実装はさらに困難になります。
My2c