第7章使用表单收集数据.pptVIP

网页设计技术 第七章-使用表单收集数据 提 纲 表单元素 表单标记访问控制 处理表单 设计方法 7.1? 表单初步 填充式的表单使用户可以提交更复杂的信息，进行更复杂的交互 表单是HTML标记中较为复杂的部分，它往往与脚本、动态页面和数据处理等功能相结合，制作动态网站 表单元素包括： 文本字段 复选框 单选按钮 按钮 下拉菜单/列表框 7.2? 表单元素 表单元素标记：form form标记可以看作是一个包含许多表单控件的容器 排列各种表单控件的布局，让表单以一种友好的界面呈现在浏览者面前 控件是用来收集用户信息的域。表单中的每一个控件都有名称（name）和值（value）。当用户填写好表单并提交时，可用这些“名/值”对处理表单。 把整个最终处理数据结果发送到目标程序上，这个数据结果是由许多对名称和数据值的统一体（即“名/值”对）组成的 7.2? 表单元素 表单元素标记：form method属性 指定表单数据以什么方式发送到Web服务器 method = “post” 将表单数据添加到浏览器请求 method = “get” 将表单数据直接添加到URL的结尾 action属性 指定位于Web服务器上的脚本的URL form action=url method=“get|post” 表单元素/form 7.2? 表单元素 input标记： 限定表单内的输入区域 不同的输入方式由属性type指定 type属性的值可为text、radio和checkbox等 7.2? 表单元素 文本域：type = text 允许用户输入单行的文本，这个控件常用来输入姓名、地址和电子邮件等 一般语法如下： input type=text name=text-id value=default-text size=n maxlength=m 当表单被提交时，name属性用来对表单组件的内容进行识别。它涉及到表单提交后对数据的唯一性确认。 value属性是可选的，用来表示文本域的初始文本。 7.2? 表单元素 密码域：type = “password 和文本域很相似，显示的是“*****” 语法如下： input type=”password” name=”password-id” value=”default-text” size=”n” maxlength=”m” 7.2? 表单元素 单选按钮：type = “radio 其语法如下： input type=radio name = radio-id value = choice-id checked 一个组里的单选按钮，其name属性赋相同的值。 value属性：必须预先设置，每一个单选按钮都应该分配一个value。 7.2? 表单元素 复选框：type = checkbox 可以为多选，其语法如下： input type=checkbox name = box-id value = choice-id checked 每个复选框都有一个独立的名字，通过name属性限制，但它们是完全独立的。 value属性：为每个复选框提供描述性的值。 checked属性：添加一些默认选项。 7.2? 表单元素 下拉菜单：select/select select name=text-id size=n multiple option value=choice-id 1 selectedtextlabel1/option …… option value=choice-id m selectedtextlabelm/option /select size属性：窗口中显示的选项数，默认值为1。Size1，则下拉菜单将变为滚动菜单。 multiple属性:将选择区域设置为可以接受任意数目的选项，按下Ctrl键点击选项即可选择多个选项。 option标记：标示列表中的项目 被选中选项的value属性与表单数据一起发送给表单处理程序。如果没有设置value属性，那么将用选项的内容代替。 selected属性:指定默认选项,可以设置多个默认项但必须使用multiple。 7.2? 表单元素 下拉菜单： 选项编组标记optgroup，其语法是： select name=text-id size=n multiple optgroup label=optgroupname option value=choice-id 1 selectedtext label 1/option …… option value=choice-id m selectedtext label m/option /optgroup /select label属性：指定选项编组的名称，选项编组名称虽然显示在选择