首頁  >  文章  >  web前端  >  fieldset標籤、legend標籤

fieldset標籤、legend標籤

巴扎黑
巴扎黑原創
2017-06-27 11:53:482879瀏覽

在form表單中,我們可以將form中的資訊分組歸類,如登錄表單的form,我們可以將註冊資訊分成
    基本資料(一般為必填)
    詳細資料(一般為可選)
  那我們如何更好的來實現呢?我們可以考慮在表單form中加入下面兩個標籤:
    fieldset:將表單分組,一個表單可以有多個fieldset。
    legend:說明每組的內容描述。

  我們看下面的程式碼:


#Example Source Code [www.52css.com]



Basic Register
Basic Register<#legend>
Basic Register<#/legend>
Basic Register<

First name: 


...


Detailed Register

Interest: 
...

...


  fieldset預設是帶邊框的,而legend預設一般顯示在左上角。但在某些頁面中我們不願意讓fieldset和legend的預設樣式或預設佈局影響設計方案中的美觀。解決方法是在CSS中將fieldset的border設定為0,legend的display設定為none就可以了。

◆ label標籤
  label標籤大家應該都不陌生,我們對form表單中的文字標籤給定一個label標籤,並使用for屬性使其與
表單元件
關聯起來,效果為點選文字標籤,遊標顯示在相對應的表單元件內了。

  我們看下面的程式碼:


#Example Source Code

[www.52css.com]




Basic Register
Basic Register<#legend>
Basic Register<#/legend>
Basic Register<


First name:


...


Detailed Register
Detailed Register
##

Interest: 



...

...


  除了上述方法以外我們也可以用label標籤套嵌整個表單元件和文字標籤,看下面的程式碼:



Example Source Code

[ www.52css.com]


First name:


  根據規範,文字會自動與鄰接的表單元件關聯,但遺憾的是主流瀏覽器IE6並不支援這個特性。

◆ accesskey屬性、tabindex屬性


  網站要兼顧更多瀏覽環境下的正常使用,例如沒有遊標裝置(如滑鼠)的情況下,要讓使用鍵盤操作也可以完成form表單的填寫,這時候點擊對它們來說,已經沒有任何意義。我們這個時候選用label的accesskey(快捷鍵,IE下為alt+accesskey屬性值,FF下為alt+shift+accesskey屬性值)和tabindex屬性(Tab鍵,tabindex屬性值為順序)添加到表單標籤上,如label,input等。

  我們看下面的程式碼:

#############Example Source Code ###[www.52css.com]######


First name:


#◆ optgroup標籤

  optgroup標籤的作用是在選擇清單中定義了一組選項。我們可以選用optgroup標籤給select元素的options分類,並使用label屬性,屬性值會在下拉清單(select)裡顯示為一個不可選的、縮排標題。請注意optgroup不支援嵌套。

  我們看下面的程式碼:


#Example Source Code [www.52css.com]



Nanjing##< ;option value="sz">Suzhou
 


Hangzhou> /option>
Wenzhou


  IE6中存在一個小Bug(FireFox中沒有問題):使用鍵盤方向鍵進行選擇時,在 IE 中,當選取項目由一個optgroup的選項換成另一optgroup 的選項時,不會觸發onchange。解決方法是增加 onkeydown 或 onkeyup 事件可以協助解決。

◆ button標籤

  我們定義為一個提交按鈕。在button元素內你可以放置內容,例如文字(text)或圖片(images)。這就是這個元素和input元素按鈕的差別。


Example Source Code [www.52css.com]


  button標籤相對於input提供了更多多的功能與更豐富的內容。 button將按鈕文字單獨出來,並且可以在button內添加圖片,賦予文字和圖片更多可以選擇的樣式,使生硬的按鈕變得更加生動、靈活。並且使用button標籤將比input按鈕來得更有語義化,簡單的從字面意思也可以理解。

以上是fieldset標籤、legend標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn