复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）16 构建网页表单

计算机网络与网页制作 Chapter16:构建网页表单 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 16：构建网页表单 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 创建表单 *添加多种表单元素 *用CSS设定表单样式 *验证表单

目标  创建表单  添加多种表单元素  用CSS设定表单样式  验证表单 2

件的查看V在工具门数什 新大陆手机商城 首页产品原务天于们联们 效果 让你我加深了解! 资讯导购 三里55830 为了使于我们每个月向您部寄信件,请您填写以下内容 苹果 iPhone4s 小米手机 苹果 iPhone4 索爱LT18 诺基亚N9 您希望信件包含以下信息, 三星19000 (复选框)产品价目表(复选框)促销活动(复选框)新产品推 诺基亚C503 您现在是新大陆商城的会员吗? 降价管息! 单选按钮)是 单选按钮)否 悲知道吗?我们致力于使我们的客户树有 (单选按钮)不记得了 您对商城的些活动感兴 新大陆手机肖城 I4.2l 列表框)打折促销,产品试用,任何活动 您的意见 如果愿意,请把您的片发给我们(上传 让你我加深了解!欢 资讯导购 三里5530 只向在言信,请与以下百 苹中h0作e45 小寒手机 您希望信件含以下信 产品价日我厂换函动厂新产品帮 基C5-03 你现在是大比而的会员? 降价信息 不会员 您知市码马?们力于便我们的暮户肉 C不记了 来白出界答地的最落品的手积和浸备 我们与丽之闻的关系,使们国面够 队最低的产品价 身的里 如果息+把您的片发北们

效果 3

1.插入一个空的HTML表单 *1)定位光标,菜单插入>>表单>>表单 *2)定位光标,面板插入>表单>>表单 目代码[板分设计时代码巨时视图直6 标懸:新大陆手机商城 件,度千两门近x月 为了便于我们每个月向您邮寄信件,请您填写以下内容 <>您希望信件包含以下信息:cz/ 选框)产品价目表(夏选框 爱籍盒价百 价目表(复选框)促销活动(复选框)新产品推荐 促舌动(复选框)新产品推荐 您现在是新大陆商城的会员吗?cr 您现在是新大陆商城的会员吗? 单选按钮》是cbr 列表框)打折促销,产 列的揣动思产 用,任何活动 您的意见: 如果愿意,请把您的照片发给我们(上传 属性”面板 b》《w山五r》A山n)for 表单 动作 目标①〕 fo orm 方法P0sr 编码类型

1. 插入一个空的HTML表单  1) 定位光标，菜单 插入>>表单>>表单  2) 定位光标，面板 插入>>表单>>表单 “属性”面板 4

把文本内容移至表单内 选中内容,Ctr+X,Ctr+V 代码抵分设计刻代码后!刻时视图检查6标题新大陆手机商城 服务 关于我们 新大陆手机商城 联系我们 首页:产品:服务:关于我们:联系我们 让你我加深了解!您希望信件包含以下信息:您商城的啷些舌动感 列表框)打折促销,产 #Aa: th 任何活动您的意见:如果原意,请把您的照片发给我们(上传) 您的意见 如果愿意:请把您的照片发给我们(上传 ②100%-585x54760K/2秒 Uni code QTF-8

把文本内容移至表单内  选中内容，Ctrl+X，Ctrl+V 5

2.添加文本字段控件 *定位光标,菜单插入>>表单>>文本域 输入标签辅助功能属性 、c标题:新大陆手机商城 新大陆手机商城 ID: Mail Name 确定 取消 首页:产品:服务:关于我们:联系我们 帮助 ②使用o性附加标签标记 让你我加深了解! 样式:⊙用标签标记环绕 请您填写以下内容 标签标记 页面上已经有文字 “姓名”,故此处选 您希望信件包含以下信息 位置在表单项前 (复选框)产品价目表(复选框)促销活动(复选框)新产品推荐 择“无标签标记”。 ②在表单项后 您现在是新大陆商城的会员吗? (单选按钮) 访健Tab键索引: (单选按钮)不记得了 您对商 些活动感兴趣 折促销,产品试用,任何活动 如果在插入对象时不想辅入此信息,请更改“ 您的意见: 助功能“首选数。 如果愿意,请把您的照片发给我们(上传 6 e103·585x547√80I/2秒 Unicode qIF8)

