フォーム内の垂直整列フィールドと値

Question

フィールドラベル（フリーテキスト）とフォーム要素（たとえば<input>）をフォーム内で同じに垂直に整列させる最もよい方法と移植可能な方法はありますか？

は、私はラベルのベースと<input>のコンテンツを揃えるか、私はラベルと<input>タグ自体のベースのベースを揃えていますか？いくつかの例も含めることができますか？

クライアントからの具体的な要件はありませんので、業界標準に準拠したいだけです。

ありがとうございました。

Answer 1

@Odedは正しいですが、業界標準はありません。実際、デザイン分野では、どのような基準も非常に主観的です。

、このような位置合わせのいくつかの一般的なパターン（私が頻繁に見てきた、少なくともこれら2）があります

1）。ある行では、labelが残っており、input（またはその他の要素）が右側にあります。デザインに基づいて、その逆も可能です。このような場合には、vertical-align CSSルールを使用するのが便利です。私はベースラインまたはミドルの垂直アライメントを好む。

2）。 labelを対応するフォーム要素の上に置きます。この場合、最も簡単なのは、ラベルにdisplay:blockを使用することです。逆（フォーム要素よりも低いラベル）は、通常、ユーザーフレンドリーではないと考えられます（少なくとも私は本当にそう考えています）。

重要：フォーム要素にid属性を対応するlabelタグにfor属性を使用することを忘れdont't。それは事実、業界標準のようなものです。

Answer 2

"業界標準"はありません。

あなたのデザインは見た目がよくなります。

すべてを「上」に揃える傾向があるので、ラベルにテキスト領域やテキストがたくさんある場合（例：説明テキストが読み込まれている場合など）、どのラベルがどの入力に使用されているかがわかります。