HTML+CSS+JavaScript第四章幻灯片.pptVIP

第4章 HTML中的表单 4.1 表单概述 在网络上访问Web站点时，经常会看到网页中有文本框、按钮等表单元素，例如，用于输入留言的多行文本输入框、用于提交注册信息的表格等都是表单。表单在网页中，特别是在网络的信息交流与传递中起着十分重要的作用。 4.1.1. 表单的结构 表单的基本结构如下： form name=表单名称 action=url method =get/post …… …… input type=submit input type=reset /form 4.1.1. 表单的结构 表单的常用属性。 1.action action属性用于设置处理表单的数据脚本或程序，其值可以是程序或脚本的一个完整地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如，发送E-mail等。【例4-1】中的程序地址为yonghu.asp。 2.name name属性用于给表单命名。名称不是表单的必需属性，但为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能相符的名称，例如，注册页面的表单可以命名为register。不同的表单尽量不用相同的名称，以避免混乱。 3.method 表单的method属性用来定义处理程序从表单中获得信息的方式，可取值为get或post，它决定了表单中已收集的数据是用什么方法发送到服务器的。 4.1.2. input标签 语法格式如下： form input name=控件名称 type=控件类型 /form 其中，控件名称是为了便于程序对不同控件的区分，type参数确定了这一个控件域的类型 4.1.2. input标签 type取值 取值的含义 text 文字字段 password 密码域 radio 单选按钮 checkbox 复选框 button 普通按钮 submit 提交按钮 reset 重置按钮 image 图形域，也称为图像提交按钮 hidden 隐藏域 file 文件域 input标签中type的取值 4.2表单控件 4.2.1.文本域控件 1.单行文本框 创建单行文本框的语法格式如下： input type=text name=控件名称 size=控件的长度 maxlength=最长字符数 value=文字字段的默认取值 其中，name表示单行文本框的名称，通过它可以在脚本中引用该文本框控件；size表示文本框的宽度，maxlength表示允许在文本框内输入的最大字符数。用户输入的字符数可以超过文本框的宽度，这时文本框会显示滚动条，但输入的字符数不能超过输入的最大字符数。 4.2.1.文本域控件 2.多行文本框 创建多行文本框使用textarea标签，其语法格式如下： textarea name=控件名称 rows=行数 cols=列数默认多行文本/textarea 其中，rows用于设定文本框能显示的文本行数，用户的输入可以多于这个行数，超过可视区域的内容可以用滚动条进行操作控制。cols用于设定多行文本的列数，当用户输入的字符个数超过设定的文本列数后会自动换行。 4.2.1.文本域控件 3.密码域 创建密码域的语法格式如下： input type=password name=控件名称 size=控件的长度 maxlength=最长字符数value=文字字段的默认取值 其中，size用于定义密码域的文本框在页面中显示的长度，以字符作为单位；maxlength用于定义在密码域的文本框中最多可以输入的字符数；value用于定义密码域的默认值，同样以“*”显示，如果不设定默认值，则可以省略value属性。 4.2.2 按钮控件 1.普通按钮 普通按钮一般情况下要配合脚本来进行表单处理。创建普通按钮的语法格式如下： input type=button name=按钮名 value=按钮的取值 onclick=处理程序 其中，value的取值就是显示在按钮上的文字，onclick属性可以实现一些特殊的功能，onclick参数是设置当单击按钮时执行脚本代码。 4.2.2 按钮控件 2.提交按钮 提交按钮是一种特殊的按钮，不需要设置onclick参数，在单击该类按钮时可以实现表单内容的提交。创建提交按钮的语法格式如下： input type=submit name=按钮名 value=按钮的取值 4.2.2 按钮控件 3.重置按钮 如果用户在表单中填入的信息有误，可以使用重置按钮来清除在页面中输入的信息。创建重置按钮的语法格式如下： input type=reset name=按钮名 value=按钮的取值 4.2.3 单选按钮和复选框控件 1.单选按钮 创建单选按钮的语法格式如下： in