html网页制作chapter3表单和框架

第三章表单和框架回顾使用HTML创建一个表格至少需要哪些标签？跨多行表格是在单元格里用哪个属性进行设置？对表格进行美化，主要用哪些属性进行设置？预习检查请列举表单中有哪些常用的表单元素？创建一个框架页面至少需要哪几个标签？本章任务制作“注册”页面制作“客户中心”页面本章目标会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别会使用框架结构实现多窗口展示页面表单表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具注册用户收集信息反馈信息提供搜索工具表单包含的表单元素单行文本输入框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)表单页面的基本结构METHOD="post或get"ACTIONMETHOD指定提交后，由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全ACTION="URL"<FORMaction=""method="post"> ……</FORM>演示示例1：使用post提交方式和get提交方式表单的基本语法2-2……<formaction="login.aspx"method="post"><p>用户名：<inputname="username"type="text"size="20"maxlength="10"/></p><p>密

码：<inputname="pwd"type="password"size="20"/></p><p><inputtype="submit"name="btn"value="提交"/>  <inputname="reset"type="reset"value="重填"/></p></form>……表单输入元素：input表单提交地址和方法的设置表单的典型应用：假定登录126邮箱表单的执行原理Internet12客户端：请求登录，通过表单填写账户信息服务器端：验证发来的账号信息，然后给出反馈客户端和服务器类似两人沟通一样，从而建立交互活动<inputname="表单元素名称"type="类型"value="值"size="显示宽度"maxlength=“最大长度"checked="是否选中"/>指定元素的类型，可为text、radio、submit等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中checked表单元素的基本格式文本框<formmethod="post"action=""><p>用户名：<inputname="userName"type="text"size="21"/></p>……</form>表单元素的逐一介绍8-1单行文本输入框，字符宽度为21name用于服务器端获取数据，例如：request.getParameter("userName

")<input

name="名称"

type="text"value="初值"

size="数字">

密码框<formmethod="post"action=""><p>密

码：

<input

name="pass"type="password"size="22"/></p>……</form>表单元素的逐一介绍8-2隐藏输入的信息<input

name="名称"

type="password"

value="初值"

size="数字">

按钮......<inputtype="reset"name="reset"value="重填"/><inputtype="submit"name="button"value="同意……"/><inputtype="button"name="confirm"value="点播音乐"/><inputtype="button"name="cancel"value="取消"/><inputtype="image"src="images/login.gif"/>……表单元素的逐一介绍8-3<input

name="名称"

type="按钮类型"

value="按钮文字"

src="图片按钮的图片url">普通按钮：button提交按钮：submit重置（清空）按钮：reset图片按钮：image

单选按钮

......<br/>性别：<inputname="gen"type="radio"value="男"checked="checked"><inputname="gen"type="radio"value="女"

>……表单元素的逐一介绍8-4特点：单选名字name相同表明属于同一组<inputname=“组名"

type="radio"value=

"…"checked="…"

>

复选框

……爱好：

<inputtype="checkbox"name="hobby1"value="sports"/>运动

<inputtype="checkbox"name="hobby2"value="talk"

checked="checked"/>聊天

<inputtype="checkbox"name="hobby3"value="play"/>玩游戏……表单元素的逐一介绍8-5特点：多选<inputtype="checkbox"name="…"value="…"

checked=

"…"

>练习——贵美登录页需求说明：完成网站登录页面完成时间：20分钟1、提交地址：login.aspx2、提交方法：post

文件域

......<p><inputtype="file"name="files"/><br/><inputtype="submit"name="upload"value="上传"/></p>……表单元素的逐一介绍8-6显示上传文件的地址<inputtype="file"name="…"

>小结前面所学的各类表单元素，语法分别是什么？type功能例子text单行文本输入<inputtype="text"name="username"/>password密码<inputtype="password"name="password"/>radio单选<inputtype="radio"name="sex"value="男"/>男<inputtype="radio"name="sex"value="女"/>女checkbox多选<inputtype="checkbox"name="hobby"value="书"/>书<inputtype="checkbox"name="hobby"value="画"/>画reset重置表单数据<inputtype="reset"value="重置"/>file文件上传<inputtype="file"name="files"/>submit提交表单数据<inputtype="submit"value="提交"/>image图形提交按钮<inputtype="image"src="images/button.gif"/>button普通按钮<inputtype="button"value="播放音乐"/>

列表框......<selectname="bmon"><optionvalue=""selected="selected">[选择月份]</option><optionvalue="0">一月</option><optionvalue="1">二月</option><optionvalue="2">三月</option><optionvalue="3">四月</option></select>

