边框滚动条
<html> <head> 不显示滚动条 <title> 设定框架滚动条的显示</title> </head> 显示滚动条 <frameset cols="50%,50%"> <iframe src=12-6-1.htm scrlling=no></iframe> <frame src=12-6-2.htm scrlling="yes"></frame> </frameset><noframes></noframes> </html>
border=“5”>
左右框架窗口
<html> <head> 左右分割窗口属性 <title>左右分割窗口</title> 框架标记 </head> <frameset cols="30%,70%"> <frame> <frame> </frameset><noframes></noframes> </html>
息返回的窗 口 息提交时的 编码方式
表单元素的逐一介绍
文本输入框 输入元素 的默认值 文本区的宽度
文本框基本语法
<INPUT type=“text ”
value=“username" size=“20">
<html> <head> <title>插入文字域</title> </head> <body> <h1>用户调查</h1> <form action=mailto:songsong@ method=get name=invest> 姓名： <input type="text" name="username" size=20> <br> 网址： <input type="text" name="URL" size=20 maxlength=50 value="http://"> <br> </form> </body> 单行文本输入框， </html>
Web页面设计
第4章 表单与框架
课程回顾
使用HTML创建一个表格至少需要哪些标签？ 跨多行表格是在单元格里用哪个属性进行设置 ？
本章学习要求
理解表单与框架的相关概念 掌握在HTML中使用表单与框架的技巧
表单
反馈信息 表单的典型应用 注册用户
注册用户 收集信息 为网站提供搜索工具
框架边缘高度与宽度
<html> <head> <title>设定框架滚动条的显示</title> </head> 框架边缘高度齐属性 <frameset cols="50%,50%"> 框架边缘宽度齐属性 <frame src=12-6-1.htm scrlling=no marginheight=100> <frame src=12-6-2.htm scrlling="auto" marginwidth=100> </frameset><noframes></noframes> </html>
浮动框架
<html> 浮动框架宽度属性 浮动框架高度属性 浮动框架标记 <head> <title>浮动框架</title> </head> <body> <iframe src=page1.htm width=450 height 330 name=iframe align="Center"> </iframe> 浮动框架名 </body> 称属性 浮动框架对 </html> 齐属性
边框宽度属 性
框架页面内容、取名与显示
<html> <head> 框架名称属性 <title> 设定框架页面的内容 </title> 框架页面内容属性 框架边框显示属性 </head> <frameset cols="50%,50%"> <frame src=left.htm name="left" frameborder=1> <frame src=right.htm name="right" frameborder=0> </frameset><noframes></noframes> </html>
框架与链接
<html> <head> <title>左侧框架</title> 链接right-1.html </head> 链接right-2.html <body> <img src=12-14-1.JPG><P> <a href="12-22-right-1.htm" target="right">Dreamweaver mx 2004</a><p> 点击超链接 <a href="12-22-right-2.htm" target="right">Fireworks mx 2004</a><p> <a href="12-22-right-3.htm" target="right">Flash mx 2004</a><p> </body> 链接right-3html </html>
提供搜 索工具 反馈信息 收集信息
单行文本输入 框(TEXT)
表单包含的控件
密码框 (PASSWORD)
单选按钮 (RADIO)
复选框 (CHECKBOX) 重置按钮 (RESET) 多行文本框 (TEXTAREA)
下拉列表 (SELECT)
提交按钮 (SUBMIT)
表单页面的基本结构
<FORM action=“” method=“post”> …… </FORM> ACTION
表单元素的逐一介绍
单选按钮 初始值 默认选中
单选框基本语法
<INPUT type=“radio ” value="男" checked="checked">
<form action=mailto:songsong@ method=get name=invest> 请选择你居住的城市： <input type="radio" name="city" value="beijing" checked>北京 <input type="radio" name="city" value="shanghai">上海 <input type="radio" name="city" value="nanjing">南京 </form>
表单元素的逐一介绍
按钮类型可为 button、submit
按钮名称
按钮上的标签
按钮基本语法
<INPUT type=“reset” name=“Reset” value=“ 重置 ">
<html> <head> <title>插入按钮</title> </head> <body> ……. <input type="submit" name="submit" value="提交表单"> <input type="reset" name="reset" value="重置表单"> <input type="button" name="button" value="普通按钮"> </form> </body> </html>
字符宽度为20
表单元素的逐一介绍
密码框 初始密码 密码区宽度
密码框基本语法
<INPUT type=“password ”value=“ 123456 ”size=“22”>
密码框，22 <form action=mailto:songsong@ method=get name=invest> 姓名：<input type="text" value="username" size=20> 个字符宽度 <br> 网址：<input type="text" name="url" size=20 maxlength=50 value="http://"> <br> 密码：<input type="password" name="password" size=20 maxlength=8> <br> 确认密码：<input type="password" name="password_confirm" size=20 maxlength=8> </form>
