dw常用代码

admin 管理员组

文章数量: 1184232

[这是那几个层，控制在层属性里]

目 录

1.控制横向和纵向滚动条的显隐？ ........................................................................................ 7

12.添加到收藏夹和设为首页 .................................................................................................. 8

21.文字或图片弹出指定大小的窗口 .................................................................................... 10

38.给表格做链接 .................................................................................................................... 12

47.基本链接样式 .................................................................................................................... 13

52、日期显示 ......................................................................................................................... 14

js表单验证控制代码大全 ............................................................................................................ 44

DW常用代码

1.控制横向和纵向滚动条的显隐？

去掉x轴

去掉y轴

不显

--------------------------------------------------------------------------------

2.表格变色

style="CURSOR: hand">

--------------------------------------------------------------------------------

3.禁止复制，鼠标拖动选取

oncontextmenu=Value=false onselectstart=Value=false>

--------------------------------------------------------------------------------

4.普通iframe页面

--------------------------------------------------------------------------------

自适应高度

--------------------------------------------------------------------------------

地址栏前换成自己的图标&可以在收藏夹中显示出你的图标

--------------------------------------------------------------------------------

7.字号缩放

越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。

需要指定大小的文字

大 中

href="javascript:doZoom(12)">小

--------------------------------------------------------------------------------

8.简单的跳转网页代码

如果你要让页面显示3秒钟之后跳转，可以在html代码的部分加上这样的代码：

--------------------------------------------------------------------------------

(嵌入式帧)自适应高度

填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。

--------------------------------------------------------------------------------

10.跳转菜单新窗口

Internet Explorer

Microsoft Home

Developer Network

--------------------------------------------------------------------------------

透明选项

--------------------------------------------------------------------------------

12.添加到收藏夹和设为首页

设为首页

收藏本站

--------------------------------------------------------------------------------

13.记录并显示网页的最后修改时间

--------------------------------------------------------------------------------

14.节日倒计时

--------------------------------------------------------------------------------

15.加在HEAD里

禁止缓存

--------------------------------------------------------------------------------

16.让IFRAME框架内的文档的背景透明

--------------------------------------------------------------------------------

17.打开窗口即最大化

--------------------------------------------------------------------------------

18.加入背景音乐

只适用于IE

对Netscape ,IE 都适用

--------------------------------------------------------------------------------

19.滚动

scrollAmount=2>滚动信息

--------------------------------------------------------------------------------

20.防止点击空链接时，页面往往重置到页首端

代码“javascript:void(null)”代替原来的“#”标记

--------------------------------------------------------------------------------

21.文字或图片弹出指定大小的窗口

在body中加入

弹出代码

图片或文字

--------------------------------------------------------------------------------

22.跳转页面代码

--------------------------------------------------------------------------------

23.细线分隔线

--------------------------------------------------------------------------------

24.网页中的自动换行

就搞定了。

完整的是

style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

--------------------------------------------------------------------------------

25.消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .

GALLERYIMG="no">

--------------------------------------------------------------------------------

26.禁止页面正文内容被选取

false" onselect="()" oncopy="()"

onbeforecopy="return

false">

--------------------------------------------------------------------------------

27.不能点右键，不用CTRL+A，不能复制作!

onkeypress="Value=false"

onkeyup="Value=false"

ondragstart="Value=false"

onselectstart="Value=false">

--------------------------------------------------------------------------------

浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:

--------------------------------------------------------------------------------

29.随机变换背景图象（一个可以刷新心情的特效）

--------------------------------------------------------------------------------

30.图片表单按钮

--------------------------------------------------------------------------------

31.左右阴影背景的CSS定义方法

body {

text-align:center;

background-repeat: repeat-y;

background-position: center;

background-image: url(../images/);

}

--------------------------------------------------------------------------------

32.划过链接 手型鼠标

style="cursor:hand"

--------------------------------------------------------------------------------

33.如何关闭层

关闭层

--------------------------------------------------------------------------------

34.关闭窗口的脚本

[关闭窗口]

--------------------------------------------------------------------------------

35.如果文字过长,则将过长的部分变成省略号显示

