第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性

第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性
六、 CSS盒状模型与表单修饰七、 JavaScript基础八、 DOM与表单交互

一、网页结构与元标记

HTML概述 HyperText Markup Language 常见网页类型编写方法浏览方法超文本标记语言、网页设计语言和编写规范
静态网页：.htm、.html 动态网页：.asp、.jsp、.php 编写方法使用文本编辑器：记事本使用工具软件：FrontPage、Dreamweaver 浏览方法将网页文件存储到网站根目录中, 如: c:/AppServ/www 在IE地址栏输入：第2章设计表单

1. 网页结构网页结构 <html> <head> <title>网页标题</title>
注：尖括号“<”和“>”内的内容称为元素，说明标记（标签）的意义，不区分大小写。网页标题标记 <html> <head> <title>网页标题</title> </head> <body> ··· ··· </body> </html> 网页起止标记头部标记主体标记第2章设计表单

1. 网页结构注释标记头部标记  网页头部网页标题元标记<meta>
 头部标记网页头部 <head>头部内容</head> 网页标题显示在窗口标题栏中 <title>网页标题</title> 元标记<meta> 第2章设计表单

1. 网页结构主体中常用标记编辑标记区块标记 <p> (强制分段，结束标记</p>可选)
<br> (强制换行，没有结束标记) 区块标记居中元素 <center>要居中的内容 </center> 块元素（可以包含<p>标记） <div></div> 行内元素（可以被<p>标记包含） <span></span> 第2章设计表单

2. 元标记元(Meta)标记位置 Meta标记作用设置搜索引擎关键字单标记，必须位于网页头部标记中
格式：<meta name=“text” content=“text”> Meta标记作用定义使用字符集、语言、作者等信息实现自动刷新、进入和退出等特效设置搜索引擎关键字 <meta name=“keywords” content=“搜索关键词”> <meta name=“description” content=“网页概述”> 第2章设计表单

2. 元标记 Meta标记的http-equiv属性格式：<meta http-equiv =# content=#>
equivalent：当量,相等,等价 2. 元标记 Meta标记的http-equiv属性格式：<meta http-equiv =# content=#> 1.Content-Language 设定页面使用的语言： <meta http-equiv="Content-Language" content="zh-cn"> 2.Content-Type 设定页面使用的字符集： <meta http-equiv="Content-Type" content="text/html;charset=gb2312“> 第2章设计表单

2. 元标记 Meta标记的http-equiv属性 3. Refresh 设定自动刷新并指向新页面(跳转)： 4. Page-Enter
<meta http-equiv="Refresh" content="3;URL= 4. Page-Enter 设定进入页面时的特殊效果： <meta http-equiv="Page-Enter" content="revealTrans(duration=1,transition=14)"> 参见文档”网页META标记.doc” 第2章设计表单

练习一第2章.txt 例2.1 (我的网页) 例2.2 (Meta标记) 第2章设计表单

二、文本与表格标记