2. 添加文本字段控件  定位光标，菜单插入>>表单>>文本域 页面上已经有文字 “姓名”，故此处选 择“无标签标记”。 6

设置文本域属性 *选中文本域,“属性”面板。 屋性 文本域 字符亮度()10类型⊙单行6)多行0)密码)类C)无 11me最多字符数5初始值) name属性。不是|D属性。 属性 文本域 字符宽度()10 类型⊙单行③)⊙条行M)⊙密码)类C)无 最多字符数 初始值∝) □禁用 □只读R 把光标定位于文本框内,“属性!面板如的 属性 >mML格式a)段落 类无 BI日扫哲标题T) ID〔)Mai1Hane 链接0) 多口目标G)[ D属性。若有同名的 DCSS规则,将作用 于此文本域

设置文本域属性  选中文本域，“属性”面板。  把光标定位于文本框内，“属性”面板 指定该文本域适用的 类CSS规则。 ID属性。若有同名的 ID CSS规则，将作用 于此文本域。 name属性。不是ID属性。 7

插入更多的文本域 文本域 字符宽度)30 类型单行③)多行)密码)类C)无 Mail_Address 最多字符数50 初始值① □禁用⑩) □只读0R) 属性 文本域 字符宽度)6 类型单行③)◎多行0)⊙密码P)类)无 1p 最多字符数6 初始值) □禁用 □只读aR 区分name属性与|D属性 1d="forml" name="forml"method="post 硬我们每个月问您奇怕请您填写以下内容 >为了便于我们每个月向您邮寄信件,请您 名 厚写以下内客:<br/ 地址: 编 44444 <input name=Mail Name" type="text 您希望信件包含以下信息 复选框)产品价目表(复选框)促销活动(复选框)新产品推荐 地址 <Input name=Mail Address"type=text 您现在是新大陆商城的会员吗? d=Mail Address"31z8=30" maxlength=50 (单选按钮)是 (单选按钮 <br / (单选按钮)不记得了 47 <input name="Mail Zip" type="text" id 您对商城的哪些活动感兴趣 Ma11zip"a1ze="6” maxlength="6” (列表框)打折促销,产品试用,任何活动

插入更多的文本域 区分name属性与ID属性。 8

3.添加复选框控件 *定位光标,菜单插入>>表单>>复选框。 己.C标题:新大陆手机商城 输入标签辅助功能属性 新大陆手机商城 首页氵产品氵服务氵关于我们氵联系我们 标签:产品价目表 取消 帮助 ⊙使用Tor性附加标金 让你我加深了解! 样式:◎用标签标记环绕 丙了瘐于我们每个月向邮寄信件,请您填写以下丙容 O无标签标记 手工删除页面上已经有 姓名: 文字“产品价目表”, 在此处设置该文字。 位置:在表单项前 目表》复选框)促销活动(复选框)新产品推荐 在表单项后 您现在是新大陆商城的会员吗? 访问健 Tab健索引 (单选按钮) (单选按钮)不记得了 您对商城的哪些活动感兴趣 如果在插入对象时不想轴入此信息,请更改 (列表框)打折促销,产品试用,任何活动 助功能”首选效。 您的意见 如果愿意,请把您的照片发给我们(上传 ②Q10%573x54760K/2秒 Uni code QUTF-8

3. 添加复选框控件  定位光标，菜单插入>>表单>>复选框。 手工删除页面上已经有 文字“产品价目表”， 在此处设置该文字。 9

设置复选框的属性 勾选时所代表的值 属性 复选框名称 选定值) price 初始状态o已勾选〔) 类)无 Price info ⊙未选中0 50cp>您希望信件包含以下信息:dbr/> 您希望信件包含以下信息 纾产品价目表(复选框)促销活动(复选框)新产品推荐 Price Info" type="check 2品价目表 您现在是新大陆商城的会员吗? 复选框)促诮活动(复选框)新产品推荐 (单选按钮)是 d属性与name 属性的用途不同

设置复选框的属性 勾选时所代表的值 id 属性与name 属性的用途不同。 10