fieldset是一個新的html元素，用來群組化表單裡的input元素
有了fieldset我們可以很簡單的控制表單內的元素是否disabled而不用一一指派每個input元素
更棒的是我們能夠為fieldset指定目標form元素，因此完全破除了input必須寫在form裡的限制
即便HTML5已經為input新增form這個屬性來指定目標表單form
但有了filedset，我們能夠更加合理的處理群組性的input元素。

fieldset

fieldset可將表單form關聯元素input、select..群組化。

Attributes

• disabled 禁用filedset元素內所有input、button等form相關元素
• form 所屬表單form的id
• name 定義一個名稱給fieldset

除了特定的三個屬性以外，也支援其他全域屬性

Default CSS

fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

範例

html

<fieldset form="signUpForm" disabled>
  <legend>Sign Up</legend>
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <button type="submit" form="signUpForm">Submit</button>
</fieldset>
<button name="editButton" type="button">Edit</button>
<form style="display:none;" id="signUpForm" action="#" method="post"></form>

javascript

document.querySelector('[name="editButton"]')
  .addEventListener('click', event => {
    toggleFormEdit(document.querySelector('[form="signUpForm"]'))
  })

function toggleFormEdit(formElem) {
  const isDisabled = formElem.hasAttribute('disabled')
  const firstInput = formElem.querySelector('input')
  if(isDisabled) {
      formElem.removeAttribute('disabled')
      firstInput.focus()
  } else {
      formElem.setAttribute('disabled', 'disabled')
  }
}

範例 JSBin

範例說明

此範例展示了如何用javascript禁用與啟用fieldset
大家可以注意到，我們不用依序設定fieldset裡頭的元素
只需要控制fieldset的disabled與否即可，就連submitbutton也不例外
並且在範例中特意地將form的disable設為none強調完全隱藏表單元素
但我們依然可以使用fieldset與button搭配屬性form來submit該表單。

補充說明

仔細的讀者可能會發現到fieldset裡的submitbutton依舊加上了屬性form
原因是，雖然改變field的disabled可以一起控制該button是否可以點擊
但button並沒有繼承fieldset的屬性name值，因此還是需要明確指定表單名稱id
順帶一提元素legend用以語易化的表示元素form的title