Dreamweaver中巧用标签label增强用户体验

Dreamweaver是一款功能强大的网页制作工具，很多新手只知道一点皮毛就认为它一般般，不注重一些细节功能问题。网站与用户在交互过程中一个不可或缺的环节就是收集数据，包括评价、投票、和用户注册等，而用户注册则是网站交互的重中之重，所以表单的效果和用户体验是十分重要的，为了提高这些表现，网页设计师们没少在表单上下功夫，他们甚至连一个小小的细节都不会放过；下面我们来看一个关于Dreamweaver中label标签使用的一个小细节。

      今天这篇文章将讲解一下如何用label标签和for属性增强表单制作的用户体验效果，其实往简单里说就是利用label、for这两个标签扩大鼠标的可点击范围，让用户用起来更舒服。

      如图一所示，使用label标签后，点击图中1和2两个位置都可以选中单选框，而如果不使用label标签只能点击图中1处才能选中单选框，可选取范围明显比使用label标签小了很多，所以使用label标签更有利于增强用户体验。那么它是怎样制作出来的呢？下面我就开始讲解。

      从Dreamweaver8版本开始，就对label标签的使用提供了很便捷的操作支持，只需要在插入表单元素的时候选择是否使用就可以了。

       打开Dreamweaver软件，新建一个空白页面，然后点击工具栏中的插入“单选按钮”工具，如图二中位置，然后在弹出的对话框中进行选择。

    “标签文字”是出现在单选按钮边的文字，也就是选项名；

    “样式”中有三个选项，第三项无标签标记就是最古老的方式，必须点中单选按钮才可以选中，不再推荐使用；
       第一项用标签标记环绕，选中此项，在插入页面的源代码中label标签是环绕在input标签之外的，如图四中2处所显示的样子，这个选项只在Firefox、IE7以上版本等现代浏览器中可以使用，IE6对它是不支持的，所以也不建议使用；
       而第二种使用“for”属性附加标签标记在使用后，在源代码中input和label是分列出来的，如图四中1处的显示效果，而且所有浏览器对它都有很好的支持，所以强烈推荐使用此方法。

    “样式”下的“位置”选项所控制的是提示文字（即选项名称）在按钮（输入框）出现的位置是前还是后，当选择在表单项后时，代码lable标签也会插入在input后面，如图四中1处所示，反之在前面。

      在这几项选择完毕后点击确定，随即弹出一个对话框询问“是否添加表单标签”，点击“是”就是在所添加的表单项外添加了一个表单域，即form标签，如图四中的<form>……</form>代码部分。

      添加完毕，按F12键预览一下，鼠标移到到文字上时就已经有了选取范围的提示，点击就能选中了。其实增强用户体验很多都是细节问题，做起来也是这么简单。我这里只用单选按钮做例子，同理，复选按钮、输入框等表单项都可以使用此方法，自己试试看吧。