Web標準化越來越受到大家的重視與關注，製作符合Web標準的網頁，往往會遇到form的問題，這一塊的知識很是缺乏，今天的這篇文章向大家介紹了一些form語意結構，希望對大家的CSS佈局有所幫助。
1、使用fieldset和legend標籤
在form中，我們經常會將form中的資訊分組，例如註冊form，我們可能會將註冊資訊分成基本資訊（一般為必填），詳細資訊（一般為可選），那我們如何更好的來實現呢？我們可考慮在form中加入下面兩個標籤：
fieldset：將表單分組，一個表單可以有多個fieldset
legend：說明每組的內容描述
| 以下為引用的內容： <form id="demoform" class="democss" action=""> <fieldset> <legend>Basic Register</legend> <p>First name: <input type="text" name="fname" value="" /></p> …… </fieldset> <fieldset> <legend>Detailed Register</legend> <p>Interest: <input type="text" name="interest" value="" /></p> …… </fieldset> …… </form> |
fieldset預設是有邊框的，而legend預設一般顯示在左上角。但在某些場合或許不願意讓fieldset和legend的預設樣式或預設版面影響設計方案中的美觀。
解決方法：在CSS中將fieldset的border設定為0，legend的display設定為none即可。
2、使用label標籤
我們對form中的文字標籤給定一個label標籤，並使用for屬性使其與表單元件相關聯，效果為單擊文字標籤，而遊標顯示在相對應的表單元件內。
| 以下為引用的內容： <form id="demoform" class="democss" action=""> <fieldset> <legend>Basic Register</legend> <p> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" value="" /> </p> …… </fieldset> <fieldset> <legend>Detailed Register</legend> <p> <label for="interest">Interest:</label> <input type="text" id="interest" name="interest" value="" /> </p> …… </fieldset> …… </form> |
除了以上方法，我們還可以用label套嵌整個表單元件和文字標籤，如：
| 以下為引用的內容： <label for="fname"> First name: <input type="text" id="fname" name="fname" value="" /> </label> |
根據規範，文字會自動與鄰接的表單元件關聯，但遺憾的是－現在主流的瀏覽器IE6並不支援這個特性。
3.使用accesskey和tabindex屬性
網站要兼顧更多情況下的使用，例如沒有遊標設備（如滑鼠）的情況下，要讓使用鍵盤操作也可以完成form的填寫，這時候點擊對於它們來說，已經沒有任何意義。我們這個時候選用label的accesskey（快捷鍵，IE下為alt+accesskey屬性值，FF下為alt+shift+ accesskey屬性值）和tabindex屬性（Tab鍵，tabindex屬性值為順序）添加到表單標籤上，如label，input等。
| 以下為引用的內容： <label for="fname" accesskey="f" tabindex="1" >First name:</label> <input type="text" id="fname" name="fname" value="" /> |
4.使用optgroup標籤
optgroup標籤的作用是在選擇清單中定義了一組選項。我們可以選用optgroup標籤給select元素的options分類，並使用label屬性，屬性值會在下拉清單（select）裡顯示為一個不可選的、縮排標題。注意：optgroup 不支援嵌套。
| 以下為引用的內容： <select name="China"> <optgroup label="Jiangsu"> <option value="nj">Nanjing</option> <option value="sz">Suzhou</option> </optgroup> <optgroup label="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen zhou</option> </optgroup> </select> |
IE6.0 中存在一個小Bug（FireFox 中不存在）：使用鍵盤方向鍵進行選擇時，在IE 中，當選取項目由一個optgroup的選項換成另一個optgroup 的選項時，不會觸發onchange。解決方法是：增加onkeydown 或onkeyup 事件協助解決。
5.使用button標籤
定義與用法
定義為一個提交按鈕。在button元素內你可以放置內容，像是文字（text）或圖片（images）。這就是這個元素和input元素按鈕的差別。
<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button>
button相對於input提供了更多的功能與更豐富的內容。 button將按鈕文字單獨出來，並且可以在button內添加圖片，賦予文字和圖片更多選擇的樣式，使生硬的按鈕變得更生動。
並且使用button標籤將比input按鈕來得更有語義化，簡單的從字面意思也可以理解。