dw常用代码
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
目录
1.控制横向和纵向滚动条的显隐? (1)
12.添加到收藏夹和设为首页 (2)
21.文字或图片弹出指定大小的窗口 (3)
38.给表格做链接 (6)
47.基本链接样式 (7)
52、日期显示 (8)
js表单验证控制代码大全 (38)
html :超文本标记语言 HyperText Marked Language
DW常用代码
1.控制横向和纵向滚动条的显隐?
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显
--------------------------------------------------------------------------------
2.表格变色
<TD
style="CURSOR: hand">
--------------------------------------------------------------------------------
3.禁止复制,鼠标拖动选取
<body ondragstart=window.event.returnValue=false
oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false> --------------------------------------------------------------------------------
4.普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>
--------------------------------------------------------------------------------
5.iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto"
width="100%" height="100%" frameborder=no ></iframe>
--------------------------------------------------------------------------------
6.IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
--------------------------------------------------------------------------------
7.字号缩放
越来越多的人长时间的泡网,眼镜的普及率也越来越高,让文字大点,让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
--------------------------------------------------------------------------------
8.简单的跳转网页代码
如果你要让页面显示3秒钟之后跳转,可以在html代码的<head></head>部分加上这样的代码:
<meta http-equiv="refresh" content="3; url=">
--------------------------------------------------------------------------------
9.iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。
对跨域引用有权限问题,请查阅其他资料。
<iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%"
height="100%" frameborder=no ></iframe>
--------------------------------------------------------------------------------
10.跳转菜单新窗口
<select name="select" >
<option value="/ie"> Internet Explorer</option>
<option value=""> Microsoft Home</option>
<option value=""> Developer Network</option>
</select>
--------------------------------------------------------------------------------
11.flash透明选项
<param name="wmode" value="transparent">
--------------------------------------------------------------------------------
12.添加到收藏夹和设为首页
<a href=# >设为首页</a>
<a href="javascript:window.external.AddFavorite('/','站长设计网')">收藏本站</a>
--------------------------------------------------------------------------------
13.记录并显示网页的最后修改时间
<script language=JavaScript>
document.write("最后更新时间: " + stModified + "")
</script>
--------------------------------------------------------------------------------
14.节日倒计时
<Script Language="JavaScript">
var timedate= new Date("October 1,2002");
var times= "国庆节";
var now = new Date();
var date = timedate.getTime() - now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
if (time >= 0)
document.write( "现在离"+times+"还有: "+time +"天")
</Script>
--------------------------------------------------------------------------------
15.加在HEAD里
禁止缓存
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
--------------------------------------------------------------------------------
16.让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>"
allowtransparency></iframe>
--------------------------------------------------------------------------------
17.打开窗口即最大化
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
--------------------------------------------------------------------------------
18.加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
--------------------------------------------------------------------------------
19.滚动
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>滚动信息
</marquee>
--------------------------------------------------------------------------------
20.防止点击空链接时,页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记
--------------------------------------------------------------------------------
21.文字或图片弹出指定大小的窗口
在body中加入
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features)
{window.open(theURL,winName,features);}
</script>
弹出代码
<a href="#" target="_self" width="550" height="380" border="0">图片或文字</a>
--------------------------------------------------------------------------------
22.跳转页面代码
<meta http-equiv="refresh" content="5;url=">
--------------------------------------------------------------------------------
23.细线分隔线
<hr noshade size=0 color=#C0C0C0>
--------------------------------------------------------------------------------
24.网页中的自动换行
<td style="word-break:break-all">就搞定了。
完整的是
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
--------------------------------------------------------------------------------
25.消除ie6自动出现的图像工具栏,设置GALLERYIMG属性为false或no .
<IMG SRC="/mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
--------------------------------------------------------------------------------
26.禁止页面正文内容被选取
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return
false">
--------------------------------------------------------------------------------
27.不能点右键,不用CTRL+A,不能复制作!
<body oncontextmenu="window.event.returnValue=false"
onkeypress="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
--------------------------------------------------------------------------------
28.IE浏览器支持一个Body 属性bgproperties,它可以让背景不滚动:
<Body Background="图片文件" bgproperties="fixed">
--------------------------------------------------------------------------------
29.随机变换背景图象(一个可以刷新心情的特效)
<Script Language="JavaScript">
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("<BODY BACKGROUND="+image[number]+">");
</Script>
--------------------------------------------------------------------------------
30.图片表单按钮
<form id="form1" name="form1" method="post" action="">
<img src="/login.gif" width="62" height="22" />
</form>
--------------------------------------------------------------------------------
31.左右阴影背景的CSS定义方法
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}
--------------------------------------------------------------------------------
32.划过链接手型鼠标
style="cursor:hand"
--------------------------------------------------------------------------------
33.如何关闭层
<div id="Layer1"></div>
<a href="#" >关闭层</a>
--------------------------------------------------------------------------------
34.关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
--------------------------------------------------------------------------------
35.如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>
</DIV>
--------------------------------------------------------------------------------
36.进入主页后自动最大化
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
--------------------------------------------------------------------------------
37.凹陷文字
<div
style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:br eak:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样,我凹下去了吧?<br>
你不想试试吗?<br>
<a href="/"></a></font>
</div>
--------------------------------------------------------------------------------
38.运行代码框
<script>
function Preview()
{var TestWin=open('');
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>
--------------------------------------------------------------------------------
38.给表格做链接
<table width="100%" style="CURSOR:hand">
<tr>
<td height="100" bgcolor="f4f4f4"> </td>
</tr>
</table>
--------------------------------------------------------------------------------
39.让弹出窗口总是在最上面
<body onblur="this.focus();">
--------------------------------------------------------------------------------
40.CSS文字阴影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1);
FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}
--------------------------------------------------------------------------------
41.后退&关闭窗口
后退:javascript:history.back(1)
关闭:javascript:window.close();
--------------------------------------------------------------------------------
42.表格透明
style="FILTER: alpha(opacity=72)"
--------------------------------------------------------------------------------
43.如何避免别人把你的网页放在框架中
<script language=“javascript”><!--if (self!=top){top.location=self.location;} -->< /script> --------------------------------------------------------------------------------
44.Alt和Titl e的区别
alt 用来给图片来提示的。
Title用来给链接文字或普通文字提示的。
<a href="#" Title="给链接文字提示">文字</a>
<p Title="给链接文字提示">文字</p>
<img src="图片链接" alt="给图片提示">
--------------------------------------------------------------------------------
45.所有的javascript的调用尽量采取外部调用
<SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT>
--------------------------------------------------------------------------------
46.链接到
response.redirect"login.asp"
location.href="xx.asp"
--------------------------------------------------------------------------------
47.基本链接样式
a:link 表示链接的样式
a:active 表示当前活动连接的样式
a:hover 表示鼠标划过时的样式
a:visited 表示已经访问过的连接的样式
"link-visited-hover-active" 简记为"lvha" 即"love"+"hate"
--------------------------------------------------------------------------------
48.在同一页面设置不同文字链接效果的样式
<style type="text/css">
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
</style>
<a href="#" class="green">文字</a>
--------------------------------------------------------------------------------
49.下拉跳转菜单
<select name=select style="color:#333">
<option>----请选择----</option>
<option value="">站长设计网</option>
<option value="/">Font</option>
</select>
--------------------------------------------------------------------------------
50.select挡住div的解决方法
在div里加入下面的代码,根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0"
style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;">
</iframe>
--------------------------------------------------------------------------------
51.整页的全部链接都_blank 新窗口打开
<base target="_blank">
52、日期显示
<SCRIPT language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(
" 星期日",
" 星期一",
" 星期二",
" 星期三",
" 星期四",
" 星期五",
" 星期六");
document.write(
"<font color=##000000 style='font-size:9pt;font-family: 宋体'> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()+1],
"</font>" );
</SCRIPT>
52、表单大全
一、表单概述
表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问
者的名字和e-mail地址、调查表、留言簿等等。
1、表单的组成
一个表单有三个基本组成部分:
•表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服
务器的方法。
•表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下
拉选择框和文件上传框等。
•表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处
理工作。
为了顾及不同的网页设计工具,本文只讲述代码的设计,不具体讲述操作方法,下
面就是表单的HTML代码设计要点:
1.1 表单标签<form></form>
功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
语法:<FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."
>. . .</FORM>
属性解释见下表:
例如:
<form action="/test.asp" method="post" target="_blank">...<
/form>
表示表单将向/test.asp以post的方式提交,提交的结果在新的页面显示,数据提交的媒体方式是默认的application/x-www-form-urlencoded
方式;
1.2 表单域
表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式:
1.2.1 文本框
文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短
的回答,如姓名、地址等。
代码格式:<input type="text" name="..." size="..." maxlength="..."
value="...">
属性解释:
type="text"定义单行文本输入框;
name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名
称;
size属性定义文本框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
样例1:
样例1代码:
<input type="text" name="example1" size="20" maxlength="15">
1.2.2 多行文本框
也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。
代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"><
/TEXTAREA>
属性解释:
name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二
的名称;
cols属性定义多行文本框的宽度,单位是单个字符宽度;
rows属性定义多行文本框的高度,单位是单个字符宽度;
wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
•默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
•Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,
必须用Return才能将插入点移到下一行;
•Virtual,允许文本自动换行。
当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
•Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
样例2:
样例2代码:
<TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>
1.2.3 密码框
是一种特殊的文本域,用于输入密码。
当访问者输入文字时,文字会被星号或其它
符号代替,而输入的文字会被隐藏。
代码格式:<input type="password" name="..." size="..." maxlength="..."
>
属性解释:
type="password"定义密码框;
name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名
称;
size属性定义密码框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
样例3:
样例3代码:
<input type="password" name="example3" size="20" maxlength="15">
1.2.4 隐藏域
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。
当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器
上。
代码格式:<input type="hidden" name="..." value="...">
属性解释:
type="hidden"定义隐藏域;
name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名
称;
value属性定义隐藏域的值
例如:<input type="hidden" name="ExPws" value="dd">
1.2.5 复选框
复选框允许在待选项中选中一项以上的选项。
每个复选框都是一个独立的元素,都
必须有一个唯一的名称。
代码格式:<INPUT type="checkbox" name="..." value="...">
属性解释:
type="checkbox"定义复选框;
name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名
称;
value属性定义复选框的值
样例4:
样例4代码:
<input type="checkbox" name="yesky" value="09"> <input type="checkbox" name="Chinabyte" value="08">
1.2.6 单选框
当需要访问者在待选项中选择唯一的答案时,就需要用到单选框了。
代码格式:<input type="radio" name="..." value="...">
属性解释:
type="radio"定义单选框;
name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;
value属性定义单选框的值,在同一组中,它们的域值必须是不同的。
样例5:
样例5代码:
<input type="radio" name="myFavor" value="1"> <input type="radio" name="myFavor" value="2">
1.2.7 文件上传框
有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。
访问者可以通过输入需要上传的文件的路径或者点击浏览按
钮选择需要上传的文件。
注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。
表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传
送方式必须设置成POST。
代码格式:<input type="file" name="..." size="15" maxlength="100">
属性解释:
type="file"定义文件上传框;
name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二
的名称;
size属性定义文件上传框的宽度,单位是单个字符宽度;
maxlength属性定义最多输入的字符数。
样例6:
样例6代码:
<input type="file" name="myfile" size="15" maxlength="100">
1.2.8 下拉选择框
下拉选择框允许你在一个有限的空间设置多种选项。
代码格式:
<select name="..." size="..." multiple>
<option value="..." selected>...</option>
...
</select>
属性解释:
size属性定义下拉选择框的行数;
name属性定义下拉选择框的名称;
multiple属性表示可以多选,如果不设置本属性,那么只能单选;
value属性定义选择项的值;
selected属性表示默认已经选择本选项。
样例7:
样例7代码:
<select name="mySel" size="1">
<option value="1" selected></option>
<option value="d2"></option>
</select>
样例8:
Ctrl可以多选
样例8代码:
<select name="mySelt" size="3" multiple>
<option value="1" selected></option>
<option value="d2"></option>
<option value="3"></option>
</select>
1.3 表单按钮
表单按钮控制表单的运作。
1.3.1 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式:<input type="submit" name="..." value="...">
属性解释:
type="submit"定义提交按钮;
name属性定义提交按钮的名称;
value属性定义按钮的显示文字;
样例9:
样例9代码:
<input type="submit" name="mySent" value="发送">
1.3.2 复位按钮
复位按钮用来重置表单。
代码格式:<input type="reset" name="..." value="...">
属性解释:
type="reset"定义复位按钮;
name属性定义复位按钮的名称;
value属性定义按钮的显示文字;
样例10:
样例10代码:
<input type="reset" name="myCancle" value="取消">
1.3.3 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式:<input type="button" name="..." value="..." onClick="...">
属性解释:
type="button"定义一般按钮;
name属性定义一般按钮的名称;
value属性定义按钮的显示文字;
onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为;
样例11:
样例11代码:
<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a
button')">
二、表单外观的美化
很多时候,我们仅仅为了实现数据采集这个功能来使用表单,常看到的表单都是“千人一面”、毫无生气,本专题尝试着来改变这一现象,试图赋予表单一个丰富多彩
的面貌。
表单的外观,也是最为直接的花样,可以通过改变它来实现特效,本文分两个出发点来
讲述:CSS魔法和图像魔法。
1、CSS魔法
CSS,就是大家知道的层叠样式单,它可以定义页面元素的外观,包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等,下面就从这几个方面出发,讨
论怎样将CSS应用到表单中,彻底美化它!
1.1 字体样式的应用
字体样式包括:字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font),具体的定义方法,在这里不详细讲述,可以参考它的资料。
也许你已经注意到,按钮上的文字不漂亮,其实可以通过CSS字体样式来解决,同样地,其它的几个涉及到文字的表单项,例如,文本框、多行文本框、口令框、下拉选
择框都可以应用字体样式。
为了充分展示这些应用,下例特别设计了几种样式,在实际应用中,不必这么凌乱,
灵活运用:
样例12:表单元素的字体样式展示
分析:
•文本框里的文字是加粗的,大小是9pt,字体是宋体,代码:
<input type="text" name="formExam" size="10" maxlength="10"
style="font-family:宋体; font-size: 12px; font-weight: bold" value="
加粗">
•口令框文字是红色的,代码:
<input type="password" name="formExam3" style="font-size: 9pt; color:
#FF0000" size="8" maxlength="8">
•下拉框文字颜色是红色的,字体是Verdana,大小是9pt,代码:
<select name="select" size="1" style="font-family:Verdana,Arial;
font-size: 9pt; color: #FF0000">
<option value="2" selected></option>
<option value="1"></option>
</select>
•多行文本框了的字体是Verdana,有下划线,大小是9pt,代码:
<TEXTAREA name="formExam2" cols="30" rows="3"
style="font-family:Verdana, Arial; font-size: 9pt; color: #000099;
text-decoration: underline" align=right>underline css style<
/TEXTAREA>
•发送1和发送2按钮的文字不同,是因为发送1按钮使用了9pt的宋体文字,
所以比较美观,发送1按钮的代码:
<input type="submit" name="Submit" value="发送1" style="font-family:
宋体; font-size: 9pt;">
小结:只要我们对字体的样式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部引用CSS文件,用到的时候引用
一下就能达到预期的效果。
1.2 背景颜色和图像样式的应用
有很多时候,网页由于颜色的搭配,不得不对表单的背景颜色和图像样式进行设计,背景颜色利用background-color属性,背景图像利用background-image属性,颜色和
图像同样能够得到意想不到的效果。
样例13:表单元素的背景展示
复选单选
分析:
•文本框背景是黑色的,字体是白色的,代码:
<input type="text" name="RedFld" size="10" maxlength="10" style="color:
#FFFFFF; background-color: #000000">
•口令框背景是灰色的,代码:
<input type="password" name="RedFld3" size="10" maxlength="10"
style="background-color: #999999">
•单选和复选按钮的背景是红色的,代码:
<input type="checkbox" name="checkbox" value="checkbox"
style="background-color: #FF0000">
<input type="radio" name="radiobutton" value="radiobutton"
style="background-color: #FF0000">
•下拉选择框的选项是丰富多彩的背景,代码:
<select name="select2" size="1">
<option selected style="background-color: #FF0000"><
/option>
<option style="background-color: #0000CC"></option><option style="background-color: #009900"></option><option style="background-color: #ff33cc"></option>
<option style="background-color: #999999"></option>
</select>
•多行文本框的背景是一个图像,代码:
<TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL"
style="background-image: url(back.gif)"></TEXTAREA>
•submit1按钮的背景是黄色的,代码:
<input type="submit" name="Submit3" value="Submit1"
style="background-color: #FF9900">
•submit2按钮的背景是一个图像,代码:
<input type="submit" name="Submit22" value="Submit2"
style="background-image: url(back.gif)">
小结:用好background-color属性和background-image属性,就可以设计很出
“色”表单了。
1.3 边框样式的应用
也许你觉得表单的边框过于死板,我们能否设计单线条,或者其它的边框样式呢?
当然可以!
和边框有关的属性有:边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-colr、边框宽度 border-width、上边框宽度border-top-width、右边框宽度
border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border,这里不作详细的讲述,请参考有关资料。
样例14: 8种边框形式的展示
复选单选
分析:
•文本框有8种类型边框样式,即border-style,分别展示在本例中,
边框宽度的设置有一个规律:
border-width: [ thin | medium | thick | <长度> ]{1,4} 边框宽度用一到四个值来设置元素的边框宽度,它们分别被应用于上、右、下
和左边框宽度。
如果只给出一个值,它被应用于所有边框宽度。
如果两个或三
个值给出了,省略了的值与对边相等
例如:<input type="text" name="RedF" style="border-color: #006600;
border-style: dotted; border-width: 1px">
边框颜色的设置有一个规律:
border-colr: <颜色>{1,4}
边框颜色用一到四个值来设置元素的边框颜色。
如果四个值都给出了,它们分
别被应用于上、右、下和左边框颜色。
如果只给出一个值,它被应用于所有边框颜色。
如果两个或三个值给出了,省略了的值与对边相等。
•对于多行文本框以及按钮,设置边框的方法和文本框一样,不再陈述;
•由于下拉选择框Select不支持边框的设置,所以对它设置是徒劳的;
•单选按钮和复选按钮的边框,设置的效果不十分协调,所以建议不要对它们设
置,不然有“画蛇添足”之感;
样例15:边框的特殊设计展示
聪明的读者一定会想到,如果设计单边框,一定更加漂亮,对!下面我们来尝试以下部分边框的设置效果,本例仅仅以Solid和dotted两种类型的边框作演示,其它类
型的边框原理相同:
代码:style="background-color: #FFFFFF; border-color: #000099; border-style: solid; border-width: 0px
0px 1px"
代码:style="background-color: #FFFFFF; border-color: #CCCCCC black #FF0000; border-style: solid;
border-width: 1px 0px"
代码:style="background-color: #FFFFFF;border-left: 1px dotted #ff0000; border-right: 1px dotted #ff0000; border-top: 1px dotted #ff0000; border-bottom:1px solid #000000"
注意:边框类型的外观如下:
•none :无边框。
与任何指定的border-width值无关;
•dotted :点线;
•dashed :虚线;
•solid :实线边框;
•double :双线边框。
两条单线与其间隔的和等于指定的border-width值;
•groove :3D凹槽;
•ridge :边框突起;
•inset :3D凹边;
•outset :3D凸边;
2、图像魔法
图像,是网页的重要元素,能否应用到表单中呢?接下来,我们用图像来改造死板的表单,分两个部分来探讨:用图像代替按钮、用背景图美化表单元素。
2.1 用图像代替按钮
由于默认的表单按钮太丑陋,绝大多数的网站采用了图像按钮,那么,我们通过两个实
例来看看怎样实现的:
样例16:用图像代替提交按钮:
当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
<input type="image" name="..." src="url" width="" height="..." border="..."
除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样
的,例如:
是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的
例子就知道了:
样例17:用图片代替所有的表单按钮:
注意:
•代替submit按钮的图片代码格式是
<input type="image" name="..." src="..."
onClick="document.formName.submit()">
•代替reset按钮的代码图片格式是
<a href="javascript:document.formName.reset();"><img border=0
src="..."></a>
注:这里的formName是表单的name属性值。
2.2 用背景图美化表单元素
其实,前面已经提到过,用background-image:url()属性来定义表单元素的背景图,这里仅举一例,可以看到,除了select没有效果以外,其它的都可以配合网页的背景
来设置它们。
样例18:背景图的设置
三、表单的提交
既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。
1.数据的检验
数据的检验,通常有两种程序:客户端检验和服务器端检验。
客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户
刻意破坏。
不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。
样例19:必填项,以及简单的数据类型检验
以下带*的必须输入:
姓名:。