第4章 表单和框架.pptxVIP

第4章 表单和框架烟台职业学院孙俊琳本章学习目标能够熟练使用表单收集各种用户反馈信息能够熟练使用框架技术实现网页的布局4.1 表单表单容器标签form 输入域标签input多行文本输入框textarea下拉列表框select标注标签label分组标签 fieldset按钮标签button4.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/namename设置表单的id/名称id/名称actionURL设置表单提交时，接收处理表单数据的文件methodget、post、post设置表单提交方式enctypeMIME_type设置表单发送到服务器之前对数据进行编码类型acceptMIME_type设置表单提交的文件内容的类型accept-charsetcharset设置表单提交的文件字符集的类型target_blank、_parent、_self、_top、framename、_parent、_self、_top、framename设置打开表单提交跳转页面URL的位置URL的位置4.1.2 输入域标签input 属 性取 值功能说明typetype设置输入项的类型nametext设置输入项变量名sizenumber设置输入项的长度valuetext设置输入项中预设的文本内容maxlengthnumber设置输入项允许输入的最大字符数checkedchecked设置输入项首次加载时被选中状态disableddisabled设置输入项加载时禁用状态readonlyreadonly设置输入项为只读状态 input标记元素是非成对的，它嵌套在表单标记元素中使用，用来定义一个输入项。1.主要属性input标记元素的主要属性及其取值和功能说明如表4.3所示。4.1.2 输入域标签input type属性说 明text单行文本输入框password密码输入框radio单选按钮checkbox复选按钮hidden隐藏元素image图像域file文件选择submit提交按钮reset重置按钮button自定义按钮2.type属性取值input标记元素的type属性及其说明如表4.4所示。4.1.2 输入域标签input 3.类型实例（1）单行文本、密码输入框例4.1 实现用户登录。form name=login action= method=post p用户名：input type=text name=username//pp密nbsp; nbsp;码：input type=password name=password//p/form4.1.2 输入域标签input3.类型实例（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/女/pp请选择爱好：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/form4.1.2 输入域标签input（3）提交按钮、重置按钮、自定义按钮当输入项类型“type=submit”设为提交按钮时；当输入项类型“type=reset”设为重置按钮时；当输入项类型“type=button”设为自定义按钮时，则可以设定按钮上的标题，但单击没有任何动作发生，一般常用于设定单击后执行JavaScript程序。例4