……表单元素的逐一介绍8-7提供固定选项，避免用户输入错误<select

name="指定列表名称"

size="行数">

<option

value="选项值"

selected="selected">…</option>

…

…</select>

多行文本框

......<h2><imgsrc="images/read.gif"alt="阅读协议"title="阅读协议"/>阅读贵美网服务协议</h2><p><textareaname="textarea"cols="40"rows="6">

欢迎阅读服务条款协议...</textarea></p>……表单元素的逐一介绍8-8<textareaname="..."cols="列宽"rows="行宽">文本内容</textarea>

隐藏域方便服务器端“记住”客户端的信息、但又不希望客户看到的数据

......<inputtype="hidden"name="userid"value="666"/>……表单的高级用法2-1隐藏的客户代号信息：666，但客户端页面不显示隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感<input

type="hidden"name="…."value="…"/>只读和禁用属性readonly：希望某个框内的内容只允许用户看，不能修改disabled：因没达到使用的条件，限制用户使用<textareaname="content"cols="60"rows="8"readonly="readonly">欢迎阅读服务条款协议，贵美的权利和义务......</textarea><br/><br/>同意以上协议<inputname="agree"type="checkbox"/><inputname="btn"type="submit"value="注册"disabled="disabled"/></p>……表单的高级用法2-21、用户不能修改协议2、勾选“同意以上协议”，才允许点击“注册”按钮练习——简易求职表需求说明：使用表单制作简易求职表“协议”只读，“提交”按钮禁用用隐藏域提交求职者姓名“zhangsan”

如何实现表单布局3-1如何实现页面中登录表单的布局？问题：结构简单，但不美观如何实现表单布局3-2实际页面中的登录表单布局实际应用，需要几行几列的表格布局？如何实现表单布局3-3<formmethod="post"action="login_success.htm"><table><tr><td><imgsrc="images/title_login_2.png"alt="alt"/></td><tdcolspan="2"> </td></tr><tr><td></td><td>会员名:</td><td><inputname=“sname”…（可包含….）</td>…代码同“会员名”…<tdcolspan="2"><inputtype="image"…src=“…"/></td></tr> </table></form>整体布局：4行3列的表格图片后的内容跨2列，内容用“空格”填充图片按钮跨2列小结1编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习代码框架广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)框架使用场合页面的一个固定部分显示徽标或静态信息在另一个固定部分显示导航部分详细内容在此处显示详细内容，页面中此部分是变化的。<framesetcols="25%,50%,*"rows="50%,*"border="5">

<framesrc="the_first.html"> ……</frameset>框架的基本结构框架页面的基本语法边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选第一个窗口要显示的网页框架的基本结构<HTML><HEAD><TITLE>rows_cols框架</TITLE></HEAD><FRAMESETrows="25%,50%,*"border="5"><FRAMEname="top"src="the_first.html"><FRAMEname="middle"src="the_second.html">

<FRAMEname="bottom"src="the_third.html"></FRAMESET></HTML>将窗口分割成上中下3部分如果要在浏览器中创建左中右三个窗口,该如何实现？查看源代码每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？窗口边框的宽度如何创建多个复杂的窗口

要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口2、把下面的窗口分成左右两个窗口top窗口left窗口right窗口如何创建多个复杂的窗口

创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”top.html效果图left.html效果图right.html效果如何创建多个复杂的窗口4、新建多框架HTML页面"Frame_Sets.html"......<FRAMESETrows="20%,*"frameborder="0"><FRAMEsrc="top.html"name="topframe“scrolling="no"noresize="noresize"><FRAMESETcols="20%,*"><FRAMEsrc="left.html"noresize="noresize"scrolling="no"name="leftframe"><FRAMEsrc="right.html"name="rightframe"></FRAMESET></FRAMESET>查看源代码设置无框架边框不显示滚动条禁止调整框架大小框架名称，便于超文本链接锚标签target属性所引用如何设置窗口链接的显示位置

如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？演示示例2：不同框架之间超链接效果使用target目标窗口属性如何设置窗口链接的显示位置target目标窗口属性name＝"显示的窗口名" <framesrc=urlname="窗口名">

<ahref=urltarget="窗口名"> target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。<P><ahref="right.html"target="rightframe"><IMGsrc="images/reg.jpg"width="158"height="31"border="0"/></P></A><P><ahref="buy.html"target="rightframe"><IMGsrc="images/buy.jpg"width="160"height="32"border="0"/></P></A>target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里演示示例3：使用target="窗口名"如何设置窗口链接的显示位置tar