labelタグ部分とinputタグ部分を改行して表示するときの方法

Question

問い合わせフォームの作成時に、ラベルを用いたインプットフォームの表示を縦にするには、どの方法が一番最適なのかと思い質問させていただきました。

<form>
 <label for="form_1">hoge</label><br>
 <input type="text" id="form_1" name="hoge" />
</form>

現状では、上記の方法を用いていますが、他にはどんな方法があるのでしょうか？
よろしくお願いします。

Answer 1

label, input {
  display: block;
}

もしくは、

<form>
  <p><label for="form_1">hoge</label></p>
  <p><input type="text" id="form_1" name="hoge" /></p>
</form>

下記を判断基準として、どちらを採用するか決めます。

• 段落(p要素)なのかそうでないのか
• 製作者スタイルシート無効でどのように描画させるのか

Re: afro_turtle さん

Comments

[退会済みユーザー]

段落かどうか？という点でピンときました。
ありがとうございました。

Answer 2

forを設定したlabelにblock属性をつけてはどうでしょうか?

label[for]{display:block;}

<form>
<label for="form_1">hoge</label>
<input type="text" id="form_1" name="hoge" />
</form>