计算机网络与网页制作 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 标懸:新大陆手机商城 </u1 让你我加深了解! h1让你我加深了解!</h1> 件,度千两门近x月 为了便于我们每个月向您邮寄信件,请您填写以下内容 <>您希望信件包含以下信息:cz/ 选框)产品价目表(夏选框 爱籍盒价百 价目表(复选框)促销活动(复选框)新产品推荐 促舌动(复选框)新产品推荐 您现在是新大陆商城的会员吗?cr 您现在是新大陆商城的会员吗? 单选按钮》是cbr 列表框)打折促销,产 列的揣动思产 用,任何活动 您的意见: 如果愿意,请把您的照片发给我们(上传 属性”面板 b》《w山五r》A山n)for 表单 动作 目标①〕 fo orm 方法P0sr 编码类型
1. 插入一个空的HTML表单 1) 定位光标，菜单 插入>>表单>>表单 2) 定位光标，面板 插入>>表单>>表单 “属性”面板 4
把文本内容移至表单内 选中内容,Ctr+X,Ctr+V 代码抵分设计刻代码后!刻时视图检查6标题新大陆手机商城 <1i< a href="+>服务</a></1i> <11< a hret="”>关于我们</a×/11> 新大陆手机商城 <1× a href=””>联系我们</a</ /ul> 首页:产品:服务:关于我们:联系我们 <dvid=“main <h1>让你我加深了解!</h1 让你我加深了解! 与下内百便于我们每个月向您邮信件,请 污了瘐于我们每个月问您邮寄信件,请您填写以下内容 姓名:<bz/ 图44<p>您希望信件包含以下信息:<br (复选框)产品价目表《复选框)促诮活动 框)促销活动(复选框)新产品推荐 复话)新产品推荐</p 46)您现在是新大陆高城会员吗?r 您现在是新大陆商城的会员吗? (单选按钮)是<br (单选按钮) 单选按钮)不记得了 (单选按钮)不记得了 <p>您商城的啷些舌动感 列表框)打折促销,产 #Aa: th 任何活动</p p>您的意见:</p 列动 试用,任何活动 53<g>如果原意,请把您的照片发给我们(上传)</p> 您的意见 如果愿意:请把您的照片发给我们(上传 <diy id"sidebar"> <body><div#container><divenain)<forn#form1><p> ②100%-585x54760K/2秒 Uni code QTF-8
把文本内容移至表单内 选中内容，Ctrl+X，Ctrl+V 5