1. 文本标记特殊字符 ©版权符号：© ®注册符号：® 标题标记空格字符：
<hn [color=# | align=#]>标题文字</hn> n=1|2|3|4|5|6：数字越小，字体越大第2章设计表单

1. 文本标记字体标记字型标记 <font face=# size=# color=# align=#>
<b></b>(加粗) <i></i>(倾斜) <u></u>(下划线) 尽量不用——因为超级链接标记默认带下划线此标记淘汰中, 有时显示脚本出错第2章设计表单

2. 表格概述表格的作用表格是网页中的常见元素需要明确的问题排列页面文字调整页面布局定位页面图片表格有哪些组成元素
各元素分别使用什么标记第2章设计表单

2. 表格概述表格的组成表格标题：位于表格框线之外！列名行数据行单元格第2章设计表单

3. 表格标记表格基本属性 <table width=# height=# border=#
align=# cellspacing=# cellpadding=#> 边框大小,默认为0 格间距, 默认为2 填充距, 默认为1 第2章设计表单

3. 表格标记表格结构标记 <table> </table>
<caption>表题 </caption> <tr> <th>列名1</th> <th>列名2</th> ······ </tr> <td>数据1</td><td>数据2</td> ······ ······ </table> 默认在表格上方居中显示默认在单元格中居中对齐列名行单元格数据行默认在单元格中左对齐第2章设计表单

3. 表格标记表格其它属性 <table bgcolor=# bordercolor=# background=#
frame=# rules=# > 框线颜色,默认灰色背景图像内边框: rows(行分隔线),cols(列分隔线),none 外边框样式：void(不显示), hsides(仅上下边框) 第2章设计表单

3. 表格标记合并单元格横向合并(跨列) 纵向合并(跨行) 举例
<th colspan=# > 或 <td colspan=# > 横向延长单元格，#代表所延长的列数纵向合并(跨行) <th rowspan=# > 或 <td rowspan=# > 纵向延长单元格，#代表所延长的行数举例 <td colspan=3>横向合并3个数据单元格</td> 第2章设计表单

练习二第2章.txt 例2.3 (字符标记) 例2.4 (文本标记) 例2.5 (表格标记) 基本目标高级目标第2章设计表单

三、图像与链接标记

1. 引用图像标记 URL Uniform Resource Locator (统一资源定位符)
网络协议：http 主机域名(或IP地址)：sgksw.net (根文件夹) 文件路径：/head/head.jpg 引用该图片的标记 <img src=“ alt=“这是外网中的图片”> 第2章设计表单

1. 引用图像标记从当前文件夹开始的相对路径 ../a.jpg b.bmp gif/d.gif ../images/c.jpg
已知四张图片的存储位置如下，在文件夹htm中的网页文件如何引用这些图片？例2.6(图片标记) 父文件夹父 ../a.jpg b.bmp 子文件夹子 gif/d.gif 兄弟 ../images/c.jpg 第2章设计表单

1. 引用图像标记从根文件夹开始的相对路径 /a.jpg /htm/b.bmp /htm/gif/d.gif /images/c.jpg
总是从当前站点的根文件夹(/)开始已知四张图片的存储位置如下，如何引用这些图片？更改例2.5(引用图片)所设计的网页 /a.jpg /htm/b.bmp /htm/gif/d.gif /images/c.jpg 第2章设计表单

1. 引用图像标记引用图像有哪两种路径？相对路径有几种? ../a.txt b.htm htm/abc/c.doc
绝对路径用于引用当前站点以外的文件，常用URL 相对路径用于引用当前站点的文件相对路径有几种? 从当前文件夹开始的相对路径说出右图文件所处的相对路径从根文件夹开始的相对路径总是从根文件夹开始的完整路径 ../a.txt b.htm htm/abc/c.doc ../images/c.jpg 第2章设计表单

2. 超级链接标记链接到文件(超级链接) 链接到电邮(电邮链接) 链接到本页(锚记链接) “关闭窗口”的链接
<a href=#>提示文字</a> 链接到电邮(电邮链接) <a href=“mailto: 电邮地址”>提示文字</a> 链接到本页(锚记链接) 先在目标处命名锚记：<a name=“hi”></a> 再链接到该锚记：<a href=“#hi”>提示文字</a> “关闭窗口”的链接 <a href=“javascript:window.close()”>关闭窗口</a> 第2章设计表单

练习三第2章.txt 例2.6 (图像标记) 例2.7 (链接标记) 第2章设计表单

1. 表单与表单元素 2. 文本框和密码框 3. 单选钮和复选框 4. 列表选择框 5. 文本域和按钮 6. 文件框和控件集
四、表单标记 1. 表单与表单元素 2. 文本框和密码框 3. 单选钮和复选框 4. 列表选择框 5. 文本域和按钮 6. 文件框和控件集

1. 表单与表单元素表单的作用表单元素(控件) 动态网页的核心对象，主要负责数据采集功能，实现浏览器与服务器之间的信息交互表单域
采集数据的网页在浏览器端运行：.htm、.html 处理数据的网页在服务器端运行：.asp、.jsp、.php 表单元素(控件) 表单域包含文本框、密码框、隐藏框、文本域、单选钮、复选框、列表选择框、文件上传框、控件集等。命令按钮包括提交按钮、复位按钮和一般按钮。第2章设计表单

1. 表单与表单元素表单标记结构表单标记可以出现在网页的任何部位包含处理数据程序的URL和提交数据的方式。
<form name=# action=“*.php” method=#> 表单元素（表单域+命令按钮） </form> name：表单名称，便于引用 action：指定处理数据的程序文件动态网页，在服务器端（后端）运行 method：指定提交数据的方式 get：提交少量数据，发送时会显示在地址栏中 post：提交大量数据，发送时不可见，安全性高第2章设计表单

1. 表单与表单元素表单元素表单元素：表单域+命令按钮表单元素必须位于表单起止标记之间每个元素都有一个名称每个元素都有两个值
由name属性指定，以便处理表单时引用每个元素都有两个值初始值：由网页设计者预先指定当前值：根据用户的交互操作确定第2章设计表单

1. 表单与表单元素常用表单元素文本框单选钮密码框复选框列表选择框控件集文本域命令按钮第2章设计表单

2. 文本框和密码框文本框密码框隐藏框 <input type=“text” name=# value=# size=#
maxlength=#> name：设定名称(变量名)，以便处理数据时引用 value：设定初始值 size：设定文本框大小——在屏幕上显示的宽度 maxlength：允许输入的最多字符数密码框 type=“password”，输入时，字符显示为“*” 隐藏框 type=“hidden”，用于收集不可见内容第2章设计表单

3. 单选钮和复选框单选钮 <input type=“radio” name=# value=# checked> 成组出现，一组单选钮必须具有相同的名称(name)，名称不同的单选钮属于不同的组必须选一个，只能选一个（相互排斥） checked：设为初始值(默认值) 复选框(检查框) type=“checkbox” 一组复选框不能具有相同的名称(NAME) 可以不选、选一个、选多个、全选（相互兼容）第2章设计表单

4. 列表选择框提供一个列表供选择（下拉列表） <select name=# size=# multiple>
<option value=#>选项1</option> <option value=# selected>选项2</option> ··· ··· <option value=#>选项n</option> </select> size：显示行数 multiple：允许多重选择 value：选择项的值 selected：设为初始值，默认为选项1的值。第2章设计表单

5. 文本域和按钮文本域（多行文本框）命令按钮 <textarea name=# rows=# cols=#>
默认显示的文字 </textarea> 亦称多行文本框，用于多行输入，浏览器会自动应用滚动条命令按钮 <input type=“submit” value=“提交”> < input type=“reset” value=“重置”> < input type=“button” value=“按钮” onclick=#> 第2章设计表单

6. 文件框和控件集文件(上传)框控件集 <input type=“file” name=# size=#>
划分表单区域，用于对控件进行分组 <fieldset> <legend>区域标题</legend> ……(若干控件) </fieldset> 第2章设计表单

练习四第2章.txt 例2.8 (我的表单) 第2章设计表单

样式表的特点与分类样式表的定义与应用样式表的基本属性
五、样式表及其基本属性样式表的特点与分类样式表的定义与应用样式表的基本属性

1. 样式表的特点与分类层叠样式表特点 Cascading Style Sheets 用来定义HTML元素的外观（字体，颜色等）
实现网页内容结构与其表现形式的分离一处定义，多处应用，事半功倍精简页面代码，提高下载速度适合所有浏览器，兼容性好多项样式定义将会层叠成一项第2章设计表单

1. 样式表的特点与分类样式表的分类内联样式(Inline Style) 内部样式表(Internal Style Sheet)
写在HTML标记里面，只对所在标签起作用。内部样式表(Internal Style Sheet) 写在网页<head>里面，对所在页面起作用。外部样式表(External Style Sheet) 写在单独的文本文件 (常以.css标识)中某个网页需要时，在<head>里面引用，即起作用。第2章设计表单

2. 样式表的定义与应用内联样式的书写 style= “属性1:属性值1;属性2:属性值2” 举例属性和属性值之间用冒号(:)连接
两个属性之间以分号(;)隔开举例定义段落的字体大小和颜色 <p style="font-size:14px;color:red"> font-size 和 color 是属性 14px 和 red是对应的属性值第2章设计表单

2. 样式表的定义与应用内部样式表的位置写在网页的<head>区域中，具体如下：
<style type="text/css">  </style> HTML注释标记表示：如果浏览器不支持样式表可以忽略第2章设计表单

2. 样式表的定义与应用内部样式表的书写选择器{属性1:属性值1;属性2:属性值2}
例：h1 {font-size:14px; color:red;} h1是选择器，font-size 和 color 是属性 14px 和 red是对应的属性值最后一个属性值后可以不用分号(一般用分号) 对多个选择器设置相同的属性和属性值时，可以采用组合写法，例 h1,h2,h3,h4,h5,h6 {font-size:14px; color:red;} 各个选择器间用逗号(,)分隔第2章设计表单

2. 样式表的定义与应用内部样式表的书写 font-size:14px; } 为了可读性和修改方便，通常分行书写 h1 {
color:red; } 左括号与选择器同行，右括号与选择器同列注释方法样式表的注释以/*开始，以*/结束，如/*注释内容 */ 第2章设计表单

