单中元素的共同属性和方法:
disabled 用于获取或设置表单控件是否被禁用
注意:true为禁止 false为可用 在HTML代码中disabled="disabled"来禁用表单元素
checked 对于单选按钮和复选框而言,选中则为true
defaultChecked 对于单选按钮和复选框而言,如果初始时是选中的则为true
value 除了下拉菜单以外,所有元素的value属性值(字符串形式,如果输入表单的值为整数,所获取的值仍然为字符串)
defaultValue 对于文本框和多行文本框而言,初始设定的value值
form 指向元素所在的<form>
name 元素的name属性
type 元素的类型
blur() 使焦点离开某个元素
focus() 聚焦到某个元素上
click() 模拟用户单击该元素
select() 对于文本框、多行文本框而言,选中并高亮显示其中的文本
onsubmit:当表单提交时才触发
onsubmit这个事件一定是给form标签来使用
表单都会有一个默认提交行为, 我们得想办法阻止表单的默认提交行为, 当用户没有填写数据或者是是数据不合法就不给这个表单提交?
只要当用户填写了合法的数据才让它提交
阻止表单的默认提交行为有两种方式:
1、如果onsubmit这个事件是行内绑定时 需要有两个return
<script type="text/javascript">
//表单行内绑定时 如何阻止表单的默认提交行为?
function check_form(){
return false; // 一个return 是写在事件处理程序中, 另外一个return必须要写在行内
}
</script>
<form action="index.php" onsubmit="return check_form()">
用户名:<input type="text" name="username" /><br/>
密 码:<input type="password" name="pass" /><br/>
<input type="submit" value="提交" />
</form>
2 如果onsubmit这个事件是动态绑定时, 只需要有一个return false即可
<script type="text/javascript">
//第一步:当页面加载完成后
window.onload=function(){
//获取到id=form这个对象 然后给这个对象绑定一个onsubmit事件
//动态绑定
document.getElementById('form').onsubmit=function(){
return false; //可以阻止表单默认提交
}
}
</script>
<form action="index.php" id="form">
用户名:<input type="text" name="username" /><br/>
密 码:<input type="password" name="pass" /><br/>
<input type="submit" value="提交" />
</form>
表单的提交通常通过按钮或者具备按钮功能的图片来完成
<input type="submit" name="btnSubmit" id="btnSubmit" value="submit"/>
<input type="image" name="picSubmit" id="picSubmit" value="submit.jpg"/>
当用户单击其中一个按钮,或者按回车键就可以直接提交表单,无需其他的代码,可以在action中加入警告来检测表单是否提交;
<form method="post" name="myForm1" action="javascript:alert('Submitted');">
可以采用表单的submit()方法,这对于验证和提交表单都是十分有用的
var oForm=document.forms["myForm1"];
oForm.submit();
或者自定义按钮分配onclick()事件
<input type="button" value="Submit" onclick="document.forms['myForms'].submit()"/>
如果使用submit()方法来提交表单则不会触发<form>的onsubmit事件,这与提交按钮是不同的。
因此使用submit()方法来提交,所有验证表单的过程都应该在其之前完成。
web用户在提交表单时往往会由于网速过慢而反复单击提交按钮, 这对于服务器而言是很大的负担,
通过可以使用disabled属性来禁止这种行为,
<input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();"/>
代码:
<html>
<head>
<title>if语句验证用户登录</title>
</head>
<body>
<table width="250" height="50" align="center" border="1">
<form name="form1" method="post" action="">
<tr>
<td bgcolor="#eeeeee" bordercolor="#FFFFFF" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF"colspan="2" align="center">用户登录</td>
</tr>
<tr>
<td width="150" align="center" valign="middle" >用户名:</td>
<td width="50"><input name="yan" type="text" maxlength="20"></td>
</tr>
<tr>
<td align="center">密 码:</td>
<td><input name="pass" type="password" maxlength="10"></td>
</tr>
<tr>
<td colspan="2"align="center"><input type="button" value="登陆" onClick="check()">
<input type="reset" value="重置">
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function check(){
if(form1.yan.value==""){
alert("请输入用户名!");form1.yan.foucs();return;
}else if(form1.pass.value==""){
alert("请输入密码!");form1.pass.foucs();return;
}
else{
form1.submit();
}
}
</script>
运行结果:
网站建设中;
让复选框全部选中和全部取消是比较常用的;
下面就介绍如何用一句话搞定全选功能;
其实很简单;
代码在下面;
JavaScript部分:
function checkAll(obj){ $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked')); }
html部分:
*请认真填写需求信息,我们会在24小时内与您取得联系。