网页设计-表单和框架的使用课件

上传人：d*** IP属地：贵州上传时间：2022-12-13 格式：PPT 页数：106 大小：6.04MB 积分：25 举报 版权申诉

已阅读5页，还剩101页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计———表单和框架的使用网页设计———表单和框架的使用12回顾：使用HTML标记创建表格，并通过相关的属性设置表格的格式。层（DIV）就像一个装满内容的盒子，可以将它放到页面中所需的位置。在HTML文件中插入多媒体。插入GIF动画插入音频和视频文件插入JavaApplet插件2回顾：使用HTML标记创建表格，并通过相关的属性设置表格的23表<TABLE>的使用行TR表头TH单元格TD表名CAPTION3表<TABLE>的使用行TR表头TH单元格TD表名CAP34使用表的相关标记创建表<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLEBORDER=2> <CAPTION>创建表</CAPTION> <TH>一月</TH> <TH>二月</TH> <TH>三月</TH> <TH>四月</TH> <TH>五月</TH> <TH>六月</TH> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY></HTML>4使用表的相关标记创建表<HTML>45556Table中嵌套table6Table中嵌套table67<DIV>层的使用<DIV>…</DIV>可以设定多行或跨段落或某一区域的内容样式.<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV>

第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIValign=right>

第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 <SPANSTYLE="font-size:25">

公共格式</SPAN>应用于这一部分中的所有元素 </BODY></HTML>

