iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

重新學習網頁設計系列 第 7

DAY 7. HTML5 表單群組 Fieldset

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

fieldset

fieldset可將表單form關聯元素inputselect..群組化。

Attributes

  • disabled 禁用filedset元素內所有input、buttonform相關元素
  • form 所屬表單formid
  • 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裡頭的元素
只需要控制fieldsetdisabled與否即可,就連submitbutton也不例外
並且在範例中特意地將formdisable設為none強調完全隱藏表單元素
但我們依然可以使用fieldsetbutton搭配屬性formsubmit該表單。

補充說明

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


上一篇
DAY 6. CSS 選擇器 Selector (實際範例)
下一篇
DAY 8. JavaScript and Me
系列文
重新學習網頁設計30

尚未有邦友留言

立即登入留言