HTML表单.pptx

第04部分 HTML-添加表单 必须使用表单在HTML文件中表单标记的用法注册名：&nbsp&nbsp男女密码：学位：本科 硕士 博士 爱好：游泳跑步 表单标记-form 表单主要用来收集客户端提供的相关信息，使表单主要用来收集客户端提供的相关信息，使网页具有交互的功能。网页具有交互的功能。在在HTML中，中，用来创建用来创建一个表单，在一个表单，在标记中，可以设置表单的基标记中，可以设置表单的基本属性，包括本属性，包括表单的名称表单的名称、处理程序处理程序、传送方法传送方法等。等。1、表单的名称-name 语法：语法：.这不是表单的必需属性，但是为了防止表单信这不是表单的必需属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称。一个与表单功能符合的名称。2、处理程序-action 真正处理表单的数据脚本或程序在真正处理表单的数据脚本或程序在action属性属性里，这个值可以是程序或脚本的一个完整里，这个值可以是程序或脚本的一个完整URL。语法：语法：.说明：说明：“表单的处理程序表单的处理程序“定义的是表单要提交的地定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址，也就是表单中收集到的资料将要传递的程序地址。址。2、处理程序-action 举例：举例：设定表单的处理程序设定表单的处理程序这是一个没有控件的表单这是一个没有控件的表单说明：在这个实例中，只定义了表单提交的地址为一个邮件。说明：在这个实例中，只定义了表单提交的地址为一个邮件。3、传送方法-method 用来定义处理程序从表单中获得信息的方式，用来定义处理程序从表单中获得信息的方式，可取值为可取值为get或或post。决定了表单中已收集的数据。决定了表单中已收集的数据是用什么方法发送到服务器的。是用什么方法发送到服务器的。method=get:表单数据会被视为表单数据会被视为ASP的参数发的参数发送，也就是来访者输入的数据会附加在送，也就是来访者输入的数据会附加在URL之后，之后，由用户直接发送至服务器。由用户直接发送至服务器。优点：优点：速度比速度比post快，快，缺点：缺点：但数据长度不能太长，在没有指定但数据长度不能太长，在没有指定method时，默认值是时，默认值是get。3、传送方法-methodmethod=post:表单数据是与表单数据是与URL分开发送，分开发送，用户端的计算机会通知服务器来读取数据。用户端的计算机会通知服务器来读取数据。优点：优点：数据长度没有限制。数据长度没有限制。缺点：缺点：速度比速度比get慢。慢。3、传送方法-method 举例：举例：设定表单的处理程序设定表单的处理程序这是一个没有控件的表单这是一个没有控件的表单4、目标显示方式-target 用来指定目标窗口的打开方式。包含用来指定目标窗口的打开方式。包含4个取值：个取值：_blank：是指将返回的信息显示在新打开的中。是指将返回的信息显示在新打开的中。_parent：是指将返回的信息显示在父级的浏览窗是指将返回的信息显示在父级的浏览窗口中。口中。_self：是指将返回的信息显示在当前浏览器窗口中。是指将返回的信息显示在当前浏览器窗口中。_top：是指将返回的信息显示在顶级浏览窗口中。是指将返回的信息显示在顶级浏览窗口中。4、目标显示方式-target 举例：举例：设定表单的处理程序设定表单的处理程序这是一个没有控件的表单这是一个没有控件的表单说 明 这里讲的只是表单的基本构成标记，而表单这里讲的只是表单的基本构成标记，而表单的的标记只有和它所包含的具体控件相结合标记只有和它所包含的具体控件相结合才能真正实现表单收集信息的功能。才能真正实现表单收集信息的功能。下面就对表单中各种功能的控件的添加方法加下面就对表单中各种功能的控件的添加方法加以说明。以说明。5、在表单上添加控件、在表单上添加控件 基本语法：基本语法：type 可选值type取值取值取值的含义取值的含义texttext文字字段文字字段passwordpassword 密码域密码域radioradio单选按钮单选按钮checkboxcheckbox复选框复选框buttonbutton普通按钮普通按钮submitsubmit提交按钮提交按钮resetreset重置按钮重置按钮imageimage图形域图形域hiddenhidden隐藏域。不显示在页面，只将内隐藏域。不显示在页面，只将内容传递到服务器中。容传递到服务器中。filefile文件域文件域type=text举举 例：例：设定表单的处理程序设定表单的处理程序 用户名：用户名：type=password举举 例：例：设定表单的处理程序设定表单的处理程序 用户名：用户名：type=radio基本语法：基本语法：说明：说明：1、checked属性表示这一单选按钮默认被选中，而在一个属性表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项设置为单选按钮组中只能有一项设置为checked。2、value用来设置用户选中该项目后，传送到处理程序中用来设置用户选中该项目后，传送到处理程序中的值。的值。3、单选按钮、单选按钮 name 属性相同者为一组！属性相同者为一组！type=radio举例：举例：Banana Apple Orange type=checkbox基本语法：基本语法：说明：说明：1、checked属性表示这一选项默认被选中，一组选择项中属性表示这一选项默认被选中，一组选择项中可以有多个被选中。可以有多个被选中。三种按钮三种按钮举例：举例：普通按钮普通按钮 提交按钮提交按钮 重置按钮重置按钮 action、text、submit举例设定表单的处理程序设定表单的处理程序这是一个没有控件和表单这是一个没有控件和表单提交按钮提交按钮action、text、submit举例enctype 属性属性 form标记的标记的Enctype 属性指定将数据回发到服属性指定将数据回发到服务器时浏览器使用的编码类型。务器时浏览器使用的编码类型。三种属性值的说明：三种属性值的说明：application/x-www-form-urlencoded：窗窗体数据被编码为名称体数据被编码为名称/值对。这是标准的编码格式。值对。这是标准的编码格式。multipart/form-data：窗体数据被编码为一条窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。消息，页上的每个控件对应消息中的一个部分。text/plain：窗体数据以纯文本形式进行编码，其窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。中不含任何控件或格式字符。enctype 属性属性一般直接使用默认值。当在上传文件时候，那么一般直接使用默认值。当在上传文件时候，那么需要对需要对enctype的值进行设置。的值进行设置。IE浏览器，默认值为浏览器，默认值为application/x-www-form-urlencoded。type=image举例：举例：type=“file举例：举例：下拉列表框下拉列表框基本语法：基本语法：选项显示内选项显示内容容.下拉列表框下拉列表框举例：举例：Banana Apple Orange 列表框列表框语法：语法：选项显示内容选项显示内容 .说明：说明：1、size设定页面中的最多列表项数，当超过这个值时会出设定页面中的最多列表项数，当超过这个值时会出现滚动条。现滚动条。2、multiple表示这一列表可以进行多项选择。表示这一列表可以进行多项选择。注意，是用注意，是用 Ctrl 键配合鼠标实现多选。键配合鼠标实现多选。3、选项值是提交表单时的值，、选项值是提交表单时的值，4、选项显示内容是真正在页面中显示的选项。、选项显示内容是真正在页面中显示的选项。列表框列表框举例：Banana Apple Orange Peach