7<DIV>层的使用<DIV>…</DIV>可以设定多行或78889Div中嵌套ul+li9Div中嵌套ul+li9目标使用框架使用表单和表单控件目标使用框架使用表单和表单控件1011框架框架将Web浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。11框架框架将Web浏览器分成多个不同的区域，每个区域都11广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)广告栏顶部框架(top.htm)导航栏左侧框架(left.h1213FRAMESET标记使用FRAMESET创建框架其属性有：RowsCols常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用<frameset>标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。13FRAMESET标记使用FRAMESET创建框架13框架集的基本结构<html><head><title>框架的基本结构</title></head><framesetcols="25%,50%,*"rows="50%,*"border=5><framesrc="the_first.html"><frame></frameset></html>边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选第一个窗口要显示的网页框架集的基本结构<html>边框尺寸大小将窗口分割成左中右31415框架使用示例：<HTML> <HEAD> <TITLE>两个大小相等的框架</TITLE> </HEAD> <FRAMESETCOLS="50%,*"> <FRAMESRC=x.html> <FRAMESRC=y.html> </FRAMESET></HTML>15框架使用示例：<HTML>15<html><head><title>采用整数设置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html><html>16一个垂直分割的例子<html><head><title>采用整数设置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html>一个垂直分割的例子<html>17框架的边框<html><head><title>框架的边框控制</title></head><framesetrows="30%,*"border="12"> <frame> <framesetcols="20%,*"> <frame> <frame></frameset></frameset></html>

框架的边框1819嵌套的框架集<HTML> <HEAD> <TITLE>嵌套框架</TITLE> </HEAD> <FRAMESETcols="33%,33%,34%"> <FRAMEsrc="flowers.jpg"> <FRAMESETrows="40%,60%"> <FRAMEsrc="x.html"> <FRAMEsrc="y.html"> </FRAMESET> <FRAMEsrc="flowers.jpg"> </FRAMESET></HTML>19嵌套的框架集<HTML>1920FRAME标记FRAME标记的属性包括：Name<framename="子窗口名称">Src<framesrc="html文件的位置">Noresize<framenoresizesrc="url">不希望用户能随意地改变子窗口的大小Scrolling<framescrolling="yes或no或auto">yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。Marginwidth<framesrc="url"marginwidth="value"Marginheight

marginheight="value">

在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。20FRAME标记FRAME标记的属性包括：20复习：<A>目标显示方式属性--target用来指定目标窗口的打开方式。包含4个取值：_blank：在新窗口中打开。_parent：在上一级的浏览窗口中打开。_self：在当前页面或框架中打开。_top：在当前浏览窗口页面中打开。复习：<A>目标显示方式属性--target用来21<HTML><head></head><BODY><AHREF="x1.html"TARGET="_blank">文件x</A></BODY></HTML>22<HTML>222223目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.html打开方式:target=_blank4、y1.htmltarget=content1、框架文件：框架.html框架名：index框架名：content23目录文件：2、index.html内容内容文件：3、x12324目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.html打开方式:target=_blank4、y1.htmltarget=content1、框架集：框架.html左框架：index右框架：content24目录文件：2、index.html内容内容文件：3、x12425内嵌框架IFRAME属性NameSRCWidthHeightScrolling25内嵌框架IFRAME属性2526<HTML><BODY> <P>很有趣吧。你已经对框架有所了解。 <BR><BR> <IFRAMEsrc="x.html"width="100"height="150"scrolling=autoframeborder=1>

</IFRAME> <BR> <P><FONTcolor=hotpink>上面是一个内嵌框架。</BODY

></HTML>26<HTML>2627表单简介表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过Internet购买一本书，就需要填写姓名、邮政地址和付款方式等。27表单简介表单的用途2728样本表单28样本表单2829单行文本输入框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)29单行文本输入框(TEXT)单选按钮(RADIO)复选框(2930METHOD=“post或get”ACTIONMETHOD指定提交后，由服务器上处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全

ACTION=“URL”<FORMaction=/processformmethod=“post”>……</FORM>表单页面的基本结构30METHOD=“post或get”ACTIONMETH3031表单输入属性(input标记的属性)TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TEXT2或用户选择的任何名称。VALUE此属性是可选属性，它指定表单控件的初始值SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。SRCSRC="URL"。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。31表单输入属性(input标记的属性)TYPE此属性指定3132<FORMname="form3"method="post"action=""><INPUTtype="checkbox"name="gen"value="男"size="21"maxlength=4checked="checked">……</FORM>指定元素的类型，可为TEXT、RADIO、SUBMIT等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中表单控件的统一格式32<FORMname="form3"method="p3233Input–Type属性的值隐藏域。不显示在页面，只将内容传递到服务器中。hidden图形域image复选框checkbox单选按钮radio密码域password普通按钮button取值的含义type取值文件域file重置按钮reset提交按钮submit文字字段text33Input–Type属性的值隐藏域。不显示在页面，3334文本框基本语法<INPUTtype=“text”value="张三"size="20"><FORMname="form1"method="post"action=""> <P>名

字：

<INPUTtype="text"value="张三"size="20"> </P> ……</FORM>单行文本输入框，字符宽度为20文本区的宽度输入元素的默认值文本输入框34文本框基本语法<FORMname="form1"me3435密码框基本语法<INPUTtype=“password”value=“123456”size=“22”>密码区宽度初始密码密码框<FORMname="form2"method="post"action=""> …… <P>密

码：

<INPUTvalue=“123456”type="password"size="22"> </P></FORM>密码框，22个字符宽度35密码框基本语法密码区宽度初始密码密码框<FORMnam3536单选按钮基本语法<INPUTtype="radio"value="男"checked="checked">初始值单选按钮默认选中<FORMname="form3"method="post"action=""><BR>性别：

<INPUTname="gen"type="radio“value="男"checked><IMGsrc="images/Male.gif"width="23"height="21">男

……</FORM>设置此单选按钮被选中36单选按钮基本语法初始值单选按钮默认选中<FORMnam3637复选框基本语法<INPUTtype=“checkbox”name="cb2"value="talk">复选框复选框名复选框值<FORMname="form4"method="post"action="">……<P><INPUTtype="checkbox"name="cb2"value="talk"checked="checked">

聊天

……</FORM>设置此复选框被选中37复选框基本语法复选框复选框名复选框值<FORMname37<inputtype=imagename=facesrc=f.gif><p>

图片域图片域名图片地址图片域图片域名图片地址38<inputtype=filename=fil1><p>

文件域文件域名文件域文件域名3940<HTML> <HEAD> <TITLE>表单示例</TITLE></HEAD> <BODYbgColor="#ffffcc"Text="#000099"> <FORMACTION="/FormSite"METHOD="POST"> <B><H2align="left">证券调查示例</H2></B> <p>姓名<INPUTTYPE="text"NAME="xm"value=""size=10><p>密码<INPUTTYPE="password"NAME="pwd"value="123"size=10><p>照片<INPUTTYPE="file"NAME="file1"><p><B>投资经验</B></p><p><INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-0"checked>新手

<INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-1">中级

<INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-2">专家</p><p><B>投资类型</B></P><P><INPUTTYPE="CHECKBOX"NAME="RESULT_CheckBox-4"VALUE="CheckBox-0">股票

<INPUTTYPE="CHECKBOX"NAME="RESULT_CheckBox-4"VALUE="CheckBox-1"checked>期权<INPUTTYPE="CHECKBOX"NAME="RESULT_CheckBox-4"VALUE="CheckBox-2">互惠基金<BR></p><p><B>今年选择什么证券？</B></P> <P><INPUTTYPE="TEXT"NAME="RESULT_TextField-6"SIZE="30"MAXLENGTH="30"></p> <p><INPUTTYPE="SUBMIT"NAME="submit1"VALUE="提交"> <INPUTTYPE="RESET"NAME="reset1"VALUE="重置"></p> </FORM> </BODY></HTML>

40<HTML>4041其他输入元素TextArea元素ColsRowsSizeTypeValueBUTTON元素NameValueType41其他输入元素TextArea元素4142多行文本框基本语法<TEXTAREAname="textarea"cols="40"rows="6">

文本框中的内容</TEXTAREA>文本框的名字文本框的列数文本框的行数<FORMname="form7"method="post"action="">……<TEXTAREAname="textarea"cols="40"rows="6">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务

</TEXTAREA>……</FORM>6行40个字符宽度的多行文字域42多行文本框基本语法文本框的名字文本框的列数文本框的行数<4243按钮基本语法<INPUTtype="reset"name="Reset"value="重填">按钮名称按钮类型可为button、submit按钮上的标签<FORMname="form6"method="post"action=""><P><INPUTtype="reset"name="Reset"value="重填"> ……<INPUTtype="button"name="cancel"value="取消"></P></FORM>单击按钮，控件的值被重置为value属性中指定的初始值43按钮基本语法按钮名称按钮类型可为button、submi4344下拉列表框标记SELECT标记NameSize规定下拉列表中可见选项的数目。Multiple规定可选择多个选项。44下拉列表框标记SELECT标记44下拉列表框基本语法：<selectname=列表框名称>

<optionvalue=选项值selected>选项显示内容......

</select>下拉列表框基本语法：45下拉列表框举例：<selectname=fruits><option>Banana<optionselected>Apple<option>Orange</select>下拉列表框举例：4647<HTML> <HEAD><TITLE>表单示例</TITLE></HEAD> <BODYbgColor="#ffffcc"Text="#000099"> <FORMACTION="/FormSite"METHOD="POST"> <B><CENTER><H2>证券调查示例</H2></CENTER></B> <P><B>您用什么方式购买证券？</B> <SELECTNAME="RESULT_RadioButton-5"> <OPTION></OPTION> <OPTIONvalue="网上交易">1)网上交易</OPTION> <OPTIONvalue="电话交易">2)电话交易</OPTION> <OPTIONvalue="经纪人代理">3)经纪人代理</OPTION> <OPTIONvalue="其他">4)其他</OPTION> </SELECT></P><BR><BR><BR> <P><INPUTTYPE="SUBMIT"NAME="submit1"VALUE="提交"> <INPUTTYPE="RESET"NAME="reset1"VALUE="重置"></P> </FORM> </BODY></HTML>47<HTML>4748<HTML> <HEAD> <TITLE>求职</TITLE></HEAD> <BODY> <H1><CENTER><FONTSIZE=4COLOR=Forestgreen>申请表</CENTER></FONT></H1><HR><BR> <FORMaction="/processform"method="post"> <P>

