A7 表单与表单元素.ppt

文本框 Text/password maxLength:设置最大输入数字 size:设置文本框长度 defaultValue 初始值 Textarea rows设置文本域的高 cols设置文本域的框 value文本框当前显示的文本 defaultValue 文本框的初始内容。（文本框重置时将恢复这个值） input type=“text” id=“txtName” document.getElementById(“txtName”).size=“10” 按钮 Button 元素 没有自己的默认行为，除非它具有onclick(或其它)事件，否则它在表单中没有作用。 因为超链接提供了与按钮一样的onclick事件处理程序，任何按钮对象都可以用一个超链接代替。 Submit 元素 和 Reset 元素 具有默认动作 (分别为提交和重置表单)。因为它们有默认动作，及时没有onclick事件处理程序，它们也能完成一定的功能。 如果onclick处理程序返回false，这两种按钮的默认动作就不会被执行 可以通过submit元素的onclick事件处理表单验证，但form对象自身的onsubmit处理程序进行表单验证更常用一些. 事 件 onclick 按钮点击事件 属性 type 只读属性,按钮的类型 value 按钮上的文字 name 按钮元素的名称 多选 单选按钮 Radio 元素 / Checkbox元素 同一组Radio元素具有相同的name。 同一组Checkbox元素通常也拥有相同的name，但不是必须的 在引用这些元素时，通过名字引用的对象是与元素同名的数组。 可以通过数组下标单独访问每一个Radio( Checkbox )元素 Radio( Checkbox )元素的checked属性用来判断是否被选择，该属性为布尔值 下拉列表3－1 Select 元素 Select 元素不同于单选和多选按钮，每一个Select元素表示所有选项的集合。这些选项由option标记设置. Select元素的options[ ]的数组属性用来表示option标记。可以通过options数组来获取option标记的相关信息。 当用户选择不同的选项时将触发onchange事件 select对象存放的每个option对象都定义了value属性 Select元素的value属性为选中的option的value值，用于向服务器端传值 Select元素的selectedIndex属性表名当前被选中的选项下标 可以通过遍历所有option元素，检查其selected属性的值是否为真 Option 元素 Option元素具有text属性，用来表示显示的纯文本字符串 Option元素的value属性，用来表示option被送往服务器的值 下拉列表3－2 Option对象的创建 var opt = document.createElement(“option”); opt.value = “111”; opt.innerHTML = “My Text”; 或者： var opt = new Option(“My Text”); // var opt = new Option(“My Text”,”111”); //new Option(text,value) // var opt = new Option(“My Text”,”111”,true); // true代表选中状态 下拉列表3－3 事 件 onchange 当选中的下拉选项发生改变时激活 属性 type 只读属性，返回下拉列表的表单类型 length 返回下拉列表中的选项数目 name 设置或返回下拉列表的名称 value 返回选中项目的value值（即表单提交时传递给server端的下拉列表的值） selectedIndex 设置或返回下拉列表中被选项目的索引号 options[] 返回包含下拉列表中的所有选项的一个数组 方法 add(oElement[,index]) 向下拉列表添加一个option选项 例: oSel.options.add(oElement) remove (i) 从下拉列表中删除一个option选项 blur() 从下拉列表移开焦点 focus() 在下拉列表设置焦点 总结 表单提交前的校验事件采用onsubmit，对于有错误的内容，return false，表单将不再提交； 文本框失去焦点的事件为onblur,文本全选的方法是select(); radio和checkbox的选中判断是checked属性 下拉列表的选中判断是selected属性 下拉列表中每项都是option对象 作业 完成复选框的“全选/全不选”功