你的位置:创意公社- ideaer >> 百科 >> 网站设计 >>详细内容 在线投稿

网页设计中个性化表单五技巧

打印 发布者:ns2502
热度673票  浏览342次 【共0条评论】【我要评论 时间:2010年11月09日 18:27
创意公社- ideaer8f5E&LU g&q-`4E

想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧:创意公社- ideaer7?EPn#Xa

创意公社- ideaeri:v6[P3hU

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

创意公社- ideaer U3E:^nP

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>

yMl^E"Y9|7g0 创意公社- ideaerM-gw*U0|wN!t!zS f{

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

u3e8o[-i R-B0 创意公社- ideaerk1@:G K g9T G

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

6R%x5`ZL{W0

J,q2b@Dr0<input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=">

E2e8B{K:a m(Z$t0 创意公社- ideaer[,r]e$Z i~

  点击输入单元后,提示信息会删除,是不是很方便。创意公社- ideaerXA+l7c0c@ p

创意公社- ideaerq u[2F t

  3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如:创意公社- ideaer,BK3~9mTk.\

G!Q-\7IhS0<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">创意公社- ideaerjs4gkaE%V4O3M6g_ Z

[zAw#i"n0  其中"style=***"为左右上下和背景色设置,适用于其它单元,请读者亲自试试。

,c IT"m`?;w0 创意公社- ideaer PsSUU^

  4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如:创意公社- ideaerGo _CqR.dA

创意公社- ideaer6]J0n8UJ3s^"gn

<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px >

!T _,ph~%H'Z^vF0 创意公社- ideaer _;kpHo|H

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

\.c.Q)U Um)J'j1Q8T4av0

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

$|S7N _(d0 创意公社- ideaer6Y:n D+x y.a

<form method=POST action=url target=_blank>

o L%}+G#mY0 创意公社- ideaer*tDrT.j{%l V _

  其中"target=_blank"为控制在弹出窗口打开。创意公社- ideaer:I-e\ K0k8r4i+wyJ

顶:19
上一篇 下一篇
发表评论
换一张

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。

查看全部回复【已有0位网友发表了看法】