表单小结
<html>
<head>
<title>表单验证</title>
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<style type="text/css">
body{height:1000px}
.nav{position:fixed;z-index:555;width:50px;height:50px;color:#ffffff;background-color:#666666;bottom:200px;right:10px;text-align:center}
</style>
</head>
<body>
<div class="nav" style="display:none">返回</div>
<form action="" method="" onsubmit="return Myform(this)">
<p><label>用户名</label><input type="text" name="user"/></p>
<p><label>密码</label><input type="password" name="password"/></p>
<p><label>性别</label><input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="2" />女</p><!--name相同能单选不同不能单选-->
<p><label>爱好</label><input type="checkbox" name="basketball" value="2" checked="checked"/>篮球<input type="checkbox" name="zuqiu" value="2"/>足球</p><!--表单中真正的值是alue-->
<p><label>城市</label><select name="sel"><option value="1" selected="selected">请选择宠物</option><option value="2">武汉</option><option value="3">北京</option></select></p>
<p><label>生物</label><select name=""><optgroup label="植物"><option value="1">树</option><option value="2">草</option></optgroup><optgroup label="动物"><option value="3">老虎</option><option value="4">猎豹</option></optgroup></select></p>
<p><label>描述</label><textarea name="textarea"></textarea></p>
<p><fieldest><legend>健康信息</legend>身高<input type="text"/>体重<input type="text"/></fieldest></p>
<p><input type="reset" value="重置"/><input type="submit" value="提交"/></p>
</form>
<script>
$(".nav").click(function(){
$('body,html').animate({scrollTop:0},1000); //点击按钮让其回到页面顶部
});
$(window).scroll(function(){ //滚动窗口自动隐藏或显示
if($(document).scrollTop()>=60){
$(".nav").fadeIn(1000);
}else{
$(".nav").fadeOut(1000);
}
});
function Myform(thisform){
with(thisform){
if(user.value==""){
alert("用户名不能为空！");
return false;
}
if(password.value==""){
alert("密码不能为空！");
return false;
}
if(sel.value==1){
alert("请选择宠物");
return false;
}
}
}
</script>
</body>
</html>
<!--name相同能单选不同不能单选--><!--表单中真正的值是alue-->
浙公网安备 33010602011771号