表单

访问表单：

（1）document.forms[0]

（2）document.myform

（3）document.getElementById("form1")

访问表单元素：

（1）document.form1.elements[0]

（2）document.form1.text1

（3）document.getElementById("elementID");

表单对象的常用属性

属性	说明
name	返回或设置表单的名称
action	返回或设置表单提交的URL
method	返回或设置表单提交的方式，可取值为get或post
encoding	返回或设置表单信息提交的编码方式
id	返回或设置表单的id
length	返回表单对象中元素的个数
target	返回或设置提交表单时目标窗口的打开方式
elements	返回表单对象中的元素构成的数组，数组中的元素也是对象

表单对象的方法

 

方法	说明
reset()	将所有表单元素重置为初始值
submit()	提交表单数据,相当于单击了提交按钮

 

表单对象的事件

 

事件	说明
reset	重置表单时触发的事件
submit	提交表单时触发的事件

                                                        表单元素

文本框对象常用的属性即说明

 

属性	说明
id	返回或设置文本框的id属性值
name	返回文本框的名称
type	返回文本框的类型
value	返回或设置文本框中的文本，即文本框的值
rows	返回或设置多行文本框的高度
cols	返回或设置多行文本框的宽度
disabled	返回或设置文本框是否被禁用，该属性值为true时禁用，false时启用

 

 

文本框的方法

方法	说明
blur()	该方法用于将焦点从文本框中移开
focus()	该方法用于将焦点赋给文本框
click()	该方法可以模拟文本框被鼠标单击
select()	该方法可以选中文本框中的文字

按钮的属性

属性	说明
id	返回或设置按钮的id属性值
name	返回按钮的名称
type	返回按钮的类型
value	返回或设置按钮中的文本，即按钮的值
disabled	返回或设置按钮是否被禁用，改属性为true时禁用，false时启用

//验证表单内容是否为空
<form name="form1" method="post" action=""οnsubmit="return checkinput()">
<label>用户名：</label><input type="text"  name="name"/><br>
<label>密 码：</label><input type="text" name="pwd" /><br>
<input type="submit" value="登录"  />

</form>

function checkinput(){
if(form1.name.value=="")
{alert("请输入用户名!");
form1.name.focus();
return false//不允许提交表单
}
if(form1.pwd.value=="")
{
alert("请输入密码！");
form1.pwd.focus();
return false;//不允许提交表单
}
return true;//允许提交表单

}

----------------------------------------------------------------------------------

<table>//模拟自动取票系统
<form name="dianying" method="post" action="" οnsubmit="return check()">
<tr><td colspan="2">取票系统</td></tr>
<tr><td>请输入兑换码</td><td><input name="ma" type="text"/></td></tr>
<tr><td colspan="2"><input type="submit" value="取票"/><input type="reset" value="重新输入"/></td></tr>
</form>
</table>
<script>
function check(){
if(dianying.ma.value==""){
alert("请输入验证码");
return false;//一定要写不然会继续提交表单
}
if(dianying.ma.value=="123456789"){
alert("取票成功");
return true;
}
else{
alert("兑换码错误！");
return false;
}
}

</script>

----------------------------------------------------------------------------------------------------

//当文本框中的字超过要求，进行限制
<h1>新闻信息修改</h1>
<ul>
<form name="news" method="post" action="" οnsubmit="return xianzhi()">
<li><label> 新闻标题：</label><input type="text" id="title" name="title" οnfοcus="jujiao()"  value="今日新闻头条"></li>
<li><label>新闻内容 ：</label><textarea id="area" name="area" οnfοcus="jujiao()">今日，据相关方面报道……</textarea></li>
            <li><input type="submit" value="添加"/> <input type="reset"value="重置"/></li>
</form>
</ul>
<script>

function jujiao(){
var e=window.event;
var obj=e.srcElement;

obj.select();
}
function xianzhi(){
if(news.title.value.length>5){alert("新闻标题不能超过5个字！");news.title.focus(); return false;}
if(news.area.value.length>10){alert("新闻内容不能超过10个字！");news.area.focus(); return false;}
return true;
}

</script>