fieldset標籤、legend標籤

在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]

Click Me!

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

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