◆field标签、legend标签

　　在form表单中我们可以对form中信息进行分组归类如注册表单form我们可以将注册信息分组成
　　　　基本信息(般为必填)
　　　　详细信息(般为可选)
　　那我们如何更好来实现呢？我们可考虑在表单form中加入下面两个标签:
　　　　field:对表单进行分组个表单可以有多个field
　　　　legend:介绍说明每组内容描述

　　我们看下面代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<formid=\"www52csscom\"=\"democss\"action=\"www.52css.com\">
<field>
<legend>BasicRegister</legend>
<p>Firstname:<inputtype=\"text\"name=\"fname\"value=\"\"/></p>
...
</field>
<field>
<legend>DetailedRegister</legend>
<p>Interest:<inputtype=\"text\"name=\"erest\"value=\"\"/></p>
...
</field>
...
</form>


　　field默认是带边框而legend默认般显示在左上角但在某些页面中我们不愿意让field和legend默认样式或默认布局影响设计方案中美观解决思路方法是在CSS中将fieldborder设置为0legenddisplay设置为none就可以了

◆label标签

　　label标签大家应该都不陌生我们对form表单中文本标签给定个label标签并使用for属性使其和表单组件关联起来效果为单击文本标签光标显示在相对应表单组件内了

　　我们看下面代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<formid=\"www52csscom\"=\"democss\"action=\"www.52css.com\">
<field>
<legend>BasicRegister</legend>
<p>
<labelfor=\"fname\">Firstname:</label>
<inputtype=\"text\"id=\"fname\"name=\"fname\"value=\"\"/>
</p>
...
</field>
<field>
<legend>DetailedRegister</legend>
<p>
<labelfor=\"erest\">Interest:</label>
<inputtype=\"text\"id=\"erest\"name=\"erest\"value=\"\"/>
</p>
...
</field>
...
</form>


　　除了以上思路方法的外我们还可以用label标签套嵌整个表单组件和文本标签看下面代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<labelfor=\"fname\">
Firstname:<inputtype=\"text\"id=\"fname\"name=\"fname\"value=\"\"/>
</label>


　　根据规范标准文本会自动和邻接表单组件关联但遗憾是主流浏览器IE6并不支持这个特性

◆accesskey属性、tabindex属性

　　网站WebSite要兼顾更多浏览环境下正常使用比如没有光标设备(如鼠标)情况下要让使用键盘操作也可以完成form表单填写这时候点击对于它们来说已经没有任何意义我们这个时候选用labelaccesskey(快捷键IE下为alt+accesskey属性值FF下为alt+sht+accesskey属性值)和tabindex属性(Tab键tabindex属性值为顺序)添加到表单标签上如labelinput等
　　我们看下面代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<labelfor=\"fname\"accesskey=\"f\"tabindex=\"1\">
Firstname:
</label>
<inputtype=\"text\"id=\"fname\"name=\"fname\"value=\"\"/>


◆optgroup标签

　　optgroup标签作用是在选择列表中定义了组选项我们可以选用optgroup标签给select元素options分类并使用label属性属性值会在下拉列表(select)里显示为个不可选、缩进标题请注意optgroup不支持嵌套

　　我们看下面代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code

[www.52css.com]
<selectname=\"www52csscom\">
<optgrouplabel=\"Jiangsu\">
<optionvalue=\"nj\">Nanjing</option>
<optionvalue=\"sz\">Suzhou</option>
</optgroup>
<optgrouplabel=\"Zhejiang\">
<optionvalue=\"hz\">Hangzhou</option>
<optionvalue=\"wz\">Wenzhou</option>
</optgroup>
</select>


　　IE6中存在个小Bug(FireFox中没有问题):使用键盘方向键进行选择时在IE中当选中项由个optgroup选项换成另optgroup选项时不会触发onchange解决办法是增加onkeydown或onkeyup事件可以协助解决

◆button标签

　　我们定义为个提交按钮在button元素内你可以放置内容例如文本(text)或者图片(images)这是这个元素和input元素按钮区别

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<button>
<imgsrc=\"http://www./Files/BeyondPic/2007-5/24/0752416052248735.g\"alt=\"ClickMe!\"/>ClickMe!
</button>


　　button标签相对于input提供了更多功能和更丰富内容button将按钮文字单独出来并且可以在button内添加图片赋予文字和图片更多可以选择样式使生硬按钮变得更加生动、灵活并且使用button标签将比input按钮来得更有语义化简单从字面意思也可以理解