1 / 17

第七讲 表单元素

第七讲 表单元素. 教学重、难点. 表单元素的各项属性设置. 重点. 重点. 表单元素各项属性的含义. 难点. 一、简单表单应用网页效果预览. 二、实例制作步骤：. 请见操作演示. 演示讲解 Dreamweaver 中简单个人网页文本元素的编辑. 三、本例表单的 html 语法结构分析. 切换到代码视图模式。观察页面中的超级链接语法格式。 单行文本框的 Html 代码

samson
Download Presentation

第七讲 表单元素

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第七讲 表单元素

  2. 教学重、难点 • 表单元素的各项属性设置 重点 重点 • 表单元素各项属性的含义 难点

  3. 一、简单表单应用网页效果预览

  4. 二、实例制作步骤： • 请见操作演示 演示讲解Dreamweaver中简单个人网页文本元素的编辑

  5. 三、本例表单的html语法结构分析 • 切换到代码视图模式。观察页面中的超级链接语法格式。 • 单行文本框的Html代码 • 姓&nbsp;&nbsp;名：<INPUT TYPE="TEXT" NAME="UserName" SIZE="40"><BR>E-Mail：<INPUT TYPE="TEXT" NAME="UserMail" SIZE="40" VALUE="username@mailserver"><BR> • ”

  6. 三、本例表单的html语法结构分析 • 多行文本框的Html代码 • 您使用手机时最常碰到哪些问题？<BR><TEXTAREA NAME="UserTrouble" COLS="45" ROWS="4">线路太忙</TEXTAREA><BR>

  7. 三、本例表单的html语法结构分析 单选按钮的Html代码年&nbsp;&nbsp;龄：<INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age1">未满20岁<INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age2" CHECKED>20~29<INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age3">30~39<INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age4">40~49<INPUT TYPE="RADIO" NAME="UserAge" VALUE="Age5">50岁以上<BR>

  8. 三、本例表单的html语法结构分析 • 复选框的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>

  9. 三、本例表单的html语法结构分析 • 下拉列表/菜单的Html代码 • 你使用哪个网？（可复选）<SELECT NAME="UserNumber" SIZE="4" MULTIPLE><OPTION VALUE="中国电信">中国电信<OPTION VALUE="中国联通" SELECTED>中国联通<OPTION VALUE="中国铁通">中国铁通</OPTION><OPTION VALUE="中国网通">中国网通</OPTION><OPTION VALUE="其他">其他</OPTION></SELECT><BR>

  10. 三、本例表单的html语法结构分析 • 按钮元素的Html代码 • <INPUT name="subject" TYPE="SUBMIT" id="subject" VALUE="提交"> <INPUT name="reset" TYPE="RESET" id="reset" VALUE="重新输入">

  11. 四、建立表格的html语法总结 • 1.表单标记符 • < FORM action= "URL" method= "GET"/"POST" </FORM> • 其中Action用于设定处理表单数据程序URL的地址。 • method指定数据传送到服务器的方式。有两种主要的方式，当method="GET"时，将输入数据加在action指定的地址后面传送到服务器；当method="POST"时则将输入数据按照HTTP输送协议中的POST传输方式传送到服务器。

  12. 2.表单输入标记符 • <INPUT type=text/textarea/password/checkbox/radon /submit/reset/file/hidden/image/button> • 各项的意义是： • type：text表示输入单行文本。 • type：textarea表示输入多行文本。 • type：password表示输入数据为密码，用“*”表示。 • type：checkbox表示复选框。

  13. 三、本例表单的html语法结构分析 • type：radio表示单选框。 • type：submit表示提交按钮，数据将被送到服务器。 • type：reset表示清除表单数据，以利于重新输入。 • type：file表示插入一个文件。 • type：hidden表示隐藏按钮。 • type：image表示插入一个图像。 • type：button表示普通按钮。

  14. 三、本例表单的html语法结构分析 • 3.下拉列表/菜单 • <SELECT name=" " size=" " （multiple）> • <OPTION label=" " value=" " （selected）>选项1内容</OPTION> • <OPTION label=" " value=" " （selected）>选项2内容</OPTION> • <!--更多OPTION标记--> • </SELECT>

  15. 三、本例表单的html语法结构分析 • 其中，SELECT标记符的name属性用于指定控件名；size属性用于指定选项菜单中一次显示多少行（默认值为1）；multiple属性用于设置允许用户选择多个选项（如果不设置此属性，则仅允许选择一个选项）。OPTION标记符的label属性可以为选项指定一个标记符，当使用此属性时，浏览器将采用此属性的值而非OPTION标记符中的内容作为选项标记符；selected 属性用于设置当前选项为预先选中状态；value属性指定了控件的初始值。

  16. 课后小结 • 本章重点讲解了在DW中通过表单工具栏创建表单页面的方法。表单的非常重要的用途就是交互网页设计。要求学生能够正确的设置表单及表单元素的属性，掌握表单及其元素的Html代码含义并且记忆。

  17. 练习题 • 请利用表单设计一个用户注册信息页面。 • 要求： • （1）姓名，密码，确认密码，出生日期，性别，职业，爱好，月收入，家庭住址，简短留言，提交，重设按钮等表单元素； • （2）表单元素的属性设置合理； • （3）单选，复选按钮具有环绕标签的功能。

More Related