wulin.comの記事紹介（www.vevb.com）：毎日のWebデザインにおけるフォームデザインに関する簡単な議論。
入力ボックス（入力）は、脳が大きな領域間の関係をうまく処理できるように、グループに論理的に分割する必要があります。 - 「権威あるHTMLガイド」
Webアプリケーションは常にフォームを使用してデータの入力と構成を処理しますが、すべてのフォームが一貫しているわけではありません。入力領域、それぞれのラベル、操作方法、および周囲の視覚要素のアライメントは、ユーザーの動作に多かれ少なかれ影響します。
フォームレイアウト
ユーザーがフォームをできるだけ短くする必要があり、収集されたデータがユーザー（名前、アドレス、有料情報など）に馴染みがあることを考慮すると、垂直に整列したラベルと入力ボックスが最適であると言えます。タグと入力ボックスの各ペアは、両方に近い感覚を与えるために垂直に整列されており、一貫した左アライメントは眼球運動と処理時間を短縮します。ユーザーは、一方向に移動するだけです：ダウン。
このレイアウトでは、太字のラベルが推奨されます。これにより、視覚的な体重が増加し、顕著性が向上します。太字ではない場合、ユーザーの観点からは、タグと入力ボックスのテキストはほぼ同じになります。
フォーム上のデータが馴染みがないか、論理的にグループ化されていない場合（アドレスの複数のコンポーネントなど）、左アライメントタグはフォームの情報を簡単に読み取ることができます。ユーザーは、入力ボックスで思考を中断することなく、左列のラベルを上下に検索するだけです。しかし、このようにして、ラベルとその対応する入力ボックスの間の距離は通常、長いラベルによって延長され、フォームに記入する時間に影響を与える可能性があります。ユーザーは、2つの対応するタグと入力ボックスを見つけるために前後にジャンプする必要があります。
これにより、タグの右に整列したレイアウト、タグと入力ボックスの間の接続をより近くに作成する代替ソリューションが作成されます。しかし、その結果、左側の不均一なブランクとラベルにより、ユーザーはフォームに記入する必要があるものを迅速に取得することが困難になります。西洋諸国では、人々は左から右に書くことに慣れているため、この右側に整合したレイアウトはユーザーにディスレクシアを引き起こします。
視覚的な要素の助けを借りて
ラベルの左彩られたレイアウトの利点があるため（垂直高さを取得して減らすのは簡単です）、その主な欠点（ラベルと入力ボックスの分離）を修正するのは魅力的です。
1つの解決策は、背景色と分割線を追加することです。異なる背景色は、垂直ラベルの列と垂直入力ボックスの列を生成します。ラベルの各セットと入力ボックスは、明確な水平線で区切られています。これは良いように聞こえますが、まだ問題があります。
以前のフォーム（ユーザーの主観的な視覚的区別）を比較すると、これにより、中央の線、背景色のセル、水平線の15の視覚要素が追加されます。これらの要素は、ユーザーの注意をそらし、ユーザーがタグや入力ボックスなどの重要な要素に集中することを困難にします。エドワード・タフテが指摘したように、情報自体に違いがあり、必然的に感覚の違いにつながります。言い換えれば、レイアウトに役に立たない視覚要素は、レイアウトを絶えず混乱させます。左側のタグを閲覧しようとすると、視力が常に中断されていることがわかります。これらの水平線、セル、背景色について考えるために停止します。
もちろん、これは背景の色や線をあきらめることを意味するものではありません。それらは、関連する領域情報を分割するのに非常に効果的です。たとえば、薄い水平線または軽い背景色は、関連するデータと視覚的に組み合わせることができます。背景の色と線は、フォームを区別するメイン操作ボタンに特に効果的です。
一次および二次操作
フォームの主な操作（通常は送信または保存）には、比較的強力な視覚重量が必要です（上記の例では、明るい色調、太字、背景色など）。これは、ユーザーにプロンプトを提供することと同等です。フォームに記入しようとしている/持っている/持っている。
フォームには、継続や返還など、複数の操作がある場合、二次操作の視覚的重量を減らす必要があります。これにより、ユーザーの潜在的な運用エラーのリスクが最小限に抑えられます。
上記のコンテンツはフォームを設計できるようにすることができますが、レイアウト、視覚要素、コンテンツを組み合わせるには、ユーザーテストとデータ分析（完了評価、エラーレポートなど）が必要です。