--------------------------------------------------------------------------------

36.进入主页后自动最大化

--------------------------------------------------------------------------------

37.凹陷文字

--------------------------------------------------------------------------------

38.运行代码框

运行

--------------------------------------------------------------------------------

38.给表格做链接

--------------------------------------------------------------------------------

39.让弹出窗口总是在最上面

--------------------------------------------------------------------------------

文字阴影

.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1);

FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}

--------------------------------------------------------------------------------

41.后退&关闭窗口

后退：javascript:(1)

关闭：javascript:();

--------------------------------------------------------------------------------

42.表格透明

style="FILTER: alpha(opacity=72)"

--------------------------------------------------------------------------------

43.如何避免别人把你的网页放在框架中

--------------------------------------------------------------------------------

46.链接到

ct""

=""

--------------------------------------------------------------------------------

47.基本链接样式

a:link 表示链接的样式

a:active 表示当前活动连接的样式

a:hover 表示鼠标划过时的样式

a:visited 表示已经访问过的连接的样式

"link-visited-hover-active" 简记为 "lvha" 即 "love"+"hate"

--------------------------------------------------------------------------------

48.在同一页面设置不同文字链接效果的样式

文字

--------------------------------------------------------------------------------

49.下拉跳转菜单

----请选择----

站长设计网

Font

--------------------------------------------------------------------------------

挡住div的解决方法

在div里加入下面的代码，根据需要调整就可以了。

--------------------------------------------------------------------------------

51.整页的全部链接都 _blank 新窗口打开

52、日期显示

52、表单大全

一、表单概述

表单，在网页中的作用不可小视，主要负责数据采集的功能，比如你可以采集访问者的名字和e－mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分：

•

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

•

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

•

表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

为了顾及不同的网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：

1.1 表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器或者电子邮件里。

语法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞

属性解释见下表：

action=url 指定一来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

method=get或post

指明提交表单的HTTP方法.可能的值为：

1. post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中.

2. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.

enctype=cdata 指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"

TARGET="..." 指定提交的结果文档显示的位置：

1. _blank ：在一个新的、无名浏览器窗口调入指定的文档；

2. _self ：在指向这个目标的无素的相同的框架中调入文档；

3. _parent ：把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self；

4. _top ：把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.

例如：

＜form action="/" method="post" target="_blank"＞...＜/form＞

表示表单将向/以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：表单元素的字体样式展示

发送1

发送2

分析：

•

文本框里的文字是加粗的，大小是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： 表单元素的背景展示

复选 单选

Submit1

Submit2

分析：

•

文本框背景是黑色的，字体是白色的，代码：

＜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()"＞＜/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()"＞

小结：用好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="()"＞

•

代替reset按钮的代码图片格式是

＜img border=0

src="..."＞

注：这里的formName是表单的name属性值。

2.2 用背景图美化表单元素

其实，前面已经提到过，用background-image:url()属性来定义表单元素的背景图，这里仅举一例，可以看到，除了select没有效果以外，其它的都可以配合网页的背景来设置它们。

样例18：背景图的设置

SubmitReset三、表单的提交

既然表单是用来采集用户输入的数据，那么，就应该保证用户的数据被准确地提交到预定的地点，也就是说，我们在表单提交的时候，应该对用户的数据进行检验，一来可以避免用户误输数据，二来可以避免用户输入非法的，或者说不合格的数据；检验合格以后，还要保证用户的数据提交到特定的程序。

1．数据的检验

数据的检验，通常有两种程序：客户端检验和服务器端检验。客户端检验，比较快，服务器端检验，相对来说比较慢，为了确保安全，通常同时采用，这样就可以避免用户刻意破坏。

不管采用什么方式，数据检验的原理都是一样的，一旦用户输入的数据不符合规定，就报错，要求用户重新输入，客户端检验常使用Javascrip脚本，服务器端的视系统而定，本文不对数据检验的具体程序设计进行探讨，仅仅列举几个例子来说明。

样例19：必填项，以及简单的数据类型检验

以下带*的必须输入：

姓名： *

Email： *

提交

重填

分析：

•

