LoginSignup
1
0

More than 3 years have passed since last update.

HTMLのfieldset要素について

Posted at

プログラミング勉強日記

2020年10月14日
HTMLのfieldset要素を初めて知ったのでまとめる。

fieldset要素とは

  • inputタグなど複数ある入力項目をまとめられる

 ウェブのフォーム内のラベル(<label>)のようにいくつかのコントロールをグループ化するために用いる。なので、複数のinputタグなどを項目としてグループ化するための要素である。

fieldsetで使える属性

disabled属性

 グループ化されている内部のすべての入力装置が無効になる。

form属性

 <form>要素のid属性を指定することで<fieldset>要素は中になくてもその一部にできる。

name属性

 グループに関連付けられた名前。

使い方

<form>
  <input type="checkbox">
  <fieldset>
    <input type="radio" name="radiocheck">sample1
    <input type="radio" name="radiocheck">sample2
  </fieldset>
</form>

image.png

<form id="sample">
  <input type="checkbox">
  <fieldset>
    <input type="radio" name="radiocheck">sample1
    <input type="radio" name="radiocheck">sample2
  </fieldset>
  <fieldset disabled="disabled">
    <input type="text">
  </fieldset>
</form>

<fieldset form="sample">
  <input type="submit">
</fieldset>

image.png

参考文献

フィールドセット要素
HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0