如何制作div css保持xhtml語義結(jié)構(gòu)的表單？_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
◆ fieldset標簽、legend標簽

　　在form表單中，我們可以對form中的信息進行分組歸類，如注冊表單的form，我們可以將注冊信息分組成
　　　　基本信息（一般為必填）
　　　　具體信息（一般為可選）
　　那我們?nèi)绾胃玫膩韺崿F(xiàn)呢？我們可考慮在表單form中加入下面兩個標簽：
　　　　fieldset：對表單進行分組，一個表單可以有多個fieldset。
　　　　legend：說明每組的內(nèi)容描述。

　　我們看下面的代碼：

示例代碼 [www.wf0088.com]

<form id="wwwmb5ucom" class="democss" action="www.wf0088.com">
<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的默認樣式或默認布局影響設(shè)計方案中的美觀。解決方法是在CSS中將fieldset的border設(shè)置為0，legend的display設(shè)置為none就可以了。

◆ label標簽

　　label標簽大家應該都不生疏，我們對form表單中的文本標簽給定一個label標簽，并使用for屬性使其與表單組件關(guān)聯(lián)起來，效果為單擊文本標簽，光標顯示在相對應的表單組件內(nèi)了。

　　我們看下面的代碼：

示例代碼 [www.wf0088.com]

<form id="wwwmb5ucom" class="democss" action="www.wf0088.com">
<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標簽套嵌整個表單組件和文本標簽，看下面的代碼：

示例代碼 [www.wf0088.com]

<label for="fname">
First name:<input type="text" id="fname" name="fname" value="" />
</label>

　　根據(jù)規(guī)范，文本會自動與鄰接的表單組件關(guān)聯(lián)，但遺憾的是主流瀏覽器IE6并不支持這個特性。

◆ accesskey屬性、tabindex屬性

　　網(wǎng)站要兼顧更多瀏覽環(huán)境下的正常使用，比如沒有光標設(shè)備（如鼠標）的情況下，要讓使用鍵盤操作也可以完成form表單的填寫，這時候點擊對于它們來說，已經(jīng)沒有任何意義。我們這個時候選用label的accesskey（快捷鍵，IE下為alt accesskey屬性值，F(xiàn)F下為alt shift accesskey屬性值）和tabindex屬性（Tab鍵，tabindex屬性值為順序）添加到表單標簽上，如label，input等。
　　我們看下面的代碼：

示例代碼 [www.wf0088.com]

<label for="fname" accesskey="f" tabindex="1" >
First name:
</label>
<input type="text" id="fname" name="fname" value="" />

◆ optgroup標簽

　　optgroup標簽的作用是在選擇列表中定義了一組選項。我們可以選用optgroup標簽給select元素的options分類，并使用label屬性，屬性值會在下拉列表（select）里顯示為一個不可選的、縮進標題。請注重optgroup不支持嵌套。

　　我們看下面的代碼：

示例代碼 [www.wf0088.com]

<select name="wwwmb5ucom">
<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">Wenzhou</option>
</optgroup>
</select>

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

◆ button標簽

　　我們定義為一個提交按鈕。在button元素內(nèi)你可以放置內(nèi)容，例如文本（text）或者圖片（images）。這是這個元素和input元素按鈕的區(qū)別。

示例代碼 [www.wf0088.com]

<button>
<img src="images/click.gif" alt="Click Me!" />Click Me!
</button>

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