第8章使用表单创交互网张课件_第1页
第8章使用表单创交互网张课件_第2页
第8章使用表单创交互网张课件_第3页
第8章使用表单创交互网张课件_第4页
第8章使用表单创交互网张课件_第5页
已阅读5页，还剩56页未读， 继续免费阅读

下载本文档

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

文档简介

主讲：梁光华《HTML网页制作》第8章使用表单创建交互网页8.1使用表单标记form<form>称为表单标记，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。我们上网时经常需要填写一些用户信息，在HTML中是通过表单实现的。表单使网页具有交互功能，在Web页中提供表单让访问者填写，从而获得用户信息。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend

和label元素。表单用于向服务器传输数据。8.1.1处理动作actionAction标记的值是URL规定当提交表单时，向何处发送表单数据。语法:<formaction=“表单的处理程序”>……</form>实例代码:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=“mailto:yaoye5ido”></form

></td></tr></table>8.1.2表单名称namename标记用来为当前表单定义一个独一无二的名称,该名称可控制表单与后台程序之间的关系.语法:<formname=“表单名称”>……</form>实例:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idoname=“form1”></form

></td></tr></table>8.1.3传送方法methodMethod标记的值是get或post用于规定如何发送表单数据。语法：<formmethod=“传送方法”>……</form>method标记的属性值: get将表单内容附加在URL地址后面,因此对提交信息的长度进行了限制,最多不超过8192个字符.post将用户在表单中填写的数据包含在表单主体中,一起传送到服务器处理程序中,该方法没有字符的限制.实例说明:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”name=“form1”></form

></td></tr></table>8.1.4编码方式enctypeenctype标记用来设置表单信息提交的编码方式.语法：<formenctype=“编码方法”>……</form>Enctype标记的属性值:text/plain以纯文本的形式传送信息Application/x-www-form-urlencoded默认的编码形式Multipart/form-datemime编码,上传文件时必须选择该项实例说明:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”enctype=“Application/x-www-form-urlencoded”name=“form1”></form

></td></tr></table>8.1.5目标显示方式targetTarget标记规定在何处打开actionURL。语法：<formtarget=“目标窗口的打开方式”>……</form>target标记的属性值_blank将返回信息显示在新打开的浏览器窗口中_parent将返回信息显示在父级浏览器窗口中_self将返回信息显示在当前浏览器窗口中_top将返回信息显示在顶级浏览器窗口中实例代码:<tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:yaoye5idomethod=“post”enctype=“Application/x-www-form-urlencoded”name=“form1”target=“_blank”></form

></td></tr></table>8.2插入表单对象<input>标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。在网页中可以插入的表单对象包括文本字段、复选框、单选按钮、提交按钮、重置按钮和图象域等。在HTML表单中，input标记是最常用的表单标记，常见的文本字段和按钮都采用这个标记。语法：<form><inputtype=“表单对象的名称”></form>Type属性的值有(输入字段拥有的形式):button普通按钮checkbox复选按钮file文件域hidden隐藏域image图象域password密码radio单选按钮

