formを揃えたいです。

Question

現状このようになっているものを、

こんな感じに揃えたいです。

この場合、tableを使って揃えるのがよろしいでしょうか？

<table id="contact_form"> <tr> <th>お名前</th> <td><input type="text" name="name" id="name"></td> </tr> <tr> <th>メールアドレス</th> <td><input type="mail" name="mail" id="mail"></td> </tr> <tr> <th>お問合せ</th> <td><textarea name="inquiry" id="inquiry"></textarea></td> </tr> </table>

今こんな感じで入力しています。

また、tableを使わずに、もっと簡単にできるのがあれば知りたいです。

Answer 1

簡単にdivで囲いましたが、
要は label と input を囲って、
全体を囲うタグがあればよいので
ul li でもOKです。

<div class="wrap">
  <div>
    <label for="name">お名前</label>
    <input type="text" name="name" id="name">
  </div>

  <div>
    <label for="mail">メールアドレス</label>
    <input type="mail" name="mail" id="mail">
  </div>

  <div>
    <label for="inquiry">お問合せ</label>
    <textarea name="inquiry" id="inquiry"></textarea>
  </div>
</div>

位置設定はcssで

.wrap {
/* 外枠からのmarginなどを設定*/
}
div {
  display: flex;
  margin-bottom: 2em;
}
label {
  width: 30%;
}

table より 位置の変更や調整、フォーム部品の追加などがしやすいと思います^^

Answer 2

こんにちは。
サンプルを作ってみました。

サンプル

<div id="contact_form">
  お名前
  <input type="text" name="name" id="name">
  メールアドレス
  <input type="mail" name="mail" id="mail">
  お問合せ
  <textarea name="inquiry" id="inquiry"></textarea>
</div>

#contact_form{
  display: grid;
  grid: auto / 1fr 1fr;
}