第三章 (2) 表单标记 form, input, select, option

第三章 (2) 表单标记 form, input, select,

option

textarea, label, fieldset, legend

网页中表单的作用

表单是实现动态网页的一种主要的外在形式。它的主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息。它是网站实现互动功能的重要组成部分。

例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面，其主要内容是姓名、年龄、联系方式等个人信息。又例如要在某论坛上发言，发言之前要申请资格，也是要填写完成一个表单网页。无论网站使用的是那种形式的语言来实现网站的互动功能，例如 ASP 、 PHP 、 JSP ，表单已经成为它们统一的外在形式

用换行符布局的表单

<form name="form1" method="post" action=“a.asp"><p> 请输入您的姓名 :<br><input type="text" name="name" id="nam

e"></p><p> 请问你的性别 :<br>

<input type="radio" name="sex" value="male"> 男 <input type="radio" name="sex" value="female"> 女 </p>

<p> 你喜欢做些什么 :<br><input type="checkbox" name="hobby" value="book"> 看书<input type="checkbox" name="hobby" value="net"> 上网<input type="checkbox" name="hobby" value="sleep"> 睡觉 </p>

<p> 我要留言 :<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>

<p><input type="submit" value="Submit"></p></form>

为什么要用表格布局表单

表单和表单元素并不具有排版的能力，表单和表单元素的排版最终还是要由表格组织起来，

因此在 html 代码中，表单标记和表格标记通常是如影随形的。

用表格布局的表单代码<form name="form1" method="post" action=“a.asp">

<table width="88%" border="0" cellspacing="0" cellpadding="0">

<tr> <td align="center"> 用户名： </td>

<td height="28"><input name=“user" type="text" maxlength="10" size="12" /></td> </tr>

<tr> <td height="28" align="center"> 密码： </td>

<td><input name=“pwd" type="password" value="" size="12" /></td> </tr>

<tr> <td height="32"> <input type="submit" name="Submit" value=" 提交 " /></td>

<td> <input type="reset" name="Submit2" value=" 重置 " /></t

d> </tr> </table> </form>

表单代码的组成

一个表单的代码至少应包括三个组成部分： (1) 表单 <form> 标记：这里包含了处理表单

数据所用动态网页的 URL 以及数据提交到服务器的方法。

(2) 表单元素：包含了文本框、菜单、复选框和单选框等。

(3) 提交按钮：将数据传送到服务器上的动态网页。

表单的功能

表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的 html 源代码，二是服务器端用来处理用户所填信息的程序（暂时不学），或者客户端的脚本。在 html 里，我们可以定义表单，并且使表单与 CGI 或 ASP 等服务器端的表单处理程序配合。

表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会上传到服务器中，然后由服务器中的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中。

表单标记 <form>

<form></form> 标记用来创建一个表单域，即定义表单的开始和结束位置，这一标记有几方面的作用。第一，限定表单的范围。所有表单对象，都要插入到表单域之中。单击提交按纽时，提交的也是表单范围之内的内容。

第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置（ action ）、提交表单的方法（ method ）等。这些信息对于浏览者是不可见的，但对于处理表单确起着决定性的作用

多个 <form> 标记不能嵌套

form 标记的属性面板

namename

targettarget

methodmethod

actionaction

enctype enctype

form 标记常见属性 method

method ： get 或 postget 方式提交的表单信息是非安全方式，附加在 URL 地址后面（例如百度）url? 表单元素 1 的 name= 表单元素 1 的 value & 表单元素2 的 name= 表单元素 2 的 value……<form name=f action=s>

<input type=text name=wd id=kw size=42 maxlength=100> <input type=submit value= 百度一下 id=sb><div id=sug onselectstart="return false"></div><span id=hp><a href=/gaoji/preferences.html> 设置 </a><br><a href=/gaoji/advanced.html> 高级 </a></span></form>

form 标记常见属性 action

action ：接一个动态网页名<form name="test" method=“post" action="4-2_2.asp">

设置 action 属性后会产生两个作用：1 点击该表单的提交按钮将会链接到该网页2 同时还会将表单中输入的数据发送给该网页进行处理

表单数据提交后

表单将数据提交给动态页后，动态页通过 request 对象取下数据，就能进行处理了，如把这些数据存入数据库，或按这些数据进行查询等。

<%dim userName,PSuserName=request.form("userName")PS=request.form("PS")response.write " 你输入的用户名是 :"&userNameresponse.write"<br> 你输入的密码是 :"&PS%>

form 标记常见属性

enctype ：一般不需要设置，如果表单中有文件上传对象，则设置该属性值为 multipart/form-data

name 和 id ：在表单的接收页面只接收有 name 属性的表单元素，赋 ID 的元素通过表单是接收不到值的

target ：接收页是否在新窗口打开，和 a 标记的该属性类似

表单中的元素

DW 中表单对象与标记的对应关系

表单域 form 标记中包含的表单标记主要有 input ，select (option) ， textarea 等

在 DW 中表单对象面板中的对象与这些标记的对应关系是：

input- 表单元素的通用标记 input 标记是收集用户输入信息的标记，是一个单标记，其含义由

type 属性决定。 input 标记的 type 属性总共有 10 种取值，含义如表 1 所示：

type 属性值描述text 文本域

password 密码域file 文件域

checkbox 复选框radio 单选框

button 普通按钮submit 提交按钮reset 重置按钮

hidden 隐藏域image 图像域 ( 图像按钮 )

文本域文本域举例：查询： <input type="text" name="search" size=2

0 onfocus="this.value=''" value=" 请输入关键字 "/>

input 标记中的 size 属性是定义文本域的宽度

文本域属值描述

name 或 id 文本域的名称或 id

maxlength 文本域的最大输入字符数

size 文本域的宽度

value 文本域的默认值

单选框

单选框举例：<input type=“radio” name=“gender” value=“F” />

女性 <input type="radio" name="gender" value="M" checked="checked" /> 男性

checked 属性设定初始时单选按钮哪项处于选定状态，同一组单选按钮 name 属性的值必须相同，这样这一组单选框中只有一个能被选中。

复选框

复选框，可以选中多项<input name=“checkbox” type=“checkbox” value

=“1” checked=“checked” /> 看书 <input name=“checkbox2” type=“checkbox” value=“2” /> 上网 <input type="checkbox" name="checkbox3" value=“3" /> 听音乐

文件域

<input type="file" name=“upfile" />供上传文件用，需要服务器端的上传组件配合文件域对表单标记 form 有特殊要求， method 必

须设为 post ， MIME 类型必须为 multipart/form-data

按钮

提交按钮 (type="submit")将表单中所有具有 name 属性的元素内容发送到

服务器端指定的应用程序重置按钮 (type="reset")用户在填写表单时，若希望重新填写，单击该按

钮将使全部表单元素的值还原为初始值普通按钮 (type="button")该按钮没有内在行为，但可用 javascript 为其指

定动作

图像域

即图像按钮，用一张图片做按钮，功能和提交按钮相同

<input type="image" name=“tijiao" src="images/yjt.gif" />

<select> 和 <option> 标记

<select> 标记是下拉菜单框或列表框标记，是一个标记的含义由其 size 属性决定的元素，如果该标记没有设置 size 属性，那么表示为下拉菜单框，如果设置了 size 属性，则变成了列表框，设置了 multiple 属性，则表示列表框允许多选。下列列表框中的每一项由 <option> 标记定义，还可使用 <optgroup> 添加一个不可选中的选项。

例如：你的籍贯： <select name="select" id="select" size="3">

<option value="1"> 湖南 </option> <option value="2"> 广东 </option> <option value="3"> 江苏 </option><option value="4"> 四川 </option></select>

去掉 size 属性后

跳转菜单

DW 中的跳转菜单实际上是一个带有 javascript 脚本的下拉菜单，点击跳转菜单的某一项将会转到某个网页

<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">

