「html」フィールドセット(fieldset)要素のサンプル

2013年8月19日2021年8月19日

書式
<fieldset>xxx</fieldset>
<fieldset class="xxx">xxx</fieldset>
<fieldset> 要素は、ウェブフォーム内のラベル (<label>) などのようにいくつかのコントロールをグループ化するために使用します。
使用例
1.htmlコード

<form>
  <fieldset>
    <legend>項目選択</legend>

    <input type="radio" id="pjA" name="cator">
    <label for="pjA">項目AA</label><br/>

    <input type="radio" id="pjB" name="cator">
    <label for="pjB">項目BB</label><br/>

  </fieldset>
</form>

2.CSSコード

legend {
    background-color: green;
    color: #fff;
    padding: 4px 7px;
}

.output {
    font:  bold large/120% "ＭＳ 明朝";
}

input {
    margin: .5rem;
}