Bootstrapは、クラス.uneditable-inputを提供します。これをspan/label/text/etcに適用して、無効なテキスト入力の外観を模倣できます。
ブートストラップはそれを次のように説明しています:
"編集できない入力:実際のフォームマークアップを使用しないと編集できないフォームにデータを表示します。"
<span class="input-xlarge uneditable-input">Some value here</span>
アプリのいくつかの領域でこれを使用したいのですが、追加の非入力データが編集可能な入力フィールドと並んでいます。私の意図は、整然とした積み重ね可能なフォームデザインを維持することです。しかし、私はいくつかのUXフィードバックを取得したいいくつかの躊躇があります...
このアプローチで行われたユーザーテストはありますか?それはユーザーにデータの誤った印象を与えますか?ユーザーは混乱して否定的に反応しますか?通常、無効なテキスト入力がある場合、ユーザーは、セキュリティや設定などが異なる場合にフィールドを編集できると考えるかもしれません。しかし、この場合、データは決して編集可能ではありません。フォームに整然と表示できるように、偽の入力フィールドにのみラップされます。
このアプローチを使用したいのですが、このトピックに関するユーザー調査は見つかりませんでした。誰もがこのトピックについていくつかの光を当てることができますか?
ユーザーとして、私は自動的に無効にされたテキスト入力フィールド(またはこのようなもの)はフィールドが最終的に編集可能であることを意味すると思います。他のフィールドに入力したデータによって編集が無効になるか、フィールドの値を変更するための十分な権限がありません。
ブートストラップCSSにはform-control-static
本当に読み取り専用フィールドを適切に配置するために使用できるクラス:
<div class="form-horizontal">
<!-- Other fields not shown for brevity -->
<div class="form-group">
<label class="control-label col-md-2">Date</label>
<div class="col-md-10 form-control-static">
January 12, 1695
</div>
</div>
</div>
データは編集できないため、無効な入力要素で表示される場合がありますが、ユーザーが選択したり、他の場所にコピーアンドペーストしたりする可能性があります。入力コントロールに配置すると簡単に選択できますが、無効にすると、ユーザーが提供されたものを正確に使用する必要があることが明確になります。多くの場合、これは生成されたデータの場合です(つまり、ユーザー名を入力すると、プロファイルにアクセスするためのURLが生成されますが、編集できません)。
これは視覚的には入力フィールドを無効に設定することと同じであるため、UIの観点からは違いはありません。フォームが送信されたときに偽の入力フィールドがサーバーに値を返さないのに対して、無効な入力フィールドは返すため、違いは主に技術的なものです。
どのような状況でもデータを編集できない場合、その可能性を示唆することの利点はわかりません。