HTML教程6.ppt

第六章 表单与页面控件 课程目标 表单的基本概念及作用 写入标记 菜单下拉列表 * 体验 创建具有交互性的HTML页面 本章我们要为HTML页面添加一些表单控件，使页面更加具有交互性。如图所示： * 表单与页面控件 表单标记form 写入标记input 下拉列表框 可以输入多行的文本框 * 表单标记form 表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能 表单是由窗体和控件组成的 格式： form action＝url method=get|post name=myform target=_blank …… /form 处理程序的程序名(包括 网络路径:网址或相对路径) 从表单中获得信息的方式 * 写入标记input 在html语言中,标记input具有重要的地位，它能够将浏览器中的控件加载到html文档中 input type=“”标志用来定义一个用户输入区，用户可在其中输入信息 input type=标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定 该标记是单标记，没有结束标记 必须放在form/form标志对之间 * input 的属性 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表示该文本输入框允许输入的最大字符数 (5)onchang 当文本改变时要执行的函数 (6)onselect 当控件被选中时要执行的函数 (7)onfocus 当文本接受焦点时要执行的函数 * 单行的文本输入区域实例 form input type=text name=username value=请输入用户名 /form Input 标记单独使用 Input 必须放在form/form之间 * 按钮 分类 普通按钮 提交到服务器的按钮 重置按钮 input type=button input type=SUBMIT input type=RESET 可将表单内容全部清除 当这个按钮被点击时，就会连接到表单form属性action指定的url地址 * 按钮共同的属性 共同的属性 name 指定按钮名称。 value 指定按钮表面显示的文字。 onclick 指定单击按钮后要调用的函数。 onfocus 指定按钮接受焦点时要调用的函数 * 普通按钮 当这个按钮被点击时，就会调用属性onclick指定的函数； 在使用这个按钮时，一般配合使用value指定在它上面显示的文字； 用onclick指定一个函数，一般为JavaScript的一个事件 * 按钮实例 html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title点击按钮/title /head body script function msg() { alert(我被点击了^.^); } /script form id=form1 name=form1 method=post action= !—若获得焦点时执行函数则将onclick改为onfocus -- input type=button onclick=msg() value=点击我/ /form /body /html * 复选框 checkbox用于多选,有以下属性 name 定义控件名称。 value 定义控件的值。 checked 设定控件初始状态是被选中的。 onclick 定义控件被选中时要执行的函数。 onfocus 定义控件为焦点时要执行的函数。 * 复选框实例 html head title 复选框 /title /head body center p align=center form p 你喜欢江山还是美人？ /p input type=“CHECKBOX” name=“a” value=“jiangshan”a