网页表单设计实例技巧五则

2016-02-19 18:02 5 1 收藏

下面图老师小编要跟大家分享网页表单设计实例技巧五则,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - Web开发 】

1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如: 

以下为引用的内容:

textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()"请填入你的姓名/textarea

类似的,可以加入代码到input。

2、表单输入单元点击删除:本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如: 

以下为引用的内容:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''" 

点击输入单元后,提示信息会删除,是不是很方便。

3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如: 

以下为引用的内容:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8"

其中"style=***"为左右上下和背景色设置,适用于其它单元。

4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如: 

以下为引用的内容:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px   

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

其中"style=***"为字体和字大小设置。

5、修改表单属性为弹出窗口:大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如: 

以下为引用的内容:
form method=POST action=url target=_blank  

其中"target=_blank"为控制在弹出窗口打开。 网页教学

来源:http://www.tulaoshi.com/n/20160219/1616675.html

延伸阅读
把表单设计得易于输入 你无法确知用户使用的是手机还是电脑在浏览你的网页,输入你的表单,但是它应该对于各种输入设备都足够友好才行。考虑到你的表单可能会是不同类型的键盘输入的,所以你应该根据表单字段属性和检测到的键盘类型,进行适配。 在桌面端,用户应该可以只借助键盘完成整个输入过程,而无需动用鼠标与触控板。完成一...
标签: 软件教程
FineReport是一款报表软件,它的报表操作功能是报表软件中的佼佼者。下面小编就为大家进行介绍一下FineReport简单的一些表单设计功能,希望能帮到大家 新建表单点击文件>新建表单,如下图: 拖入组件 如上图所示的效果图,我们可以看到该表单需要有1个下拉框控件,一个文本控件,以及对应的2个标签控...
标签: Web开发
技巧1 XmlNode.InnerText与.InnerXml的区别是:前者将内容中的和分别变成和,因此,希望将两段 XmlDocument 合并的程序只能使用  XmlDocumentFragment.InnerXml = XmlNode.OuterXml 技巧2 /XPath: string end-with  xsl:for-each select="root/data[substring-after(@name,'.')=  'Text&#...
标签: Web开发
我们都知道,表单是网页的重要组成部分,它是网站与用户进行交互的窗口。然而表单中固定的诸如说明文字、输入框、提交按钮等元素,使得表单设计略显乏味,难有创新,这一点不少Web设计师深有体会。好的Web设计师就是可以在平凡处挖亮点,让表单设计或耳目一新,或整洁素雅。下面就来看这样的15个基于CSS的优秀表单设计。 以下译自: 中文原...
就我自己看到的而言,很多平台的表单页面都存在样式混乱的问题,也许是不关注,还未意识到。下面就我个人理解,对表单设计的经验做些分享,首先什么样的表单才能算的上是好的表单?这个得搞清楚。 先撇开交互和产品,若加上这两点,那有的说了。 1. 能够清晰传递表单信息并使用户快速轻松完成 2. 对于整站而言,能够样式统一减少用户学习成本...

经验教程

909

收藏

14
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部