姓名： <INPUTtype="text"name="firstname“><BR> <P>求职意向<BR><BR> <INPUTTYPE=RADIONAME="CONTROL1"VALUE="0"CHECKED>网站设计师 <INPUTTYPE=RADIONAME="CONTROL1"VALUE="1">网管 <INPUTTYPE=RADIONAME="CONTROL1"VALUE="2">网站开发人员 <P>工作经历<SELECTNAME="CONTROL2"> <OPTION>无</OPTION> <OPTION>一年</OPTION> <OPTION>三年</OPTION> <OPTION>五年</OPTION> </SELECT><BR> <P>附注<BR> <TEXTAREANAME="CONTROL3"COLS="30"ROWS="5">请在这里键入附注。</TEXTAREA><BR> <P><INPUTNAME="CONTROL4"TYPE=CHECKBOXCHECKED>发送确认 <BR> <P><INPUTTYPE=SUBMITVALUE=确定> <INPUTTYPE=RESETVALUE=重置> </FORM> </BODY></HTML>48<HTML>4849聚焦表单控件设置焦点（鼠标单击）Tab键访问键(accesskey)49聚焦表单控件4950<HTML> <HEAD> <TITLE>求职</TITLE></HEAD> <BODY> <H1><CENTER><FONTSIZE=4COLOR=Forestgreen>申请表</CENTER></FONT></H1><HR><BR> <FORMaction="/processform"method="post"> <P>

