第五章(表单和表单元素)课件

第五章表单与表单元素第五章1回顾框架标记各窗口尺寸设置各窗口间相互操作(FrameTarget)IFrame的外观IFrame的使用回顾框架标记2表单的基本概念及作用九种写入标记菜单下拉列表的使用课程目标表单的基本概念及作用课程目标3体验用于采集和提交用户输入的信息

体验用于采集和提交用户输入的信息4<formaction＝"url"method="get|post"name="myform"target="_blank">……</form>

表单标记<form>表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能表单是由窗体和控件组成的

处理程序的程序名(包括网络路径:网址或相对路径)

提交信息的方式<formaction＝"url"method="get5methodGET，显示提交，数据量小POST，隐式提交，数据量大GET|POST平板车搬家大型集装箱货车搬家methodGET，显示提交，数据量小GET|POS6写入标记<input/>标记<input/>能够将浏览器中的控件加载到html文档中必须放在<form></form>标志对之间<inputtype=“”/>用来定义一个用户输入区，用户可在其中输入信息。标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定

注意：该标记是单标记，没有结束标记写入标记<input/>标记<input/>能够将浏览器中7<type>的属性1．单行的文本输入区域2．按钮3．复选框4．隐藏区域5．密码输入区6．单选按钮类型7．图像按钮<inputtype="text"><inputtype="button"><inputtype="checkbox"<inputtype="hidden"><inputtype="password"><inputtype="radio"><inputtype="image"src="url">8．表单事件处理按钮<inputtype="submit|reset">9．文件域<inputtype=“file"><type>的属性1．单行的文本输入区域2．按钮3．复选8单行的文本框

(1)name定义控件名称(2)value指定控件初始值,属性及说明(3)size指定控件宽度(4)maxlength表示该文本输入框允许输入的最大字符数(5)onchang当文本改变时要执行的函数(6)onselect当控件被选中时要执行的函数(7)onfocus当文本接受焦点时要执行的函数单行的文本框(1)name定义控件名称(2)value指9单行文本框实例

<form> <inputtype="text"name="username"value="请输入用户名"></form><Input/>必须放在<form></form>之间设置当行文本框的其他属性，观察效果单行文本框实例<form><Input/>必须放在设置10输入密码的区域属性name定义控件名称。value指定控件初始值,该值就是浏览器一开始在文本框中的内容。size指定控件宽度,表示该文本输入框所能显示的最大字符数。maxlegnth表示该文本输入框允许用户输入的最大字符数。当用户输入密码时，区域内将会显示“*”号输入密码的区域属性name定义11<inputtype=“text”name=“username”value=“请输入用户名”/><br/><inputtype="password"name="password"value="请输入密码“/>密码框实例两者的唯一区别查看源码<inputtype=“text”name=“usern12按钮

分类普通按钮提交到服务器的按钮重置按钮<inputtype="button“/><inputtype=“submit”/><inputtype=“reset“/>可将表单内容全部清除点击就会连接到action指定的url地址按钮分类普通按钮提交到服务器的按钮重置按钮<inpu13按钮共同的属性

共同的属性name指定按钮名称value指定按钮表面显示的文字onclick指定单击按钮后要调用的函数onfocus指定按钮接受焦点时要调用的函数所谓调用的函数，是后面章节学的JavaScript函数按钮共同的属性共同的属性name指定按钮名称value14普通按钮当这个按钮被点击时，默认不会有任何的效果必须调用属性onclick指定的函数在使用这个按钮时，一般配合使用value指定在它上面显示的文字用onclick指定一个函数，一般为JavaScript的一个方法普通按钮当这个按钮被点击时，默认不会有任何的效果15按钮实例<formid="form1"name="form1"method="post"action=""> <inputtype="button"onclick="msg()"value="点击我"/></form>msg()就是JavaScript代码,后面的章节会详细讲解查看源码按钮实例<formid="form1"name="for16图像按钮图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器

属性name指定图像按钮名称。src指定图像的url地址图像按钮图像的源文件名由src属性指定，用户点击后，表单中17图像按钮实例

<inputtype="IMAGE"src="login.gif“/>查看源码图像按钮实例<inputtype="IMAGE"src18单选按钮类型radio用于单选，有以下属性

(1)name定义控件名称(2)value定义控件的值(3)checked设定控件初始状态是被选中的(4)onclick定义控件被选中时要执行的函数(5)onfocus定义控件为焦点时要执行的函数当为单选项时，所有按钮name属性必需相同单选按钮类型radio用于单选，有以下属性(1)nam19单选按钮实例

<INPUTCHECKEDname=R1type=radiovalue="music">音乐checked表示默认被选中radio表示单选按钮查看源码单选按钮实例<INPUTCHECKEDname=R120复选框checkbox用于多选name定义控件名称。value定义控件的值。checked设定控件初始状态是被选中的。onclick定义控件被选中时要执行的函数。onfocus定义控件为焦点时要执行的函数。JavaScript函数复选框checkbox用于多选name定义控件名称。Ja21<inputtype=“checkbox”name=“yinliao”value=“kkkl”>可口可乐复选框实例注意这里的value值name可以相同也可以不同相同name属性的复选框可以看成一组

checked=“checked”表示默认被选中查看源码<inputtype=“checkbox”name=“y22文件域属性：name控件名称。例如<inputtype=“file”name=“file”/>用户可以通过文件域来浏览本地文件并选择。配合服务端程序，可以实现本地文件的上传注意：要实现文件上传必须以Post为提交方式

并且设置表单属性enctype="multipart/form-data"文件域属性：name控件名称。例如<inputtype23隐藏区域属性name控件名称。value控件默认值。例如<inputtype="Hidden"name="ss"value="688">用户不能在其中输入，用来预设某些要传送的信息对用户来说是不可见的看不见的文本框隐藏区域属性name控件名称。例如<inputtype24下拉列表框属性multiplenamesize设置列表的高度缺省时值为1可多选控件名称<select></select>标志对用来创建一个菜单下拉列表框下拉列表框属性multiple设置列表的高度可多选控25下拉列表框实例<selectname="gx2"multiplesize="4"> <optionvalue=“apple”selected>苹果</select>multiple代表多选Selected表示默认选项将size改为1，看看效果查看源码下拉列表框实例<selectname="gx2"mult26可以输入多行的文本框属性(1)onchange指定控件改变时要调用的函数(2)onfocus当控件接受焦点时要执行的函数(3)onblur当控件失去焦点时要执行的函数(4)onselect当控件内容被选中时要执行的函数(5)name文字区块的名称，作识别之用，将会传至CGI(6)cols文字区块的宽度(7)rows文字区块的列数，即其高度(8)wrap属性定义输入内容大于文本域时显示的方式<textarea></textarea>用来创建一个可以输入多行的文本框

可以输入多行的文本框属性(1)onchange指定控件改27文本域示例

<formaction=""method="post">… <textareaname="yj"clos="20"rows="5">…</form>查看源码文本域示例<formaction=""method="28表单的作用用户注册系统登录发表留言或内容任何需要用户填写内容，进行交