Webで混在する読み取り専用フィールドと読み取り/書き込みフィールドを表示する最良の方法
5つのセクションとほぼ30のテキストフィールドを持つWebページフォームがあります。そのうち15個は読み取り専用で、残りは読み書き可能です。フォームはマテリアルデザインに組み込まれています。
私の場合、セクション1では、3つの読み取り/書き込みフィールドと10の読み取り専用フィールドがあります。
マテリアルデザインで読み取り専用フィールドを表示しようとしましたが、見栄えがよくありません。
フォームの読み取り専用フィールドと読み取り/書き込みフィールドの最適な組み合わせの例はありますか？
ベストプラクティスは何ですか？
フォーム全体がマテリアルデザインで見栄えがよくありません。マテリアルデザインはウェブには合わないと思います。モバイルの場合は見た目は良いかもしれませんが、ウェブではそうではありません。
読み取り専用フィールドを単なるテキストとして表示することを検討しましたか？
あいまいさは、見た目はいくつかの機能を持つフィールドを使用することに起因します。プレーンテキストとテキストフィールドは別の見た目になるため、人々はそれらが異なるように機能すると想定します。
John Doe
生年月日：1-2-1934
出身地：イーストウェスタートン
好きな食べ物：| パンケーキ|
お気に入りのストア：| [〜＃〜] ihop [〜＃〜]|
これまでに行ったことを示しておらず、ヘルパーが明確にするために適切な形でそれらを表していない場合でも、ここではあなたのケースに役立つと思われる簡単な解決策を示します。
ステッパーがあり、horizontal/vertical/linearまたはnon-linear。
読み取り専用フィールドを無効な状態で表示します！
1-無効な状態で読み取り専用フィールドを表示すると、それらが編集不可能であることを示します。
2-Grouping：コンテキストに応じて、フィールドをグループに表示したり、関連フィールドをグループ化したりできます NNG Grouping Form Elements ... 。
3-場所：コンテキストとコンテンツに応じて、各セクションの最初または最後にグループとして読み取り専用フィールドを表示できます。
ユーザーが残りのテキストフィールド（読み取り/書き込みフィールド）に入力する前に最初に読み取る必要がある情報が含まれている場合、読み取り専用フィールドfirstを表示します）。
フォーカスがユーザーが入力する必要のあるフィールドにあり、それらの読み取り専用フィールドが単なる情報である場合、読み取り専用フィールドlastを表示しますユーザーが残りを記入する前に、最初に読む必要はありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
