热搜关键词

微信分销商城

长沙小程序开发

长沙小程序多少钱

企业做网站

建站常识

网站如何设计各种不同功能的按钮

时间：2014-10-13
发布：维讯网络
浏览：1715

[摘要] 每个网站或多或少都会有些按钮，对于不同功能的按钮，我们根据其功能设计成相应的样式，更能获得良好的用户体验。下面我们就来看下常见的几种按钮该如何设计。动作按钮虽然这个术语很令人困惑，但对表单来说，还有另外一类按钮。与前面所说的单选按钮…

　　每个网站或多或少都会有些按钮，对于不同功能的按钮，我们根据其功能设计成相应的样式，更能获得良好的用户体验。下面我们就来看下常见的几种按钮该如何设计。

　　动作按钮

　　虽然这个术语很令人困惑，但对表单来说，还有另外一类按钮。与前面所说的单选按钮和复选框不同，这些特殊类型的表单控件可以立即发生作用，但是它们的效果无法保留，而且它们直接影响整个表单的内容，而不是只影响单独一个字段的值。

　　这些“动作(action )”按钮(目前还没有一个更好的术语来描述它们)包括提交按钮、重置按钮和一些可单击的图像按钮。当用户选择这些按钮后，提交按钮和图像按钮会让浏览器将所有表单的参数都提交给表单处理服务器。一个通常意义上的按钮不会提交表单，但是可以用来激活一个applet，以操作或验证表单。重置按钮则可以在本地发生作用，将部分填完的表单变回它原来的模样。

　　提交按钮

　　顾名思义，提交按钮(submit button, )会启动将表单数据从浏览器发送给服务器上的提交过程。一个表单中可以有多个提交按钮。也可以利用表单按钮的提交类型设置n~和value属性。

　　对于最简单的提交按钮(这个按钮不包括n~或value属性)来说，浏览器会显示一个小的长方形或椭圆形，上面有默认的标记“Submit(提交)”。在其他情况下，浏览器会用你在标签的value属性中设置的文本来标记按钮。如果给出了一个name属性，当浏览器将表单信息发送给服务器时，也会将提交按钮的value属性的值添加到参数列表中。这一点非常有帮助，因为它提供了一种方法来标识表单中被单击的那一个按钮，这样就可以用一个简单的表单处理应用程序来处理多个不同表单中的某个表单。

　　重置按钮

　　表单按钮的重置(reset)类型几乎是不言而喻的:它允许用户重置表单中的所有元素，也就是清除或设置某些默认值。与其他按钮不同，重置按钮不会激活表单处理程序。相反，浏览器将完成所有重置表单元素的工作。服务器永远不会知道(或者在这种情况下是关心)用户是否或者何时单击了重置按钮。

　　默认情况下，浏览器会显示一个标记为“Rese“重置)”的重置按钮。你可以在value属性中指定自己的按钮标记，改变默认设置。

　　定制图像按钮

　　表单元素的image类型会创建一个定制按钮，这个按钮是个可单击的图像。这是一个用特定图像生成的特殊按钮，当用户单击该按钮后，浏览器会将表单提交给服务器，同时在表单的参数列表中包括鼠标指针所在位置的“x,y”坐标，这与鼠标敏感图像映射非常相似。

　　除图像文件的URL之外，图像按钮还需要一个src属性，还可以包括一个name属性和一个针对非图形浏览器的描述性alt属性。虽然HTML 不赞成使用align属性，我们还是可以使用这个属性来控制图像在当前文本行中的对齐方式。如果有边框的话，可以使用border属性来控制边框的宽度，浏览器会像

　　标签中的border属性那样，在边框周围放置表单图像(IE浏览器不会在表单的图像元素周围放置边框)。

　　用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送给服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。这些数值会被分别赋予name属性中指定的名称，后面分别带有.x和.Y。这样，如果有人单击第一个示例中指定的图像，浏览器就会把名为map.x和map.y的参数发送给服务器。

　　图像按钮的行为与鼠标敏感图像映射(useznaps)一样，而且与程序或处理图像映射的客户端标签也一样，表单处理程序可以利用“x,y”鼠标指针参数来选择特殊的动作方向。如果需要额外的表单信息来处理用户请求的话，就应该采用图像按钮。如果你需要的就是一个图像映像链接，使用鼠标敏感图像映射就可以了。鼠标敏感图像还有一些额外的好处，它可以在服务器端支持在图像中自动检测形状选择，这样可以在图像上设置一组可选择的形状区域。带有图像的按钮需要你自己写一些代码，这些代码将决定用户应该单击图像的什么位置，以及服务器如何将这个位置转换成适当的操作。奇怪的是，HTML 4和XHTML标准允许用户对图像按钮使用usem}p属性，但没有解释清楚如果这样应用的话，会使它和服务器通常处理鼠标位置的“x, y”参数发生冲突。我们建议读者不要混用这两者，最好在表单外使用鼠标敏感图像，而在表单内采用图像按钮。

　　单击按钮

　　使用标签(或是描述的标签)可以生成一个供用户单击的按钮，但这个按钮不能提交或重置表单。可以用value属性来设置按钮上的标记。如果指定了name属性，则会把提供的值传递给表单处理程序。

　　读者可能想知道这种按钮会提供什么值除非当用户和按钮交互时，使用一小段JavaScript程序给出了一个或多个事件属性，否则的话，几乎不提供任何值。因此，经过授权的通常按钮可以用来验证表单内容、更新字段、对文档进行操作，也可以激活所有客户端的活动。

　　单个表单中的多个按钮

　　在一个表单中可能有多个相同或不同类型的按钮。例如，甚至是简单表单中也会既有重置按钮又有提交按钮。为了区分它们，要确保每个按钮都有一个不同的value属性，浏览器就用这个value属性作为按钮的标记。根据编制表单处理程序的方法，可以为每个按钮设置不同的name属性，但是，通常情况下，为所有作用相似的按钮取相同的名称，并让按钮处理子程序根据值来对它们进行分类，这样会更方便一些。

关键词：

上一篇：盘点网站设计色彩搭配原理

下一篇：盘点网站设计色彩搭配原理