2. 样式表的定义与应用选择器的命名类选择器与标识符选择器的区别标签选择器类(class)选择器 id(标识符)选择器
如img{…………}，对所有img标记起作用类(class)选择器如.myfont{……}，对指定class=myfont的标记起作用 id(标识符)选择器如#myp{……} ，对指定id=myp的标记起作用类选择器与标识符选择器的区别定义时前导符号不同，class用“.”，id用“#” class选择器在每个页面可以无限次使用 id选择器在每个页面只能使用一次，必须唯一第2章设计表单

2. 样式表的定义与应用派生选择器外部样式表的位置外部样式表的书写继承原有选择器样式，再单独定制一个或多个特殊样式写在文本文件中
如h1 strong{……} (两个选择器之间空一格) 外部样式表的位置写在文本文件中外部样式表的书写用记事本书写保存为.css文件第2章设计表单

2. 样式表的定义与应用内联样式的应用内部样式表的应用外部样式表的应用嵌入法—直接嵌入标记中导入法链入法
在标记中，用class指定类，或用id指定标识符外部样式表的应用链入法在网页<head>区域，写链入语句： <link href= "mycss.css" rel="stylesheet" type="text/css"> 第2章设计表单

3. 样式表的基本属性字体属性设置页面中字体的表现形式,包括四种: 族类—font-family (字族)
宋体、仿宋_GB2312、黑体、楷体_GB2312 大小—font-size (尺寸) 绝对大小：small, medium, large 相对大小：smaller, larger (缩小或增大一级) 具体数值：mm(毫米), pt(点), px(像素) 百分比：% 第2章设计表单