本例给表单添加了onSubmit事件，通过onSubmit="return CheckDate()"指定提交前，必须通过函数CheckDate()来检验，如果不合格，返回输入数据；

•

数据检验的函数如下：

＜script＞

function CheckDate(){

//取得输入的数据

userName = ;

userEmail = ;

//如果没有输入姓名

if (userName=="") {

alert("请输入姓名");

();

return false;

}else{

//如果没有输入Email，或者Email地址错误(不含@)

if ((userEmail=="")||(f("@")==-1)) {

alert("请重新输入Email地址");

();

return false;

}else return true;

}

}

＜/script＞

2．表单的分支提交

有的时候，表单需要根据用户的选择，提交到不同的程序，怎么做呢？

通过脚本来检测用户的选择分支，从而向不同的程序提交表单，看看样例：

样例20：分支提交

用户名：

公司用户

密码：

个人用户

登录

分析：这里首先用到的是form的onSubmit="TwoSubmit(this)"

然后根据选择的分支，来分别递交到不同的程序，TwoSubmit()函数如下：

＜script＞

function TwoSubmit(form){

if ([0].checked){

= "";//这里是分之一

}else{

= "";//这里是分之二

}

();

}

＜/script＞

3．用任何元素提交表单

是不是只有按钮或者图片按钮才能提交表单呢？当然不是，实际上，任何页面元素都可以提交表单，不过嘛，都是通过脚本来完成的，下面我们就使用链接来代替Submit按钮：

样例21：用链接来提交表单

用户名： 密码： 登录 清空

分析：

通过onClick="()"来提交表单；用onClick="()"来复位表单，这样一来，任何一个元素都可以实现提交表单了。

分析： 上面分别使用了两个事件，Email的是onFocus="=''"，自动选择的是onMouseOver="()"

3．去掉表格和表单间的空隙

样例24：表格和表单的空隙处理

表格，我们常用来构架页面，可是，表格里的表单总是和表格的内容有一个空隙，对照一下：

Submit这里有空隙

Submit这里没有空隙

分析：为什么右边没有空隙呢，看看右边的代码就知道了。

＜table width="100%" border="1" cellspacing="1" cellpadding="1"＞

＜tr＞

＜form name="form3" method="post" action=""＞

＜td＞ ＜input type="text" name="textfield2"＞＜br＞

＜input type="submit" name="Submit22" value="Submit"＞

这里没有空隙 ＜/td＞

＜/form＞

＜/tr＞

＜/table＞

也就是说，把＜form＞标签放到＜tr＞和＜td＞中间，对应的＜/form＞放在＜/td＞和＜/tr＞中间！

4．用Email提交表单(只适合Outlook用户，不适合Foxmail用户)

样例25：Email提交表单

主题：

内容：

提交

分析：看看我们的表单＜form＞标签就知道了，格式如下：

＜formname="..."action="mailto:*************?Subject=表单反馈"

enctype="text/plain" method="post"＞...＜/form＞

这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/Php/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交，据说TheBat!也可以，大家可以试验一下。

关于dreamweaver的代码

2008-11-01 14:11

html文档示例：

＜html＞

＜head＞

＜title＞标题＜title＞

＜/head＞

＜body＞……….文件内容……….

＜/body＞

＜/html＞

html标签范例：

<头标签>内容<尾标签>

1.文件标题

＜title＞……….＜/title＞

2.文件更新–＜meta＞

【1】10秒后自动更新一次

＜meta http-equiv=”refresh” content=10＞

【2】10秒后自动连结到另一文件

＜meta http-equiv=”refresh” content=10＞

3.查询用表单

–＜isindex>

若欲设定查询栏位前的提示文字：

＜isindex prompt=”提示文字”＞

4.预设的基准路径–＜base>

＜base href=”放置文件的主机之URL”＞

版面

1.标题文字 ＜h#＞……….＜/h#＞ #=1~6；h1为最大字，h6为最小字

2.字体变化 ＜font＞……….＜/font＞

【1】字体大小 ＜font size=#＞……….＜/font＞ #=1~7；数字愈大字也愈大

【2】指定字型 ＜font face=”字型名称”＞……….＜/font＞

