第4章表单和框架讲述.pptx

第4章 表单和框架 烟台职业学院 孙俊琳 本章学习目标 能够熟练使用表单收集各种用户反馈信息 能够熟练使用框架技术实现网页的布局 4.1 表单 表单容器标签form 输入域标签input 多行文本输入框textarea 下拉列表框select 标注标签label 分组标签 fieldset 按钮标签button 4.1.1 表单容器标签form form标记元素用于为用户创建XHTML表单。表单是包含表单元素的一个区域，表单中可以包含input标记元素、menu标记元素、textarea标记元素、fieldset标记元素、label标记元素等表单元素，通常在页面上表单是不可见的，但可以看到表单中的表单元素。 4.1.1 表单容器标签form 1.基本用法 form id=表单名称 action=表单处理程序的URL method=get|post 表单元素 /form 注意：（1）form/form用于创建基本表单，设置form属性可以使浏览器知道如何处理表单数据。 （2）form标记元素对内定义包括的表单元素，创建输入控件。 属 性 取 值 功能说明 id/name name 设置表单的id/名称id/名称 action URL 设置表单提交时，接收处理表单数据的文件 method get、post、post 设置表单提交方式 enctype MIME_type 设置表单发送到服务器之前对数据进行编码类型 accept MIME_type 设置表单提交的文件内容的类型 accept-charset charset 设置表单提交的文件字符集的类型 target _blank、_parent、_self、_top、framename、_parent、_self、_top、framename 设置打开表单提交跳转页面URL的位置URL的位置 4.1.2 输入域标签input input标记元素是非成对的，它嵌套在表单标记元素中使用，用来定义一个输入项。 1.主要属性 input标记元素的主要属性及其取值和功能说明如表4.3所示。 属 性 取 值 功能说明 type type 设置输入项的类型 name text 设置输入项变量名 size number 设置输入项的长度 value text 设置输入项中预设的文本内容 maxlength number 设置输入项允许输入的最大字符数 checked checked 设置输入项首次加载时被选中状态 disabled disabled 设置输入项加载时禁用状态 readonly readonly 设置输入项为只读状态 4.1.2 输入域标签input 2.type属性取值 input标记元素的type属性及其说明如表4.4所示。 type属性 说 明 text 单行文本输入框 password 密码输入框 radio 单选按钮 checkbox 复选按钮 hidden 隐藏元素 image 图像域 file 文件选择 submit 提交按钮 reset 重置按钮 button 自定义按钮 4.1.2 输入域标签input 3.类型实例 （1）单行文本、密码输入框 例4.1 实现用户登录。 form name=login action= method=post p用户名：input type=text name=username//p p密nbsp; nbsp;码：input type=password name=password//p /form 4.1.2 输入域标签input 3.类型实例 （2）单选、复选按钮 例4.2 在表单中选择性别和爱好。 form name=login action= method=post p您的性别： input type=radio name=sex value=male checked=checked/男 input type=radio name=sex value=female/女/p p请选择爱好： input type=checkbox name=interest value=book/看书 input type=checkbox name=interest value=tourism/旅游 input type=checkbox name=interest value=sport/运动 input type=checkbox name=interest value=internet/上网 input type=checkbox name=interest value=shopping/购物 /p /form 4.1.2 输入域标签input （3）提交按钮、