|
|
在form中，我們經(jīng)常會(huì)對(duì)form中的信息進(jìn)行分組，比如注冊form，我們可能會(huì)將注冊信息分組成基本信息（一般為必填），詳細(xì)信息（一般為可選），那我們?nèi)绾胃玫膩韺?shí)現(xiàn)呢？我們可考慮在form中加入下面兩個(gè)標(biāo)簽：
復(fù)制代碼 代碼如下:
fieldset：對(duì)表單進(jìn)行分組，一個(gè)表單可以有多個(gè)fieldset
legend：說明每組的內(nèi)容描述
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
fieldset默認(rèn)是帶邊框的，而legend默認(rèn)一般顯示在左上角。但在某些場合或許不愿意讓fieldset和legend的默認(rèn)樣式或默認(rèn)布局影響設(shè)計(jì)方案中的美觀。
解決方法：在CSS中將fieldset的border設(shè)置為0，legend的display設(shè)置為none即可。
2、使用label標(biāo)簽
我們對(duì)form中的文本標(biāo)簽給定一個(gè)label標(biāo)簽，并使用for屬性使其與表單組件相關(guān)聯(lián)，效果為單擊文本標(biāo)簽，光標(biāo)顯示在相對(duì)應(yīng)的表單組件內(nèi)。
復(fù)制代碼 代碼如下:
<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套嵌整個(gè)表單組件和文本標(biāo)簽，如：
<label for="fname">First name:<input type="text" id="fname" name="fname" value="" /></label>
根據(jù)規(guī)范，文本會(huì)自動(dòng)與鄰接的表單組件關(guān)聯(lián)，但遺憾的是――現(xiàn)在主流的瀏覽器IE6并不支持這個(gè)特性。
3、使用accesskey和tabindex屬性
網(wǎng)站要兼顧更多情況下的使用，比如沒有光標(biāo)設(shè)備（如鼠標(biāo)）的情況下，要讓使用鍵盤操作也可以完成form的填寫，這時(shí)候點(diǎn)擊對(duì)于它們來說，已經(jīng)沒有任何意義。我們這個(gè)時(shí)候選用label的accesskey（快捷鍵，IE下為alt+accesskey屬性值，F(xiàn)F下為alt+shift+accesskey屬性值）和tabindex屬性（Tab鍵，tabindex屬性值為順序）添加到表單標(biāo)簽上，如label，input等。
復(fù)制代碼 代碼如下:
<label for="fname" accesskey="f" tabindex="1" >First name:</label>
<input type="text" id="fname" name="fname" value="" />
4、使用optgroup標(biāo)簽
optgroup標(biāo)簽的作用是在選擇列表中定義了一組選項(xiàng)。我們可以選用optgroup標(biāo)簽給select元素的options分類，并使用label屬性，屬性值會(huì)在下拉列表（select）里顯示為一個(gè)不可選的、縮進(jìn)標(biāo)題。注意：optgroup 不支持嵌套。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
IE6.0 中存在一個(gè)小Bug（FireFox 中不存在）：使用鍵盤方向鍵進(jìn)行選擇時(shí)，在 IE 中，當(dāng)選中項(xiàng)由一個(gè)optgroup的選項(xiàng)換成另一optgroup 的選項(xiàng)時(shí)，不會(huì)觸發(fā)onchange。解決辦法是：增加 onkeydown 或 onkeyup 事件協(xié)助解決。
5、使用button標(biāo)簽
復(fù)制代碼 代碼如下:
Definition and Usage
Defines a push button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.
定義與用法
定義為一個(gè)提交按鈕。在button元素內(nèi)你可以放置內(nèi)容，像文本（text）或者圖片（images）。這是這個(gè)元素和input元素按鈕的區(qū)別。
復(fù)制代碼 代碼如下:
<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button>
button相對(duì)于input提供了更多的功能與更豐富的內(nèi)容。button將按鈕文字單獨(dú)出來，并且可以在button內(nèi)添加圖片，賦予文字和圖片更多選擇的樣式，使生硬的按鈕變得更生動(dòng)。
并且使用button標(biāo)簽將比input按鈕來得更有語義化，簡單的從字面意思也可以理解。
JavaScript技術(shù)：簡單form標(biāo)準(zhǔn)化實(shí)例――語義結(jié)構(gòu)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