reset重置按钮submit提交按钮text文本8.2.1文字字段textText标记用来设置表单中的单行文本框,在其中可输入任何类型的文本、数字或字母，输入的内容以单行显示。语法：<inputname=“文本字段的名称”type=“text”value=“文字字段的默认取值”size=“文本字段的长度”maxlength=“最多字符数”>实例说明:<html><body><form>名：<inputtype="text"name="firstname"><br>姓：<inputtype="text"name="lastname"></form></body></html>8.2.2密码域password在表单中输入到密码域中的文字均以星号”*”或圆点”•”显示.语法:<inputname=“密码域的名称”type=“password”value=“密码域的默认取值”size=“密码域的长度”maxlength=“最多字符数”>实例:<html><body><form>用户：<inputtype="text"name="user"><br>密码：<inputtype="password"name="password"></form><p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p></body></html>8.2.3单选按钮radio语法:<inputname=“单选按钮名称”type=“radio”value=“单选按钮的取值”checked>实例:<html><body><form>男性：<inputtype="radio"checked="checked"name="Sex"value="male"><br>女性：<inputtype="radio"name="Sex"value="female"></form><p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p></body></html>8.2.4复选框checkbox语法:<inputname=“复选框名称”type=“checkbox”value=“复选框的取值”checked>实例:<!checkbox复选按钮标签，checked表示这一选项按钮被选中了><br><inputname="checkbox1"type="checkbox"value="1"checked>21*95*4000<!21*95*4000是选项按钮的标题><inputname="checkbox2"type="checkbox"value="2"checked>28*95*4000<inputname="checkbox3"type="checkbox"value="3"checked>38*95*4000<br><td><!submit提交按钮，value的值是按钮上的文字><inputname="button1"type="submit"value="提交"><!reset重置按钮，value的值是按钮上的文字><inputname="button2"type="reset"value="重置"><br><!imag图象域指用在提交按钮上的图象><inputname=imagetype=imagesrc="p01.gif"></form></td></tr></table><input>标签的accept属性定义和用法accept属性只能与<inputtype="file">配合使用。它规定能够通过文件上传进行提交的文件类型。提示：请避免使用该属性。应该在服务器端验证文件上传。实例在文件上传中使用accept属性，本例中的输入字段可以接受GIF和JPEG两种图像：<form><inputtype="file"name="pic"id="pic"accept="image/gif,image/jpeg"/></form>如果不限制图像的格式，可以写为：accept="image/*"。语法<inputaccept="value">8.2.5普通按钮button语法:<inputname=“按钮名称”type=“bottont”value=“按钮取值”onclick=“处理程序”>实例:<html><body><form><inputtype="button"value="Helloworld!"><br><inputtype=“submit”name=“botton”value=“关闭窗口”onclick=“window.close()"><br><!Submit是提交按钮></form></body></html>说明:还有个标签botton<button>标签定义一个按钮。在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。<button>控件与<inputtype=“button”>相比，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。格式:<buttontype="button">ClickMe!</button>8.2.6提交按钮submit语法:<inputname=“按钮名称”type=“submit”value=“按钮取值”onclick=“处理程序”>实例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!submit提交按钮，value的值是按钮上的文字><inputname="button1"type="submit"value="提交"></td></tr></form></body></html>8.2.7重置按钮reset语法:<inputname=“按钮名称”type=“reset”value=“按钮取值”>实例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!submit提交按钮，value的值是按钮上的文字><!reset重置按钮，value的值是按钮上的文字><inputname="button2"type="reset"value="重置"><br></td></tr></form></body></html>8.2.8图象域imag图象域是指用在提交按钮位置的图象,使得这幅图象具有按钮的功能.语法:<inputname=“图象域名称”type=“imag”src=“图象域的地值”>实例:<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!imag图象域指用在提交按钮上的图象><inputname=imagetype=imagesrc="p01.gif"></td></tr></form></body></html>8.2.9隐藏域hidden隐藏域在页面中对用户来说是看不见的。在表单中插入隐藏域的目的是在于收集和发送信息，以便于处理表单的程序所使用。发送表单时，隐藏域的信息也被一起发送到服务器。语法:<inputname=“图象域名称”type=“imag”src=“图象域的地值”>实例<html><body><tablewidth="600"border="0"align="center"cellspacing=0cellpadding=0><tr><td><formaction=mailto:lghlghme126method="post"name="form1"target="_blank"><br><td><!imag图象域指用在提交按钮上的图象><inputname=“image”type=imagesrc="p01.gif"><inputname=“hiddenfield”type=hiddenvalue=“1”></td></tr></form></body></html>8.2.10文件域file用于文件上传。文件域是由一个文本框和一个浏览按钮组成，用户可以将要上传的文件的路径输入在文本框中，也可以单击“浏览“按钮进行选择。语法：<inputtype=“file”name=“文件域名称“size=“文件域的长”maxlength=“最多字符数”>实例：<html><body><form><inputtype="file"name="pic"size=30maxlength=32/></form><p><b>注释：</b>出于安全方面的考虑，本例不允许用户上传文件。</p></body></html>8.3列表/菜单<select>标签定义和用法：select元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将<select>表单数据提交给服务器时包括name属性。8.3.1下拉菜单语法：<selectname=“下拉菜单的名称”><optionvalue=“选项值“selected>选项显示内容…….</select>实例:<html><body><tablewidth=“600"border=“0”align="center"cellspacing=0cellpadding=0><tr><td><formaction=“mailto:yaoye5ido”></form></td></tr></table><selectname=“select”><optionvalue=“1”>北京</option><optionvalue=“2”>上海</option><optionvalue=“3”>天津</option></select><p><inputname="button1"type="submit"value="提交"><inputname="button2"type="reset"value="重置"><br></td></tr></body></html>8.3.2列表项语法：<selectname=“列表项的名称”size=“显示的列表项数”multiple><optionvalue=“选项值“selected>选项显示内容…….</select>说明:multiple表示这一列可以进行多项选择.实例:<html><body><selectname="carlist“size=2multiple><optionvalue=“1">Volvo</option><optionvalue=“2">Saab</option><optionvalue=“3">Mercedes</option><optionvalue=“4">Audi</option><optionvalue=“5”>北京</option><optionvalue=“6”>上海</option><optionvalue=“7”>天津</option></select></body></html>8.4文本域<textarea>标签定义和用法<textarea>标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是Courier）。可以通过cols和rows属性来规定textarea的尺寸，不过更好的办法是使用CSS的height和width属性。注释：在文本输入区内的文本行间，用"%OD%OA"（回车/换行）进行分隔。提示：可以通过<textarea>标签的wrap属性设置文本输入区内的换行模式。wrap属性通常情况下，当用户在输入文本区域中键入文本后，浏览器会将它们按照键入时的状态发送给服务器。只有用户按下Enter键的地方生成换行。如果您希望启动自动换行功能（wordwrapping），请将wrap属性设置为virtual或physical。当用户键入的一行文本长于文本区的宽度时，浏览器会自动将多余的文字挪到下一行，在文字中最近的那一点换行。wrap="virtual"将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果。wrap="physical"将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。如果把wrap设置为off，将得到默认的动作。例子以下面这个例子为例,将60个字符的文本输入到一个40个字符宽的文本区域内：wordwrappingisafeaturethatmakeslifeeasierforusers.如果设置为wrap="wrap"，文本

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论