网站首页  |   业界社区  |  电信社区  |  技术社区   |  极客社区  |  游戏社区  |  生活社区   |   科技博客  |   同事录
TechWeb-技术社区


标题: [转贴] 个性化表单五技巧
charles
TW版主
Rank: 7Rank: 7Rank: 7


UID 19414
精华 26
积分 20685
帖子 12813
阅读权限 100
注册 2006-10-17
状态 离线
发表于 2008-3-27 15:07 资料 短消息 加为好友
个性化表单五技巧

想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧:
*v9q4r5r%m6E2V,Rtech.techweb.com.cn
3U%J h3a.D:m-E*H6f,O&T  1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如:
.Y)f5P+~:X3]/c.Z6]tech.techweb.com.cn;[2u'X,@3E.O7G
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>
)E(\&]"X*g,@)lTechWeb-技术社区 H6q*L8} Q
  类似的,可以加入代码到<input>。TechWeb-技术社区"} e4S:c)K Z1V1]
8B0o*?;~'o9g+[,R
  2、表单输入单元点击删除:本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如:
'n6I.N'C5V2v'a/p5~TechWeb-技术社区tech.techweb.com.cn4k1^(C7{9D;O+t
<input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=''">
2_4v+~8\%e.?
6f8o5E5c0w;Q"f1F.D-W程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛  点击输入单元后,提示信息会删除,是不是很方便。2T"x-o-{7s(N5Z5Z
6j.P"p#e3H7d4Z1C"z){3Y'u
  3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如:9N)@'W;K5y8Q3f,R t

;n4R)Z"W8F)l-n g<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">
-w)z+N$o+I%@"XTechWeb-技术社区
*N4]6i%` P(s8w-{1]tech.techweb.com.cn  其中"style=***"为左右上下和背景色设置,适用于其它单元,请读者亲自试试。#b-C3?#d+f,n$J/_
4H&f4~'F;r0r6_"n
  4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如:tech.techweb.com.cn3~'?(J,f;X9A
tech.techweb.com.cn*u8O5_$V.C$Q"_1m#U0K0K)J
<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px > tech.techweb.com.cn-f#a(N;u$t
程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛2o3K!a&D'H s
  其中"style=***"为字体和字大小设置。
o6E4D)o#\9S;ctech.techweb.com.cnTechWeb-技术社区1h&x4V Q;j9i&Y+\
  5、修改表单属性为弹出窗口:大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如:tech.techweb.com.cn$?+`'@)R0U p#d

&t4@)f6f3V"}9u"h<form method=POST action=url target=_blank>
(T1q*q3[$\.V0Vtech.techweb.com.cntech.techweb.com.cn+]1p"r%y&P#H4r {
  其中"target=_blank"为控制在弹出窗口打开。





引用 回复 顶部
查看积分策略说明快速回复主题
选项 标题 Smilies
禁用 URL 识别
禁用 Smilies
禁用 Discuz!代码
使用匿名发帖
使用个人签名
接收新回复邮件通知
内容





当前时区 GMT+8, 现在时间是 2008-11-22 22:52
京ICP证060517号

本论坛支付平台由支付宝提供
携手打造安全诚信的交易社区 Powered by Discuz! 5.5.0 © 2001-2008 Comsenz Inc.
Processed in 0.020213 second(s), 8 queries

清除 Cookies - 联系我们 - TechWeb.com.cn - Archiver - WAP