ITPub博客

首页 > 应用开发 > Java > Form对象

Form对象

原创 Java 作者:dengxinjian 时间:2010-04-24 01:04:00 0 删除 编辑
表单对象,文档对象的子对象,Javascript的Runtime Engine自动为每个表单建立对应的表单对象
属性:
action 表单的动作
elements 以索引表示的所有表单元素
encoding MIME的类型
length 表单元素的个数
mehtod 方法
name 表单名称
target 目标
方法:
handleEvent(event) 使事件处理程序生效
reset() 重置
submit() 提交[@more@]

1、文本对象


访问:document.forms[索引].elements[索引].属性|方法
document.表单名称.文件本对象名称.属性|方法
属性:
defaultValue 该对象的value属性
form 该对象所在的表单名称
name 该对象的名称
type 该对象的type属性
value 该对象的value属性
方法:
blur() 失去焦点
focus() 获得焦点
handleEvent(event) 使事件处理程序生效
select() 该对象设置为选取状态
事件处理程序:
onBlur onChange onClick onDbClick onFocus onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onSelect

1)获取文本框内容的方法
view plaincopy to clipboardprint?


姓名:
onClick='alert("谢谢你,"+this.form.txtUserName.value);' />


姓名:
onClick='alert("谢谢你,"+this.form.txtUserName.value);' />


2)文本框获得和失去焦点事件
view plaincopy to clipboardprint?
<!--
function getFocus(obj){
obj.style.color = "#ff0000";
obj.style.background = "#dbdbdb" ;
}
function getBlur(obj){
obj.style.color = "#000000";
obj.style.background = "#ffffff";
}
// -->


电话: onFocus="getFocus(this)" onBlur="getBlur(this)" />

<!--
function getFocus(obj){
obj.style.color = "#ff0000";
obj.style.background = "#dbdbdb" ;
}
function getBlur(obj){
obj.style.color = "#000000";
obj.style.background = "#ffffff";
}
// -->


电话: onFocus="getFocus(this)" onBlur="getBlur(this)" />


3)满四位自动下移到下一个文本框的文字输入
view plaincopy to clipboardprint?
<!--
var i = 0 ;
function movenext(obj,i) {
if(obj.value.length == 4) {
document.forms[2].elements[i+1].focus();
}
}
function result() {
fm = document.forms[2];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码为:"+num);
}
// -->


onKeyup="movenext(this,0)">-
onKeyup="movenext(this,1)">-
onKeyup="movenext(this,2)">-
onKeyup="movenext(this,3)">
onClick="result()"/>

<!--
var i = 0 ;
function movenext(obj,i) {
if(obj.value.length == 4) {
document.forms[2].elements[i+1].focus();
}
}
function result() {
fm = document.forms[2];
num = fm.elements[0].value +
fm.elements[1].value +
fm.elements[2].value +
fm.elements[3].value ;
alert("你输入的信用卡号码为:"+num);
}
// -->


onKeyup="movenext(this,0)">-
onKeyup="movenext(this,1)">-
onKeyup="movenext(this,2)">-
onKeyup="movenext(this,3)">
onClick="result()"/>


2、密码对象
密码对象与文本对象基本相似,只是将type改为password类型。
view plaincopy to clipboardprint?
<!--
function checkPw(){
fm = document.form4;
if(fm.pw2.value != fm.pw1.value){
alert("密码不符,请重新输入!");
document.form4.pw2.select();
}else {
alert("谢谢你,"+fm.txtName.value);
}
}
// -->


姓名:
输入密码:
重新输入:


<!--
function checkPw(){
fm = document.form4;
if(fm.pw2.value != fm.pw1.value){
alert("密码不符,请重新输入!");
document.form4.pw2.select();
}else {
alert("谢谢你,"+fm.txtName.value);
}
}
// -->


姓名:
输入密码:
重新输入:



3、按钮对象、提交按钮对象和重置按钮对象
type="button"||"submit"||"reset"
4、隐藏对象
type="hidden"
5、单选按钮对象
checked 设置该对象为选定状态
defaultChecked 对应该对象的默认选定状态
type="radio"

view plaincopy to clipboardprint?
<!--
function show(){
var x = "先生" ;
if(document.form5.sex[1].checked){
x = "小姐" ;
}
alert(document.form5.txtYourName.value + x);
}
// -->


姓名:你是:
帅哥
美女


<!--
function show(){
var x = "先生" ;
if(document.form5.sex[1].checked){
x = "小姐" ;
}
alert(document.form5.txtYourName.value + x);
}
// -->


姓名:你是:
帅哥
美女



6、复选框对象
type="checkbox"

view plaincopy to clipboardprint?
<!--
function count(){
var checkCount = 0 ;
var num = document.form6.elements.length ;
for(var i=0;i if(document.form6.elements[i].checked){
checkCount ++ ;
}
}
alert("你喜欢"+ checkCount + " 种颜色。");
}
// -->


请选择你喜欢的颜色:
红色
绿色
蓝色


<!--
function count(){
var checkCount = 0 ;
var num = document.form6.elements.length ;
for(var i=0;i if(document.form6.elements[i].checked){
checkCount ++ ;
}
}
alert("你喜欢"+ checkCount + " 种颜色。");
}
// -->


请选择你喜欢的颜色:
红色
绿色
蓝色



7、下拉选择框对象
length 选项的数目
options option标记集合
selectedIndex 所选项目的索引值

选项对象:下接选择框对象的子对象
new Option([显示文本[,值[,defaultSelected[,selected]]]]);
text 该选项显示的文本
value 该选项的值

view plaincopy to clipboardprint?
<!--
var URL = new Array(3);
URL[0] = "http://www.baidu.com" ;
URL[1] = "http://www.google.cn" ;
URL[2] = "http://www.yahoo.com.cn" ;
function goto(form){
var i = form.menu.selectedIndex ;
if(i>0){
location = URL[i-1];
}
}
// -->





<!--
function createOptions(){
var op=new Option(document.form7.select1.value) ;
document.form7.select2.options.add(op) ;
}
// -->



onClick="createOptions()" />


<!--
var URL = new Array(3);
URL[0] = "http://www.baidu.com" ;
URL[1] = "http://www.google.cn" ;
URL[2] = "http://www.yahoo.com.cn" ;
function goto(form){
var i = form.menu.selectedIndex ;
if(i>0){
location = URL[i-1];
}
}
// -->





<!--
function createOptions(){
var op=new Option(document.form7.select1.value) ;
document.form7.select2.options.add(op) ;
}
// -->



onClick="createOptions()" />



8、文本域对象

view plaincopy to clipboardprint?
<!--
function isTooLong(elm){
if(elm.length>50){
alert("留言内容太长,请修改后再发送...");
return false;
}
}
// -->


全部评论
  • 博文量
    46
  • 访问量
    121022