Web標準化之form語義結(jié)構(gòu)的實例_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
Web標準化越來越受到大家的重視與關(guān)注,制作符合Web標準的網(wǎng)頁,往往會碰到form的問題,這一塊的知識很是缺乏,今天的這篇文章向大家介紹了一些form語義結(jié)構(gòu),希望對大家的CSS布局有所幫助。
1、使用fieldset和legend標簽
在form中,我們經(jīng)常會對form中的信息進行分組,比如注冊form,我們可能會將注冊信息分組成基本信息(一般為必填),具體信息(一般為可選),那我們?nèi)绾胃玫膩韺崿F(xiàn)呢?我們可考慮在form中加入下面兩個標簽:
fieldset默認是帶邊框的,而legend默認一般顯示在左上角。但在某些場合或許不愿意讓fieldset和legend的默認樣式或默認布局影響設(shè)計方案中的美觀。
解決方法:在CSS中將fieldset的border設(shè)置為0,legend的display設(shè)置為none即可。
2、使用label標簽
我們對form中的文本標簽給定一個label標簽,并使用for屬性使其與表單組件相關(guān)聯(lián),效果為單擊文本標簽,光標顯示在相對應(yīng)的表單組件內(nèi)。
除了以上方法,我們還可以用label套嵌整個表單組件和文本標簽,如:
根據(jù)規(guī)范,文本會自動與鄰接的表單組件關(guān)聯(lián),但遺憾的是——現(xiàn)在主流的瀏覽器IE6并不支持這個特性。
3、使用accesskey和tabindex屬性
網(wǎng)站要兼顧更多情況下的使用,比如沒有光標設(shè)備(如鼠標)的情況下,要讓使用鍵盤操作也可以完成form的填寫,這時候點擊對于它們來說,已經(jīng)沒有任何意義。我們這個時候選用label的accesskey(快捷鍵,IE下為alt accesskey屬性值,F(xiàn)F下為alt shift accesskey屬性值)和tabindex屬性(Tab鍵,tabindex屬性值為順序)添加到表單標簽上,如label,input等。
4、使用optgroup標簽
optgroup標簽的作用是在選擇列表中定義了一組選項。我們可以選用optgroup標簽給select元素的options分類,并使用label屬性,屬性值會在下拉列表(select)里顯示為一個不可選的、縮進標題。注重:optgroup 不支持嵌套。
IE6.0 中存在一個小Bug(FireFox 中不存在):使用鍵盤方向鍵進行選擇時,在 IE 中,當選中項由一個optgroup的選項換成另一optgroup 的選項時,不會觸發(fā)onchange。解決辦法是:增加 onkeydown 或 onkeyup 事件協(xié)助解決。
5、使用button標簽
定義與用法
定義為一個提交按鈕。在button元素內(nèi)你可以放置內(nèi)容,像文本(text)或者圖片(images)。這是這個元素和input元素按鈕的區(qū)別。
button相對于input提供了更多的功能與更豐富的內(nèi)容。button將按鈕文字單獨出來,并且可以在button內(nèi)添加圖片,賦予文字和圖片更多選擇的樣式,使生硬的按鈕變得更生動。
并且使用button標簽將比input按鈕來得更有語義化,簡單的從字面意思也可以理解。
1、使用fieldset和legend標簽
在form中,我們經(jīng)常會對form中的信息進行分組,比如注冊form,我們可能會將注冊信息分組成基本信息(一般為必填),具體信息(一般為可選),那我們?nèi)绾胃玫膩韺崿F(xiàn)呢?我們可考慮在form中加入下面兩個標簽:
示例代碼 [m.dounai2.com]
fieldset:對表單進行分組,一個表單可以有多個fieldset
legend:說明每組的內(nèi)容描述
legend:說明每組的內(nèi)容描述
示例代碼 [m.dounai2.com]
<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>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即可。
2、使用label標簽
我們對form中的文本標簽給定一個label標簽,并使用for屬性使其與表單組件相關(guān)聯(lián),效果為單擊文本標簽,光標顯示在相對應(yīng)的表單組件內(nèi)。
示例代碼 [m.dounai2.com]
<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>
<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套嵌整個表單組件和文本標簽,如:
示例代碼 [m.dounai2.com]
<label for="fname">
First name:
<input type="text" id="fname" name="fname" value="" />
</label>
First name:
<input type="text" id="fname" name="fname" value="" />
</label>
根據(jù)規(guī)范,文本會自動與鄰接的表單組件關(guān)聯(lián),但遺憾的是——現(xiàn)在主流的瀏覽器IE6并不支持這個特性。
3、使用accesskey和tabindex屬性
網(wǎng)站要兼顧更多情況下的使用,比如沒有光標設(shè)備(如鼠標)的情況下,要讓使用鍵盤操作也可以完成form的填寫,這時候點擊對于它們來說,已經(jīng)沒有任何意義。我們這個時候選用label的accesskey(快捷鍵,IE下為alt accesskey屬性值,F(xiàn)F下為alt shift accesskey屬性值)和tabindex屬性(Tab鍵,tabindex屬性值為順序)添加到表單標簽上,如label,input等。
示例代碼 [m.dounai2.com]
<label for="fname" accesskey="f" tabindex="1" >First name:</label>
<input type="text" id="fname" name="fname" value="" />
<input type="text" id="fname" name="fname" value="" />
4、使用optgroup標簽
optgroup標簽的作用是在選擇列表中定義了一組選項。我們可以選用optgroup標簽給select元素的options分類,并使用label屬性,屬性值會在下拉列表(select)里顯示為一個不可選的、縮進標題。注重:optgroup 不支持嵌套。
示例代碼 [m.dounai2.com]
<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">Wenzhou</option>
</optgroup>
</select>
<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.0 中存在一個小Bug(FireFox 中不存在):使用鍵盤方向鍵進行選擇時,在 IE 中,當選中項由一個optgroup的選項換成另一optgroup 的選項時,不會觸發(fā)onchange。解決辦法是:增加 onkeydown 或 onkeyup 事件協(xié)助解決。
5、使用button標簽
示例代碼 [m.dounai2.com]
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.
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元素內(nèi)你可以放置內(nèi)容,像文本(text)或者圖片(images)。這是這個元素和input元素按鈕的區(qū)別。
示例代碼 [m.dounai2.com]
<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button>
button相對于input提供了更多的功能與更豐富的內(nèi)容。button將按鈕文字單獨出來,并且可以在button內(nèi)添加圖片,賦予文字和圖片更多選擇的樣式,使生硬的按鈕變得更生動。
并且使用button標簽將比input按鈕來得更有語義化,簡單的從字面意思也可以理解。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達式替換a標記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-Web標準化之form語義結(jié)構(gòu)的實例。