3表单和框架

第三章表单和框架回顾使用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提交方式表单元素的统一格式FORMname=form3method=postaction=INPUTtype=checkboxname=genvalue=男size=21“maxlength=4checked=checked……/FORM指定元素的类型，可为TEXT、RADIO、SUBMIT等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中表单元素的逐一介绍文本框基本语法INPUTtype=“text”value=张三size=20FORMname=form1method=postaction=P名  字：INPUTtype=textvalue=张三size=20/P……/FORM查看源代码单行文本输入框，字符宽度为20文本区的宽度输入元素的默认值文本输入框表单元素的逐一介绍密码框基本语法INPUTtype=“password”value=“123456”size=“22”密码区宽度初始密码密码框FORMname=form2method=postaction=……P密  码：INPUTvalue=“123456”type=passwordsize=22/P/FORM查看源代码密码框，22个字符宽度表单元素的逐一介绍单选按钮基本语法INPUTtype=radiovalue=男checked=checked初始值单选按钮默认选中FORMname=form3method=postaction=BR性别：INPUTname=gentype=radioclass=inputvalue=男checkedIMGsrc=images/Male.gifwidth=23height=21男 ……/FORM查看源代码设置此单选按钮被选中表单元素的逐一介绍复选框基本语法INPUTtype=“checkbox”name=cb2value=talk复选框复选框名复选框值FORMname=form4method=postaction=……LABELINPUTtype=checkboxname=cb2value=talkchecked=checked/LABEL聊天  ……/FORM查看源代码设置此复选框被选中列表框基本语法selectname=“指定列表名称”size=“行数”optionvalue=“可选项的值”selected…/optionoptionvalue=“可选项的值”…/option……/select说明：size确定列表中可同时看到的行数。selected默认被选中的可选项。表单元素的逐一介绍查看源代码出生日期：INPUTname=byearvalue=yyyysize=4maxlength=4 年SELECTname=bmonOPTIONvalue=selected[选择月份]/OPTIONOPTIONvalue=0一月/OPTIONOPTIONvalue=1二月/OPTION……/SELECT月 INPUTname=bdayvalue=ddsize=2maxlength=2日设置此输入框最多只能输入四个符号设置“[选择月份]”选项默认被选中表单元素的逐一介绍按钮基本语法INPUTtype=resetname=Resetvalue=重填按钮名称按钮类型可为button、submit按钮上的标签FORMname=form6method=postaction=PINPUTtype=resetname=Resetvalue=重填……INPUTtype=buttonname=cancelvalue=取消/P/FORM查看源代码单击按钮，控件的值被重置为value属性中指定的初始值表单元素的逐一介绍多行文本框基本语法TEXTAREAname=textareacols=40rows=6文本框中的内容/TEXTAREA文本框的名字文本框的列数文本框的行数FORMname=form7method=postaction=……TEXTAREAname=textareacols=40rows=6欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务/TEXTAREA……/FORM6行40个字符宽度的多行文字域查看源代码16/35表单中的其它元素下拉菜单标签：selectoption/option/selectselect属性：name，size，multipleoption属性：value，selected补充：optgroup标签:为select主菜单中的每个optgroup标签都生成子菜单。form你所在国家：selectname=countryoptgrouplabel=亚洲option中国/optionoption日本/optionoption韩国/option/optgroupoptgrouplabel=欧洲option法国/optionoption德国/optionoption意大利/option/optgroup/select/form17/35表单中的动作按钮提交按钮标签：inputtype=“submit”属性：type，name，value隐藏表单域标签：inputtype=“hidden”18/35Tab键索引顺序tabindex属性用来设定按下tab键时焦点的移动顺序tabindex属性值为正整数•规则：数值越小越先访问，没有tabindex属性或属性为0的元素后被访问19/35disabled和readonly属性readonly属性用户不能修改表单控件控件值将被传送到服务器控件可以被鼠标和通过tab键选定disabled属性用户不能修改表单控件控件值将不会被传送到服务器控件不能被鼠标和通过tab键选定意义实现自动操作(演示)小结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个部分,可选第一个窗口要显示的网页框架的基本结构HTMLHEADTITLErows_cols框架/TITLE/HEADFRAMESETrows=25%,50%,*border=5FRAMEname=“topsrc=the_first.htmlFRAMEname=middlesrc=the_second.htmlFRAMEname=“bottomsrc=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=0FRAMEsrc=top.htmlname=topframe“scrolling=nonoresize=noresizeFRAMESETcols=20%,*FRAMEsrc=left.htmlnoresize=noresize“scrolling=noname=leftframe“FRAMEsrc=right.htmlname=rightframe/FRAMESET/FRAMESET查看源代码设置无框架边框不显示滚动条禁止调整框架大小框架名称，便于超文本链接锚标签target属性所引用如何设置窗口链接的显示位置如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？演示示例2：不同框架之间超链接效果使用target目标窗口属性如何设置窗口链接的显示位置target目标窗口属性name＝“显示的窗口名”framesrc=urlname=“窗口名”ahref=urltarget=“窗口名”target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。Pahref=right.htmltarget=rightframeIMGsrc=images/reg.jpgwidth=158height=31border=0//P/APahref=buy.htmltarget=rightframeIMGsrc=images/buy.jpgwidth=160height=32border=0//P/Atarget属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里演示示例3：使用target=“窗口名”查看源代码如何设置窗口链接的显示位置target目标窗口属性四个特殊的窗口ahref=urltarget=“_blank”显示在新窗口ahref=urltarget=“_self”显示在本窗口ahref=urltarget=“_parent”显示在父