网页设计基础10.pptVIP

第十一讲 认识交互页面 HTML标签 – 表单标签 表单，英文名称form，是用来实现“网页?用户”会话的接口。 表单内包含许多表单元素，如文本域、下拉列表、单选框、复选框等等允许用户输入信息。 表单标签 form 文本域（text） 当用户要在表单中键入字母、数字等内容时，就会用到文本域。 单选按钮（radio） 当用户从若干给定的的选择中选取其一时，就会用到单选按钮。 复选框（checkbox） 当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。 确认按钮 当用户单击确认按钮时，表单会被传送给服务器处理。 （或清空） 表单的动作属性（Action） 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 在HTML中添加JavaScript代码 事件触发器 由于用户进行某些操作(比如点击按钮、填写文本域等)，形成一次事件，这个事件将触发javascript程序。 JavaScript函数 JavaScript通过“函数”来执行用户的请求。函数分为两类：内置函数和自定义函数 上机作业 见课程网站 仿佛能同用户“对话”的网页。 JavaScript是制作交互页面的一种工具，它能够侦听、处理、响应用户请求。 JavaScript运行在客户端。 form input input /form 输入标签input是用来定义输入信息类型的，它通过属性type来定义，常用的输入类型如下。 form 姓名: input type=text name=“username“ / 电话: input type=text name=“phone“ / /form form input type=“radio” name=“base” value=“thick” / 厚底 input type=“radio” name=“base” value=“crispy” / 薄底 /form form input type=“checkbox”name=“topping” value=“tomatosausage”/ 番茄烤肠 input type=“checkbox” name=“topping” value=“peperbacon”/ 青椒火腿 /form form input type=“submit” value=“提交”/ input type=“reset” value=“重填”/ /form form action=“order.asp” method=“GET” … … … … /form 请写如右图表单的HTML代码（不考虑CSS样式） 在HTML中添加 CSS代码 在HTML中添加 JavaScript代码 内部JS:在head内添加 script language=“javascript” type=“text/javascript” // JavaScript代码在此 /script 内部CSS: 在head内添加 style type=“text/css” /* CSS代码在此*/ /style 外部CSS: 在head内添加 link type=“text/css”rel=“stylesheet”href=“”/ 外部JS: 在head内添加 script type=text/javascript src=“ **.js /script body onLoad=alert(您好!);“ div img id=face src=normal_face.jpg alt=没有表情的脸 onClick=“changeface(); / /div /body HTML代码 下载完成事件 单击事件 可以直接使用 例如： alert(); 必须先定义，后使用 例如： Changeface(); 弹出一个警告框,显示括号里的信息，语法如下： 弹出框内 显示的内容 结 束 符 注意: 弹出内容外部的引号 可以是双引号也可以 是单引号需视情况而定. 弹出一输入框,并提取用户输入的信息，语法如下： 结 束 符 注意: 弹出内容外部的引号 可以是双引号也可以 是单引号需视情况而定. 自定义函数是程序员依据需要编写的实现特殊功能的函数,需遵循JavaScript的语法: 自定义函数是程序员依据需要编写的实现特殊功能的函数,需遵循JavaScript的语法: function changeface(){ var username=prompt(“请输入您的名字”,“例如:张三.); if(user