原创力文档- 1、本文档共10页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
第七讲 表单元素 【教学内容】
1.认识网页表单
2.利用Dreamweaver MX创建表单的方法
3.利用Dreamweaver MX编辑表单的方法
【教学目的】
学会利用Dreamweaver MX创建表单。
掌握表单以及表单元素的各种属性的含义。
【教学重、难点】
重点：表单元素的各项属性设置。
难点：表单元素各项属性的含义。
【教学方式】
采取讲授、讨论和案例分析相结合的方式。
【教学】
一、简单表单应用网页效果预览
图2-7-1 表单网页效果图? ?打开示例网页?
二、实例制作步骤：
1.首先打开DW的表单工具栏。
2.设计姓名单行文本框。点击插入文本字段按钮，弹出对话框。
点击“确定”按钮又弹出对话框，选择“是”
选择表单在属性面板设置参数
选择表单元素文本框在属性面板中设置参数
3.设计电子邮件地址单行文本框。
方法类似，属性如下图
注意事项：
标签标记环绕主要用于复选框，单选按钮等为了通过点击按钮文字也可以方便选择选项。
表单元素必须添加表单标签，否则表单元素的内容就不能够提交，后台接收数据。
表单和表单元素必须起一个容易记忆有一定含义的名字，方便后台编写代码调用。
文本框的最多字符数指的是最多允许输入多少字符，超过规定会提示错误。
文本框的字符宽指的是文本框在页面中显示的宽度。
密码框中的输入内容在页面显示中以******显示。
3.设计单选按钮的参数。
其余选定值依此类推Age2，Age3……
4.设计复选按钮。
设计复选按钮的方法和设计单选按钮的方法类似，属性面板的参数为：
复选框的名称都相同，选定值不同。
5.设计下拉列表/菜单
选中表单元素在属性面板中设置参数：
单击“列表值”按钮弹出对话框如图：
点击加号可以添加项目标签，值是为了后台调用方便而起的一个字符串。点击减号可以删除项目，点击上下箭头可以进行重新排序。
注意事项：
初始化设定是在页面中不用下拉能够显示的出来的内容。
列表和菜单的区别就是列表可以允许多选而菜单只能单选。
6.按钮的设计
按钮元素的设计和其他表单元素的设计类似，提交按钮属性参数如图：
重设按钮类似，只是按钮名称和值改一下，动作选择“重设表单”。
三、本例表单的html语法结构分析
切换到代码视图模式。观察页面中的超级链接语法格式。
1.单行文本框的Html代码
姓nbsp;nbsp;名：INPUT TYPE=TEXT NAME=UserName SIZE=40BR E-Mail：INPUT TYPE=TEXT NAME=UserMail SIZE=40 VALUE=username@mailserverBR
2.多行文本框的Html代码
您使用手机时最常碰到哪些问题？BR TEXTAREA NAME=UserTrouble COLS=45 ROWS=4线路太忙/TEXTAREABR
3.单选按钮的Html代码 年nbsp;nbsp;龄：e1未满20岁 INPUT TYPE=RADIO NAME=UserAge VALUE=Age2 CHECKED20~29 INPUT TYPE=RADIO NAME=UserAge VALUE=Age330~39 INPUT TYPE=RADIO NAME=UserAge VALUE=Age440~49 INPUT TYPE=RADIO NAME=UserAge VALUE=Age550岁以上BR
4.复选框的Html代码
您曾经使用过哪些厂家的手机？ INPUT TYPE=CHECKBOX NAME=UserPhone VALUE=诺基亚 CHECKED诺基亚 INPUT TYPE=CHECKBOX NAME=UserPhone VALUE=摩托罗拉摩托罗拉 INPUT TYPE=CHECKBOX NAME=UserPhone VALUE=爱利信爱利信 INPUT TYPE=CHECKBOX NAME=UserPhone VALUE=三星三星BR
5.下拉列表/菜单的Html代码
你使用哪个网？（可复选） SELECT NAME=UserNumber SIZE=4 MULTIPLE OPTION VALUE=中国电信中国电信 OPTION VALUE=中国联通 SELECTED中国联通 OPTION VALUE=中国铁通中国铁通/OPTION OPTION VALUE=中国网通中国网通/OPTION OPTION VALUE=其他其他/OPTION /SELECTBR
6.按钮元素的Html代码
INPUT name=subject TYPE=SUBMIT id=subject VALUE=提交 INPUT name=reset TYP
文档评论（0）