7表单技术汇编.docVIP

第七讲 表单元素 【教学内容】 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=40BRE-Mail：INPUT TYPE=TEXT NAME=UserMail SIZE=40 VALUE=username@mailserverBR 2.多行文本框的Html代码 您使用手机时最常碰到哪些问题？BRTEXTAREA NAME=UserTrouble COLS=45 ROWS=4线路太忙/TEXTAREABR 3.单选按钮的Html代码年nbsp;nbsp;龄：e1未满20岁INPUT TYPE=RADIO NAME=UserAge VALUE=Age2 CHECKED20~29INPUT TYPE=RADIO NAME=UserAge VALUE=Age330~39INPUT TYPE=RADIO NAME=UserAge VALUE=Age440~49INPUT 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 MULTIPLEOPTION VALUE=中国电信中国电信OPTION VALUE=中国联通 SELECTED中国联通OPTION VALUE=中国铁通中国铁通/OPTIONOPTION VALUE=中国网通中国网通/OPTIONOPTION VALUE=其他其他/OPTION/SELECTBR 6.按钮元素的Html代码 INPUT name=subject TYPE=SUBMIT id=subject VALUE=提交 INPUT name=reset TYPE=RESET id=reset VALUE=重新输入 1.框架的属性：