姓名： <INPUTtype="text"name="firstname"><BR> <P>求职意向<BR><BR> <INPUTaccesskey="N"TYPE=RADIONAME="CONTROL1"VALUE="0"CHECKED>网站设计师 <INPUTTYPE=RADIONAME="CONTROL1"VALUE="1">网管 <INPUTTYPE=RADIONAME="CONTROL1"VALUE="2">网站开发人员 <P>工作经历<SELECTNAME="CONTROL2"> <OPTION>无</OPTION> <OPTION>一年</OPTION> <OPTION>三年</OPTION> <OPTION>五年</OPTION> </SELECT><BR> <P>附注<BR> <TEXTAREANAME="CONTROL3"COLS="30"ROWS="5">请在这里键入附注。</TEXTAREA><BR> <P><INPUTNAME="CONTROL4"TYPE=CHECKBOXCHECKED>发送确认 <BR> <P><INPUTTYPE=SUBMITVALUE=确定> <INPUTTYPE=RESETVALUE=重置> </FORM> </BODY></HTML>50<HTML>5051总结：表单元素用于接受用户的输入并提供一些交互式操作。<FORM>标记用于在页面上创建我们称为表单的区域。<INPUT>元素用于定义表单上表单元素的类型和外观。TEXTAREA元素用于创建多行文本输入框。SELECT元素用于向用户显示选项列表。元素得到焦点时，它的状态将变为活动。框架将Web浏览器窗口分隔为多个不同的区域，每个区域都可以显示一个独立、可滚动的页面。51总结：表单元素用于接受用户的输入并提供一些交互式操作。51ThankYou!ThankYou!52ThankYou世界触手可及携手共进，齐创精品工程ThankYou世界触手可及携手共进，齐创精品工程53网页设计———表单和框架的使用网页设计———表单和框架的使用5455回顾：使用HTML标记创建表格，并通过相关的属性设置表格的格式。层（DIV）就像一个装满内容的盒子，可以将它放到页面中所需的位置。在HTML文件中插入多媒体。插入GIF动画插入音频和视频文件插入JavaApplet插件2回顾：使用HTML标记创建表格，并通过相关的属性设置表格的5556表<TABLE>的使用行TR表头TH单元格TD表名CAPTION3表<TABLE>的使用行TR表头TH单元格TD表名CAP5657使用表的相关标记创建表<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLEBORDER=2> <CAPTION>创建表</CAPTION> <TH>一月</TH> <TH>二月</TH> <TH>三月</TH> <TH>四月</TH> <TH>五月</TH> <TH>六月</TH> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY></HTML>4使用表的相关标记创建表<HTML>575855859Table中嵌套table6Table中嵌套table5960<DIV>层的使用<DIV>…</DIV>可以设定多行或跨段落或某一区域的内容样式.<HTML> <HEAD> <TITLE>学习HTML</TITLE> </HEAD> <BODY> <DIV>

第1部分 <P>元素用于组织元素 <P>DIV通常用于块级元素 </DIV> <DIValign=right>

第2部分 <P>这是第二部分 <BR> <H2>您觉得有意思吗？</H2> </DIV> <P>第二部分向右对齐。 <SPANSTYLE="font-size:25">

公共格式</SPAN>应用于这一部分中的所有元素 </BODY></HTML>

