フォームの入力の隣にラベルを配置するにはどうすればよいですか?

フォーム内のラベルの配置

フォームの設計では、入力の横にラベルを配置すると、ユーザーの読みやすさと操作性が向上します。この調整を実現する手順は次のとおりです。

1.固定ラベル幅の決定:

最長のラベル テキストを考慮して、すべてのラベル要素に適切な固定幅を計算します。 CSS の width プロパティを使用してこの幅を設定します。

2.インラインブロック表示:

ラベル要素に表示: インラインブロックを割り当てます。これにより、定義された幅を維持しながら水平方向に整列することができます。

3.テキストの右揃え:

ラベルに text-align: right を設定して、テキストを適切に配置します。これにより、ラベル テキストがラベル要素の右端に配置されます。

実装例:

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text" />
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text" />
</div>
<div class="block">
  <label>Short</label>
  <input type="text" />
</div></code>

次の手順に従うことで、フォーム内のラベルを次のことができます。入力フィールドの隣に正しく配置され、ユーザー エクスペリエンスと読みやすさが向上します。

以上がフォームの入力の隣にラベルを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。