实验课程3.ppt

12.html 本节内容介绍怎样使用Html标志来设计表单。 * * * * 表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。 * * * * * * * * * 实验课程3 表单的设计 表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。 表单是由窗体和控件组成的。一个表单一般应该包含用户填写信息的输入框、提交和按钮等，这些输入框，按钮叫做控件，表单很像容器，它能够容纳各种各样的控件。 一个表单用form/form标志来创建。也即定义表单的开始和结束位置，在开始和结束标志之间的一切定义都属于表单的内容。 表单标签的格式: FORM action＝url method=get|post name=myform target=_blank... /FORM 规定表单的名称 form标志具有action、method和target属性。 （1） action属性 规定当提交表单时向何处发送表单数据。 如：form action=“用来接收表单信息的url”。 绝对 URL - 指向其他站点（/example.htm） 相对 URL - 指向站点内的文件（ example.htm） 如果这个属性是空值(“”)，则当前文档的url将被使用。当用户提交表单时，服务器将执行网址里面的程序。 （2） method属性 method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。 GET方式是处理程序从当前Html文档中获取数据，这种方式传送的数据量是有所限制的，一般限制在1KB（255个字节）以下。 POST方式传输的数据比较大，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。 （2） target属性 target属性规定在何处打开 action URL。 可选当前窗口_self（默认） 父级窗口_parent 顶层窗口_top 空白窗口_blank input标记是放在form/form之间的，用来在表单中建立一个数据储存域。该标记是单个标记，没有结束标记。 它的最主要的两个属性是：name属性和type属性。 name属性用于区分同一表单中的其它数据储存域。 type属性用来设定数据储存域的类型。 根据不同的type属性值，输入字段拥有很多种形式，如文本字段、复选框、单选按钮、按钮等等。 属性 解释 name 用于区分同一表单中的其它数据储存域。 type 用来设定数据储存域的类型；它的取值主要有: text 文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选框 file 文件选择框 button 按钮 submit 提交按钮 reset 重置按钮 image 图像按钮 hidden 隐藏域 text类型是默认值。 size 用来设定文本输入框长度。 value 值。 maxlength 用来设定文本输入框的最多输入字节数。 checked 使单选按钮或复选框被预选。 文本输入框 当input标记的type属性的取值为text时，设定了该数据储存域的类型是单行文本输入框。示例代码: 1.html 密码输入框 当input 标记的type属性设为password时，设定了该数据储存域的类型是密码输入框，密码输入框跟单行文本输入框差不多，不同的是在密码输入框里输入内容时，输入框里并不显示输入的文字而是显示“*”。示例代码: 2.html 单选按钮 当input 标记的type属性设为radio时，设定了该数据储存域的类型是单选按钮，这时input 标记的checked属性将使该选项成为预选中。示例代码: 3.html 复选框 当input标记的type属性设为checkbox时，设定了该数据储存域的类型是复选框，这时input 标记的checked属性将使该选项成为预选中。示例代码： 4.html 文本选择框 当input标记的type属性设为file时，设定了该数据储存域的类型是文件选择框，这时input 标记的checked属性将使该选项成为预选中。示例代码： 5.html 按钮 当input标记的type属性设为button时，设定了该数据储存域的类型是按钮，这时input 标记的checked属性将使该选项成为预选中。 示例代码： 6.html 提交按钮 当input标记的type属性设为submit时，设定了该数据储存域的类型是提交按钮，这时input标记的checked属性将使该选项成为预选中。 示例代码： 7.html 重置按钮 当input标记的type属性设为reset时，设定了该数据储存域的类型是重置按钮，这时input 标记的 checked属性