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

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