ラボ > CSS、HTML：form関連

html フォームの入力項目のグループ化（fieldsetとlegend）

作成日:2017-12-18, 更新日:2018-02-15

fieldsetとlegendのサンプル

フォームの入力項目をグループ化させるときのタグ。アクセシビリティ的には望ましくないんだけど、CSSの設定なしでこういうデザインになるなら・・・アリだな。

基本情報

お名前：
メール：

詳細情報

年齢：
性別：

※このサンプルではbootstrap側のスタイルの適用を打ち消すため、style属性指定している 

<fieldset>
<legend>基本情報</legend>
お名前：<input type="text" />
メール：<input type="text" />
</fieldset>
<legend>詳細情報</legend>
年齢：<input type="text" />
性別：<input type="text" />
</fieldset>

bootstrap利用時のfieldset

▼こんな感じ。

bootstrap利用時のfieldsetのサンプル

お名前：
メール：

bootstrap利用していないときのfieldsetに似せた感じ

<style>
.similarFieldset {
  display: block;
  -webkit-margin-start: 2px;
  -webkit-margin-end: 2px;
  -webkit-padding-before: 0.35em;
  -webkit-padding-start: 0.75em;
  -webkit-padding-end: 0.75em;
  -webkit-padding-after: 0.625em;
  min-width: -webkit-min-content;
  border-width: 2px;
  border-style: groove;
  border-color: threedface;
  border-image: initial;
  
  position: relative;
  margin-top: 1rem;
  padding-top: 2rem;
}
.similarFieldset h3 {
  display: block;
  -webkit-padding-start: 2px;
  -webkit-padding-end: 2px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  
  position: absolute;
  top: -1rem;
  margin: 0;
  padding: 0 0.5rem;
  display: inline-block;
  background-color: #fff;
}
</style>

<div class="similarFieldset">
<h3>基本情報</h3>
お名前：<input type="text" class="form-control" />
メール：<input type="text" class="form-control" />
</div>

※状況に応じてCSSの微調整が必要。

サンプル：fieldsetと同じデザイン