表单
实例1、
代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style>
*{padding: 0px;margin: 0px;}
body,#boxs{
width: auto;
height: 100%;
position: relative;
left:0px;
top:0px;
}
#boxs{
background-color: #C4C2C2;
height:600px;
width: 1320px;
background-size: contain;
margin: 10px auto;
}
#boxs_nav{
width:100%;
height: 60px;
padding: 10px 0px 0px 15px;
line-height: 35px;
text-align: center;
position: absolute;
left: 0px;
top:0px;
border-bottom: 1px solid #2B2B2B;
box-sizing: border-box;
}
#boxs_nav a{
font-size: 24px;
letter-spacing: 0.5em;
text-decoration-line: none;
padding-left:40px;
box-sizing: border-box;
}
#boxs_form{
position: absolute;
left:50%;
top:80px;
margin-left:-120px;
}
#boxs_form td{
color: #463D3E;
font-size: 14px;
height: 24px;
line-height: 24px;
}
#boxs_form tr{
height: 40px;
line-height:30px;
}
tr td:first-of-type{
width:60px;
}
.td_input{
width: 200px;
height: 20px;
background-color: rgba(255,237,237,0.07);
}
.td_input:hover{
background-color: #99E499;
}
.td_input:focus{
color: #14B73B;
background-color: #99E499;
}
#btn{
width: 180px;
background-color: #F1DC4A;
color: aliceblue;
line-height: 30px;
height: 30px;
border-radius:15px;
}
</style>
</head>
<body>
<div id="boxs">
<div id="boxs_nav">
<a href="denglu1.html">登录</a>
<a href="denglu1.html">注册</a>
</div>
<div id="boxs_form">
<form action="" method="post" enctype="multipart/form-data">
<table >
<tr>
<td>用户名</td>
<td colspan="2"><input type="text" name="username" class="td_input"/></td>
</tr>
<tr>
<td>密码</td>
<td colspan="2"><input type="password" name="password" class="td_input"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" checked/>男</td>
<td><input type="radio" name="sex" />女</td>
</tr>
<tr>
<td>上传头像</td>
<td colspan="3"><input type="file" name="myfile"/></td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="submit" value="注册" id="btn"/></td>
<td></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
实例2
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
body{background-color:#CBCBCB;width:100%;height:630px;position: relative;left:0px;top:0px;}
#content{background-image: url(../images/timg.png);width: 742px;height: 302px;position:absolute;left: 50%;top:50%;margin: -151px 0px 0px -371px;box-shadow:5px 2px 10px 7px #bababa; }
#content-box{width: 100%;height: 100%;position: relative;left: 0px;top:0px;}
#content-box div{float: left;width: 50%;height: 100%;}
#content-box-left{text-align: center;line-height: 160px;}
#content-box-right{padding:70px 0px 0px 40px;box-sizing: border-box;}
#content-box-right label{font-size: 16px;line-height: 32px;}
#username_fir1,#username_fir2{font-size: 12px;color: red;text-indent:2em;}
#btn,#ret{background-color: red;line-height: 26px;width: 100px;font-size: 14px;}
</style>
<script type="text/javascript">
window.onload=function(){
//记住密码
var sName1=localStorage.getItem('keyName');
var sPass1=localStorage.getItem('keyPass');
if(sName1!=null){
document.getElementById('username').value=sName1;
}
if(sPass1!=null){
document.getElementById('password').value=sPass1;
}
var myusername=document.getElementById('username');
var mypassword=document.getElementById('password');
var sPass=mypassword.value;
var sName=myusername.value;
//验证邮箱
var re1=/^\[email protected][0-9a-z]+\.[a-z]+$/;
var re2=/[0-9]/;
myusername.onchange=function(){
sName=myusername.value;
}
myusername.onblur=function(){
if(sName==""){
document.getElementById('username_fir1').innerHTML="账户不能为空";
}else if(re1.test(sName)||(sName.length==11&&re2.test(sName))){
document.getElementById('username_fir1').innerHTML="";
}else{
document.getElementById('username_fir1').innerHTML="账户格式不正确";
}
}
//验证密码
var regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/;
mypassword.onchange=function(){
sPass=mypassword.value
}
mypassword.onblur=function(){
if(sPass==""){
document.getElementById('username_fir2').innerHTML="密码不能为空";
}else if(regExp.test(sPass)&&sPass.length>=8){
document.getElementById('username_fir2').innerHTML="";
}else if(sPass.length<8){
document.getElementById('username_fir2').innerHTML="密码至少需要8位";
}else{
document.getElementById('username_fir2').innerHTML="密码格式不正确";
}
}
//提交检验
document.getElementById('btn').onclick=function(){
if(re1.test((sName)||(sName.length==11&&re2.test(sName)))&®Exp.test(sPass)&&sPass.length>=8){
document.forms[0].submit();
}else{
alert("按要求填写用户和密码");
}
localStorage.setItem("keyName",sName);
if(document.getElementById('checkbox').checked){
localStorage.setItem('keyPass',sPass);
}else{
localStorage.removeItem('keyPass'," ");
}
}
document.getElementById('ret').onclick=function(){
localStorage.clear();
}
}
</script>
</head>
<body>
<div id="content">
<div id="content-box">
<div id="content-box-left">
<img style="width:160px;height:160px;margin-top:70.5px;" src="../../../工程篇/数据分析篇/images/logo_man1.PNG"/>
</div>
<div id="content-box-right">
<form action="" method="post">
<label>
账户:<input type="text" name="username" id="username" size="18" placeholder="邮箱/手机号"/>
<span id="username_fir1"></span>
</label><br/>
<label>
**:<input type="password" name="password" id="password" size="18"/>
<span id="username_fir2"></span>
</label><br/>
<label><input type="checkbox" id="checkbox"><span style="color: red;font-size: 14px;">是否记住密码</span></label>
<span style="color:gray;font-size: 12px;">没有账号<a href="zhuce.html" style="color: gray;font-size: 12px;">>>注册账号</a></span><br/>
<input type="button" value="登录" id="btn"/>
<input type="reset" value="取消" id="ret"/>
</form>
</div>
</div>
</div>
</body>
</html>
实例3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册账号</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
body{width:100%;height:630px;position: relative;left:0px;top:0px;}
#boxs_position{width:1000px;height:70%;position: absolute;left:14%;top:16%;}
#boxs{width:1000px;height:100%;position: relative;left:0px;top:0px;border: 1px #C7C7C7 solid;box-sizing:border-box;}
#boxs_title{width: 100%;height:40px;padding-left: 20px;box-sizing: border-box;background-color: #C5C5C5;}
#boxs_title h2{font-weight: 200;color: dimgray;line-height: 40px;}
#boxs_form{width: 100%;height: auto;margin-top: 30px;margin-left: 140px;}
#boxs_form label{line-height: 40px;}
#boxs_form p{display: inline;}
.input_name{font-size:17px;color: #93383A;}
.red{color: red;}
label input{width:20%;font-size: 16px;line-height: 40px;height:25px;}
.red+p{font-size: 12px;}
#chkbox{margin-left: 100px;}
#btn{margin-left:110px;width:120px;height: 40px;line-height: 40px;background-color: #E7B14D}
</style>
</head>
<body>
<div id="boxs_position">
<div id="boxs">
<div id="boxs_title">
<h2>注册账号</h2>
</div>
<div id="boxs_form">
<form action="" method="post">
<label>
<p class="input_name"> 用 户 名 :</p>
<input type="text" name="username" id="username"/>
<p class="red">*</p><p id="name_alert">2-16字符,建议用中文,一经注册不能修改。</p>
</label><br/>
<script type="text/javascript">
var str=document.getElementById('username').value;
document.getElementById('username').onchange=function(){
str=document.getElementById('username').value;
}
document.getElementById('username').onblur=function(){
if(str==""){
document.getElementById("name_alert").innerHTML="用户名不可以为空值";
document.getElementById("name_alert").style.color="red";
}else if(str.length>=2&&str.length<=16){
document.getElementById("name_alert").innerHTML="2-16字符,建议用中文,一经注册不能修改。";
document.getElementById("name_alert").style.color="#000000";
}else{
document.getElementById("name_alert").innerHTML="用户名不符合要求";
document.getElementById("name_alert").style.color="red";
}
}
</script>
<label>
<p class="input_name">设置密码:</p>
<input type="password" name="password1" id="password1"/>
<p class="red">*</p><p id="password1_alert">长度为8-16位,建议由字母、数字或符号组合,区分大小写。</p>
</label><br/>
<script type="text/javascript">
var str1=document.getElementById('password1').value;
var regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/;
document.getElementById('password1').onchange=function(){
str1=document.getElementById('password1').value;
}
document.getElementById('password1').onblur=function(){
if(str1==""){
document.getElementById('password1_alert').innerHTML="密码不可以为空值";
document.getElementById('password1_alert').style.color="red";
}else if(regExp.test(str1)&&str1.length>=8){
document.getElementById('password1_alert').innerHTML="长度为8-16位,建议由字母、数字或符号组合,区分大小写。";
document.getElementById('password1_alert').style.color="#000000";
}else if(str1.length<8){
document.getElementById('password1_alert').innerHTML="密码至少需要八位";
document.getElementById('password1_alert').style.color="red";
}else{
document.getElementById('password1_alert').innerHTML="不符合要求!";
document.getElementById('password1_alert').style.color="red";
}
}
</script>
<label>
<p class="input_name">确认密码:</p>
<input type="password" name="password2" id="password2"/>
<p class="red">*</p><p id="password2_alert">请再次输入密码。</p>
</label><br/>
<script type="text/javascript">
var str2=document.getElementById('password2').value;
document.getElementById('password2').onchange=function(){
str2=document.getElementById('password2').value;
}
document.getElementById('password2').onblur=function(){
if(str2==""){
document.getElementById('password2_alert').innerHTML="不可以为空值";
document.getElementById('password2_alert').style.color="red";
}else if(str2==str1){
document.getElementById('password2_alert').innerHTML="请再次输入密码.";
document.getElementById('password2_alert').style.color="#000000";
}else{
document.getElementById('password2_alert').innerHTML="两次密码不一样!";
document.getElementById('password2_alert').style.color="red";
}
}
</script>
<label>
<p class="input_name">手机号码:</p>
<input type="text" name="phone" id="phone"/>
<p class="red">*</p><p id="phone_alert">请输入真实有效的手机号码。</p>
</label><br/>
<script type="text/javascript">
var myphone=document.getElementById('phone').value;
var reg=/^[0-9]$/;
document.getElementById('phone').onchange=function(){
myphone=document.getElementById('phone').value;
}
document.getElementById('phone').onblur=function(){
if(myphone==""){
document.getElementById('phone_alert').innerHTML="电话不可以为空值";
document.getElementById('phone_alert').style.color="red";
}else if(myphone.length==11&®.test){
document.getElementById('phone_alert').innerHTML="请输入真实有效的手机号码。";
document.getElementById('phone_alert').style.color="#000000";
}else{
document.getElementById('phone_alert').innerHTML="不符合要求!";
document.getElementById('phone_alert').style.color="red";
}
}
</script>
<label>
<p class="input_name">邮箱地址:</p>
<input type="email" name="email" id="email"/>
<p class="red">*</p><p id="email_alert">请输入真实有效的邮箱地址。</p>
</label><br/>
<script type="text/javascript">
var myemail=document.getElementById('email').value;
document.getElementById('email').onchange=function(){
myemail=document.getElementById('email').value;
}
document.getElementById('email').onblur=function(){
var rel=/^\[email protected][0-9a-z]+\.[a-z]+$/;
if(myemail==""){
document.getElementById('email_alert').innerHTML="邮箱地址不可以为空值";
document.getElementById('email_alert').style.color="red";
}else if(rel.test(myemail)){
document.getElementById('email_alert').innerHTML="请输入真实有效的邮箱地址。";
document.getElementById('email_alert').style.color="#000000";
}else{
document.getElementById('email_alert').innerHTML="邮箱地址错误!";
document.getElementById('email_alert').style.color="red";
}
}
</script>
<input type="checkbox" id="chkbox"/><span style="font-size:14px; color: red" id="chkbox_span">我已阅读并同意遵守服务条款</span><br/>
<script type="text/javascript">
document.getElementById('chkbox').onclick=function(){
if(!document.getElementById('chkbox').checked){
document.getElementById('chkbox_span').style.color="red";
}else{
document.getElementById('chkbox_span').style.color="#000000";
}
}
</script>
<input type="submit" value="马上注册" id="btn"/>
</form>
</div>
</div>
</div>
</body>
</html>