第6章html教程.pptVIP

第六章 表单与页面控件 重要的编程界面接口元素 课程目标 通过本章学习，可以掌握： 表单的基本概念及作用 写入标记 菜单下拉列表 课程定位 DOM—文档对象模型 从编程角度，可以将网页各层次分解成不同对象 浏览器窗口： window 网页所在层面：document 网页内部层面：frame,form,button,… 在编程的时候，比如 javascript，本质上就是操作这些对象，并调用它们的属性和方法 这些元素也是构成与用户交互的重要构件 DOM—document 文档对象模型 DOM—window 文档对象模型 表单与页面控件 表单标记form 写入标记input 下拉列表框 可以输入多行的文本框 表单标记form 表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能 表单是由窗体和控件组成的 格式： form action＝url method=get|post name=myform target=_blank …… /form 写入标记input 在html语言中,标记input具有重要的地位，它能够将浏览器中的控件加载到html文档中 input type=“”标志用来定义一个用户输入区，用户可在其中输入信息 input type=标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定 input 的属性 单行的文本输入区域 单行的文本输入区域实例 按钮 按钮共同的属性 普通按钮 当这个按钮被点击时，就会调用属性onclick指定的函数； 在使用这个按钮时，一般配合使用value指定在它上面显示的文字； 用onclick指定一个函数，一般为JavaScript的一个事件 按钮实例 复选框 checkbox用于多选,有以下属性 复选框实例 html head title 复选框 /title /head body center p align=center form p 你喜欢江山还是美人？ /p input type=“CHECKBOX” name=“a” value=“jiangshan”a.江山 br input type=CHECKBOX name=b value=meirenb.美人br input type=CHECKBOX name=c value=allc.爱江山也爱美人 /form /p /center /body /html 隐藏区域 用户不能在其中输入，用来预设某些要传送的信息 输入密码的区域 当用户输入密码时，区域内将会显示“*”号 密码框实例 单选按钮类型 radio用于单选，有以下属性 单选按钮实例 使用图像来代替Submit按钮 图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器 图像按钮实例 下拉列表框 select/select标志对用来创建一个菜单下拉列表框 此标志对用于form/form标志对之间 下拉列表框实例 可以输入多行的文本框 textarea/textarea用来创建一个可以输入多行的文本框 此标志对用于form/form标志对之间 动手实践 创建具有交互性的HTML页面 本章我们要为HTML页面添加一些表单控件，使页面更加具有交互性。如图所示： body form action= method=post center p您的意见对我很重要:br textarea name=yj clos=20 rows=5 请将意见输入此区域 /textarea /center /form /body 使用textarea必须以Post为提交方式 * * * * 处理程序的程序名(包括 网络路径:网址或相对路径) 从表单中获得信息的方式 该标记是单标记，没有结束标记 必须放在form/form标志对之间 1．单行的文本输入区域 2．按钮 3．复选框 4．隐藏区域 5．密码输入区 6．单选按钮类型 7．使用图像来代替Submit按钮 input type=text input type=button input type=CHECKBOX checked input type=HIDDEN input type=PASSWARD input type=RADIO input type=IMAGE src=URL (1)name定义控件名称 (2)value指定控件初始值, 属性及说明 (3)size指定控件宽度 (4)maxlength表示该文本输入框允许输入的最大