簡單form標準化實例――語義結構

2019-11-21 02:16:02

字體：大中小

來源：轉載

供稿：網友

1、使用fieldset和legend標簽

在form中，我們經常會對form中的信息進行分組，比如注冊form，我們可能會將注冊信息分組成基本信息（一般為必填），詳細信息（一般為可選），那我們如何更好的來實現呢？我們可考慮在form中加入下面兩個標簽：

復制代碼代碼如下:

fieldset：對表單進行分組，一個表單可以有多個fieldset 
legend：說明每組的內容描述

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

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 不支持嵌套。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

IE6.0 中存在一個小Bug（FireFox 中不存在）：使用鍵盤方向鍵進行選擇時，在 IE 中，當選中項由一個optgroup的選項換成另一optgroup 的選項時，不會觸發onchange。解決辦法是：增加 onkeydown 或 onkeyup 事件協助解決。

5、使用button標簽

復制代碼代碼如下:

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.

定義與用法
定義為一個提交按鈕。在button元素內你可以放置內容，像文本（text）或者圖片（images）。這是這個元素和input元素按鈕的區別。

復制代碼代碼如下:

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

button相對于input提供了更多的功能與更豐富的內容。button將按鈕文字單獨出來，并且可以在button內添加圖片，賦予文字和圖片更多選擇的樣式，使生硬的按鈕變得更生動。

并且使用button標簽將比input按鈕來得更有語義化，簡單的從字面意思也可以理解。

上一篇：根據判斷瀏覽器類型屏幕分辨率自動調用不同CSS的代碼

下一篇：關于表單的兩點交互體驗改進技巧