一部のフィールドが編集できないフォームで必須（およびオプション）フィールドをマークする方法は？
Webアプリのエンティティのプロパティを表示するフォームがあります。フォームの一部のフィールドは読み取り専用で、一部は編集可能です。編集可能なフィールド内で、一部は値を入力する必要があり、一部はオプションです。
この区別をどのようにマークしますか？
アスタリスクを使用して必須フィールドにマークを付けることは明らかな答えですが、読み取り専用フィールドも必須であるため、問題があるようです。空の値は使用できず、ユーザーだけが編集を行っているわけではありません。しかし、アプリケーションは自動的に値を割り当てます...
私は逆を行うことを考えました-代わりにオプションの編集可能フィールドをテキスト「オプション」でマークしてください...誰もがこの例を知っていますか？またはより良い解決策がありますか？
ここでの最良の方法は、フォームからすべての読み取り専用フィールドを削除することです。この情報を表示する他の方法を見つける必要があります。ただし、それらを削除する方法がない場合は、入力フィールドのように見えないようにしてください。
デフォルト値を持つフィールドの場合、フィールドに値を入力するだけです。黒の入力フォント色。 （多くのフォームがフィールドのラベルとしてそれを使用するため、灰色はそれらを混乱させます）
必須フィールドの場合は、ラベルの近くにアスタリスク記号を使用してください。
IMO読み取り専用フィールドは、フィールドであってはなりません。これは次のようになります。
私はフィルに同意します。読み取り専用はフィールドであってはなりません。前に「特に明記されていない限り、すべてのフィールドが必要です」または同様のことを言って、オプションのフィールドを明確にマークすることは、今ではより良いプラクティスと見なされます。あなたが何かを尋ねる必要がないなら、あなたは本当にそれを尋ねるべきではありません。
もう一度、Luke Wroblewski http://static.lukew.com/webforms_lukew.pdf （これはPDFへのリンクです）によって実施された徹底的な研究について言及します。ルークWによる関連する読み物は次のとおりです。 必須のマーキングフィールドとオプションのフォームフィールドのマーキング-Luke Wroblewski
システムによって値が割り当てられるオプションの値は、デフォルト値がどうなるかを示すのに役立ちます。
次の画像のように、一番上のアイテムが読み取り専用で、真ん中のアイテムが編集可能で、ユーザーが変更しない場合はデフォルト値（薄い灰色）が表示され、一番下のアイテムは編集可能で、必須です。デフォルト値はありません。中央のアイテムがフォーカスされるか編集されるとすぐに、灰色のデフォルト値はユーザーが入力したものに置き換えられます。
[編集]トップフィールドをフィールドのように見えないように変更しました
編集不可のフィールドはフィールドのように見えるべきではないことに同意しますが、アクセシビリティの目的でそれらのフィールドを保持するという議論があります。フォームフィールドには、無効にできるreadOnly属性があります。さまざまな状況でこれらを使用することが理にかなっている場合があります。重要なのは、それらが異なって見え、デフォルトでは編集できないように見えることです。
必須とオプションのマーク付けについては、どちらでも例外としてマーク付けします。ほんの少しだけ必要な場合は、ラベルに（必須）を追加します。オプションの数が少ない場合は、それらに（オプション）を追加します。とは言っても、私が参加した調査によると、多くのユーザーは、必須フィールドを示す「標準」のアスタリスクが表示されない場合はコメントしています。私はそれが親しみやすさの切り札のベストプラクティスの例だと思います（私の心から完全に脱出するUX用語があります...誰かが私を助けてくれます...）
これを単純にGoogle検索すると、かなり一貫した結果が得られます。ほとんどのフォームでは必須フィールドであり、必須フィールドはほんの一部であり、オプション（必須ではない）フィールドのみをそのように示す必要があるというコンセンサスが高まっています。
私が見つけた調査によると、これは私たちが紙のフォームを使用していた昔の時代に由来しているようです。 （紙は木でできた非常に薄くて柔軟性のある素材で、軽量でインクを保存できるため、情報の記録や送信に使用されていました。）この間、特に示されていない限り、すべての質問が必要でした。
したがって、この調査では、必須フィールドにはマークを付けずに、単語「オプション」などのテキストインジケーターを不要なフィールドに提供することが最善であると結論付けています。テキストインジケーターは、翻訳できない記号やアイコンよりもアクセスしやすく、その意味がすぐにはわかりません。
通常、実際に正反対と表示される理由は、HTMLコードが原因であると思われます。 <input/>要素はデフォルトではオプションです。必要になるのは、required属性を追加するまでです。 HTMLフォームの世界では、「必須」はオプトインです。このコーディング規約は、デザインに引き継がれているようです。たぶんCSSがこれを行うことができるためです：
input[required]::after { content: '*'; color: red; }
多分それは常に良いことではありません。
ここにいくつかの読み物があります：
- https://uxdesign.cc/form-field-required-vs-optional-9b4d7cdbf4
- https://blog.optimalworkshop.com/designing-form-fields-optional-versus-required
- https://www.formulate.com.au/blog/required-versus-optional-fields-new-standard
- https://www.fusionbox.com/blog/detail/rethinking-the-red-required-asterisk-for-better-form-ux/599/
そもそも、読み取り専用データをフィールドの一部にするつもりはありませんが、本当にmustの場合、読み取り専用フィールドがグレー表示されるという既存のパターンがあります。これは、Microsoft製品、特にWindows 9xでは一般的でした。以下の「ターゲット」フィールドを検討してください。
このパターンは好きではありません。不慣れな（それは表示される慣れていないユーザーに編集機能を提供するだけであり、失敗するだけです）、読みにくい（灰色の泥沼があるため）、通常はテキストが編集可能であることを示唆しています- 時々（あなたの場合、そうではありません）。それでも、それはis必要なことを行う既存の使い慣れたパターンです。
また、私は尋ねなければなりません：なぜ編集を要求すると同時に読み取り専用データを表示しているのですか？ユースケースによっては、ワークフローによってこれが不要になる場合があります（特に、編集を実行する人とデータを読み取る人が実際には同じでない場合）。