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

____Vanty

____Vanty

2016-02-19 18:02

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

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://m.tulaoshi.com/webkaifa/)

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

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

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

以下为引用的内容:

(本文来源于图老师网站,更多请访问http://m.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://m.tulaoshi.com/webkaifa/)

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

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

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

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

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

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

展开更多 50%)
分享

猜你喜欢

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

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

CSS教程:网页表单设计技巧

Web开发
CSS教程:网页表单设计技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

浅议Web网页Form表单设计技巧

Web开发
浅议Web网页Form表单设计技巧

浅谈网页用户体验中的表单设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈网页用户体验中的表单设计技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

优化网页表单设计的输入体验

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
优化网页表单设计的输入体验

详细解析网页表单设计那些事

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页表单设计那些事

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

HTML表单标记教程(5):文字域标记<TEXTAREA>

HTML表单标记教程(5):文字域标记<TEXTAREA>

Win10双显卡切换不了

Win10双显卡切换不了
下拉加载更多内容 ↓