3. 样式表的基本属性字体属性风格—font-style (样式) 粗细—font-weight (浓淡)
normal(正常), italic (斜体) 粗细—font-weight (浓淡) 名称：normal(普通), bold(加粗) 数值： , 400以下正常，以上为加粗第2章设计表单

3. 样式表的基本属性颜色属性颜色的三种表示法前景颜色背景颜色注意区别
名称：red, yellow, blue, black,white,pink,orange RGB：rgb(255,0,0), rgb(0,255,0), rgb(0,0,255) HEX：#ff0000, #000000, #ffffff 前景颜色 color 背景颜色 background-color (默认为透明transparent) 注意区别 <body text=# bgcolor=#> 第2章设计表单

3. 样式表的基本属性文本属性文本转换 text-transform (只对英文有效) 文本修饰 text-decoration
capitalize (首字母大写) uppercase (大写) lowercase(小写) 文本修饰 text-decoration underline (下划线), overline (上划线) line-through (删除线), blink (闪烁) 字符间距 letter-spacing 用数值表示，在正常间距上加或减这个数值第2章设计表单

3. 样式表的基本属性文本属性注意区别行高 line-height 首行缩进 text-indent 水平对齐 text-align
left, right, center justify (均匀分布，分散对齐) 垂直对齐 vertical-align (缩写valign) top, middle, bottom sub (下标位), super (上标位) 注意区别 <sup> (上标), <sub> (下标), <s> (删除) 用于区块标记第2章设计表单

练习五第2章.txt 例2.9 (应用样式一) 例2.10 (应用样式二) 第2章设计表单

六、盒状模型与表单修饰 CSS盒状模型用样式表修饰表单