<option value="http://www.sina.com"> 新浪网 </option> <option value="http://www.sohu.com"> 搜狐网 </option><o

ption value="http://www.taobao.com"> 淘宝网 </option> </select>

多行文本域标记 <textarea>

<textarea> 是多行文本域标记，用于让浏览者输入多行文本，如发表评论或留言，跟帖。

<textarea name="comments" cols="40" rows="4" wrap="virtual"> 这是一个有 4 行，每行可容纳 40 个字符，换行方式为虚拟的多行文本域。 </textarea>

表单的辅助标记

<fieldset> 、 <legend> 标记fieldset 是字段集标记，它必须包含一个 legend 标记，表示是字段集的标题。如果表单中的控件较多，可以将逻辑上是一组的控件放在一个字段集内，显得有条理些。

<form method="post"><fieldset><legend> 个人资料 </legend>

……</fieldset>……</form>

<label> 标记的用途

为控件定义一个标签，通过 for 属性绑定控件。在 dw 中插入表单控件时选择“使用 for 属性附加标签标记”如：

<input type="radio" name="sex" value=“m" id="male" /> <label for="male"> 男 </label><br />

<input type="radio" name="sex" value=“f" id=“female" />

<label for="female"> 女 </label>这样当单击标签时就相当于单击表单控件表单控件还可添加快捷键， tab 顺序键等

将行为和表单一起使用

在 DW 中，通过标签面板－行为－检查表单，可以对表单的输入进行检查，如文本域不能为空，必须是数字，或电子邮件地址等，这实际上是添加了检查表单提交事件的 javascript 代码实现的

<select name="select" onChange="window.open(this.options[this.selectedIndex].value)">

通过自己输入脚本实现跳转菜单功能

框架标记 frameset frame iframe

P88 页

框架标记

如果想把一个浏览器窗口分成几个区域，每个区域都显示一个网页，则需要使用框架集 <frameset> 和框架标记 <frame> ，这两个标记也是成组出现的。

框架标记以前也用于网页的排版，现在用得比较少了，但网站的管理后台程序常用左右分割的框架版式。

DW 中框架标记位于布局分类中

<frameset> 标记

窗口框架的分割有两种方式，一种是水平分割，另一种是垂直分割，在 <frameset> 标记中通过 cols 属性和 rows 属性来控制窗口的分割方式

<frameset rows=“ 各个横向框架的大小或比例 " cols=" 各个纵向框架的大小 " border=" 像素值 " bordercolor=" 颜色值 " frameborder="yes|no" framespacing=" 像素值 ">…</frameset>

用 cols 属性将窗口分为左右部分 <frameset cols=“30%,40%,*”> 那么“ *” 就代表

30% 的宽度

用 rows 属性将窗口分为上下部分 <frameset rows="30%,40%,*">

框架的嵌套

通过框架的嵌套可实现对子窗口的分割，例如有时需要先将窗口水平分割，再将某个子窗口进行垂直分割，如图 3-50 所示。可用下面的代码实现。

<html><head><title> 用框架分割窗体 </title></head><frameset rows="30%,*"> <frame src="2-8.html"/> <frameset cols="30%,*"> <frame src="2-9.html"/>

<frame src="2-2hn.html"/> </frameset> </frameset></html>

<frame /> 标记

用 src 属性指定要显示的网页 <frame src="demo/2-8.html"/>

用 name 属性指定框架的名称可以用 name 属性为框架指定名称，这样做的用途是，

当其他框架中的链接要在指定的框架中打开时，可以设置其他框架中超链接的 target 属性值等于这个框架的 name 值。

例如定义右边窗口 name 属性为 main ： <frame name="main"/>

左边窗口中的链接目标是 main ： <a href="add.htm" target="main"> 添加新闻 </a>

这样 add.htm 会在框架名为 main 的窗口（右边窗口）中打开。

Iframe 内嵌框架

框架集标记只能对网页进行左右或上下分割，如果要让网页的中间某个矩形区域显示其他网页，则需要用到浮动框架标记，下面是浮动框架的属性举例：

