html第八章.ppt

8 页面中的表单 目标 1）了解表单 2）掌握使用文本框、使用复选框和单选按钮、创建下拉菜单和列表、创建按钮 8 页面中的表单 8 页面中的表单 HTML语言字义了表单结构，CSS样式有定义表单的样式，JavaScript脚本可以完成表单的检查。 1）表单具有支持交互的功能。 2）表单的使用分为两部分，一部分是向网页中插入表单并设置其属性；另一部分为表单的处理，即调用服务器端脚本或应用程序对表单进行处理。 HTML代码实现 form name=”Register” method=”post” action=”mailto:123@163.com” 所有表单标签都在form中其属性如下： Method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get，post。 Name 表单的名称。 Action 用来定义表单处理程序（一个ASP，CGI等程序）的位置。（相对地址或绝对地址） 8.1 表单 Dreamweaver可视化实现 插入栏----“表单”标签----单击表单按钮----红色虚线中间的范围就是这个表单的作用范围----用表单属性检查器对这个表单的属性进行设置----“表单名称”“动作”用来设置处理这个表单的服务器端脚本的路径。“目标”设置表单被处理后，反馈网页的打开方式（_black,_parent,_self,_top）“方法”设置将表单数据发送到服务器的方法，有3个选项：“默认”，post和get----查看源码。 form id=submitform name=submitform method=post action=hppt:///email/send.php3 /form 8.2.1 单行文本域 HTML代码实现 input name=”user” size=”16” maxlength=”20” type=”text” 常用表单元素由input定义，属性如下： Name输入元素的名称。 Type 输入元素的类型。 Maxlength 输入元素的最大输入字符数。 Size 输入元素的宽度（以字符为单位）。 Value 输入元素的默认值。 Dreamweaver可视化实现 表单插入栏中，单击“单行文本”按钮----选中----属性面板进行设置----命名“字符宽度”设置文本域长度，“最多字符数”设置输入的最大字符数，“初始值”设置初始文本----查看源码。 input name=userid type=text id=userid / 8.2.2 密码域 HTML代码实现 input name=”pass1” size=”12” maxlength=”20” type=”password” 将input标签的type属性的值设为pasword，就可以创建一个密码域。 Dreamweaver可视化实现 表单插入栏单击“单行文本”按钮----选中----属性面板“类型”选择“密码”----查看源码。 input name=userid2 type=password id=userid2 / 8.2.3 多行文本域 HTML代码实现 textarea rows=”3” name=”t” cols=”40” /textarea textarea用于创建一个多行文本域，属性为： name输入元素的名称； rows多行文字域的行数； cols多行文字域的列数。 Dreamweaver可视化实现 表单插入栏----单击“多行文本域”按钮----属性面板进行多行文本属性设置----命名“字符宽度”设置文本域的长度，“行数”设置文本域显示的行数，“换行”包括：“默认”，“关”，“虚拟”，“实体”----查看源码。 textarea name=textarea cols=40 rows=5/textarea 8.3.1 复选框 HTML代码实现 input type=”checkbook” name=”checkbox” value=”checkbox” checked input标签的type属性的值设为checkbox创建复选框，checked默认选中。 Dreamweaver可视化实现 插入表单中单击“复选框”按钮----属性面板----名称“选定值”设置这个复选框的值，“初始状态”设置复选框的初始状态（已勾选未选中）----查看源码。 input name=checkbox2 type=checkbox id=checkbox2 value=checkbox / 8.3.2 单选按钮 HTML代码实现 input name=”radio button” type=”radio” value=”radiobuton” checked input