1. CSS盒状模型盒状模型 CSS中的重要概念，CSS中无处不在由四个属性组合形成，其中“内容”是必备的
content（内容，它可以是文字、图片等） padding（内边距或空白，内容到边框之间的距离） border（边框，设置内容的边框线粗细和样式等） margin（外边距或边界，设置一块内容与另一块内容之间的距离）第2章设计表单

1. CSS盒状模型内边距属性可对上右下左四个方向分别设置综合写法简略写法如padding-top，padding-right
.box1{padding:5px 5px 5px 10px;} 作用顺序是上-右-下-左简略写法只设一个值，它将作用于全部四个边。设置两个值，第一个为上下，第二个为左右。设置三个值，第一个为上，第二个为左右，第三个为下。第2章设计表单

1. CSS盒状模型边框属性边框宽度 border-width 边框样式 border-style 边框颜色 border-color
可以细分，如左边框宽度 border-left-width 边框样式 border-style 可以细分，如左边框样式 border-left-style 边框颜色 border-color 可以细分，如左边框颜色 border-left-color 边框border 综合写法，设置四个边框的宽度、样式和颜色格式：border: border-width border-style border-color; 示例：.bk01 {border:3px solid #FF0000;} 顺序：依次设置宽度、样式、颜色第2章设计表单

1. CSS盒状模型边框样式属性值 8种边框样式类3D效果第2章设计表单

1. CSS盒状模型外边距属性可对上右下左四个方向分别设置综合写法简略写法如margin-top，margin-right
.box1{margin:5px 5px 5px 10px;} 作用顺序是上-右-下-左简略写法只设一个值，它将作用于全部四个边。设置两个值，第一个为上下，第二个为左右。设置三个值，第一个为上，第二个为左右，第三个为下。第2章设计表单

2. 用样式表修饰表单输入框样式按钮样式超链接样式
.iput{width:100px;height:30px;border:2px inset;} 按钮样式 .butn{width:100px;height:30px; font-size:18px; font-weight:900; background-color:#e9e9e9;color:#008000} 超链接样式 a{color: blue;text-decoration: none;} a:hover{color: red;} //悬停时颜色 a:active{color: green;} //点击时颜色第2章设计表单

练习六第2章.txt 对例2.9应用超链接样式，观察浏览效果用样式表修饰例2.8(我的表单)，观察浏览效果第2章设计表单

JavaScript概述 JavaScript基本语法 JS函数与流程控制 JS对象与事件

1. JavaScript 概述性质作用基于对象和事件驱动，并具有安全性能的一种脚本语言。
HTML只提供静态信息，嵌入JavaScript代码可以实现客户端动态效果。即时校验表单，提高运行效率制作特殊效果，丰富网页内容响应用户事件，实现动态交互第2章设计表单

1. JavaScript 概述 JS是一种脚本语言采用小程序段的方式实现编程。
在程序运行过程中被逐行地解释，是一种解释性语言，不需要事先编译。基本结构形式与C、C++、VB、Delphi类似。与HTML标识结合在一起，便于使用和操作能运用自己已经创建的对象第2章设计表单

1. JavaScript 概述简单性安全性动态性跨平台性基于Java的紧凑设计未使用严格的数据类型对运行环境要求较低
不允许访问本地硬盘，也不能将数据存入到服务器上动态性直接在客户端对用户的输入作出响应表单先在本地部分校验，再提交到Web服务器跨平台性可以在不同的操作系统上运行第2章设计表单

1. JavaScript 概述内部与外部代码外部代码（JS文件）类似内部样式表与外部样式表内部代码：嵌入到HTML文件中
外部代码：以文件形式独立保存外部代码（JS文件）可用任何文本编辑器编辑通常用“.js”为扩展名标识引用语句： <script type =“text/JavaScript" src= " *.js" ></script> 比较<link type="text/css“ href= "mycss.css" rel="stylesheet“> 第2章设计表单

1. JavaScript 概述编码规范 JavaScript代码可以出现在HTML的任何位置
<script Language =“JavaScript”> alert(“弹出一个提示框”); document.write(“输出字符串” ); </script> 分行书写，用分号结束一行（可省略）注释方法与PHP一样单行注释：// 多行注释：/*…………*/ 第2章设计表单

2. JavaScript 基本语法数据类型数值型字符串型：“开源数据库应用实务” 逻辑型（布尔型）：true, false
整型：123 浮点型：123.45, 1.23E10 字符串型：“开源数据库应用实务” 逻辑型（布尔型）：true, false 空值型：Null 未定义型（Undefined）对象型（Object）第2章设计表单

2. JavaScript 基本语法 JavaScript变量以字母或下划线开头，不能包含空格和加减号
变量名严格区分大小写，User与user不同简单地用var来定义所有变量，变量类型由赋值语句隐含确定。如果money=1000，则money可参与整型数操作；如果money= “1000”，则money可参与字符串操作；如果money=false，则money可参与逻辑操作。变量可以先赋予一种类型的值，再根据需要赋予另一种类型的值。第2章设计表单

2. JavaScript 基本语法 JavaScript运算符 ① 算术运算符：+、-、*、/、%、++、--等。
② 逻辑运算符：&&、||、! 等。 ③ 比较运算符：<、<=、>、>=、= =、!= 等。 ④ 字符串运算符：+，用于连接两个字符串。 ⑤ 赋值运算符：=、+=、-=、*=、／=、％=等。 ⑥ 三目运算符: 条件表达式?表达式1:表达式2。若条件表达式为真，结果值为表达式1 若条件表达式为假，结果值为表达式2 第2章设计表单

3. JS函数与流程控制函数格式调用方法 <Script Language ="JavaScript">
function 函数名(形参1,形参2,…) { 函数体 } </Script> 调用方法函数名(实参1,实参2,…) 第2章设计表单

3. JS函数与流程控制 If语句 If…else语句 Switch语句 Switch(表达式) { case 值1; 语句段;
break; case 值2； …… } 第2章设计表单

3. JS函数与流程控制 For循环 For…in循环 While循环 do…while循环程序转移语句 Break：中断语句序列
Continue：中断本次循环，继续下一次循环 For(a in arrayName) { document.write(a); } 第2章设计表单

4. JS对象与事件对象及其分类对象是一种集合性的数据类型，网页中的按钮、网页文档和窗口等都是对象。万物皆对象
对象由属性和方法两个基本元素组成属性：反映对象的某些特定性质，如背景色、长度等方法：对象要执行的任务（对属性数据进行的操作） JavaScript中的对象 JS内置对象：Array、Date、String、Math 浏览器对象模型(DOM)中的对象用户自定义对象第2章设计表单

4. JS对象与事件对象属性的引用对象方法的引用使用点“.”运算符：对象名.属性名使用下标引用：对象名[下标]
使用字符串引用：对象名[“属性名”] 对象方法的引用对象名.方法名(参数表) 实质上是一个函数第2章设计表单

4. JS对象与事件事件事件处理常用事件用户与网页交互时产生的操作称为事件浏览器等待事件发生，自动调用事件处理函数
浏览器为了响应某个事件而进行的处理过程，叫做事件处理事件处理程序可以是任意JS语句，但一般是函数常用事件一般由对窗口、表单对象、鼠标等的操作引起。如onload、onfocus、onsubmit、onclick等第2章设计表单

练习七第2章.txt 例2.11(JS基础) 例2.12(JS显示日期) 例2.13(事件处理) 第2章设计表单

DOM对象模型 DOM对象模型的应用 JS与表单交互

1. DOM对象模型文档对象模型对象的引用 Document Object Model，DOM
提供了一种按顺序、层次方式访问文档中各个对象及其内容的结构化方式是W3C制订的标准 World Wide Web Consortium (万维网联盟，理事会) 对象的引用各层次对象之间用点号“.”连接，如一个表单元素的value属性的完整路径为 window.document.myform.text1.value; 顶层对象，引用时省略第2章设计表单

1. DOM对象模型 Window(窗口)对象 Status属性 Open方法打开浏览器窗口，就会自动创建window对象
window.open(theURL,winName,features); 参数features是一个由逗号分隔的选项列表 Menubar =yes,no 是否显示菜单栏 Toolbar =yes,no 是否显示工具栏 Location =yes,no 是否显示地址栏 Status =yes,no 是否显示状态栏 Scrollbars =yes,no 是否显示滚动条 Resizable =yes,no 是否可以改变大小第2章设计表单

1. DOM对象模型 Document(文档)对象 Document对象属性和方法的引用是window对象的子对象，是最常用的对象之一
提供了访问文档中所有元素的属性和方法 Document对象属性和方法的引用当前窗口文档： Document.属性名指定窗口文档：窗口名. Document.属性名向文档中写入文字：Document.write( ) 第2章设计表单

用于在指定的毫秒数后调用函数或计算表达式
1. DOM对象模型关闭窗口的三种方式以按钮方式 < INPUT onclick=window.close() type=button value=关闭窗口> 以链接方式 <a href="javascript:window.close()">关闭窗口</a> 以自动方式 <script language="JavaScript"> setTimeout("self.close()",5000); </script> 用于在指定的毫秒数后调用函数或计算表达式第2章设计表单

1. DOM对象模型 Form(表单)对象 Form表单对象是document对象的子对象网页文档中所有表单是一个数组 Form对象的引用
Document.forms[] ，下标从0开始 Form对象的引用 Document.forms[index] Document.表单名表单元素是表单对象的子对象 Document.表单名.elements[index] Document.表单名.表单元素名第2章设计表单

2. DOM对象模型的应用例16（动态切换链接标志图片）例15（窗口对象）第2章设计表单

3. JS与表单交互表单的前端校验例16（表单校验一) 由表单的onsubmit事件触发一个校验函数
<form ………… onsubmit=“return func()”> 例16（表单校验一) 对例8(我的表单)进行前端校验，要求：用户姓名不少于2个字符，密码不少于6个字符逐一校验，不通过时用 alert()函数给出提示，返回后相应表单域清空并获得焦点适当修饰网页和表单元素第2章设计表单

