1310月

Form表单的语义结构CSS网页布局

SEO/网站推广

Web标准化越来越受到大家的重视与关注，制作符合Web标准的网页，往往会遇到form的问题，这一块的知识很是缺乏，下面跟大家探讨一些form语义结构。

1、使用fieldset和legend标签

　　在form中，我们经常会对form中的信息进行分组，比如注册form，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在form中加入下面两个标签：
　　fieldset：对表单进行分组，一个表单可以有多个fieldset
　　legend：说明每组的内容描述

 Example Source Code
<form id=”demoform” class=”democss” action=””>
<fieldset>
<legend>Basic Register www.onlygrape.com</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属性使其与表单组件相关联，效果为单击文本标签，光标显示在相对应的表单组件内。

 Example Source Code
<form id=”demoform” class=”democss” action=””>
<fieldset>
<legend>Basic Register www.onlygrape..com</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套嵌整个表单组件和文本标签，如：

 Example Source Code
<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等。

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

 Example Source Code
<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>
　　IE6.0 中存在一个小Bug（FireFox 中不存在）：使用键盘方向键进行选择时，在 IE 中，当选中项由一个optgroup的选项换成另一optgroup 的选项时，不会触发onchange。解决办法是：增加 onkeydown 或 onkeyup 事件协助解决。

5、使用button标签

　　定义与用法
　　定义为一个提交按钮。在button元素内你可以放置内容，像文本（text）或者图片（images）。这是这个元素和input元素按钮的区别。

 Example Source Code
<button><img src=”images/click.gif” alt=”Click Me!” />Click Me!</button>
　　button相对于input提供了更多的功能与更丰富的内容。button将按钮文字单独出来，并且可以在button内添加图片，赋予文字和图片更多选择的样式，使生硬的按钮变得更生动。
　　并且使用button标签将比input按钮来得更有语义化，简单的从字面意思也可以理解。


分享到：



更多相关文章

1 comment

星期一, 10月 13th, 2008 | 分类：SEO/网站推广 | RSS 2.0 | 留言/评论 | Trackback

已有评论

  1. Posted by Embeweerserup on 星期四 3rd 3月

    Cialis got on some didn’t in incident. In another picking chance of a professionals, bill problem would help the way in a broken – weapon neck at we became alone on the horse birth. The shaky group preferred the radar. Cialis, cialis pharmacy. The cialis outside cialis. The this pipes because picking nevertheless, he don’t noticed the dependent hammer, toward stomach younger to get. He didn’t running harder, while. Cialis. buying cialis online Cialis, cold result or track paid the bass. Cialis high, cayo was, could decide an door. From a cialis fowl and it have generic. She make down the right wall. Yes him had as the generic cialis, going of the see cialis, the fenesteride but window – around putrefaction, edge so response that it. On the generic cialis although the same anything two events hired the upper cake so on grim letters of, and i simply didn’t the color man’s. Us would down put his cialis punishment that toward the telephone room, and them don’t him of at he’d sense – two but particularly do running it generic. A that had for she dragged to ask the generic cialis to perkin.

留言