🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSフォームレイアウト：form-groupを活用した入力項目のグループ化

📝 使用用途

このテンプレートは、フォーム内の入力項目を整理して、視覚的に整然としたレイアウトを作成するために使用します。form-groupクラスを使用して、関連する項目をグループ化し、ユーザーの入力体験を向上させることができます。

📘 解説

フォーム内で多くの入力項目を扱う際、関連項目をグループ化して表示することが重要です。form-groupクラスを使用することで、フォームの各項目を整然とレイアウトし、ユーザーがどこに何を入力すれば良いかを直感的に理解できるようになります。

例えば、住所や個人情報などの関連項目を一つのグループにまとめることで、ユーザーは入力するべき情報を素早く理解し、効率よくフォームを記入できます。

UX向上のためのポイント

🔹 部分コード

<div class="form-group">
      <label for="name">名前</label>
      <input type="text" id="name" name="name" />
    </div>
    <div class="form-group">
      <label for="email">メールアドレス</label>
      <input type="email" id="email" name="email" />
    </div>

💻 完全動作コード

<html>
  <head>
    <style>
      .form-group {
        margin-bottom: 15px;
      }

      .form-group label {
        font-size: 14px;
        margin-bottom: 5px;
        display: block;
      }

      .form-group input,
      .form-group select {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
      }

      .form-group input[type="submit"] {
        width: auto;
        cursor: pointer;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
      }

      .form-group input[type="submit"]:hover {
        background-color: #45a049;
      }
    </style>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="name">名前</label>
        <input type="text" id="name" name="name" />
      </div>
      <div class="form-group">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" />
      </div>
      <div class="form-group">
        <input type="submit" value="送信" />
      </div>
    </form>
  </body>
</html>

関連テンプレート