3. JS与表单交互表单前端逐一校验方法先设计表单,为每个表单域命名,并在表单标记<form>中加入onsubmit事件指定校验函数。一般在网页头部编写JS校验函数，如 function Form_Submit() //定义校验函数 { if(document.form1.pwd.value.length<6) alert(“密码不能少于6个字符!”); //弹出提示框 document.form1.pwd.value=“”; //表单域清空 document.form1.pwd.focus(); //表单域获焦点 return false; } 第2章设计表单

3. JS与表单交互例17（表单校验二) 对例8(我的表单)进行前端校验，要求：适当修饰网页和表单元素用户姓名不少于2个字符
密码不少于6个字符整体校验，不通过用 alert()函数分行给出提示适当修饰网页和表单元素第2章设计表单

3. JS与表单交互表单前端整体校验方法设定义一个返回变量并赋空值。如逐个校验表单域，不通过时返回一行提示。如
var msg=“”; 逐个校验表单域，不通过时返回一行提示。如 msg+=“姓名至少两个字符\n”; //\n为换行符号检查返回变量的长度，若大于0，说明有表单域未通过校验，此时弹出提示框。如 if(msg.length>0) { alert(msg); return false; } 第2章设计表单

实训项目二设计一个“欢迎免费注册”表单 1. 文件名regist.htm，网页标题和页面标题都是“欢迎免费注册”,表单数据提交给程序文件regist.php处理; 2. 表单含有帐号、姓名、密码、确认密码、性别（单选）、兴趣爱好（多选）、年级（选项列表）、联系方式（文本域）等内容； 3. 要求：帐号至少8个字符，姓名至少2个字符，密码至少6个字符，确认密码与密码必须相同，在表单中对相应项目附加提示信息； 4. 对表单进行前端校验，若不符合要求，用alert()函数分行给出提示； 5. 请适当修饰表单元素，网页背景颜色、字体颜色、按钮背景颜色自定。第2章设计表单

第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性

Similar presentations

Presentation on theme: "第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

第二章 设计Web表单 一、 网页结构与元标记 二、 文本与表格标记 三、 图像与链接标记 四、 表单标记 五、 样式表及其基本属性

Similar presentations

Presentation on theme: "第二章 设计Web表单 一、 网页结构与元标记 二、 文本与表格标记 三、 图像与链接标记 四、 表单标记 五、 样式表及其基本属性"— Presentation transcript:

Similar presentations

About project

反馈

第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性

Presentation on theme: "第二章设计Web表单一、网页结构与元标记二、文本与表格标记三、图像与链接标记四、表单标记五、样式表及其基本属性"— Presentation transcript: