html+cssday3TP3V2.0章节幻灯片.PPTVIP

表单和框架 本章任务 制作“注册”页面 制作“客户中心”页面 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会使用框架结构实现多窗口展示页面 本章目标 表单 表单的典型应用 注册用户 收集信息 反馈信息 为网站提供有哪些信誉好的足球投注网站工具 注册用户 收集信息 反馈信息 提供有哪些信誉好的足球投注网站工具 表单包含的控件 单行文本输入框(TEXT) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET) 提交按钮(SUBMIT) 多行文本框(TEXTAREA) 密码框(PASSWORD) 表单页面的基本结构 METHOD =post或get ACTION METHOD 指定提交后，由服务器上哪个处理程序处理 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 ACTION = URL FORM action=method=post …… /FORM 演示示例1：使用 post提交方式 和 get提交方式 表单元素的统一格式 FORM name=form3 method=post action= INPUT type=checkbox name=gen value=男 size=21“ maxlength=4 checked=checked …… /FORM 指定元素的类型，可为TEXT、RADIO、SUBMIT等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中 表单元素的逐一介绍 文本框基本语法 INPUT type=text value=张三 size=20 FORM name=form1 method=post action= P名nbsp;nbsp;字： INPUT type=text value=张三 size=20 /P …… /FORM 查看源代码 单行文本输入框，字符宽度为20 文本区的宽度 输入元素的默认值 文本输入框 表单元素的逐一介绍 密码框基本语法 INPUT type=password value= 123456 size=22 密码区宽度 初始密码 密码框 FORM name=form2 method=post action= …… P密nbsp;nbsp;码： INPUT value=123456 type=password size=22 /P /FORM 查看源代码 密码框，22个字符宽度 表单元素的逐一介绍 单选按钮基本语法 INPUT type=radio value=男 checked=checked 初始值 单选按钮 默认选中 FORM name=form3 method=post action= BR性别： INPUT name=gen type=radio class=input value=男 checked IMG src=images/Male.gif width=23 height=21男nbsp; …… /FORM 查看源代码 设置此单选按钮被选中 表单元素的逐一介绍 复选框基本语法 INPUT type=checkbox name=cb2 value=talk 复选框 复选框名 复选框值 FORM name=form4 method=post action= …… LABEL INPUT type=checkbox name=cb2 value=talkchecked=checked /LABEL聊天nbsp;nbsp; …… /FORM 查看源代码 设置此复选框被选中 列表框基本语法 select name=指定列表名称size=行数option value=可选项的值selected…/option option value=可选项的值 …/option …… /select 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。 表单元素的逐一介绍 查看源代码 出生日期： INPUT name=byear value=yyyy size=4 maxlength=4 nbsp;年 SELECT name=bmon OPTION value= selected[选择月份] /OPTION OPTION value=0一月/OPTION OPTION value=1二月/OPTION …… /SELECT 月nbsp