HTMLのfieldset要素とlegend要素を使ったフォームの装飾

Webサイトにはお問い合わせフォームや登録フォーム、ログインフォームなど、フォーム部品を構築することはよくあります。特にお問い合わせフォームは顧客とのコミュニケーションには必要不可欠です。

フォームはわかりやすく使いやすいデザインにすることが重要ですが、HTMLのfieldset要素やlegend要素を使うことで、手軽にフォームを装飾することができます。

HTMLのfieldset要素は、フォーム関連のコントロールやラベルをグループ化するための要素になります。
そしてlegend要素は、fieldset要素で構築したグループの見出しを示す要素となります。
グルーピングできるのもそうですが、この2つの要素のデフォルトのスタイルだけでも見た目を整えることができるので、フォームの装飾にはとても便利なタグとなります。

fieldset要素とlegend要素を使ったフォームの装飾

ここからは、fieldset要素とlegend要素の使い方について、ログインフォームをサンプルに見ていきます。

以下、HTMLのサンプルコードになります。
まずは、通常のシンプルなログインフォームをHTMLで構築してみました。

HTML

<form id="login-form" action="login.php" method="post">
  <div class="form-area">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
  </div>
  <div class="form-area">
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
  </div>
  <input type="submit" value="Login">
</form>

続いてCSS。
CSSではフォーム部品の横幅や余白など、簡単なレイアウト調整だけしておきます。

CSS

#login-form {
  max-width: 600px;
  width: fit-content;
  margin: 1.25rem;
  margin-inline: auto;
  padding: 0 1.25rem;
  .form-area {
    padding: 0 0 0.625rem;
  }
  input {
    display: block;
    &[type="text"], &[type="password"]{
      padding: 0.125rem 0.5rem;
    }
    &[type="submit"] {
      margin: 0.5rem 0 0;
      padding: 0.25rem 1rem;
    }
  }
}

以下、実装結果になります。

ここまではよくあるデザインです、フォームの範囲を含めてわかりやすく装飾したいところです。

上記のHTML構造をベースに、fieldset要素やlegend要素を使うことで、フォーム関連のコントロールやラベルをグループ化して手軽にフォームを装飾することができます。

以下、サンプルコードになります。

HTML

<form id="login-form" action="login.php" method="post">
  <fieldset>
    <legend>Login Info</legend>
    <div class="form-area">
      <label for="username">Username</label>
      <input type="text" id="username" name="username">
    </div>
    <div class="form-area">
      <label for="password">Password</label>
      <input type="password" id="password" name="password">
    </div>
    <input type="submit" value="Login">
  </fieldset>
</form>

追加要素として、フォーム部品をグループ化するために、form要素内のフォームパーツをfieldset要素で囲います。
そしてfieldset要素の開始タグの直後に、legend要素でグループ化したフォームの見出しを構築します。

CSSでは、fieldset要素とlegend要素の余白の調整だけ指定しておきます。

CSS

#login-form {
  max-width: 600px;
  width: fit-content;
  margin: 1.25rem;
  margin-inline: auto;
  padding: 0 1.25rem;
  fieldset {
    padding: 1.25rem;
  }
  legend {
    padding: 0 0.5rem;
  }
  .form-area {
    padding: 0 0 0.625rem;
  }
  input {
    display: block;
    &[type="text"], &[type="password"]{
      padding: 0.125rem 0.5rem;
    }
    &[type="submit"] {
      margin: 0.5rem 0 0;
      padding: 0.25rem 1rem;
    }
  }
}

以下、実装結果になります。

fieldset要素のデフォルトのスタイルは、グルーピングがわかりやすいborderプロパティが適用されているスタイルとなっています。グループ化したい部分を囲うだけなので、HTML構造もごちゃごちゃすることはありません。

legend要素はボーダーに重なるような見出しを構築してくれます。
このデザインは他の要素を使いながら構築すると、positionプロパティなどを使って配置を指定する必要があり少し手間が掛かるでしょう。
legend要素のみで表現できるのは便利ですね。

シンプルな装飾のままでもいいですが、fieldset要素やlegend要素にスタイルを適用することで、デフォルトのスタイルを活用しつつ、手軽にお好みのスタイルにできます。

グループの見出しを中央寄せにしたり、背景色を指定するなど。

CSS

fieldset {
  padding: 1.25rem;
  border: 3px solid #555;
  background-color: #fdd;
}
legend {
  padding: 0 0.5rem;
  margin-inline: auto;
  font-weight: bold;
}

他にも、上部のボーダーだけで装飾するといったことも。

CSS

fieldset {
  padding: 1.25rem;
  border: none;
  border-top: 2px solid #555;
}
legend {
  padding: 0 0.5rem;
  margin-inline: auto;
  font-weight: bold;
}