【3】文字颜色 ＜font color=#rrggbb＞……….＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码

3.显示小字体 ＜small＞……….＜/small＞

4.显示大字体 ＜big＞……….＜/big＞

5.粗体字 ＜b＞……….＜/b＞

6.斜体字 ＜i＞……….＜/i＞

7.打字机字体 ＜tt＞……….＜/tt＞

8.底线 ＜u＞……….＜/u＞

9.删除线 ＜strike＞……….＜/strike＞

10.下标字 ＜sub＞……….＜/sub＞

11.上标字 ＜sup>……….＜/sup＞

12.文字闪烁效果 ＜blink＞……….＜/blink＞

13.换行 ＜br＞

14.分段 ＜p＞

15.文字的对齐方向

＜p align=”#”＞ #号可为 left：表向左对齐（预设值）

center：表向中对齐 right：表向右对齐 P.S.＜p align=”#”＞之后的文字都会以所设的对齐方式显示， 直到出现另一个＜p align=”#”＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。

16.分隔线 ＜hr＞

【1】分隔线的粗细 ＜hr size=点数＞

【2】分隔线的宽度 ＜hr size=点数或百分比＞

【3】分隔线对齐方向 ＜hr align=”#”＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐

【4】分隔线的颜色 ＜hr color=#rrggbb＞

【5】实心分隔线 ＜hr noshade＞

17.向中对齐 ＜center＞……….＜/center＞

18.依原始样式显示 ＜pre＞……….＜/pre＞

19.＜body＞指令的属性

【1】背景颜色 — bgcolor ＜body bgcolor=#rrggbb＞

【2】背景图案 — background ＜body background=”图形文件名”＞

【3】设定背景图案不会卷动 — bgproperties ＜body bgproperties=fixed＞

【4】文件内容文字的颜色 — text ＜body text=#rrggbb＞

【5】超连结文字颜色 — link ＜body link=#rrggbb＞

【6】正被选取的超连结文字颜色 — vlink ＜body vlink=#rrggbb＞

【7】已连结过的超连结文字颜色 — alink ＜body alink=#rrggbb＞

20.注解 ＜!–……….–＞

21.特殊字元表示法

符 号 语 法

＜ ＆lt

＞ ＆gt

& ＆amp

” ＆quot

空白 ＆nbsp

图片

1.插入图片 ＜img src=”图形文件名”＞

2.设定图框 — border ＜img src=”图形文件名” border=点数＞

3.设定图形大小 — widthⅱheight ＜img src=”图形文件名” width=宽度点数 height=高度点数＞

4.设定图形上下左右留空 — vspaceⅱhspace ＜img src=”图形文件名”

vspace=上下留空点数 hspace=左右留空点数＞

5.图形附注 ＜img src=”图形文件名” alt=”说明文字”＞

6.预载图片

＜img src=”高解析度图形文件名” lowsrc=”低解析度图形文件名”＞ P.S.两个图的图形大小最好一致

7.图象热点（Image Map）

＜img src=”图形文件名” usemap=”#图的名称”＞

＜map name=”图的名称”＞

＜area shape=形状 coords=区域座标列表 href=”连结点之URL”＞

＜area shape=形状 coords=区域座标列表 href=”连结点之URL”＞

＜area shape=形状 coords=区域座标列表 href=”连结点之URL”＞

＜area shape=形状 coords=区域座标列表 href=”连结点之URL”＞

＜/map＞

【1】定义形状 — shape

shape=rect：矩形 shape=circle：圆形 shape=poly：多边形

【2】定义区域 — coords

a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

例：＜area shape=rect coords=100,50,200,75 href=”URL”＞

b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度

例：＜area shape=circle coords=85,155,30 href=”URL”＞

c.任意图形（多边形）：将图形之每一转折点座标依序填入

例：＜area shape=poly coords=232,70,285,70,300,90,250,90,200,78

href=”URL”＞

表格

1.定义表格 ＜table＞……….＜/table＞

【1】设定边框的厚度 — border

＜table border=点数＞

【2】设定格线的宽度 — cellspacing

＜table cellspacing=点数＞

