第12讲 表单和表单对象的设置及应用.ppt

《网页设计教程》 网页制作应用教程 2012.11 QQ 讲师：徐儒 上节回顾 2012年秋期计算机等级考试试题中网页制作考题的讲解 框架及其设置 应用实例：用框架制作一个导航菜单 表单创建和设置 表单对象的添加和设置 应用实例：注册表单 本节讲堂： 表单和表单对象的设置及应用 1、表单的创建和设置 了解的知识点： 创建表单 表单属性设置 1.1、表单创建 在Dreamweaver 8中，表单是用来输入数据或与网站进行交互的工具。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单，其创建方法都相同。 1.2、表单属性设置 将插入点定位到插入的表单中，打开属性面板可以对其属性进行设置。 动作：提交表单的action动作处理页面 方法：POST：该方法通过将内容附加在HTTP报文的body体内，来传递数据。(安全) GET：该方法通过URL请求来传递数据。 2、表单对象的添加和设置 了解的知识点： 认识表单对象 添加表单对象 设置表单对象 2.1表单对象 常用对象：文本字段 、按钮 、单选按钮组、复选框、 跳转菜单 、列表/菜单 非常用对象：隐藏域、文件域、标签、字段集、文本区域 2.2文本字段对象 文本字段是最常见的表单对象之一，可以输入字母、数字、文本等类型的内容。文本可以是单行或多行显示，也可以以密码的方式显示，在这种情况下，输入文本将被替换为星号或项目符号，以避免旁观者看到这些文本，一般用作密码等项目。 2.2文本字段对象 主要属性： 字符宽度：文本框显示的宽度（单位：字符） 最多字符数：能够接收的最大字符 类型：文本框显示的类型样式 初始值：默认显示的内容 2.3按钮对象 在单击时执行操作。通常这些操作包括提交或重置表单并可以为按钮添加自定义的名称或标签。 主要属性 提交表单：提交Form的action动作 重置表单：将表单对象的内容还原成初始值 无：不做任何操作 Eg.js提交并显示文本值 <script language="javascript"> function check(){ var str = document.getElementById("id1").value; //var str1 = document.form1.textfield.value; if(str == "") { alert("文本框输入不能为空！"); } else { alert("你输入的值为：" + str); } }</script> <label>文本框： <input type="text" id="id1" name="textfield" /> <input type="submit" name="Submit" value="提交" onclick="check()" /> </label> Eg.js提交并显示文本值 2.4单选按钮组对象 在一组选项中只能选择一个选项。如在性别单选按钮组中选中了“男”单选按钮，再选中“女”单选按钮时， “男”单选按钮就会被撤消。 若干单选按钮，只要具有相同的name，就组成一组单选按钮组。 主要属性： 选定值：单选按钮对应的选项值 初始状态：已勾选/未选中 Eg.获取单选按钮组的选中值 <script language="javascript"> function check() { var str = document.getElementsByName("radiobutton"); var strNew= ""; for(var i=0;i<str.length;i++) { if(str[i].checked == true) { strNew = str[i].getAttribute("value"); } } if(strNew == "") { alert("选项目不能为空"); } else { alert("你选中的值为：" + strNew); } }</script> Eg.获取单选按钮组的选中值 <label>你的性别：<br /> <input name="radiobutton" type="radio" value="男" />男<br /> <input name="radiobutton" type="radio" value="女" checked="checked" />女<br />