<Iframe src="/blog/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"></Iframe>

src ： URL 地址，既可是 HTML 文件，也可以是文本、 ASP 等； width 、 height ： " 内部框架 " 区域的宽与高； scrolling: 当 SRC 指定的 HTML 文件在指定的区域显示不完时，滚

动选项，如果设置为 NO ，则不出现滚动条；如为 Auto ：则自动出现滚动条；如为 Yes ，则显示 ;

FrameBorder ：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为 0 。

name: 框架的名字，用来进行识别

这是 iframe 框架的例子 <br />

下面的天气预报是插入的其他网页 <br />

<iframe src="http://mimg.163.com/tianqi/city/57872.html" frameborder="0" scrolling="no" width = 128 height=150 />

通过 iframe 挂木马

活动框架常用于将其他网页的内容导入到自己网页的某个区域，如把天气预报网站的内容导入到自己做的网页的某个区域显示，

但某些木马或病毒程序利用 iframe 的这一特点，通过修改用户的网页源代码，在网页尾部添加 iframe 代码，导入其他带病毒的恶意网站的网页，并将 iframe 框架的宽和高都设置为 0 ，这样用户打开自己网页的同时，就不知不觉打开了恶意网站的网页，从而感染病毒，这就是所谓的 iframe 挂木马的原理。不过可查看地址栏看打开网页时是否提示正在打开某个恶意网站的网址而发现这种被挂木马的网页。

<head> 标记中的meta, title, link

meta 元信息标记

meta 是元信息标记，是描述网页文档信息的标记。可以描述文档的编码方式，文档的摘要，文档的关键字，文档的刷新。都不会显示在网页上，其中网页的摘要，关键字是为了让搜索引擎能对网页内容的主题进行识别和分类。文档刷新可设置网页经过一段时间后自动刷新或转到其他 Url 。在 DW 中，可通过菜单命令“插入－ HTML －文件头标签”进行这些设置。

Meta 的 name 属性

Keywords( 关键字 )说明： keywords 用来告诉搜索引擎网页的关键字是什么。

举例：＜ meta name =“keywords” content=“science, relationshi

ps, entertainment, human” ＞ description( 网站内容描述 )说明： description 用来告诉搜索引擎网站的主要内容。举例：

＜ meta name="description" content="This page is about the meaning of science, education,culture." ＞

Meta 的 http-equiv 属性

自动刷新＜ meta http-equiv=“Refresh” content=“2 ； URL=http://www.webjx.com” ＞实现网页转换时的动画效果＜ meta http-equiv="Page-Enter" content="revealTrans(duration= ５ . ０ , transition= ２０ )" ＞

link 链接其他文件的标记

主要用来链接外部 CSS 文件，也可链接一个图标文件 .ico用来改变浏览器地址栏的图标。如：

<link rel="Bookmark" href="favicon.ico" /> <link rel="icon" href="favicon.ico" type="image/x-icon" /

> <link rel="shortcut icon" href="favicon.ico" type="image/

x-icon" /><link href="SpryAssets/SpryTabbedPanels.css" re

l="stylesheet" type="text/css" />

Base ( 基链接 )

Base (基链接 )　　　说明：插入网页基链接属性 .

用法：<Base href=“http://www.xia8.net/” target=“_blank”>

　　　注意：网页上的所有相对路径在链接时都将在前面加上“ http://www.xia8.net/” 。其中 target=“_blank” 指明链接文件在新窗口中打开。

复习题

下面的表单元素代码都有错误，你能指出它们分别错在哪里吗？

① <input name="country" value="Your country here." /> ② <checkbox name="color" value="teal" /> ③ <input type="password" value="pwd" /> ④ <textarea name="essay" height="6" width="100">You

r story.</textarea> ⑤ <select name="popsicle"> <option value="orange" /> <option value="grape" /> <option value="cherry" /> </select>

第三章 (2) 表单标记 form, input, select, option

Documents

Transcript of 第三章 (2) 表单标记 form, input, select, option