【3】设定资料与格线的距离 — cellpadding

＜table cellpadding=点数＞

【4】调整表格宽度 — width

＜table width=点数或百分比＞

【5】调整表格高度 — height

＜table height=点数或百分比＞

【6】设定表格背景色彩 — bgcolor

＜table bgcolor=#rrggbb＞

【7】设定表格边框色彩 — bordercolor

＜table bordercolor=#rrggbb＞

2.显示格线 ＜table border＞

3.表格标题

＜caption＞……….＜/caption＞

表格标题位置 — align

＜caption align=”#”＞ #号可为 top：表标题置于表格上方（预设值）

bottom：表标题置于表格下方

4.定义列 ＜tr＞

5.定义栏位 《1》＜td＞：靠左对齐

《2》＜th＞：标题栏

【1】水平位置 — align ＜th align=”#”＞

#号可为 left：向左对齐

center：向中对齐 right：向右对齐

【2】垂直位置 — align ＜th align=”#”＞ #号可为

top：向上对齐 middle：向中对齐

bottom：向下对齐

【3】栏位宽度 — width

＜th width=点数或百分比＞

【4】栏位垂直合并 — rowspan

＜th rowspan=欲合并栏位数＞

【5】栏位横向合并 — colspan

＜th colspan=欲合并栏位数＞

清单

一、目录式清单

＜dir＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/dir＞ P.S.目录式清单每一个项目不能超过20个字元（即10个中文字）

二、选项式清单 ＜menu＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/menu＞

三、有序号的清单 ＜ol＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ol＞

【1】序号形式 — type ＜ol type=#＞或＜li type=#＞ #号可为 A：表以大写英文字母AⅱBⅱCⅱD…做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd…做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号（预设值）

【2】起始数字 — start ＜ol start=欲开始计数的序数＞

【3】指定编号 — value ＜li value=欲指定的序数＞

四、无序号的清单 ＜ul＞ ＜li＞项目1 ＜li＞项目2 ＜li＞项目3 ＜/ul＞

【1】项目符号形式 — type ＜ul type=#＞或＜li type=#＞ #号可为 disc：实心圆点（预设值） circle：空心圆点 square：实心方块

【2】原始清单 — plain ＜ul plain＞

【3】清单排列方式 — warp 《1》清单垂直排列 ＜ul warp = vert＞ 《2》清单水平排列 ＜ul warp = horiz＞

五、定义式清单 ＜dl＞ ＜dt＞项目1 ＜dd＞项目1说明 ＜dt＞项目2 ＜dd＞项目2说明 ＜dt＞项目3 ＜dd＞项目3说明 ＜/dl＞

紧密排列 — compact ＜dl compact＞ P.S.如此可使＜dt＞的内容与＜dd＞的内容在同一行，仅 以数格空白相隔而不换行，但若＜dt＞的文字超过一 定的长度后，compact的作用就消失了！

表单

一、基本架构 ＜form action=”处理资料用的CGI程式之URL”或”mailto:电子信箱的URL” method=”get或post”＞ ………. ………. ………. ＜/form＞

二、输入文件型表单 ＜form action=”URL” method=”post”＞ ＜input＞ ＜input＞ ………. ………. ＜/form＞

【1】栏位类型 — type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮

image：图形钮 hidden：隐藏栏位

【2】栏位名称 — name ＜input name=”资料栏名”＞ P.S.若type为submitⅱreset则name不必设定

【3】文件上的预设值 — value ＜input value=”预设之字串”＞

【4】设定栏位的宽度 — size ＜input size=字元数＞

【5】限制最大输入字串的长度 — maxlength ＜input maxlength=字元数＞

【6】预设checkbox或radio的初值 — checked ＜input type=checkbox

checked＞ ＜input type=radio checked＞

【7】指定图形的URL — src ＜input type=image src=”图档名”＞

【8】图文对齐 — align ＜input type=image align=”#”＞ #号可为 top：

文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部

三、选择式表单 ＜form action=”URL” method=”post”＞ ＜select＞ ＜option＞ ＜option＞ ………. ………. ＜/select＞ ＜/form＞

A、＜select＞的属性

【1】栏位名称 — name ＜select name=”资料栏位名”＞

【2】设定显示的选项数 — size ＜select size=个数＞

【3】多重选项 — multiple ＜select multiple＞

B、＜option＞的属性

【1】定义选项的传回值 — value ＜option value=”传回值”＞

【2】预先选取的选项 — selected ＜option selected＞

四、多列输入文字区表单 ＜form action=”URL” method=”post”＞ ＜textarea＞ ………. ………. ＜/textarea＞ ＜/form＞

【1】文字区的变数名称 — name ＜textarea name=变数名称＞

【2】设定文字输入区宽度 — cols ＜textarea cols=字元数＞

【3】设定文字输入区高度 — rows ＜textarea rows=列数＞

【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞

【5】自动换行与否 — wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行

链接

一、连结至其他文件 ＜a href=”URL”＞说明文字或图片＜/a＞

二、连结至文件内之某一处（外部连结）

《1》起点

＜a href=”档名#名称”＞……….＜/a＞

《2》终点 ＜a name=”名称”＞

三、frame的超连结

【1】开启新的浏览器来显示连结文件 — _blank ＜a href=”URL”

target=_blank＞

【2】显示连结文件於目前的frame — _self ＜a href=”URL” target=_self＞

【3】以上一层的分割视窗显示连结文件 — _parent ＜a href=”URL”

target=_parent＞

【4】以全视窗显示连结文件 — _top ＜a href=”URL” target=_top＞

【5】以特定视窗显示连结文件 –＜a href=”URL” target=”特定视窗名称”＞

FRAME

一、分割视窗指令 ＜frameset＞……….＜/frameset＞

【1】垂直（上下）分割 — rows

＜frameset rows=#＞ #号可为点数：如欲分割为100,200,300三个视窗，则

＜frameset rows=100,200,300＞；亦可以*号代表，如＜frameset rows=*,500,*＞

百分比：如＜frameset rows=30%,70%＞，各 项总和最好为100%

【2】水平（左右）分割 — cols ＜frameset cols=点数或百分比＞

二、指定视窗内容 — ＜frame＞

＜frameset cols=30%,70%＞ ＜frame＞ ＜frame＞ ＜/frameset＞

【1】指定视窗的文件名称 — src ＜frame src=HTML档名＞

【2】定义视窗的名称 — name

＜frame name=视窗名称＞

【3】设定文件与上下边框的距离 — marginheight

＜frame marginheight=点数＞

【4】设定文件与左右边框的距离 — marginwidth

＜frame marginwidth=点数＞

【5】设定分割视窗卷轴 — scrolling

＜frame scrolling=#＞ #号可为 yes：固定出现卷轴

no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）

【6】锁住分割视窗的大小 — noresize ＜frame noresize＞

js表单验证控制代码大全

1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制

2.:js判断汉字、判断是否汉字 、只能输入汉字

3:js判断是否输入英文、只能输入英文

4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

5:只能输入英文字符和数字

6: js email验证 、js 判断email 、信箱/邮箱格式验证

7:js字符过滤,屏蔽关键字

8:js密码验证、判断密码

2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空

2.2:比较两个表单项的值是否相同

2.3:表单只能为数字和"_",

2.4:表单项输入数值/长度限定

2.5:中文/英文/数字/邮件地址合法性判断

2.6:限定表单项不能输入的字符

2.7表单的自符控制

2.8:form文本域的通用校验函数

1. 长度限制

2. 只能是汉字

3." 只能是英文

4. 只能是数字

5. 只能是英文字符和数字

"onbeforepaste="a('text',a('text').replace(/[^d]/g,''))">

6. 验证油箱格式

7. 屏蔽关键字(这里屏蔽***和****)

8. 两次输入密码是否相同

够了吧 :)

屏蔽右键 很酷

oncontextmenu="return false" ondragstart="return false" onselectstart="return false"

加在body中

二

2.1 表单项不能为空

2.2 比较两个表单项的值是否相同

{

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

2.4 表单项输入数值/长度限定

2.5 中文/英文/数字/邮件地址合法性判断