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

HTML网页设计
顾问:邯郸清华万博教职部
第七章使用表单收集数据
本章结构
表单初步
表单元素
表单标记访问控制
处理表单
设计方法
小结
思考题
表单初步
网站可以看作是一种软件,浏览用户可以通过与它的交互完成许多工作,用户与网站的交互不单单是静态发布。
链接使用户可以做出选择,与此基本功能相比,填充式的表单使用户可以提交更复杂的信息,进行更复杂的交互,这包括一系列应用,从订单输出到动态网站生成等。
表单也是HTML标记中较为复杂的部分,它往往与脚本、动态页面和数据处理等功能相结合,因此它是制作动态网站必须了解的内容。
表单元素
<form>标记
表单必须以<form>开始并以</form>结束。<form>标记可以看作是一个包含许多表单控件的容器,它的功能包括:
排列各种表单控件的布局,让表单能够以一种友好的界面呈现在浏览者面前。
用来把整个最终处理数据结果发送到目标程序上,这个数据结果是由许多对名称和数据值的统一体(即“名/值”对)组成的。
定义一种数据发送到服务器的方法。
用来解码服务器所能接受和处理的数据,一旦浏览器遇到不可辨认的字符,表单就会进行解码处理,然后再提交到服务器。
<form>标记主要包含两个属性:action和method。其语法如下:
<form action="url" method=get | post >表单元素</form>
表单标记还包含其它一些称为控件(或者窗口部件)的标记,控件是用来收集用户信息的域。表单中的每一个控件都有名称(name)和值(value)。当用户填写好表单并提交时,可用这些“名/值”对处理表单。
<form>和</form>这两个标记将控件组织在一起,并定义如何提交这些信息和提交到何处。
大多数常见的HTML标记如<p>、<br>和<pre>等都可以加在表单标记之中,并且在某种程度上可以用来控制表单的布局。
表单元素
<input>标记
<input>标记限定了表单内的输入区域。它要求用户以几种方式中的一种输入信息。不同的输入方式由属性type指定。该属性的值可为text、radio和checkbox等。在下面几节中分别介绍。<input>标记还有许多其它的属性,本章将在适当的地方进行介绍。
文本域
<input>标记中最常见的type属性是text。它允许用户输入单行的文本,这个控件常用来输入姓名、地址和电子邮件等,一般语法如下:
<input type="text" name="text-id" value="default-text" size="n" maxlength="m" >
当表单被提交时,name属性用来对表单组件的内容进行识别。name属性对于用户来说是不可见的,在表单中则必须是唯一的,它涉及到表单提交后对数据的唯一性确认。
value属性是可选的,用来表示文本域的初始文本。
表单元素
< Input>的type属性值列举
Input的type部分属性值
名称
标识
名称
标识
文本域
Text
密码
password
单选按钮
Radio
复选框
checkbox
提交
Submit
重置
reset
图像按钮
Image
隐藏域
hidden
表单元素
密码域
密码域和文本域很相似,但是它显示的是“*****”而不是确切的输入文本。这些域主要用来输入需要保密的内容。但是由于用户无法看到输入的文字,错误的风险大大地增加了。要创建一个密码域只需将<input>标记中的type属性设为“password”。完整的语法如下:
<input type=”password” name=”password-id” value=”default-text” size=”n” maxlength=”m”>
单选按钮
单选按钮是互相排斥的,也就是说它们只允许用户选择几个选项中的一个。选择其中一项就不能再选其它的选项。这些按钮在浏览器中看起来就是一个小圆圈后面带着一个选项,被选中的那个选项前面的圆圈中有个实心点。其语法如下:
<input type="radio" name = "radio-id" value = "choice-id" checked>
对于所有在一个组里的单选按钮来说,需要为其name属性赋相同的值。浏览器通过name属性来判断哪些按钮属于同一组,而哪些按钮不能组成一组。单选按钮的value属性必须预先设置,并且不允许修改,因此每一个单选按钮都应该分配一个value。相关的单选按钮使用相同的name属性值,但是其value属性值则不同。
表单元素
复选框
将input标记中的type属性值设置为checkbox,就形成了一个复选框。它和单选按钮类似,所不同的是它