HTML语言之表单和框架标记.ppt

HTML语言之表单和框架 学习目标 了解表单和框架标记的功能掌握表单标记的使用方法掌握框架标记的使用方法 重点 表单标记框架标记 重点 框架标记 表单 Form 可以实现互联网用户与服务器的信息交互 表单网页可以用来收集浏览者的意见和建议 以实现浏览者与站点之间的互动 经常使用的表单元素包括表单标记 和表单元素标记 表单元素标记则又主要包括 表单的发送与重置 文字输入和密码输入 复选框和单选按钮 选择菜单框 文本域等 表单 表单 1 表单基本结构格式 功能 创建一个含有提交 重置两个按钮的表单容器 说明 action属性用来定义表单处理程序 一个ASP CGI等程序 的位置 相对地址或绝对地址 method定义表单结果从浏览器传送到服务器的方法 一般有两种方法 get post get有数据量限制 post无以上限制 以文件形式传输 表单 2 文本框格式 功能 定义一个文本框 说明 name属性定义文本框的名字 type属性定义文本框的类型 属性值可以是text password 当type text 时表示为一般的文本框 当type password 时表示为口令域 即当用户输入文本时显示为星号 value属性定义文本框的初始值 size属性定义文本的长度 maxlength属性定义文本框的最大输入字符数 表单 3 文本域格式 功能 定义一个能够输入多行的文本域 说明 name属性定义文本域的名字 rows属性定义文本输入窗口的高度 单位是字符行 cols属性定义文本输入窗口的宽度 单位是字符个数 表单 4 按钮格式 功能 定义一个按钮 说明 type属性的属性值可以是button submit reset 分别表示为普通按钮 提交按钮 重置按钮 name属性定义按钮的名字 value属性定义按钮上的文本 表单 5 复选框格式 功能 定义一组复选框 在该组复选框中可以有一个或多个被选中 说明 type属性的属性值checkbox表明是复选框 name属性定义复选框的名字 value属性定义复选框的值 checked属性表明该复选框被选中 若未选中则省略该属性 表单 6 单选框格式 功能 定义一组单选框 在该组单选框中只能由一个被选中 说明 type属性的属性值radio表明是单选框 name属性定义单选框的名字 value属性定义单选框的值 checked属性表明该单选框被选中 若未选中则省略该属性 技术要点 在一组单选框中必须是name属性值相同value属性值不同 表单 7 下拉列表格式 功能 定义一个下拉列表 说明 name属性定义下拉列表的名字 size属性定义列表窗口中可见选项的个数 标记定义列表项 必须和标记一起使用 表单 例5 11创建一个简单的表单 表单 例5 11创建一个简单的表单创建表单请完成以下表格姓名 表单 例5 11创建一个简单的表单 续 密码请在此处填写姓名 字符最长为四个汉字 或八个英文字母 性别男女 表单 例5 11创建一个简单的表单 续 电子邮件地址职业请选 教育 研究艺术 设计法律相关行政管理传播 媒体顾问 分析员 表单 例5 11创建一个简单的表单 续 个人爱好电脑网络影视娱乐棋牌游戏读书读报美酒佳肴绘画书法在此选择兴趣爱好 可以选择一个以上的选项 留言内容 表单 例5 11创建一个简单的表单 续 填写完成后 选择下面的提交按钮提交表单 框架 通过使用框架 你可以在同一个浏览器窗口中显示不止一个页面 每份HTML文档称为一个框架 并且每个框架都独立于其他的框架 是用来划分框窗 每一框窗由一个标记标示 必须在范围中使用 标记所标示的框架是按由上而下由左至右的次序进行解析的 且支持框架嵌套 框架 框架页面 框架的基本结构 框架 框架基本概念 框架标记 用以宣告此HTML文件为框架模式 并约定本主体窗口的切分方式 第一层切分方式 设定一个子框架窗口及其属性 Rows 定义了框架含有多少列与列的大小 每个值使用逗号分隔 取值为象素 百分比或 其中 标示占用余下宽度空间 Cols 定义了框架含有多少行与行的大小 每个值使用逗号分隔 取值为象素 百分比或 frameborder 框架边框 值为0或1 0表示无边框 1表示显示边框 border 框架边框的厚度 以pixels为单位 bordercolor 设定框架的边框颜色 framespacing 表示框架与框架间保留空白的距离 常用属性参数说明 框架 常用属性参数说明 src 设定此框窗要显示的网页名称 每个框窗一定要对应一个网页 name 设定框窗名称 frameborder 设定框架边框 值为0或1 0表示无边框 1表示显示边框 framespacing 表示框架与框架间的保留空白的距离 bordercolor 设定框架的边框颜色 scrolling 设定是否要显示滚动条 YES NO AUTO三种 noresize 是否允许用户改变框架大小 不设定或忽略则允许用户调整框架大小 marginhight 表示框架高度边缘所保留的空间 marginwidth 表示框架宽度边缘所保留的空间 框架 使用 当用户浏览器不支持框架功能时 网页可能会显示空白 为了提醒用户 可使用这个标记设定一些内容提醒浏览者或切换到其它可能的页面 应用方法如下所示 很抱歉 您的浏览器不支援框架 框架 framese frame切分窗口实例 左右框架分割示例 框架 framese frame切分窗口实例 左右框架分割示例 框架 framese frame切分窗口实例 上下框架分割示例 框架 framese frame切分窗口实例 上下框架分割示例 框架 framese frame切分窗口实例 嵌套框架示例 框架 framese frame切分窗口实例 嵌套框架示例 框架 framese frame切分窗口实例 嵌套