网页设计与开发实验课件第7章 表单_第1页
网页设计与开发实验课件第7章 表单_第2页
网页设计与开发实验课件第7章 表单_第3页
网页设计与开发实验课件第7章 表单_第4页
网页设计与开发实验课件第7章 表单_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

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

文档简介

主要内容理解表单的概念掌握表单的属性设置掌握表单对象属性的设置7.1表单的概念表单可以把来自用户的信息提交给服务器，是网站管理员与浏览者之间沟通的桥梁。利用表单处理程序可以收集、分析用户的反馈意见，做出科学的、合理的决策。表单有两个重要组成部分：描述表单的HTML源代码；用于处理用户在表单域中输入的信息的服务器端应用程序客户端脚本，如ASP.NET、JSP等。表单<form>是双标记。表单Form基本语法<formname="…"action=".."method="…"><input>….<select>…..</select>…<textarea>…</textarea></form>表单Form语法说明name：给定表单名称，表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。action:指定处理表单信息的服务器端应用程序。method:method属性用于指定表单处理表单数据方法，method的值可以为get或是post，默认方式是get。7.2输入<input><input>是个单标记，它必须嵌套在表单标记中使用，用于定义一个用户的输入项。<input>基本语法<form><inputname=""type=""></form><input>语法说明<input>标记主要有六个属性，type，name，size，value，maxlength，check。其中name和type是必选的两个属性；Name:属性的值是相应程序中的变量名。在不同的输入方式下，<input>标记的格式略有不同，其他五种属性因type类型的不同，其含义也不同；type主要有九种类型：text，submit，reset，password，checkbox，radio，image，hidden，file。7.2.1单行文本输入框text当type=text时，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。基本语法：<form><inputname="text"type="text"maxlength=""size=""value=""></form><input>语法说明maxlength：设置单行输入框可以输入的最大字符数，例如限制邮政编码为6个数字、密码最多为10个字符等；size：设置单行输入框可显示的最大字符数，这个值总是小于等于maxlength属性的值，当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过超出的内容；value：文本框的值，可以通过设置value属性的值来指定当表单首次被载入时显示在输入框中的值。7.2.1单行文本输入框text<!--程序7-1--><html><head><title>输入用户姓名</title></head><body><formaction="/index.aspx"method="get">

请输入你的姓名：

<inputtype="text"name="yourname"></form></body></html>7.2.1单行文本输入框text7.2.1单行文本输入框text7.2.2提交按钮submit和重置按钮reset当type=submit时，产生一个提交按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。当type=reset时，产生一个重置按钮，当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。提交与重置按钮经常同时出现。基本语法：<form><inputname="text"type="text"maxlength=“"size=“"value=“"></form>7.2.2提交按钮submit和重置按钮reset语法说明提交按钮的name属性是可以默认的。它还有一个可选的属性value，用于指定显示在提交按钮上的文字，value属性的默认值是“提交”。在一个表单中必须有提交按钮，否则将无法向服务器传送信息；重置按钮的name属性也是可以默认的。value属性与submit类似，用于指定显示在清除按钮上的文字，value的默认值为“重置”。7.2.2提交按钮submit和重置按钮reset<!--程序7-2--><html><head><title>注册</title></head><body><formaction="index.aspx"method="get">

请输入你的姓名：

<inputtype="text"name="yourname"><br/>

请输入你的年龄：

<inputtype="text"name="yourage"><br/><inputtype="submit"value="提交"><inputtype="reset"value="重置"></form></body></html>7.2.2提交按钮submit和重置按钮reset7.2.2提交按钮submit和重置按钮reset7.2.3密码输入框password

密码输入框password与单行文本输入框text使用起来非常相似，所不同的只是当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。基本语法：<form><inputname="password"type="password"maxlength=""size=""></form>语法说明:在表单中插入密码框，只要将<input>标记中type属性值设为password就可以插入密码框，maxlength、size属性同文件输入框text的属性一样。7.2.3密码输入框password

<!--程序9-3--><html><head><title>输入用户名和密码</title></head><body><formaction="index.aspx"method="post">

用户名：

<inputtype="text"name="yourname"size=15><br>

密 码：

<inputtype="password"name="yourpw"size=15><br><inputtype="submit"value="登录"><inputtype="reset"value="取消"></form></body></html>7.2.3密码输入框password

7.2.3密码输入框password

7.2.4复选框checkbox基本语法：<form><inputname="text"type="checkbox"value=""></form>语法说明：用户可以同时选中表单中的一个或多个复选项作为输入信息，由于选项可以有多个，属性name应取不同的值；属性value的参数值就是在该选项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是必选项；checked属性用于指定该选项在初始时是否被选中。<!--程序7-4--><html><head><title>选择</title></head><body>请选择你喜欢的运动：<br><formaction="index.aspx"method="post"><inputtype="checkbox"name="basketball"value="basktball">篮球<br><inputtype="checkbox"name="football"value="football">足球<br><inputtype="checkbox"name="tennis"value="tennis">网球<br><inputtype="submit"value="提交"></form></body></html>7.2.4复选框checkbox7.2.4复选框checkbox7.2.5单选框radio基本语法：<form><inputname="radio"type="radio"value=""></form>语法说明：单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息，因此，所有属性的name都应取相同的值；不同的选项其属性value的值应是不同的；checked属性用于指定该选项在初始时是被选中的。<!--程序7-5--><html><head><title>设置</title></head><body>