7<DIV>层的使用<DIV>…</DIV>可以设定多行或606186162Div中嵌套ul+li9Div中嵌套ul+li62目标使用框架使用表单和表单控件目标使用框架使用表单和表单控件6364框架框架将Web浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。例如，可以在网页中使用三个框架，一个显示标题，一个用作导航菜单，一个显示数据。11框架框架将Web浏览器分成多个不同的区域，每个区域都64广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)广告栏顶部框架(top.htm)导航栏左侧框架(left.h6566FRAMESET标记使用FRAMESET创建框架其属性有：RowsCols常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用<frameset>标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。13FRAMESET标记使用FRAMESET创建框架66框架集的基本结构<html><head><title>框架的基本结构</title></head><framesetcols="25%,50%,*"rows="50%,*"border=5><framesrc="the_first.html"><frame></frameset></html>边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选第一个窗口要显示的网页框架集的基本结构<html>边框尺寸大小将窗口分割成左中右36768框架使用示例：<HTML> <HEAD> <TITLE>两个大小相等的框架</TITLE> </HEAD> <FRAMESETCOLS="50%,*"> <FRAMESRC=x.html> <FRAMESRC=y.html> </FRAMESET></HTML>15框架使用示例：<HTML>68<html><head><title>采用整数设置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html><html>69一个垂直分割的例子<html><head><title>采用整数设置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html>一个垂直分割的例子<html>70框架的边框<html><head><title>框架的边框控制</title></head><framesetrows="30%,*"border="12"> <frame> <framesetcols="20%,*"> <frame> <frame></frameset></frameset></html>

框架的边框7172嵌套的框架集<HTML> <HEAD> <TITLE>嵌套框架</TITLE> </HEAD> <FRAMESETcols="33%,33%,34%"> <FRAMEsrc="flowers.jpg"> <FRAMESETrows="40%,60%"> <FRAMEsrc="x.html"> <FRAMEsrc="y.html"> </FRAMESET> <FRAMEsrc="flowers.jpg"> </FRAMESET></HTML>19嵌套的框架集<HTML>7273FRAME标记FRAME标记的属性包括：Name<framename="子窗口名称">Src<framesrc="html文件的位置">Noresize<framenoresizesrc="url">不希望用户能随意地改变子窗口的大小Scrolling<framescrolling="yes或no或auto">yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。Marginwidth<framesrc="url"marginwidth="value"Marginheight

marginheight="value">

在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。20FRAME标记FRAME标记的属性包括：73复习：<A>目标显示方式属性--target用来指定目标窗口的打开方式。包含4个取值：_blank：在新窗口中打开。_parent：在上一级的浏览窗口中打开。_self：在当前页面或框架中打开。_top：在当前浏览窗口页面中打开。复习：<A>目标显示方式属性--target用来74<HTML><head></head><BODY><AHREF="x1.html"TARGET="_blank">文件x</A></BODY></HTML>75<HTML>227576目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.html打开方式:target=_blank4、y1.htmltarget=content1、框架文件：框架.html框架名：index框架名：content23目录文件：2、index.html内容内容文件：3、x17677目录文件：2、index.html内容内容文件：3、x1.html内容3、x1.html打开方式:target=_blank4、y1.htmltarget=content1、框架集：框架.html左框架：index右框架：content24目录文件：2、index.html内容内容文件：3、x17778内嵌框架IFRAME属性NameSRCWidthHeightScrolling25内嵌框架IFRAME属性7879<HTML><BODY> <P>很有趣吧。你已经对框架有所了解。 <BR><BR> <IFRAMEsrc="x.html"width="100"height="150"scrolling=autoframeborder=1>

</IFRAME> <BR> <P><FONTcolor=hotpink>上面是一个内嵌框架。</BODY

></HTML>26<HTML>7980表单简介表单的用途用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过Internet购买一本书，就需要填写姓名、邮政地址和付款方式等。27表单简介表单的用途8081样本表单28样本表单8182单行文本输入框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)29单行文本输入框(TEXT)单选按钮(RADIO)复选框(8283METHOD=“post或get”ACTIONMETHOD指定提交后，由服务器上处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全

ACTION=“URL”<FORMaction=/processformmethod=“post”>……</FORM>表单页面的基本结构30METHOD=“post或get”ACTIONMETH8384表单输入属性(input标记的属性)TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TEXT2或用户选择的任何名称。VALUE此属性是可选属性，它指定表单控件的初始值SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。SRCSRC="URL"。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。31表单输入属性(input标记的属性)TYPE此属性指定8485<FORMname="form3"method="post"action=""><INPUTtype="checkbox"name="gen"value="男"size="21"maxlength=4checked="checked">……</FORM>指定元素的类型，可为TEXT、RADIO、SUBMIT等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中表单控件的统一格式32<FORMname="form3"method="p8586Input–Type属性的值隐藏域。不显示在页面，只将内容传递到服务器中。hidden图形域image复选框checkbox单选按钮radio密码域password普通按钮button取值的含义type取值文件域file重置按钮reset提交按钮submit文字字段text33Input–Type属性的值隐藏域。不显示在页面，8687文本框基本语法<INPUTtype=“text”value="张三"size="20"><FORMname="form1"method="post"action=""> <P>名

字：

<INPUTtype="text"value="张三"size="20"> </P> ……</FORM>单行文本输入框，字符宽度为20文本区的宽度输入元素的默认值文本输入框34文本框基本语法<FORMname="form1"me8788密码框基本语法<INPUTtype=“password”value=“123456”size=“22”>密码区宽度初始密码密码框<FORMname="form2"method="post"action=""> …… <P>密

码：

<INPUTvalue=“123456”type="password"size="22"> </P></FORM>密码框，22个字符宽度35密码框基本语法密码区宽度初始密码密码框<FORMnam8889单选按钮基本语法<INPUTtype="radio"value="男"checked="checked">初始值单选按钮默认选中<FORMname="form3"method="post"action=""><BR>性别：

<INPUTname="gen"type="radio“value="男"checked><IMGsrc="images/Male.gif"width="23"height="21">男

……</FORM>设置此单选按钮被选中36单选按钮基本语法初始值单选按钮默认选中<FORMnam8990复选框基本语法<INPUTtype=“checkbox”name="cb2"value="talk">复选框复选框名复选框值<FORMname="form4"method="post"action="">……<P><INPUTtype="checkbox"name="cb2"value="talk"checked="checked">

聊天

……</FORM>设置此复选框被选中37复选框基本语法复选框复选框名复选框值<FORMname90<inputtype=imagename=facesrc=f.gif><p>

图片域图片域名图片地址图片域图片域名图片地址91<inputtype=filename=fil1><p>

文件域文件域名文件域文件域名9293<HTML> <HEAD> <TITLE>表单示例</TITLE></HEAD> <BODYbgColor="#ffffcc"Text="#000099"> <FORMACTION="/FormSite"METHOD="POST"> <B><H2align="left">证券调查示例</H2></B> <p>姓名<INPUTTYPE="text"NAME="xm"value=""size=10><p>密码<INPUTTYPE="password"NAME="pwd"value="123"size=10><p>照片<INPUTTYPE="file"NAME="file1"><p><B>投资经验</B></p><p><INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-0"checked>新手

<INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-1">中级

<INPUTTYPE="RADIO"NAME="RESULT_RadioButton-1"VALUE="Radio-2">专家</p><p><B>投资类型</B></P><P><INPUTTYPE="CHECKBOX"NAME="RESULT_CheckBox-4"VALUE="CheckBox-0">股票

40<HTML>9394其他输入元素TextArea元素ColsRowsSizeTypeValueBUTTON元素NameValueType41其他输入元素TextArea元素9495多行文本框基本语法<TEXTAREAname="textarea"cols="40"rows="6">

</TEXTAREA>……</FORM>6行40个字符宽度的多行文字域42多行文本框基本语法文本框的名字文本框的列数文本框的行数<9596按钮基本语法<INPUTtype="reset"name="Reset"value="重填">按钮名称按钮类型可为button、submit按钮上的标签<FORMname="form6"method="post"action=""><P><INPUTtype="reset"name="Reset"value="重填"> ……<INPUTtype="button"name="cancel"value="取消"></P></FORM>单击按钮，控件的值被重置为value属性中指定的初始值43按钮基本语法按钮名称按钮类型可为button、submi9697下拉列表框标记SELECT标记NameSize规定下拉列表中可见选项的数目。Multiple规定可选择多个选项。44下拉列表框标记SELECT标记97下拉列表框基本语法：<selectname=列表框名称>

<optionvalue=选项值selected>选项显示内容......

</select>下拉列表框基本语法：98下拉列表框举例：<selectname=fruits><option>Banana<optionselected>Apple<option>Orange</select>下拉列表框举例：99100<HTML> <HEAD><TITLE>表单示例</TITLE></HEAD> <BODYbgColor="#ffffcc"Text="#000099"> <FORMACTION="/FormSite"METHOD="POST"> <B><CENTER><H2>证券调查示例</H2></CENTER></B> <P><B>您用什么方式购买证券？</B> <SELECTNAME="RESULT_RadioButton-5"> <OPTION></OPTI

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计-表单和框架的使用课件

文档简介

温馨提示

最新文档

评论

网页设计-表单和框架的使用课件

文档简介

温馨提示

最新文档

评论

相关文档