按钮 跳转菜单 文本区域 文本字段 单选按钮组 文件域 字段集
表单
隐藏域
复选框
列表/菜单
图像域
标签
7
设置表单属性
将光标插入点定位到表单中后，其【属性】面 板如图所示，在其中可设置表单的各种属性。
8
表单的基本语法结构
<FORM action=""method="post"> …… </FORM>
11
典型案例——创建“用户登录”界面
12
典型案例——创建“用户登录”界面
页面属性，字号为12px，文本颜色“#666666”,, 页面背景为”img/bg.gif” 插入表单，命名为“login”，处理该表单的程 序为check.asp，打开处理程序的方式为_blank
将光标插入点在表单中，右击，弹出菜单中选 择对齐>居中对齐，插入一个2行1列、宽度为 554px的表格，再在第一行中插入一个3行3列、 宽度为100%的表格，设置表格的背景图像为 “img/bg.jpg”
方法
get（一般浏览器的默认传送方式），将表单中的 信息以追加到处理程序地址后面的方式进行传送， 如“reg.asp?username=xiaoxiao&password=xiaoxiao” post,传送表单时将表单信息嵌入到请求处理程序中
MINE类型
制定提交给服务器进行处理的数据所使用的编码类 型，默认为application/x-www-form-urlencoded，通 常与POST方式协同使用，如果要创建文件上传表 单，应选择multipart/form-data
按钮名称
按钮上的显示 文字
<INPUT type="reset" name="Reset" value=" 重填 ">
30
添加按钮
<FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消"> </P> </FORM> 单击按钮，控件的值 被重置为value属性 中指定的初始值
18
多行文本字段的基本语法
文本框 的名字
添加单行、多行文本字段
文本框 的列数
<TEXTAREA name="textarea" cols="40" rows="6"> 文本框中的内容 </TEXTAREA>
文本框的行数 6行40个字符宽 度的多行文本域 <FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议， 本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 </TEXTAREA> …… </FORM>
表单
执行校长
李 伟
企业网站制作(第五讲 )
课程回顾
链接的路径形式有哪两种？ 网页中插入的多媒体有哪些类型？如何插入？
2
本讲目录
创建表单 表单对象的添加
3
本讲重点、难点
重点
表单、表单中对象的添加方法
难点
表单属性的理解
4
表单简介
注册会员时填写资料的页面 网上购物填写的购物单 搜索引擎界面
27
添加跳转菜单
跳转菜单在菜单的基础上增加了超链接，当浏 览者选择一个选项后，即跳转到相应的网页。
28
添加文件域
利用文件域可实现上传文件的功能，但要真正 实现上传功能，还需要手动编写代码，文件域 实际上只能起到选择文件后记录下文件路径的 作用。
29
添加按钮
按钮的基本语法
按钮类型可为 button、submit
控件的初始 宽度
控件中输入的 最多字符个数
控件是否 被选中
16
添加单行、多行文本字段
单行文本字段的创建
多行文本字段的创建
17
文本框语法
文本输入框
输入元素 的默认值
添加单行、多行文本字段
文本区的宽度
<INPUT type="text" value="张三" size="20">
<FORM name="form1" method="post" action=""> <P>名 字： <INPUT type="text" value="张三" size="20"> </P> …… 单行文本输入框， </FORM> 字符宽度为20
按钮
初始值
默认选中
<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">男 …… </FORM> 设置此单选 按钮被选中
24
添加列表菜单
单击【表单】插入栏【列表/菜单】按钮
单击列表值按钮，可以输入项目标签和值 【初始化时选定】列表框中选择菜单中显示的 初识项
25
添加列表菜单
列表框基本语法
<select name="指定列表名称"size="行数"> <option value="可选项的值"selected>…</option> <option value="可选项的值"> …</option> …… </select> 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。
26
添加列表菜单
设置此输入框最多 只能输入四个符号
出生日期： <INPUT name="byear" value="yyyy" size=4 maxlength=4 > 年 设置“[选择月份]” 选项默认被选中 <SELECT name="bmon"> <OPTION value=" " selected>[选择月份] </OPTION> <OPTION value=0>一月</OPTION> <OPTION value=1>二月</OPTION> …… </SELECT> 月 <INPUT name="bday" value="dd" size=2 maxlength=2 > 日
19
添加密码域
创建一个单行文本字段，在类型中选择密码 初始密码 密码框 密码框的基本语法
<INPUT type="password " value=" 123456 " size="22"> 密码区宽度
<FORM name="form2" method="post" action=""> …… <P>密 码： <INPUT value="123456 " type="password" size="22"> </P> 密码框，22 </FORM> 个字符宽度
33
添加字段集
<form id="form1" name="form1" method="post" action="" style="width:500px"><fieldset><legend>用户登 录</legend> <label>账 号 <input type="text" name="textfield" /> <br /> 密 码 <input type="text" name="textfield2" /> </label> <br /> <label>密码确认 <input type="text" name="textfield3" /> </label> <br /> <br /> <label> <input type="submit" name="Submit" value="提交" /> </label> </fieldset> </form>