每页最多显示邮件数：<br><formaction="ParaSet.aspx"method="post"><inputtype="radio"name="mail"value="10">10封<br><inputtype="radio"name="mail"value="20">20封(推荐)<br><inputtype="radio"name="mail"value="30">30封<br><inputtype="radio"name="mail"value="50">50封<br><inputtype="radio"name="mail"value="100">100封<br><inputtype="submit"value="提交"></form></body></html>7.2.5单选框radio7.2.5单选框radio7.2.6图像按钮image基本语法：<form><inputname="image"type="image"src="url"></form>语法说明：单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必需的，它用于设置图像文件的路径。<!--程序7-6--><html><head><title>表单中图像按钮</title></head><body><formaction="index.aspx"method="post">

你最喜欢的运动：

<selectname="sports"><optionvalue="football">足球

<optionvalue="bastetball">篮球

<optionvalue="volleyball">排球

</select><inputtype="image"src="./img/confirm.gif"value="提交"></form></body></html>7.2.6图像按钮image7.2.6图像按钮image7.2.7文件选择输入框file基本语法：<form><inputname="file"type="file"></form>语法说明：在表单中插入文件选择输入框，只要将<input>标记中type属性值设为file就可以插入文件选择输入框。<!--程序7-7--><html><head><title>表单中文件选择输入框</title></head><body><formaction="index.aspx"method="post"><p>

请选择文件<br><inputtype="file"name="uploadfile"size="40"></p><div><inputtype="submit"value="上传"name="Send""></div></form></body></html>7.2.7文件选择输入框file7.2.7文件选择输入框file7.2.8隐藏框hidden基本语法：<form><inputname="hidden"type="hidden"value=""></form>语法说明：当type=hidden时，表示输入项将不在浏览器中显示。7.3多行文本输入框<textarea><textarea>是双标记。可以来定义高度超过一行的文本输入框，首标记<textarea>和尾标记</textarea>之间的内容就是显示在文本输入框中的初始信息。<textarea>标记有四个属性：name，rows，cols，wrap。基本语法：<form><textareaname="textarea"cols=""rows=""wrap="“</textarea></form>语法说明：name：用于指定文本输入框的名字。rows：设置多行文本输入框的行数，此属性的值是数字，浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。但是，当输入文本的行数小于或等于rows属性的值时，滚动条将不起作用。cols：设置多行文本输入框的列数。wrap：默认值是文本自动换行，当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。7.3多行文本输入框<textarea><!--程序7-8--><html><head><title>请提宝贵意见</title></head><body><formaction="index.aspx"method="get">

请提宝贵意见：<br><textareaname="yoursuggest"cols="50"rows="3"></textarea><br><inputtype="submit"value="提交"><inputtype="reset"value="重写"></form></body></html>7.3多行文本输入框<textarea>7.3多行文本输入框<textarea>7.4下拉列表框<select>、<option><select>和<option>标记可以在浏览器中设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。基本语法：<form><selectname=""size=""><optionsvalue="">…<optionsvalue=""></select></form>7.4下拉列表框<select>、<option>语法说明：<select>是双标记：首标记<select>和尾标记</select>之间的内容就是一个下拉式菜单的内容。<select>标记必须与<option>标记配套使用。<option>标记用于定义列表中的各个选项，<select>标记有name，size，multiple三个属性。name：设定下拉列表名字。size：可选项，用于改变下拉框的大小。size属性的值是数字，表示显示在列表中选项的数目，当size属性的值小于列表框中的列表项数目时，浏览器会为该下拉框添加滚动条，用户可以使用滚动条来查看所有的选项，size默认值为1。multiple：如果加上该属性，表示允许用户从列表中选择多项。7.4下拉列表框<select>、<option>语法说明

<option>标记用来定义列表中的选项，设置列表中显示的文字和列表条目的值，列表中每个选项有一个显示的文本和一个value值(当选项被选择时传送给处理程序的信息)。<option>是单标记，它必须嵌套在<select>标记中使用。一个列表中有多少个选项，就要有多少个<option>标记与之相对应，选项的具体内容写在每个<option>之后。<option>标记有两个属性：value和selected，它们都是可选项。value:用于设置当该选项被选中并提交后，浏览器传送给服务器的数据。如果是默认状态，浏览器将传送选项的内容。selected:用来指定选项的初始状态，表示该选项在初始时被选中。<!--程序7-9--><html><body><formaction="index.aspx"method="post">

你最喜欢的运动：

<

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

温馨提示

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

最新文档

评论

0/150

提交评论